* {
    box-sizing: border-box;
}

button:focus {
    outline: none;
}

:root {
    --darkBlue: #03394F;
    --darkBlue_3: rgba(7, 71, 166, 0.3);
    --darkBlue_1: rgb(7 71 166 / 0.1);
    --btnColor: #fff;
    --boxGray: #f4f5f7;
    --boxGrayHover: #ebecf0;
    --customRed: #d84949;
    --customRed_3: rgb(216 73 73 / 0.3);
    --customRed_7: rgb(216 73 73 / 0.7);
    --customRed_1: rgb(216 73 73 / 0.1);
    --customGreen: #58bb58;
    --customGreen_1: rgb(88 187 88 / 0.1);
    --customGreen_7: rgb(88 187 88 / 0.7);
    --navy: #505f79;
    --offWhite: #f4f5f7;
    --offGrey: #ebecf0;
    --colorBlack: #000;
    /*--shadow1: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
    --shadow2: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
    --shadow3: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
    --shadow4: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow5: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
    --shadow6: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
    --shadow7: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
    --shadow8: 0 22px 43px -20px rgba(0, 0, 0, 0.15);
    --shadow9: 0 12px 23px -15px rgba(0, 0, 0, 0.15);*/
    --colorPrimary: #ff6767;
    --colorPrimary2: #006156;
    --colorAccent: #03394f;
    --colorAccent2: #1f3149;
    --colorGrey: #f1f1f1;
    --colorGrey2: #e2e2e2;
    --colorText: #1d1d1b;
    --colorSuccess: #3cb371;
    --colorError: #ec5559;
    --colorTextPrimary: #000;
    --colorLabel: #8f8f8f;
    --colorDisabled: #e1dfe9;
    --colorThemeGrey: #333;
    --lengthSm1: 0.7rem;
    --lengthSm2: 0.8rem;
    --lengthSm3: 0.9rem;
    --lengthMd1: 1rem;
    --lengthMd2: 1.25rem;
    --lengthMd3: 1.5rem;
    --lengthLg1: 2rem;
    --lengthLg2: 3rem;
    --lengthLg4: 4rem;
    --shadow1: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
    --shadow2: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
    --shadow3: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
    --shadow4: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow5: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
    --shadow6: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
    --shadow7: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
    --shadow8: 0 22px 43px -20px rgba(0, 0, 0, 0.15);
    --shadow9: 0 12px 23px -15px rgba(0, 0, 0, 0.15);
}

input[type="text"]:not(.custom),
input[type="email"],
input[type="password"]:not(.custom),
input[type="number"]:not(.custom),
input[type="tel"]:not(.custom),
select:not(.custom),
textarea {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--boxGrayHover);
    transition: 0.4s all ease;
    letter-spacing: 0.4px;
    font-size: 0.95rem;
    border-radius: 4px;
    resize: none;
}

    input[type="text"]:not(.custom).error,
    input[type="email"].error,
    input[type="password"]:not(.custom).error,
    input[type="number"]:not(.custom).error,
    input[type="tel"]:not(.custom).error,
    select:not(.custom).error,
    textarea.error {
        border: 1px solid var(--customRed);
    }



    input[type="text"]:not(.custom):hover,
    input[type="email"]:hover,
    input[type="password"]:not(.custom):hover,
    input[type="number"]:not(.custom):hover,
    input[type="tel"]:not(.custom):hover,
    select:hover,
    textarea:hover,
    input[type="text"]:not(.custom):focus,
    input[type="email"]:focus,
    input[type="password"]:not(.custom):focus,
    input[type="number"]:focus,
    input[type="tel"]:focus,
    select:focus,
    textarea:focus {
        border: 1px solid var(--darkBlue_3);
        outline: none;
        box-shadow: none;
    }

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #fafafa;
}

::-webkit-scrollbar-thumb {
    background: #aaa;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #999;
    }

:focus {
    outline: none;
}

/*body,
body > *:not(.fa):not(.fas):not(.far):not(.fab) {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
    margin: 0;
}*/

    body button {
        font: inherit;
    }

.text-area-height {
    height: 150px;
}

.text-area-height-1 {
    height: 150px;
}


/*login - start*/

.login-page {
    background: #605ca8;
    background: -moz-radial-gradient( center, ellipse cover, #0264d6 1%, #1c2b5a 100% );
    background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(1%, #0264d6), color-stop(100%, #1c2b5a) );
    background: -webkit-radial-gradient( center, ellipse cover, #605ca8 1%, #605ca8 100% );
    background: -o-radial-gradient( center, ellipse cover, #0264d6 1%, #1c2b5a 100% );
    background: -ms-radial-gradient( center, ellipse cover, #0264d6 1%, #1c2b5a 100% );
    background: radial-gradient(ellipse at center, #605ca8 1%, #1c2b5a 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0264d6', endColorstr='#1c2b5a', GradientType=1);
    height: calc(100vh);
    width: 100%;
}

.login-master input {
    border: none;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5em;
    padding: 0;
    outline: 0;
    -webkit-appearance: none;
}

.login-master {
    left: 50%;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
}

#login {
    width: 250px;
}

#login,
.login-logo {
    display: inline-block;
    width: 40%;
}

#login {
    border-right: 1px solid #fff;
    padding: 0px 35px 0px 0px;
    width: 50%;
}

.login-logo {
    padding-left: 50px;
}

#login span.fa {
    background-color: #fff;
    border-radius: 3px 0px 0px 3px;
    color: #000;
    display: block;
    float: left;
    height: 50px;
    font-size: 24px;
    line-height: 50px;
    text-align: center;
    width: 50px;
}

#login input {
    height: 50px;
}

    #login input[type="text"],
    #login input[type="password"],
    #login input[type="email"] {
        background-color: #fff;
        border-radius: 0px 3px 3px 0px;
        color: #000;
        margin-bottom: 1em;
        padding: 0 16px;
        width: 200px;
        box-shadow: none;
    }

    #login input[type="submit"] {
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        background-color: #000000;
        color: #eee;
        font-weight: bold;
        /* margin-bottom: 2em; */
        text-transform: uppercase;
        padding: 5px 10px;
        height: 30px;
    }

.login-wrapper {
    display: flex;
    width: 600px;
}

.color-white {
    color: #fff !important;
    text-decoration: none !important;
}

.btn-login:hover {
    -webkit-box-shadow: 0 0 3px 1px #a8a8a8;
    -moz-box-shadow: 0 0 3px 1px #a8a8a8;
    box-shadow: 2px 2px 3px 0 #243163;
}

.btn-login {
    background: #454989;
    color: #fff;
    transition: all 0.2s ease;
    border: 1px solid #fff;
    float: left;
    margin-right: 15px;
}

#login input[type="email"],
#login input[type="password"],
#login input[type="text"] {
    width: 210px;
    margin-bottom: 0;
}

.login-logo {
    display: inline-block;
    width: 40%;
}

.login-logo {
    padding-left: 50px;
}

    .login-logo img {
        width: auto;
        max-width: 100%;
    }

.btn-back {
    background: #454989;
    color: #fff;
    transition: all 0.2s ease;
    border: 1px solid #fff;
}

.supplier-inner-parent > div:nth-child(2) {
    flex: 1;
    position: relative;
    display: flex;
    background: #fafafa;
    border-left: 16px solid #d4d6e1;
    padding: 54px 16px;
    max-height: 85vh;
    border-radius: 4px;
    overflow-y: scroll;
}

.supplier-parent > div {
    margin: auto;
    min-height: 500px;
}

.supplier-login {
    width: 40%;
    margin: auto;
}

button.supp-login,
button.supp-register {
    background: linear-gradient( -45deg, rgba(96, 92, 168, 0.8), rgba(72, 140, 193, 0.8) );
    border: 0;
    text-transform: uppercase;
    color: #fdfdfd;
    border-radius: 4px;
    padding: 12px;
    border: 1px solid #aeaaf2;
    transition: 0.5s all ease;
    letter-spacing: 2px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 16px;
}


.validation-user-popup {
    position: absolute;
    background: white;
    border: 1px solid #b6b6b6;
    border-radius: 4px;
    right: -0.8em;
    z-index: 9999;
    /* display: none; */
    top: 14em;
    box-shadow: 0px 1px 5px grey;
}

    .validation-user-popup ul,
    .validation-popup ul {
        margin: 10px 10px 10px 0px;
        list-style: none;
        padding-left: 15px;
    }

        .validation-user-popup ul li,
        .validation-popup ul li {
            font-size: 13px;
        }

            .validation-user-popup ul li i,
            .validation-popup ul li i {
                padding-right: 5px;
            }
/*login - end*/

.layout-wrap {
    display: flex;
}

    .layout-wrap > div#workspacebar {
        flex: 1;
        /* padding: 2rem; */
    }

.main-nav {
    display: flex;
    height: 100vh;
    z-index: 105;
    padding: 2rem 1rem;
}

.nav-icons-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*background: var(--darkBlue);*/
    color: var(--colorBlack);
    /*padding: 2rem 0;*/
}

    .nav-icons-wrap > ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

        .nav-icons-wrap > ul > li {
            position: relative;
        }

            .nav-icons-wrap > ul > li > a {
                color: var(--colorBlack);
                /*width: 2.8rem;*/
                height: 3rem;
                display: flex;
                align-items: center;
                /*justify-content: center;*/
                text-decoration: none;
                /*font-size: 1.3rem;*/
                transition: 0.1s all ease;
                background: transparent;
                cursor: pointer;
            }

                .nav-icons-wrap > ul > li > a > img {
                    width: 20px;
                    height: 20px;
                    object-fit: cover;
                    /*border-radius: 50%;*/
                }

                .nav-icons-wrap > ul > li > a:hover {
                    /*background: var(--colorGrey);*/
                }

.nav-menu-wrap {
    padding: 2rem 0;
    background: #f7f7f7;
    width: 13rem;
    transition: 0.8s all ease;
}

    .nav-menu-wrap.minimized,
    .lead-details-left.minimized {
        width: 0;
    }

        .nav-menu-wrap.minimized > div:not(.navMenu-toggler),
        .lead-details-left.minimized > div > div:not(.navMenu-toggler) {
            opacity: 0;
        }

    .nav-menu-wrap > div {
        transition: 0.5s all ease;
        opacity: 1;
    }

.list-menu {
    margin: 0.5rem 0;
}

.nav-company {
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    text-align: center;
    margin: 0 0.5rem;
    border-radius: 0.5rem;
    /* border: 1px solid #eee; */
    /*box-shadow: var(--shadow1);*/
}

    .nav-company > h5 {
        margin: 0.5rem 0 0;
        font-size: 1.2rem;
        color: var(--colorBlack);
        white-space: nowrap;
        font-weight: 600;
    }

    .nav-company > img {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid #eee;
    }

.focus-drop > div.droppableContainer {
    display: none;
}

.hover-drop > div.droppableContainer {
    display: none;
}

/*.noti-wrap {
    flex-direction: column;
    position: absolute;
    left: 3rem;
    background: #fff;
    box-shadow: var(--shadow4);
    color: #333;
    overflow: hidden;
    z-index: 20;
    top: 0;
    width: 12vw;
}*/

    .noti-wrap > div:first-child {
        text-align: center;
        padding: 0.25rem;
        background: #fafafa;
    }

        .noti-wrap > div:first-child > label {
            margin: 0;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--darkBlue);
        }

    .noti-wrap > div:last-child {
        font-size: 0.8rem;
        text-align: center;
        padding: 0.5rem;
        color: #333;
        background: #f7f7f7;
        cursor: pointer;
        transition: 0.8s all ease;
    }

        .noti-wrap > div:last-child:hover {
            background: var(--darkBlue_3);
            color: var(--darkBlue);
        }

.user-menu {
    flex-direction: column;
    position: absolute;
    left: 3rem;
    padding: 0.25rem;
    background: #fdfdfd;
    box-shadow: var(--shadow4);
    top: 0;
    width: 12vw;
    z-index: 1;
}

    .user-menu > ul {
        padding: 0.25rem;
        margin: 0;
        list-style-type: none;
    }

        .user-menu > ul > li {
            transition: 0.1s all ease;
            position: relative;
        }

            .user-menu > ul > li > a {
                display: flex;
                align-items: center;
                padding: 0.5rem 1rem;
                color: #333;
                text-decoration: none;
                font-size: 0.9rem;
                cursor: pointer;
            }

.no-noti {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
}

    .no-noti > i {
        font-size: 1.75rem;
        color: var(--darkBlue);
        opacity: 0.5;
        margin-bottom: 0.5rem;
    }

    .no-noti > span {
        font-size: 0.8rem;
        color: #777;
    }

.list-menu > ul {
    padding: 0;
    list-style-type: none;
    margin: 0;
}

    .list-menu > ul > li {
        transition: 0.1s all ease;
        position: relative;
    }

        .list-menu > ul > li:hover {
            background: #fafafa;
        }

            .list-menu > ul > li:hover > a {
                color: var(--darkBlue);
            }

        .list-menu > ul > li > a {
            transition: 0.1s all ease;
            text-decoration: none;
            padding: 0.75rem 1rem;
            display: block;
            color: #333;
            font-size: 1rem;
            display: flex;
            align-items: center;
            white-space: nowrap;
            overflow: hidden;
            cursor: pointer;
        }

.nav-menu-drop > ul {
    margin: 0;
    list-style-type: none;
    max-height: 40vh;
    overflow-y: scroll;
    padding: 0.25rem;
    width: 100%;
}

.nav-inner-drop {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.filter-menu-drop > ul > li {
    transition: 0.1s all ease;
    position: relative;
    display: flex;
    align-items: center;
}

.filter-menu-drop > ul {
    padding: 0;
    list-style-type: none;
    margin: 0;
}

    .filter-menu-drop > ul > li > a > span {
        width: 1rem;
        height: 1rem;
        display: block;
        margin-right: 0.5rem;
    }

.nav-menu-drop > ul > li,
.nav-inner-drop > li {
    transition: 0.1s all ease;
    position: relative;
}

    .nav-menu-drop > ul > li:not(.customListItem):hover,
    .nav-inner-drop > li:hover,
    .filter-menu-drop > ul > li:hover,
    .user-menu > ul > li:hover {
        background: #f7f7f7;
    }

        .nav-menu-drop > ul > li:not(.customListItem):hover > a,
        .nav-inner-drop > li:hover > a,
        .filter-menu-drop > ul > li:hover > a,
        .user-menu > ul > li:hover > a {
            color: var(--darkBlue);
        }

    .nav-menu-drop > ul > li > a,
    .nav-inner-drop > li > a {
        display: flex;
        align-items: center;
        padding: 0.5rem 1rem;
        color: #333;
        text-decoration: none;
        font-size: 0.9rem;
        position: relative;
    }

.filter-menu-drop > ul > li > a {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: #333;
    text-decoration: none;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    flex: 1;
}

.filter-menu-drop {
    position: absolute;
    z-index: 1;
    background: #fdfdfd;
    box-shadow: var(--shadow3);
    padding: 0.25rem;
    border-radius: 0.75rem;
    left: 50%;
    transform: translate(-50%, 0);
    margin-top: 0.5rem;
    animation: scale-in-top-filter 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.nav-menu-drop {
    padding: 0.25rem;
    background: #fdfdfd;
    box-shadow: var(--shadow4);
    width: 100%;
    position: absolute;
    left: 9rem;
    /* top: 0; */
    z-index: 550;
}

.main-drop {
    margin: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--darkBlue);
}

.global-search-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgb(0 0 0 / 0.5);
    backdrop-filter: blur(8px);
    animation: fade-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.global-search-toggler {
    position: fixed;
    border: none;
    outline: none;
    background-color: var(--darkBlue);
    height: 50px;
    width: 50px;
    border-radius: 50%;
    box-shadow: 0px 0px 25px -5px rgba(0, 0, 0, 0.2);
    float: right;
    cursor: pointer;
    right: 25px;
    bottom: 1rem;
    opacity: 0.6;
    transition: 0.5s all ease;
    color: #fdfdfd;
}

    .global-search-toggler:hover {
        opacity: 1;
    }

.global-inner-container {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 120;
    left: 0;
    bottom: 0;
    text-align: center;
}

    .global-inner-container > div:first-child {
        width: 45%;
    }

.global-search-wrap {
    position: relative;
    margin: 2rem auto;
    z-index: 1;
    display: flex;
    animation: fade-in-top 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

    .global-search-wrap > i {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        left: 1rem;
        font-size: 1rem;
        color: #eee;
        transition: 0.8s all ease;
    }

    .global-search-wrap > input {
        padding: 1rem 1rem 1rem 3rem;
        border-radius: 0.5rem;
        font-size: 1.1rem;
        transition: 0.8s all ease;
        width: 75%;
        border: 0;
    }

        .global-search-wrap > input:hover ~ i {
            color: #aaa;
        }

        .global-search-wrap > input:focus ~ i {
            color: #999;
        }

    .global-search-wrap > a {
        flex: 1;
        display: flex;
        align-items: center;
        margin: 0 0 0 1rem;
        justify-content: center;
        border: 2px solid #fff;
        border-radius: 0.5rem;
        color: #fdfdfd;
        font-size: 0.9rem;
        padding: 0.5rem;
        text-decoration: none;
        flex-direction: column;
        font-weight: 600;
    }

.align-global-right {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translate(0, -50%);
    font-size: 0.6rem;
    padding: 0.25rem 0.25rem;
    color: #fdfdfd;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 0.15rem;
    line-height: 1;
}

.navMenu-toggler {
    position: relative;
}

    .navMenu-toggler > button {
        position: absolute;
        right: 0;
        transform: translate(50%, 0);
        /*width: 2vw;
        height: 2vw;*/
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 0;
        background: transparent;
        /*box-shadow: var(--shadow2);*/
        color: var(--darkBlue);
        font-size: 0.9vw;
        z-index: 1;
        transition: 0.5s all ease;
        cursor: pointer;
        bottom:13vh;
       
    }

        /*.navMenu-toggler > button:hover {
            background: var(--darkBlue);
            color: #fdfdfd;
        }*/

.workspace-head {
    display: flex;
    justify-content: space-between;
}

.lead-search-wrap {
    position: relative;
    height: max-content;
}

    .lead-search-wrap > input {
        padding: 0.5rem 1rem 0.5rem 2.5rem;
        border: 1px solid #dfdbdb;
        border-radius: 0.25rem;
        font-size: 1rem;
        transition: 0.8s all ease;
        background: var(--boxGray);
        min-width: 14rem;
    }

        .lead-search-wrap > input:hover,
        .add-lead-wrap > input:hover {
            background: var(--boxGrayHover);
            border: 1px solid #999;
        }

        .lead-search-wrap > input:focus,
        .add-lead-wrap > input:focus {
            background: transparent;
            border: 1px solid #999;
        }

    .lead-search-wrap > i {
        position: absolute;
        left: 0.9rem;
        top: 50%;
        transform: translate(0, -50%);
        font-size: 0.9rem;
        color: #aaa;
        transition: 0.5s all ease;
    }

    .lead-search-wrap > input:hover > i {
        color: #777;
    }

    .lead-search-wrap > input:focus > i {
        color: #333;
    }

.contact-search-wrap > div,
.location-search-wrap {
    position: relative;
    height: max-content;
}

    .contact-search-wrap > div > input,
    .location-search-wrap > input {
        padding: 0.5rem 1rem 0.5rem 2.5rem !important;
        border-radius: 0.25rem;
        font-size: 1vw;
        transition: 0.8s all ease !important;
        width: 100%;
    }

        .contact-search-wrap > div > input:hover,
        .location-search-wrap > input:hover {
            border: 1px solid #999;
        }

        .contact-search-wrap > div > input:focus,
        .location-search-wrap > input:focus {
            background: transparent;
            border: 1px solid #999;
        }

    .contact-search-wrap > div > i,
    .location-search-wrap > i {
        position: absolute;
        left: 0.9rem;
        top: 50%;
        transform: translate(0, -50%);
        font-size: 0.9rem;
        color: #aaa;
        transition: 0.5s all ease;
    }

    .contact-search-wrap > div > input:hover ~ i,
    .location-search-wrap > input:hover ~ i {
        color: #777;
    }

    .contact-search-wrap > div > input:focus ~ i,
    .location-search-wrap > input:focus ~ i {
        color: #333;
    }

.user-list {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}
    .user-list > *:not(:last-child) {
        margin-right: 2rem;
    }

    .user-list > ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        display: flex;
    }

        .user-list > ul > li {
            margin: 0 0.25rem;
        }

            .user-list > ul > li > button {
                width: 37px;
                height: 37px;
                border-radius: 50%;
                border: 0;
                background: #33a310;
                color: white;
                box-shadow: var(--shadow2);
                font-size: 1vw;
                transition: 0.5s all ease;
                cursor: pointer;
            }

                .user-list > ul > li > button:hover {
                    /*background: white;
                    color: #33a310;*/
                }

            .user-list > ul > li > div {
                width: 37px;
                height: 37px;
                opacity: 0.5;
                transition: 0.5s all ease;
                border-radius: 50%;
                overflow: hidden;
                cursor: pointer;
            }

                .user-list > ul > li > div:hover,
                .user-list > ul > li > div.selectedAssignee {
                    opacity: 1;
                }

                .user-list > ul > li > div.selectedAssignee {
                    border: 2px solid var(--darkBlue_3);
                    box-shadow: var(--shadow3);
                }

                .user-list > ul > li > div > img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

.add-lead-wrap {
    display: flex;
    height: max-content;
}

    .add-lead-wrap > input {
        padding: 0.5rem 1rem;
        border: 1px solid #dfdbdb;
        border-radius: 0.25rem;
        font-size: 1rem;
        transition: 0.8s all ease;
        background: var(--boxGray);
        margin-right: 0.5rem;
    }

    .add-lead-wrap > button {
        /*padding: 12px 24px !important;*/
    }

.custom-btn:disabled {
    background: #aaa !important;
    color: #fdfdfd !important;
}

.custom-btn.add {
    background: var(--colorAccent);
    color: #fdfdfd;
    text-decoration: none;
}

.custom-btn.green {
    background: var(--customGreen);
    color: #fdfdfd;
    text-decoration: none;
}

.custom-btn.no {
    background: #fff;
    color: var(--darkBlue);
    text-decoration: none;
}

.custom-btn.remove {
    background: #fdfdfd;
    color: var(--customRed);
    text-decoration: none;
}

.custom-btn {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    border-radius: 0.25rem;
    border: 0;
    font-size: 1rem;
    font-weight: 500;
    position: relative;
    transition: 0.8s all ease;
    box-shadow: var(--shadow1);
    cursor: pointer;
    letter-spacing: 1px;
    line-height: 1;
}

    .custom-btn:hover {
        box-shadow: var(--shadow3);
    }

    .custom-btn > i {
        padding-right: 0.5rem;
    }

.quick-filter-wrap {
    position: relative;
    display: flex;
    align-items: flex-start;
}

    .quick-filter-wrap > button:first-child {
        display: flex;
        align-items: center;
        font-size: 1rem;
        font-weight: 500;
        color: var(--darkBlue);
        transition: 0.8s all ease;
        cursor: pointer;
        background: #fdfdfd;
        border: 0;
        padding: 0.5rem 1rem;
        border: 1px solid #eee;
        border-radius: 0.25rem;
        margin-right: 0.5rem;
    }

        .quick-filter-wrap > button:first-child:hover {
            border: 1px solid var(--darkBlue_3);
        }

        .quick-filter-wrap > button:first-child > label {
            margin: 0;
            cursor: pointer;
        }

#filterDropContainer {
    position: absolute;
    z-index: 120;
    background: #fff;
    padding: 1rem;
    box-shadow: var(--shadow3);
    border-radius: 0.75rem;
    margin-top: 1rem;
    left: 50%;
    top: 3.5rem;
    transform: translate(-50%, 0);
    animation: fade-in-bottom-filter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

    #filterDropContainer:not(.showDrop) {
        display: none;
    }

    #filterDropContainer > div {
        display: flex;
        justify-content: center;
    }

        #filterDropContainer > div:first-child {
            padding: 0 0 1rem;
            border-bottom: 1px solid #eee;
        }

        #filterDropContainer > div:last-child {
            padding: 1rem 0 0;
        }

            #filterDropContainer > div:last-child > div > a {
                margin: 0 1rem;
                color: #444;
                border: 2px solid #eee;
                font-size: 0.9rem;
                width: 3rem;
                height: 2rem;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 0.25rem;
                transition: 0.5s all ease;
                cursor: pointer;
                text-decoration: none;
            }

                #filterDropContainer > div:last-child > div > a:hover {
                    border: 2px solid #999;
                }

.filter-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 1rem;
}

    .filter-type > label {
        margin: 0 0 0.25rem;
        font-size: 0.9rem;
        color: #777;
    }

    .filter-type > ul {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        list-style-type: none;
        border: 2px solid var(--darkBlue_3);
        border-radius: 0.25rem;
        overflow: hidden;
    }

        .filter-type > ul > li > button {
            border: 0;
            background: transparent;
            font-size: 0.8rem;
            padding: 0.5rem 0.75rem;
            color: #333;
            transition: 0.8s all ease;
            cursor: pointer;
            white-space: nowrap;
        }

            .filter-type > ul > li > button:hover {
                background: var(--darkBlue_3);
            }

            .filter-type > ul > li > button.selected {
                background: var(--darkBlue);
                color: #fdfdfd;
            }

.filterOverlay:not(.showLay) {
    display: none;
}

.filterOverlay {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 105;
    width: 100%;
    height: 100%;
    background: transparent;
}

.workspace-info {
    display: flex;
    padding: 0.5rem 0.5rem;
    /*border-bottom: 1px solid #eee;*/
    justify-content: space-between;
}

    .workspace-info > div {
        display: flex;
    }

        .workspace-info > div:first-child > div {
            margin-right: 1rem;
        }

            .workspace-info > div:first-child > div > label {
                color: #8a8a8a;
                font-weight: 400;
                margin: 0 0.75rem 0 0;
                font-size: var(--lengthMd1);
            }

            .workspace-info > div:first-child > div > span {
                font-size: var(--lengthMd1);
                color: #444;
                font-weight: 500;
            }

.todo-drop {
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    box-shadow: var(--shadow4);
    position: absolute;
    z-index: 550;
    width: 35vh;
    left: 4rem;
    top: 0;
}

    .todo-drop > div:first-child {
        text-align: center;
        padding: 0.25rem;
        background: #fafafa;
    }

        .todo-drop > div:first-child > label {
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--darkBlue);
            margin: 0;
        }

.list-appointment-body {
    padding: 0.5rem;
    max-height: 40vh;
    overflow-y: scroll;
}

.list-appointment {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

    .list-appointment > li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.2rem 0;
    }

        .list-appointment > li:not(:last-child) {
            border-bottom: 1px solid #eee;
        }

        .list-appointment > li > a {
            flex: 1;
            color: #777;
            font-weight: 600;
            transition: 0.2s all ease;
            cursor: pointer;
        }

            .list-appointment > li > a:hover {
                color: #444;
            }

        .list-appointment > li > button {
            border: 0;
            width: 1.5rem;
            height: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            border-radius: 50%;
            background: var(--customGreen_1);
            color: var(--customGreen);
            transition: 0.2s all ease;
            cursor: pointer;
        }

            .list-appointment > li > button:hover {
                background: var(--customGreen);
                color: #fdfdfd;
            }

.component-header {
    margin: 0 0 1rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

    .component-header > div > h3 {
        margin: 0;
        font-size: 1.4rem;
        color: var(--darkBlue);
    }

.workspace-head-title {
    font-size: 1.4rem;
    color: var(--darkBlue);
    margin-bottom: 1rem;
}

.component-header > div:last-child {
    display: flex;
}

.sub-component-header {
    margin: 0 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

    .sub-component-header > div > h3 {
        margin: 0;
        font-size: 1.2rem;
        color: var(--darkBlue);
    }

    .sub-component-header > div:last-child {
        display: flex;
    }

        .sub-component-header > div:last-child > *:not(:last-child) {
            margin-right: 1rem;
        }

.custom-form.grid {
    display: grid;
    grid-gap: 1rem;
}

.custom-form.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .custom-form.flex.gap-1 {
        column-gap: 1rem;
    }

    .custom-form.flex > div.full {
        width: 100%;
    }

    .custom-form.flex > div.quarter {
        width: 25%;
    }

    .custom-form.flex > div.flex_1 {
        flex: 1;
    }

    .custom-form.flex > div.half {
        width: calc(50% - 0.5rem);
    }

    .custom-form.flex > div {
        margin: 0.5rem 0;
    }

.grid._4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid._3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid._2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid._1 {
    grid-template-columns: repeat(1, 1fr);
}

.custom-form > div {
    display: flex;
    flex-direction: column;
    position: relative;
}

    .custom-form > div > label {
        font-weight: 400;
        color: #666;
        font-size: 0.9rem;
        margin-bottom: 0.2rem;
        position: relative;
    }

    .custom-form > div > input,
    .custom-form > div > select {
        width: 100%;
    }

label.asterix::before {
    content: "*";
    position: absolute;
    color: var(--customRed);
    left: -0.7rem;
    top: 50%;
    transform: translate(0, -50%);
    font-size: 1rem;
    font-weight: 600;
}

.default-pipeline-check {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .default-pipeline-check > label {
        margin: 0;
        font-size: 0.9rem;
        color: #222;
    }

.modal-open .modal {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.modal-dialog {
    margin: 0;
    min-width: 500px;
}

/*.modal-header {
    padding: 0.5rem 1rem;
    position: relative;
}

.modal-title {
    font-size: 1.2rem;
    color: var(--darkBlue);
}*/

.close-modal {
    position: absolute;
    right: 1rem;
    background: transparent;
    border: 0;
    top: 50%;
    transform: translate(0, -50%);
    color: var(--darkBlue_3);
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.8rem;
    border-radius: 50%;
    transition: 0.1s all ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    /*.close-modal:hover {
        background: #ddd;
        color: var(--customRed);
    }*/

.modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: 0;
}

.modal-body-text > p {
    font-size: 1rem;
    color: #333;
    margin: 0;
}

.modal-btn-wrap {
    display: flex;
    align-items: stretch;
}

    .modal-btn-wrap > button:not(:last-child) {
        margin-right: 1rem;
    }

.user-modal-parent {
    display: flex;
}

    .user-modal-parent > div:first-child {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 2rem;
    }

    .user-modal-parent > div:last-child {
        flex: 1;
    }

.mdl-mid .modal-dialog {
    width: 75vw;
    max-width: none;
}

.mdl-mid-req .modal-dialog {
    width: 90vw;
    max-width: none;
}

.mdl-half .modal-dialog {
    width: 50vw;
    max-width: none;
}

.mdl-xxl .modal-dialog {
    width: 95vw;
    max-width: none;
}

.mdl-small .modal-dialog {
    width: 50vw;
    max-width: none;
}

.mdl-visitor .modal-dialog {
    width: 60vw;
    max-width: none;
}

.user-modal-img {
    position: relative;
}

    .user-modal-img > div {
        height: 10rem;
        width: 10rem;
        box-shadow: var(--shadow3);
        border-radius: 50%;
    }

        .user-modal-img > div > img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

    .user-modal-img > button {
        margin: 1rem auto 0;
    }

.form-with-add {
    display: flex;
    align-items: stretch;
}

    .form-with-add > select {
        width: 75%;
    }

    .form-with-add > button {
        flex: 1;
        margin-left: 0.5rem;
        justify-content: center;
    }

        .form-with-add > button > i {
            padding: 0;
        }

.upload-signature {
    position: relative;
    background: #eee;
}

    .upload-signature > div {
        width: 100%;
        height: 5rem;
        text-align: center;
        background: #eee;
    }

        .upload-signature > div > img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

    .upload-signature > button {
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translate(-50%, 0);
    }

.user-modal-tab {
    display: flex;
    justify-content: center;
    margin: 0 0 1rem;
}

    .user-modal-tab > span {
        flex: 1;
        text-align: center;
        padding: 0.5rem;
        opacity: 0.5;
        border-radius: 0.5rem;
        transition: 0.5s all ease;
        cursor: pointer;
        font-size: 0.9rem;
    }

        .user-modal-tab > span > i {
            padding-right: 0.5rem;
        }

        .user-modal-tab > span:hover {
            opacity: 1;
        }

        .user-modal-tab > span.currentTab {
            color: var(--darkBlue);
            font-weight: 600;
            box-shadow: var(--shadow2);
            opacity: 1;
        }

.perm-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .perm-inner > div:first-child > label {
        margin: 0;
        font-size: 1rem;
        color: #333;
    }

.perm-block {
    padding: 1rem;
    background: #fff;
    margin: 0.5rem;
    border: 1px solid #f1f1f1;
    border-radius: 0.5rem;
}

.user-perm-inner {
    background: #f7f7f7;
    padding: 0.5rem;
}

.perm-add-wrap > button {
    margin: 1rem 0 0 auto;
}

.accordion {
    margin: 0.5rem 0;
}

.accordion-head {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 0.25rem;
    box-shadow: var(--shadow1);
    /* margin: 0.5rem 0; */
    background: #f7f7f7;
    color: var(--darkBlue);
    font-weight: 600;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: 0.5s all ease;
}

    .accordion-head:hover {
        box-shadow: var(--shadow2);
    }

i.rotatable {
    transform: rotate(90deg);
}

.accordion-head > i {
    transition: 0.8s all ease;
}

.accordion-head > label {
    margin: 0;
    font-size: 0.9rem;
    margin-left: 1rem;
}

.accordion-loader {
    margin-left: 1rem;
}

.accordion-container {
    overflow-y: scroll;
    max-height: 200px;
    transition: 0.8s all ease;
}

.perm-list {
    margin: 0;
    padding: 0.5rem;
    list-style-type: none;
    border: 1px solid #eee;
    border-top: 0;
    background: #fdfdfd;
    border-radius: 0.25rem;
}

    .perm-list > li:not(:last-child) {
        border-bottom: 1px solid #eee;
    }

    .perm-list > li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 1vw;
        color: #222;
        padding: 0.25rem 0;
    }

        .perm-list > li > label {
            margin: 0;
            color: #222;
            font-size: 0.9rem;
            letter-spacing: 0.2px;
        }

        .perm-list > li > div {
            display: flex;
        }

.accordion-container:not(.open) {
    max-height: 0;
    overflow: hidden;
}

.lead-wrap {
    display: flex;
    height: 100vh;
}

.lead-details-left {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    background: #fdfdfd;
    border-right: 2px solid #eee;
    justify-content: space-between;
    width: 18vw;
    transition: 0.8s all ease;
}

    .lead-details-left > div > div:not(.navMenu-toggler) {
        overflow: hidden;
    }

    .lead-details-left.minimized > div > div.lead-details-tags {
        flex-wrap: nowrap;
    }

.lead-details-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #F7F7F7;
}

.lead-info-top {
    padding: 2rem 2rem 1rem 2rem;
    /*border-bottom: 2px solid #eee;*/
}

.lead-info-content {
    padding: 0.5rem 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.lead-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.lead-top-div {
    padding-top: 0px !important;
}

.lead-top > h6 {
    margin: 0;
    font-size: 0.9rem;
    line-height: 50px;
    color: black;
    margin-right: 0.5rem;
}

.lead-assigned-to {
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .lead-assigned-to > *:not(:last-child) {
        margin-right: 1rem;
    }

    .lead-assigned-to > img {
        width: 2.2rem;
        height: 2.2rem;
        object-fit: cover;
        border-radius: 50%;
    }

    .lead-assigned-to > span {
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.2px;
        color: var(--darkBlue);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lead-assigned-to > button {
        width: 1.7rem;
        height: 1.7rem;
        color: black;
        background: #fdfdfd;
        border: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.25rem;
        font-size: 0.9rem;
        transition: 0.1s all ease;
        cursor: pointer;
    }

        .lead-assigned-to > button:hover {
            background: var(--offGrey);
        }

        .lead-assigned-to > button:active {
            background: var(--navy);
            color: var(--offWhite);
        }

.lead-summary {
    display: flex;
    padding-top: 0px !important;
}

    .lead-summary > div {
        flex: 1;
        flex-direction: column;
        display: flex;
        border-radius: 0.5rem;
        padding: 0.5rem;
        padding-left: 1px;
    }

        .lead-summary > div > label {
            margin: 0;
            font-size: 0.9rem;
            color: black;
        }

        .lead-summary > div > span {
            font-size: 0.9rem;
            line-height: 1;
            font-weight: 600;
            letter-spacing: 1px;
            color: black;
        }

.lead-config-btn {
    display: flex;
    justify-content: flex-start;
    padding-top: 0px !important;
}

    .lead-config-btn > button {
        border: 0;
        background: var(--offWhite);
        box-shadow: var(--shadow1);
        font-size: 1rem;
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 50%;
        transition: 0.1s all ease;
        color: black;
        cursor: pointer;
        margin: 0.25rem;
    }

        .lead-config-btn > button:hover {
            background: black;
            color: var(--offWhite);
        }

.lead-share-switch {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    border-radius: 0.25rem;
    /* background: var(--offWhite); */
    color: black;
    justify-content: flex-start;
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 15px;
}

.lead-note-whatspp-switch {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    border-radius: 0.25rem;
    /* background: var(--offWhite); */
    color: var(--navy);
    column-gap: 0.5rem;
}

.lead-share-switch > span,
.lead-share-switch > span > i {
    padding-right: 0.5rem;
}

.lead-cost-wrap {
    display: flex;
    flex-direction: row;
}

    .lead-cost-wrap > div {
        /*display: flex;*/
    }

        .lead-cost-wrap > div > button {
            flex: 1;
            justify-content: center;
        }

            .lead-cost-wrap > div > button > i {
                padding: 0;
            }

    .lead-cost-wrap > label {
        margin: 0;
        font-size: 0.9rem;
        color: black;
        font-weight: 600;
        letter-spacing: 0.2px;
        margin-right: 1em;
        line-height: 28px;
    }

.lead-proposal-btn-wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

    .lead-proposal-btn-wrap > button,
    .lead-proposal-btn-wrap > a {
        margin: 0.25rem 0;
        justify-content: center;
        box-shadow: none;
        color: var(--navy);
        background: var(--navy);
        color: #fdfdfd;
        text-decoration: none;
        margin: 0rem 0.25rem;
    }

.lead-details-left > div > div:not(.navMenu-toggler) {
    /*padding: 1rem 1rem 1rem 1.35rem;*/
}

.lead-details-left > div > div {
    transition: 0.5s all ease;
    opacity: 1;
    white-space: nowrap;
}

.lead-main-name:not(:hover) > span {
    opacity: 0;
}

.lead-main-name {
    margin: 0;
    font-size: 1.1rem;
    color: var(--navy);
    overflow: hidden;
    text-overflow: ellipsis;
}

    .lead-main-name > label {
        margin: 0;
        max-width: 75%;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }

    .lead-main-name > span {
        opacity: 1;
        transition: 0.5s all ease;
        font-size: 1vw;
        position: relative;
        left: 1rem;
        bottom: 0.2rem;
        cursor: pointer;
    }

.lead-name-btn {
    display: flex;
    justify-content: center;
}

    .lead-name-btn > button {
        margin: 0.5rem;
    }

        .lead-name-btn > button > i {
            padding: 0;
        }

.lead-name-edit {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #eee;
}

.lead-details-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 0px !important;
}

    .lead-details-tags > span {
        width: 1.5rem;
        height: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        margin: 0.25rem;
        box-shadow: var(--shadow1);
        font-size: 1rem;
    }

        .lead-details-tags > span > i {
            color: #fdfdfd;
            transition: 0.5s all ease;
        }

.lead-assign-wrap {
    margin-top: 1rem;
    display: flex;
    margin-bottom: 1rem;
}

.lead-assign-wrap div input {
    width: 100%;
    font-size: 0.9rem !important;
}

    .lead-assign-wrap > button {
        margin-left: 0.5rem;
    }

        .lead-assign-wrap > button > i {
            padding: 0;
        }

.default-contact-details {
    display: flex;
    justify-content: space-between;
}

    .default-contact-details > .prop-type-label {
        width: 100%;
        margin: 1rem 0;
    }

    .default-contact-details > div {
        display: flex;
        align-items: flex-end;
        width: 25%;
    }

        .default-contact-details > div > label {
            margin: 0 1rem 0 0;
            font-size: 0.9rem;
            color: #777;
        }

        .default-contact-details > div > span {
            font-size: 1rem;
            font-weight: 600;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

.default-contact-heat > p {
    font-size: 0.9rem;
    text-align: center;
    margin: 0.5rem 0 0.25rem;
}

    .default-contact-heat > p > label {
        margin: 0 0 0 0.3rem;
        font-weight: 600;
    }

.default-contact-heat > div > span {
    text-align: center;
    font-size: 0.65vw;
    font-weight: 600;
    color: #333;
    display: block;
}

.selectStageTag {
    display: inline-flex;
    height: 40px;
    line-height: 24px;
    position: relative;
    margin: 0 0px 0px 0;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: color 0.2s;
    margin-bottom: 8px;
    font-size: 15px;
    max-height: initial;
    border-right: 0 !important;
    transition: 0.1s all ease;
    padding: 8px 30px 8px 15px;
    color: #9b9b9b9c !important;
    font-weight: 100;
    border-radius: 4px;
    border: 1px solid #D5D5D5;
    margin-left: 2em;
    background: white;
    border-right: 1px solid #D5D5D5 !important;
    width: inherit;
    justify-content: center;
}

.selectReqTag {
    display: inline-flex;
    height: 30px;
    line-height: 24px;
    position: relative;
    margin: 0 0px 0px 0;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: color 0.2s;
    margin-bottom: 8px;
    font-size: 15px;
    max-height: initial;
    border-right: 0 !important;
    transition: 0.1s all ease;
    padding: 8px 30px 8px 15px;
    color: #9b9b9b9c !important;
    font-weight: 100;
    border-radius: 4px;
    border: 1px solid #D5D5D5;
    margin-left: 2em;
    background: white;
    border-right: 1px solid #D5D5D5 !important;
    width: inherit;
}

.stagesLabel {
    font-weight: bolder;
    background: var(--navy) !important;
    color: #fdfdfd !important;
    padding-left: 20px;
    padding-right: 15px;
}

.selectStageTag:before {
    /*z-index: 1;
    content: " ";
    position: absolute;
    right: -14px;
    top: 0px;
    border-top: 11px solid transparent;
    border-right: none;
    border-left: 14px solid #727272;
    border-bottom: 11px solid transparent;*/
}

.selectStageTag::after {
    /*z-index: 1;
    content: " ";
    position: absolute;
    right: -14px;
    top: 0px;
    border-top: 11px solid transparent;
    border-right: none;
    border-left: 14px solid #ffffff;
    border-bottom: 11px solid transparent;
    transition: 0.1s all ease;*/
}

.stagesLabel:after {
    border-left: 14px solid var(--navy) !important;
}

a.selectedStagesLead {
    background: #03394F !important;
    color: white !important;
}

.selectStageTag:hover {
    background: #03394F;
    color: white !important;
}

.selectReqTag:hover {
    background: #03394F;
    color: white !important;
}

.selectedStagesLead::after {
    border-left: 14px solid #e9e9e9;
    transition: 0.1s all ease;
}

.selectStageTag:hover::after {
    border-left: 14px solid var(--darkBlue);
}

.selectReqTag:hover::after {
    border-left: 14px solid var(--darkBlue);
}

.lead-tabs {
    position: relative;
    z-index: 1;
}

    .lead-tabs > ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
    }

        .lead-tabs > ul > li {
            /*flex: 1;*/
            opacity: 0.5;
            transition: 0.5s all ease;
            margin-right:15px;
        }

            .lead-tabs > ul > li.current > a {
                box-shadow: var(--shadow2);
                border-radius: 0.5rem;
                color: var(--colorBlack) !important;
                background: white;
            }

                .lead-tabs > ul > li.current > a > label {
                    font-weight: 600;
                }

            .lead-tabs > ul > li:hover,
            .lead-tabs > ul > li.current {
                opacity: 1;
            }

            .lead-tabs > ul > li > a {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-decoration: none;
                position: relative;
                transition: 0.5s all ease;
                cursor: pointer;
                padding: 0.5rem 0.25rem;
                margin: 0 0.25rem;
                color: #333;
                text-align: center;
                padding: 4px 8px;
                text-align: center;
                border: 0 !important;
                border-radius: 4px !important;
                position: relative;
            }

                .lead-tabs > ul > li > a:first-child {
                    margin-left: 0px;
                }

                .lead-tabs > ul > li > a > label {
                    margin: 0;
                    font-size: 0.75rem;
                    font-weight: 600;
                    margin-top: 0.25rem;
                    transition: 0.5s all ease;
                    cursor: pointer;
                }

                .lead-tabs > ul > li > a > i > span {
                    position: absolute;
                    z-index: 1;
                    right: 0;
                    top: 0;
                    transform: translate(50%, -50%);
                    font-size: 0.5rem;
                    width: 0.9rem;
                    height: 0.9rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    background: var(--customRed);
                    color: #fdfdfd;
                    box-shadow: var(--shadow1);
                    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
                    font-weight: 600;
                }

                .lead-tabs > ul > li > a > i {
                    font-size: 1.5rem;
                    position: relative;
                }

.lead-tab-create {
    display: flex;
    align-items: stretch;
}

    .lead-tab-create > *:not(:last-child) {
        margin-right: 0.5rem;
    }

.lead-tab-search {
    display: flex;
    justify-content: space-between;
    margin: 0 0 2rem;
    position: relative;
}

.lead-content {
    flex: 1;
    overflow-y: scroll;
    padding-right: 4px;
    max-height: 100%;
    padding-top: 1rem;
}

    .lead-content > div {
        padding: 1.25rem;
        animation: fade-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
        background: #EEEEEE;
        border-radius: 5px;
        height:100%;
    }

/*datatable - start*/

.ReactTable .rt-thead .rt-resizable-header-content,
.ReactTable .rt-tbody .rt-td {
    text-align: left;
    font-size: 1rem;
}

.ReactTable .rt-thead .rt-resizable-header-content {
    font-weight: 600;
}

.ReactTable .rt-thead .rt-th,
.ReactTable .rt-thead .rt-td {
    /*padding: 0.25rem 1rem !important;*/
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*datatable - end*/

.activity-slab {
    display: flex;
    padding: 1rem;
    align-items: center;
    background: #fdfdfd;
    border: 1px solid #eee;
    margin: 1rem 0;
}

    .activity-slab > div:last-child > span {
        font-size: 0.9rem;
        color: #999;
        font-weight: 600;
    }

    .activity-slab > div:first-child {
        width: 10%;
        text-align: center;
    }

    .activity-slab > div:last-child {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0 0 0 1rem;
    }

        .activity-slab > div:last-child > p {
            margin: 0;
            font-size: 0.9rem;
            color: #333;
        }

        .activity-slab > div:last-child > span {
            font-size: 0.8rem;
        }

.activity-img > img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: 50%;
}

.activity-bg > div:first-child {
    margin-top: 0;
}

.activity-bg {
    padding: 1rem;
    background: #f7f7f7;
}

.mdl-body-lg {
    max-height: 70vh;
    overflow-y: scroll;
}

.mdl-body-xl {
    max-height: 80vh;
    overflow-y: scroll;
}

.mdl-body-xxl {
    max-height: 85vh;
    overflow-y: scroll;
}

.contact-border {
    padding-bottom: 1rem;
    /* margin-bottom: 1rem;
  border-bottom: 2px solid #e7e7e7; */
}

.contact-body > div:not(:last-child):not(.contact-border) {
    margin-bottom: 0.5rem;
}

.autocomplete-wrap > div > input {
    width: 100%;
}

.autocomplete-wrap > div:not(.rdt):not(.tox-tinymce) > div,
.lead-tab-create > div > div,
.contact-search-wrap > div > div,
.location-search-wrap ~ div {
    z-index: 1;
    border: 1px solid var(--darkBlue_3) !important;
    border-radius: 0.25rem;
    background: #fff;
    padding: 0.25rem;
    overflow-y: scroll;
    max-height: 30vh !important;
}

    .autocomplete-wrap > div > div > div,
    .lead-tab-create > div > div > div,
    .contact-search-wrap > div > div > div,
    .location-search-wrap ~ div > div {
        transition: 0.5s all ease;
        font-size: 0.9rem !important;
        padding: 0.25rem 1rem !important;
        color: #333;
        z-index: 1;
    }

        .autocomplete-wrap > div > div > div:not(:last-child),
        .lead-tab-create > div > div > div:not(:last-child),
        .contact-search-wrap > div > div > div:not(:last-child),
        .location-search-wrap ~ div > div:not(:last-child) {
            border-bottom: 1px solid #eee;
        }

        .autocomplete-wrap > div > div > div:hover,
        .lead-tab-create > div > div > div:hover,
        .contact-search-wrap > div > div > div:hover,
        .location-search-wrap ~ div > div:hover {
            background: #f7f7f7 !important;
            color: #333;
            cursor: pointer;
        }

        .contact-search-wrap > div > div > div > div,
        .location-search-wrap ~ div > div > div {
            display: flex;
            align-items: center;
        }

            .contact-search-wrap > div > div > div > div > span:first-child,
            .location-search-wrap ~ div > div > div > span:first-child {
                margin-right: 1rem;
            }

.appointment-modal-checkbox {
    flex-direction: row !important;
}

    .appointment-modal-checkbox > label {
        display: flex;
        align-items: center;
        margin: 0 !important;
        flex: 1;
        justify-content: center;
    }

        .appointment-modal-checkbox > label > input {
            margin-right: 0.5rem;
        }

.delete-module {
    color: var(--darkBlue);
    margin: 0 0.25rem;
}

.lead-delete-extra {
    color: var(--customRed) !important;
    font-weight: 500;
    text-align: center;
    margin-bottom: 0.5rem !important;
}

.adverisement-chkbox {
    display: none;
}

    .adverisement-chkbox:checked ~ .social-overlay {
        background: rgba(49, 49, 49, 0.48);
        box-shadow: inset 0 0 23px 15px rgba(255, 255, 255, 0.3);
        opacity: 1;
    }

.channel-icon {
    display: flex;
}

.social-icons:hover .social-overlay {
    background: rgba(49, 49, 49, 0.48);
    cursor: pointer;
    opacity: 1;
}

.social-icons:hover {
    transform: scale(1.1);
    cursor: pointer;
}

.social-icons img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.social-overlay {
    transition: 0.3s all ease;
    /* width: 45px; */
    /* height: 45px; */
    position: absolute;
    top: 0;
    border-radius: 50%;
    background: rgba(49, 49, 49, 0);
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .social-overlay i {
        transition: 0.3s all ease;
        color: #fff;
    }

.social-icons {
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    transition: 0.3s all ease;
    margin: 0.5rem 1rem;
    position: relative;
    border-radius: 50%;
}

.file-uploader_droparea.support-ticket-image {
    height: 12rem;
    flex: auto;
}
/* file drag drop section*/
.file-uploader_droparea {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f7f7f7;
    color: #222;
    border: 1px solid #eee;
    cursor: pointer;
}

    .file-uploader_droparea > i {
        font-size: 3.2rem;
        color: #e1e1e1;
    }

    .file-uploader_droparea > span {
        font-size: 1rem;
        /* letter-spacing: 1px; */
        font-weight: 100;
        color: #aaa;
    }

.file-upload-wrap {
    display: flex;
}

.file-uploader_droparea.is-highlighted {
    border: 1px dashed grey;
    background: #eee;
    background: initial;
}

.file-uploader_droparea.is-highlighted {
    border: 1px dashed grey;
    background: #eee;
    background: initial;
}

.uploaded-file-list {
    flex: 1;
    padding: 0 0 0 1rem;
}

    .uploaded-file-list > h4 {
        font-size: 1rem;
        color: var(--darkBlue);
        padding: 0 0 0.5rem;
        border-bottom: 1px solid #eee;
    }

    .uploaded-file-list > ul,
    .list-of-items {
        margin: 0;
        padding: 0;
        list-style-type: none;
        height: 10rem;
        overflow-y: scroll;
        padding: 0 0.5rem 0 0;
    }

        .uploaded-file-list > ul > li,
        .list-of-items > li {
            font-size: 0.9rem;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            margin: 0.5rem 0;
        }

            .uploaded-file-list > ul > li > label,
            .list-of-items > li > label {
                margin: 0;
                color: #333;
            }

            .uploaded-file-list > ul > li > span,
            .list-of-items > li > span {
                color: var(--customRed_3);
                cursor: pointer;
                transition: 0.5s all ease;
            }

                .uploaded-file-list > ul > li > span:hover,
                .list-of-items > li > span:hover {
                    color: var(--customRed);
                }

.list-of-items {
    height: auto;
    max-height: 10rem;
}

.supported-files-text {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
}

    .supported-files-text > span {
        margin: 0;
        font-size: 1rem;
        color: var(--customRed);
    }

    .supported-files-text > label {
        font-size: 1rem;
        font-weight: 600;
        color: var(--customRed);
        margin: 0;
    }

.note-modal-body > div:not(:last-child) {
    margin-bottom: 2rem;
}

.speech-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .speech-parent > button > i {
        padding: 0;
    }

.text-box-width-req {
    width: 95%;
}

.text-box-width-id {
    width: 10% !important;
}

.req-id-padding {
    padding-right: 10px;
    padding-top: 2px;
    font-size: 0.75rem;
}

.req-label {
    font-size: 0.8rem;
    color: var(--customRed);
    margin: 0;
}

.lead-req-parent {
    display: flex;
}

/*.grey-background {
    background: #f7f7f7;
    padding: 0.5rem;
}*/

.white-background {
    padding: 1rem;
    background: #fff;
    /*margin: 0.5rem;*/
    border: 1px solid #f1f1f1;
    border-radius: 0.5rem;
    box-shadow: var(--shadow3);
}

.lead-req-parent > div {
    flex: 1;
    position: relative;
}

.lead-req-inner > div:not(:last-child) {
    margin-bottom: 1rem;
}

.lead-req-tab {
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 0 0.5rem;
    border-bottom: 1px solid #eee;
}

    .lead-req-tab > div {
        padding-top: 0.5rem;
    }

.toggle-btn {
    position: relative;
}

    .toggle-btn > button {
        position: absolute;
        right: 0.9rem;
        top: 18px;
        transform: translate(50%, 0);
        width: 2vw;
        height: 2vw;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 0;
        background: #fdfdfd;
        box-shadow: var(--shadow2);
        color: var(--darkBlue);
        font-size: 0.9vw;
        z-index: 1;
        transition: 0.5s all ease;
        cursor: pointer;
    }

        .toggle-btn > button:hover {
            background: var(--darkBlue);
            color: #fdfdfd;
        }

.search-property {
    padding-top: 1rem;
}

.search-propoerty-label {
    padding-bottom: 1rem;
    padding-top: 1rem;
    font-weight: 500 !important;
}

.inventory-properties {
    width: 120% !important;
    display: flex;
    float: right;
    margin-top: -10px;
}

.search-and-select-properties-label {
    padding: 0rem 1rem;
}

.search-and-select-properties {
    display: flex;
}

.target {
    width: 40%;
}

    .target > div:first-child {
        display: block !important;
    }

.bottom-line {
    padding-top: 2rem;
    border-bottom: 1px solid #eee;
    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 12%);
}

.disable-btn {
    background: #aaa !important;
    color: #fdfdfd !important;
    pointer-events: none;
}

.no-rec-msg {
    text-align: center;
    width: 70%;
    position: relative;
    top: 5rem;
    margin: auto;
    height: 10%;
}

.lead-req-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 0 0.5rem;
    border-bottom: 1px solid #eee;
}

.matched-properties {
    display: table;
    width: 100%; /*Optional*/
    table-layout: fixed; /*Optional*/
    border-spacing: 0px 10px; /*Optional*/
}

    .matched-properties > div:first-child {
        display: flex;
    }

.matched-properties-content {
    display: table-cell;
    width: 60%;
}

.lead-req-header.without-border {
    border: 0;
}

.lead-req-header > h4,
.bulk-file > h5 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--darkBlue);
}

.lead-req-header > div {
    display: flex;
    align-items: center;
}

    .lead-req-header > div > label,
    .lead-req-google-search > div > label,
    .selected-property-block > div > label {
        margin: 0;
        font-size: 0.75rem;
        color: #333;
        margin-right: 0.5rem;
        font-weight: 400;
    }

.box-div {
    display: flex;
}

    .box-div > *:not(:last-child) {
        margin-right: 0.5rem;
    }

    .box-div > * {
        width: 50%;
    }

.currency-sign {
    position: relative;
}

    .currency-sign > span {
        position: absolute;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 1rem;
        font-size: 0.9rem;
        border-right: 1px solid #eee;
    }

    .currency-sign > input {
        width: 100%;
        padding: 0.5rem 0.75rem 0.5rem 4rem !important;
    }

.prop-type-label {
    font-style: italic;
    text-align: left;
    color: var(--darkBlue) !important;
    font-weight: 600 !important;
    white-space: pre-line;
}

    .prop-type-label.left {
        text-align: left;
    }

.selected-property > ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

    .selected-property > ul > li:not(:first-child) {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

.selected-property-block {
    display: flex;
    /*display:inline-flex;*/
    width: 50%;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0.25rem 1rem;
    background: #fafafa;
    border-radius: 0.25rem;
    border: 1px solid #eee;
}

    .selected-property-block > label {
        margin: 0;
        font-size: 0.9rem;
        color: #222;
    }

    .selected-property-block > div {
        display: flex;
        align-items: center;
        width: 30%;
        justify-content: space-between;
    }

        .selected-property-block > div > input {
            width: 50%;
        }

    .selected-property-block > a {
        position: absolute;
        right: 0;
        top: 0;
        color: var(--customRed_3);
        width: 1rem;
        height: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        background: #fdfdfd;
        border-radius: 50%;
        box-shadow: var(--shadow1);
        transform: translate(50%, -50%);
        cursor: pointer;
        transition: 0.5s all ease;
        text-decoration: none;
    }

        .selected-property-block > a:hover {
            color: var(--customRed);
        }

.lead-req-google-search {
    display: flex;
    justify-content: space-between;
    padding-top: 0.5rem;
}

    .lead-req-google-search > div {
        display: flex;
        align-items: center;
    }

.display-bc {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: #fafafa;
    border: 1px solid #eee;
}

    .display-bc > button {
        position: absolute;
        right: 1.5rem;
        top: 1.5rem;
        z-index: 1;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background: #fdfdfd;
        border: 0;
        color: var(--customRed);
        box-shadow: var(--shadow1);
        transition: 0.2s all ease;
        cursor: pointer;
    }

        .display-bc > button:hover {
            background: var(--customRed);
            color: #fdfdfd;
        }

.display-bc-head {
    position: relative;
    height: 25vh;
}

    .display-bc-head > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .display-bc-head > button {
        position: absolute;
        bottom: 10%;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .display-bc-head > span {
        position: absolute;
        top: 0.5rem;
        left: 0.5rem;
        font-size: 2vw;
    }

        .display-bc-head > span.active {
            color: var(--customGreen);
        }

        .display-bc-head > span.inactive {
            color: var(--customRed);
        }

.display-bc-body {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: #fdfdfd;
    max-height: 40vh;
    overflow-y: scroll;
}

    .display-bc-body > h4 {
        margin: 0;
        font-size: 1.2vw;
        color: var(--darkBlue);
        padding-bottom: 0.25rem;
        border-bottom: 1px solid #eee;
    }

    .display-bc-body > label {
        margin: 0;
        font-weight: 600;
        color: #555;
        font-size: 1vw;
    }

    .display-bc-body > p {
        font-size: 0.9vw;
        color: #333;
        margin: 0.5rem 0;
    }

.bc-details-section {
    margin: 0.5rem 0;
}

    .bc-details-section > h5 {
        font-size: 1.1vw;
        color: var(--darkBlue);
        padding-bottom: 0.25rem;
        border-bottom: 1px solid #eee;
    }

    .bc-details-section > ul {
        margin: 0;
    }

        .bc-details-section > ul > li {
            margin: 0.25rem 0;
        }

    .bc-details-section > div,
    .property-availability {
        display: flex;
        align-items: flex-end;
    }

        .bc-details-section > div > label,
        .property-availability > label {
            margin: 0;
            font-size: 0.85vw;
            color: #555;
            width: 40%;
        }

        .bc-details-section > div > span,
        .property-availability > span {
            font-size: 0.9vw;
            font-weight: 600;
            color: #333;
        }

.lead-req-list {
    height: 75vh;
    overflow-y: scroll;
    padding: 0.5rem;
    transition: 0.8s all ease;
}

.no-lead-req-list {
    height: 30vh;
    overflow-y: scroll;
    padding: 0.5rem;
    transition: 0.8s all ease;
}

.lead-req-list-parent {
    padding: 1rem 0rem;
}

.toggle-property-list > div {
    height: 0;
    overflow: hidden;
    padding: 0;
    transition: 0.8s all ease;
    border: none;
}

.bc-legend {
    display: flex;
    /*justify-content: space-around;*/
    align-items: center;
    /*box-shadow: 0 0 20px -8px rgba(0, 0, 0, 0.65);*/
    background: #ffffffb0;
    height: auto;
    /*padding: 0.75rem;*/
    /*position: absolute;*/
    top: 0.8em;
    right: 12%;
    border-radius: 4px;
    min-height: 40px;
    min-width: 330px;
    margin-bottom: 0.5rem;
}

    .bc-legend span {
        display: flex;
        align-items: center;
    }

    .prop-list-view ul li.google,
    .bc-legend i.google {
        color: var(--customRed);
    }

    .prop-list-view ul li.pending,
    .bc-legend i.pending {
        color: #fdbf2d;
    }

    .prop-list-view ul li.inventory,
    .bc-legend i.inventory {
        color: #955ba5;
    }

    .bc-legend i {
        font-size: 1.3vw;
    }

    .bc-legend label {
        margin-left: 0.5rem;
        margin-bottom: 0;
        font-size: var(--lengthSm3);
        font-weight: 600;
        color: black;
    }

.bc-inventory-label,
.bc-pending-label {
    color: #524c4c;
    border-radius: 8px;
    margin-left: 0.75rem;
}

.prop-list-view {
    display: flex;
    position: relative;
    width: 100%;
    margin: 0.5rem 0;
    overflow: hidden;
    border-radius: 0.25rem;
    background: white;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
}

    .prop-list-view > div:first-child {
        width: 30%;
        height: 140px;
    }

    .prop-list-view img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .prop-list-view > div:last-child {
        width: 70%;
        padding: 0.5rem 0.75rem;
    }

        .prop-list-view > div:last-child > h5 {
            font-size: 1vw;
            color: #716868;
            font-weight: 600;
            text-align: left;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .prop-list-view > div:last-child > p {
            font-size: 0.9vw;
            color: #555;
            margin: 0.5rem 0;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }

        .prop-list-view > div:last-child > span {
            font-size: 0.9vw;
            color: #222;
        }

/*.bc-legend img {
    width: 1.5rem;
    height: 1.5rem;
}*/

.prop-list-view ul > li:last-child i.fas.fa-plus {
    position: absolute;
    font-size: 0.6vw;
    top: 50%;
    left: 50%;
    color: #fdfdfd;
    transform: translate(-50%, -50%);
}

.prop-list-view ul > li:first-child {
    padding-right: 0.75rem;
}

.prop-list-view ul li {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: 0.25s all ease;
    font-size: 1.2vw;
    position: relative;
}

.prop-list-view ul {
    list-style: none;
    display: flex;
    position: absolute;
    right: 0.75rem;
    bottom: 0.5rem;
    padding: 0;
    margin: 0;
}

.no-records {
    color: #777;
    font-size: 1.5vw;
    font-weight: 600;
    text-align: center;
    margin: 0;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

#gMapStatic {
    display: none;
}

.proposal-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

    .proposal-modal-head > div:first-child {
        display: flex;
        flex-direction: column;
    }

        .proposal-modal-head > div:first-child > span,
        .proposal-footer-display > div > label {
            font-size: 0.9rem;
            color: #333;
            margin: 0;
        }

        .proposal-modal-head > div:first-child > h5 {
            margin: 0;
            font-size: 1.1rem;
            color: #222;
        }

            .proposal-modal-head > div:first-child > h5 > i {
                padding-left: 1rem;
                color: #555;
                transition: 0.5s all ease;
                cursor: pointer;
            }

                .proposal-modal-head > div:first-child > h5 > i:hover {
                    color: #333;
                }

            .proposal-modal-head > div:first-child > h5:not(:hover) > i {
                opacity: 0;
            }

.proposal-modal-body {
    display: flex;
}

    .proposal-modal-body > div {
        flex: 1;
        height: 60vh;
    }

.proposal-bc-list > h5 {
    font-size: 1rem;
    color: #333;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #eee;
}

.proposal-bc-list > ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    max-height: 20vh;
    overflow-y: scroll;
}

.bc-modal-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.5rem 0;
    padding: 0.5rem;
    background: #f7f7f7;
}

    .bc-modal-block > label {
        margin: 0;
        font-size: 0.9rem;
        color: #222;
    }

.proposal-inner-content > ul > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bc-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f7f7f7;
    border: 1px solid #eee;
    font-weight: 100;
    color: #ccc;
    height: 100%;
    font-size: 1.3rem;
}

    .bc-preview-placeholder > i {
        font-size: 5rem;
        color: #e7e7e7;
        margin-bottom: 0.5rem;
    }

.proposal-modal-checkbox {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

    .proposal-modal-checkbox > label {
        display: flex;
        align-items: center;
        margin: 0 0.5rem;
        font-size: 0.9rem;
        color: #222;
    }

        .proposal-modal-checkbox > label > input[type="checkbox"],
        .default-pipeline-check > label > input[type="checkbox"],
        .send-appointment-block > div:last-child > label > input[type="checkbox"],
        .bc-modal-block > label > input[type="checkbox"],
        .mail-checkbox > label > input[type="checkbox"],
        .tags-list-wrap > li > label > input[type="checkbox"] {
            margin-right: 0.5rem;
        }

.proposal-modal-name {
    display: flex;
}

    .proposal-modal-name > *:not(:last-child) {
        margin-right: 0.5rem;
    }

.proposal-inner-content {
    padding-right: 1rem;
    display: flex;
    flex-direction: column;
}

    .proposal-inner-content > div {
        flex: 1;
    }

.proposal-footer-display {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .proposal-footer-display > div {
        display: flex;
        flex-direction: column;
        flex: 1;
        width: 100%;
        margin-top: 1rem;
    }

.proposal-modal-name > input {
    width: 25vw;
}

.proposal-modal-name > button > i {
    padding: 0;
}

.bc-modal-block > div:last-child > span {
    padding: 0.15rem 0.5rem;
    border-radius: 0.5rem;
    background: #fff;
    font-size: 0.7rem;
}

.proposal-under-negotiation {
    margin-right: 0.5rem;
}

    .proposal-under-negotiation > i {
        color: #ee8830;
        padding-right: 0.5rem;
    }

.proposal-already-sent > i {
    color: var(--customGreen);
    padding-right: 0.5rem;
}

.tags-list-wrap {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

    .tags-list-wrap > li {
        padding: 0.5rem 1rem;
        margin: 0.5rem 0;
        border-radius: 0.25rem;
    }

        .tags-list-wrap > li > label {
            margin: 0;
            color: #fdfdfd;
            font-weight: 600;
            font-size: 1rem;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

.quot-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1rem;
}

    .quot-header > h3 {
        font-size: 1.2rem;
        margin: 0;
    }

    .quot-header > div > label {
        margin: 0;
        font-size: 0.9rem;
        color: #777;
        padding-right: 0.5rem;
    }

    .quot-header > div > span {
        font-size: 1rem;
        color: #222;
        font-weight: 600;
    }

.quot-list {
    padding: 1rem;
    list-style-type: none;
    margin: 0.5rem 0;
    height: 25vh;
    background: #fafafa;
    overflow-y: scroll;
}

.quot-bc-wrap > ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

    .quot-bc-wrap > ul > li {
        margin: 0.25rem 0;
    }

        .quot-bc-wrap > ul > li > p {
            margin: 0;
            font-size: 0.9rem;
            color: #222;
        }

            .quot-bc-wrap > ul > li > p > b {
                font-weight: 600;
            }

.quot-contact-wrap,
.quot-bc-wrap {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: #ffff;
    box-shadow: var(--shadow1);
    margin: 0.25rem 0;
}

    .quot-contact-wrap > h5,
    .quot-bc-wrap > h5 {
        font-size: 1rem;
        color: #222;
        margin: 0 0 0.5rem;
    }

    .quot-contact-wrap > div {
        display: flex;
    }

        .quot-contact-wrap > div > div {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

            .quot-contact-wrap > div > div > label {
                font-size: 0.8rem;
                color: #777;
                margin: 0;
            }

            .quot-contact-wrap > div > div > span {
                font-size: 0.9rem;
                color: #222;
            }

.send-appointment-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.send-appointment-block {
    margin: 0.5rem 0;
    padding: 0.5rem;
    background: #fafafa;
    border: 1px solid #eee;
}

.send-appointment-block {
    display: flex;
}

    .send-appointment-block > div,
    .mail-checkbox {
        flex: 1;
        display: flex;
        justify-content: center;
        padding: 0 0.5rem;
        flex-direction: column;
    }

        .send-appointment-block > div:first-child > label {
            margin: 0;
            font-size: 0.9rem;
            color: #222;
        }

        .send-appointment-block > div:first-child > span {
            font-size: 0.8rem;
            color: #666;
        }

        .send-appointment-block > div:last-child > label,
        .mail-checkbox > label {
            margin: 0.25rem 0;
            display: flex;
            align-items: center;
            font-size: 0.9rem;
        }

.component-main-content {
    height: 100vh;
    padding: 2rem 1rem;
    animation: fade-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

    .component-main-content.scroll {
        overflow-y: scroll;
    }

.dt-wrap.full {
    overflow-y: scroll;
    height: calc(100vh - 8rem);
    background: #EEEEEE;
    padding: 1.25rem;
    border-radius: 5px;
}

.dt-wrap.third {
    overflow-y: scroll;
    height: calc(100vh - 12rem);
}

.dt-wrap.deal-supplier {
    overflow-y: scroll;
    height: calc(100vh - 14rem);
}

.stage-pipeline-drop {
    display: flex;
    align-items: center;
}

    .stage-pipeline-drop > label {
        margin: 0;
        font-size: 0.9rem;
        color: #333;
        margin-right: 0.5rem;
    }

.add-field-wrap {
    margin: 1rem 0;
    display: flex;
    justify-content: center;
}

.stage-field-end {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .stage-field-end > button {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: #fff;
        color: var(--customRed);
        cursor: pointer;
        transition: 0.2s all ease;
    }

        .stage-field-end > button:hover {
            background: var(--customRed);
            color: #fdfdfd;
        }

.stage-text {
    text-align: center;
    font-size: 0.75rem;
    color: var(--darkBlue);
    font-style: italic;
    font-weight: 600;
}

.property-upload-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
}

    .property-upload-head > * {
        display: flex;
        justify-content: center;
        align-items: center;
    }

.data-upload-info {
    flex-direction: column;
}

    .data-upload-info > .custom-btn {
        width: max-content;
    }
/*upload Loading*/
.upload-loader span:after {
    content: "Please Wait While The Data Is Getting Uploaded";
    font-weight: 600;
    font-size: 13px;
    animation: loading-upload 3s infinite;
}

@keyframes loading-upload {
    0% {
        content: "Please Wait While The Data Is Getting Uploaded";
    }

    25% {
        content: "Please Wait While The Data Is Getting Uploaded.";
    }

    50% {
        content: "Please Wait While The Data Is Getting Uploaded..";
    }

    75% {
        content: "Please Wait While The Data Is Getting Uploaded...";
    }
}

.upload-loader {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .upload-loader span {
        padding-top: 8px;
    }

.data-upload-info > div > label {
    margin: 0;
    font-size: 0.9rem;
    color: #777;
}

.data-upload-info > div > span {
    margin-left: 0.5rem;
    font-weight: 600;
    color: #222;
}

.data-upload-info > label {
    margin: 0;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    background: #fff;
}

    .data-upload-info > label > i {
        padding-right: 0.5rem;
        color: var(--darkBlue);
    }

.data-upload-placeholder > input {
    display: none;
}

.data-upload-placeholder {
    margin: 0;
}

.cache-delete-info {
    display: flex;
    align-items: center;
    color: var(--darkBlue);
    font-size: 1.5vw;
}

.property-modal-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

    .property-modal-top > div {
        display: flex;
        align-items: center;
        font-size: 0.8rem;
        color: #333;
    }

        .property-modal-top > div > a {
            color: var(--darkBlue);
            font-weight: 600;
            cursor: pointer;
            margin-left: 0.2rem;
        }

.switch.on {
    background: #A2DB9E !important;
}



.switch {
    background: var(--boxGrayHover);
}

.property-modal-inner {
    display: flex;
}

    .property-modal-inner > div {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

.property-image-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 1.75rem;
    font-weight: 100;
    color: #777;
}

    .property-image-placeholder > i {
        margin-bottom: 0.5rem;
        font-size: 7rem;
    }

.property-upload-image {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    flex: 1;
}

    .property-upload-image > label,
    .property-uploaded-images > label {
        font-weight: 400;
        color: #666;
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
        position: relative;
    }

    .property-upload-image > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #f7f7f7;
        border: 1px solid #eee;
        min-height: 8rem;
        color: #777;
        cursor: pointer;
        flex: 1;
    }

        .property-upload-image > div > p {
            font-weight: 100;
            margin: 0;
        }

            .property-upload-image > div > p:first-child {
                font-size: 1.3rem;
            }

            .property-upload-image > div > p:last-child {
                font-size: 1vw;
            }

.property-modal-section {
    margin: 2rem 0;
}

.lead-fields-wrap > div:first-child {
    margin-top: 0;
}

.property-modal-section > .lead-req-header {
    margin: 0 0 1rem;
}

.bulk-modal-section > .lead-req-header {
    margin: 0 0 1rem;
}

.property-modal-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    max-height: 15vh;
    overflow-y: scroll;
    padding: 0.75rem 1rem;
    border: 1px solid #eee;
    border-radius: 0.25rem;
}

    .property-modal-list > li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.25rem 0;
    }

        .property-modal-list > li > label {
            margin: 0;
            font-size: 0.9rem;
            color: #222;
        }

        .property-modal-list > li > button {
            padding: 0;
            font-size: 0.7vw;
            background: transparent;
            border: 0;
            width: 1rem;
            height: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            cursor: pointer;
            transition: 0.2s all ease;
            color: var(--customRed_3);
        }

            .property-modal-list > li > button:hover {
                background: var(--customRed);
                color: #fdfdfd;
            }

        .property-modal-list > li:not(:last-child) {
            border-bottom: 1px solid #eee;
        }

.property-uploaded-images > ul {
    margin: 0;
    list-style-type: none;
    max-height: 25vh;
    overflow-y: scroll;
    padding: 0 1rem 0 0;
}

.product-image-block {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 0.5rem 1rem;
    background: #f7f7f7;
    border: 1px solid #eee;
    margin: 0.5rem 0;
    border-radius: 0.25rem;
}

    .product-image-block > label {
        display: flex;
        align-items: center;
        margin: 0;
        font-size: 0.9rem;
        color: #222;
    }

        .product-image-block > label > input[type="radio"] {
            margin-right: 0.5rem;
        }

    .product-image-block > button {
        position: absolute;
        right: 0;
        top: 0;
        transform: translate(50%, -50%);
        border: 0;
        width: 1rem;
        height: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 0.7rem;
        transition: 0.2s all ease;
        background: #fdfdfd;
        color: var(--customRed);
        box-shadow: var(--shadow1);
        cursor: pointer;
    }

        .product-image-block > button:hover {
            background: var(--customRed);
            color: #fdfdfd;
        }

    .product-image-block > div {
        display: flex;
        flex-direction: column;
        width: 50%;
    }

        .product-image-block > div > label {
            margin: 0;
            color: #222;
            font-size: 1rem;
        }

.property-modal-title > span {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
}

input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    width: 15px;
    height: 15px;
}

.tag-rule-row {
    display: flex;
    justify-content: space-between;
    margin: 0.5rem 0;
}

    .tag-rule-row > div:not(:last-child) {
        width: 45%;
    }

    .tag-rule-row > button {
        flex: 1;
    }

.delete-tag-rule {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .delete-tag-rule > button {
        border: 0;
        width: 1.5rem;
        height: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 0.8rem;
        transition: 0.2s all ease;
        background: #fdfdfd;
        color: var(--customRed);
        box-shadow: var(--shadow1);
        cursor: pointer;
    }

        .delete-tag-rule > button:hover {
            background: var(--customRed);
            color: #fdfdfd;
        }

.default-contact-heat > div,
.default-contact-heat-modal {
    display: flex;
    border-radius: 4px;
}

    .default-contact-heat > div > div,
    .default-contact-heat-modal > div {
        /*flex: 1;
        color: #fdfdfd;
        text-align: center;
        font-weight: 600;
        font-size: 0.9rem;
        letter-spacing: 2px;
        text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
        box-shadow: var(--shadow1);*/
    }

.bulk-contact-block {
    margin: 0.5rem;
    display: flex;
    flex-direction: column;
    background: #fff;
    /* border: 1px solid #eee; */
    box-shadow: var(--shadow1);
    padding: 0.5rem;
    cursor: pointer;
    transition: 0.5s all ease;
}

    .bulk-contact-block:hover {
        box-shadow: var(--shadow2);
    }

    .bulk-contact-block > div:first-child {
        display: flex;
        align-items: center;
        font-size: 1rem;
        color: #222;
    }

        .bulk-contact-block > div:first-child > input[type="checkbox"] {
            margin-right: 0.5rem;
        }

    .bulk-contact-block > div:last-child {
        display: flex;
        flex-direction: column;
    }

        .bulk-contact-block > div:last-child > div {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }

            .bulk-contact-block > div:last-child > div > label {
                margin: 0;
                font-size: 0.85rem;
                color: #777;
            }

            .bulk-contact-block > div:last-child > div > span {
                font-size: 1rem;
                font-weight: 600;
                color: #333;
                padding: 0 0 0 1rem;
                max-width: 15rem;
                overflow: hidden;
                text-overflow: ellipsis;
            }

.mark-wrap > button:not(:last-child) {
    margin-right: 0.5rem;
}

.mark-wrap > button {
    font-size: 0.8rem;
    border: 0;
    padding: 0.25rem 1rem;
    border-radius: 0.25rem;
    background: var(--boxGray);
    color: var(--darkBlue);
    font-weight: 600;
    border: 1px solid transparent;
    transition: 0.5s all ease;
    cursor: pointer;
}

    .mark-wrap > button:hover {
        border: 1px solid var(--darkBlue_3);
    }

.bulk-contact-wrap {
    max-height: 40vh;
    overflow-y: scroll;
    padding: 1rem;
    background: #fafafa;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.btn-row {
    margin: 1rem 0;
    display: flex;
    justify-content: center;
}

    .btn-row.end {
        justify-content: flex-end;
    }

.add-product-map-height > div > div > div:first-child {
    height: 50vh;
}

.add-product-map-height > div > div {
    padding-top: 15px;
}

.apply-filter-btn {
    padding-top: 15px;
    text-align: -webkit-right;
}

/*bulk - start*/

.Email-Templates_loader {
    padding-top: 162px;
    position: absolute;
    z-index: 1;
    padding-left: 775px;
}

.Bulk-Email-Templates_loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.email-type {
    text-align: center;
}

.email-or {
    position: relative;
    background: var(--boxGray);
    padding: 0.25rem 0.75rem;
    font-size: 1rem;
    color: #333;
    width: max-content;
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.email-or-wrap {
    margin: 2rem 0;
}

.email-or-line {
    height: 2px;
    background: #7777774a;
}

.temp-create i {
    left: 4vw !important;
}

.btn-email-temp {
    margin-top: 18px;
    display: flex;
    align-items: center;
}

    .btn-email-temp label {
        font-size: 15px;
        color: #484848;
        margin-bottom: 0;
        margin-left: 4rem;
        letter-spacing: 0.2px;
        display: flex;
        align-items: center;
    }

        .btn-email-temp label i {
            font-size: 20px;
        }

.top-border-title {
    border-top: 2px solid #e9e9e9;
    padding-top: 1.5em;
}

.bulk-top > div {
    font-size: 14px;
    width: 100%;
}

    .bulk-top > div:first-child {
        margin-bottom: 10px;
    }

.bulk-top {
    flex-direction: column;
}

.valChanged {
    min-width: 0px !important;
}

.pseudo-variables {
    display: block;
    /* padding: 15px; */
    background: #fafafa;
    border-radius: 0.5rem;
    padding: 1rem;
    position: absolute;
    right: 0;
    top: 2.5rem;
    z-index: 1;
    border: 1px solid #eee;
    box-shadow: 0 2px 4px -4px rgba(0, 0, 0, 0.3), 1px 1px 6px -2px rgba(0, 0, 0, 0.4);
    animation: scale-in-bottom 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    width: 35rem;
    z-index: 2;
}

    .pseudo-variables span {
        font-size: 14px;
        display: block;
    }

    .pseudo-variables div {
        display: flex;
        align-items: center;
    }

        .pseudo-variables div:not(:last-child) {
            padding-bottom: 2px;
        }

    .pseudo-variables span:first-child {
        color: #444;
        padding: 4px 8px;
        transition: 0.3s all ease;
        cursor: pointer;
        width: 40%;
        display: block;
    }

        .pseudo-variables span:first-child:hover {
            background: #eee;
            color: #605ca8;
            border-radius: 4px;
        }

    .pseudo-variables span:last-child {
        color: #777;
        margin-left: 8px;
        width: 60%;
        display: block;
    }

.btn-pseudo {
    border-radius: 0.25rem;
    border: 2px solid #aaa;
    font-size: 1rem;
    background: #fafafa;
    transition: 0.3s all ease;
    cursor: pointer;
    color: #444;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
}

    .btn-pseudo:hover {
        background: #eee;
        border-color: var(--darkBlue);
        color: var(--darkBlue);
        outline: none;
    }

    .btn-pseudo:focus {
        outline: none;
    }

.pseudo-type {
    position: relative;
    justify-content: space-between;
    margin-bottom: 4px;
}

    .pseudo-type > div:last-child {
        border-radius: 20px;
        border: 1px solid #ddd;
        width: 120px;
    }

    .pseudo-type > div div {
        font-size: 12px;
        width: 50%;
        justify-content: center;
        height: 25px;
        border-radius: 12px;
        padding-bottom: 2px;
        cursor: pointer;
        transition: 0.3s all ease;
    }

    .pseudo-type > div > div:hover {
        background: #eee;
    }

    .pseudo-type > div div.selected {
        color: white;
        background: #777;
    }

.pseudo-overlay {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
}

.bulk-img {
    border-radius: 10px;
    background: #f5f5f5;
    padding: 15px;
    margin-top: 8px;
}

.bulk-email-header {
    color: #575757;
    font-weight: 600;
}

.file-uploader_droparea-info {
    text-align: center;
}

.img-file-types {
    font-size: 12px;
}

.bulk-file-list ul li {
    font-size: 14px;
    padding-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulk-file-list.overflow-y {
    overflow-y: scroll;
}

.bulk-file-list {
    max-height: 115px;
}

    .bulk-file-list i {
        color: red;
        padding-right: 6px;
        cursor: pointer;
    }

    .bulk-file-list ul {
        padding-left: 0;
        list-style: none;
        margin-bottom: 0;
        margin-top: 15px;
    }

.bulk-contact.content {
    box-shadow: none !important;
    border-top: 2px solid #ddd;
    padding-top: 1rem;
}

    .bulk-contact.content > span {
        font-size: 20px;
    }

.bulk-email-user span {
    font-size: 15px;
    color: #444;
}

.bulk-email-user:hover span {
    color: #777;
}

.bulk-email-check {
    display: flex;
    flex-wrap: wrap;
    padding: 5px 0px;
    font-size: 14px;
}

    .bulk-email-check div:first-child {
        width: 90%;
    }

    .bulk-email-check div:last-child {
        width: 10%;
        text-align: center;
    }

/*bulk - end*/

.lead-archive-inner {
    display: flex;
}

    .lead-archive-inner > div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: 1;
    }

        .lead-archive-inner > div > label {
            margin: 0;
            font-size: 0.9vw;
            color: #777;
        }

        .lead-archive-inner > div > span {
            font-size: 1vw;
            font-weight: 600;
        }

            .lead-archive-inner > div > span.won {
                color: var(--customGreen);
            }

            .lead-archive-inner > div > span.lost {
                color: var(--customRed);
            }

            .lead-archive-inner > div > span.archived {
                color: var(--navy);
            }

.lead-archive-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.lead-archive-top {
    display: flex;
    justify-content: space-between;
    margin: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

    .lead-archive-top.won {
        background: var(--customGreen_7);
    }

    .lead-archive-top.lost {
        background: var(--customRed_7);
    }

    .lead-archive-top.archived {
        background: var(--navy);
    }

    .lead-archive-top > div {
        flex: 1;
    }

.lead-archived-tags {
    align-items: center;
}

.lead-archive-status {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .lead-archive-status > a {
        margin: 0 auto;
        width: max-content;
    }

    .lead-archive-status > h5 {
        font-size: 1.5rem;
        font-weight: 400;
        color: #fdfdfd;
    }

    .lead-archive-status > span {
        border-radius: 0.25rem;
        text-transform: uppercase;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 1px;
        padding: 0.1rem 1rem;
        line-height: 1.5;
        margin: 0.25rem 0;
        display: block;
        width: max-content;
    }

        .lead-archive-status > span.won {
            border: 1px solid #95eca8;
            color: #e2ffe9;
        }

        .lead-archive-status > span.lost {
            color: #ffdcdc;
            border: 1px solid #f5b1b1;
        }

        .lead-archive-status > span.archived {
            color: #c9d6ef;
            border: 1px solid #b7becc;
        }

.lead-archive-info > div {
    display: flex;
    flex-direction: column;
    margin: 0.15rem 0;
}

    .lead-archive-info > div > label {
        font-size: 0.8rem;
        color: rgb(253 253 253 / 0.8);
        margin: 0;
    }

    .lead-archive-info > div > span {
        color: #fdfdfd;
        font-size: 1rem;
    }

.supp-label {
    font-weight: 700;
    text-decoration: underline;
    color: var(--customRed);
}

.file-uploader_droparea > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-wrap {
    display: flex;
    flex-direction: column;
}

.settings-right > div {
    animation: fade-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.settings-tabs {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    align-items: flex-start;
}

    .settings-tabs > li {
        /*flex: 1;*/
        opacity: 0.5;
        transition: 0.5s all ease;
        cursor: pointer;
    }

        .settings-tabs > li:hover {
            opacity: 1;
        }

        .settings-tabs > li.currentTab {
            background: #fdfdfd;
            border-radius: 0.25rem;
            box-shadow: var(--shadow1);
            opacity: 1;
        }

            .settings-tabs > li.currentTab > a {
                color: var(--darkBlue) !important;
                font-weight: 600;
            }

        .settings-tabs > li > a {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0.25rem 0.5rem;
            text-align: center;
            color: #444;
            cursor: pointer;
            transition: 0.5s all ease;
        }

            .settings-tabs > li > a > i {
                font-size: 1.5rem;
            }

            .settings-tabs > li > a > span {
                font-size: 0.8rem;
                margin-top: 0.25rem;
            }

.settings-social-wrap > div:first-child,
.mail-fields-wrap > div:first-child,
.rules-wrap > div:first-child,
.contact-body > div:first-child,
.theme-body > div:first-child {
    margin-top: 0;
}

.google-settings-wrap textarea {
    min-height: 10rem;
}

.company-wrap {
    display: flex;
}

.company-main-info {
    padding: 1rem;
    border-right: 1px solid #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .company-main-info > h3 {
        margin: 0;
        font-size: 1.2rem;
        color: var(--darkBlue);
    }

.company-image {
    margin-bottom: 1rem;
}

    .company-image > img {
        width: 12rem;
        height: 12rem;
        border-radius: 50%;
        box-shadow: var(--shadow1);
        object-fit: cover;
    }

.icon-textbox {
    position: relative;
}

    .icon-textbox > input,
    .icon-textbox > div > input {
        width: 100%;
    }

    .icon-textbox.right > input,
    .icon-textbox.right > div > input {
        padding: 0.5rem 3rem 0.5rem 0.75rem !important;
    }

    .icon-textbox > span:hover,
    .icon-textbox > div > a:hover {
        opacity: 1;
    }

    .icon-textbox > span,
    .icon-textbox > div > a {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        color: #222;
        opacity: 0.2;
        cursor: pointer;
        text-decoration: none;
    }

    .icon-textbox.right > span,
    .icon-textbox.right > div > a {
        right: 1rem;
    }

.mail-img {
    width: 30%;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mail-fields-wrap {
    flex: 1;
    position: relative;
}

.mail-fields-parent {
    display: flex;
}

.mail-server-parent {
    position: relative;
}

    .mail-server-parent > button {
        position: absolute;
        right: 0;
        top: 0;
    }

.custom-btn-circle {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: var(--shadow1);
    cursor: pointer;
    transition: 0.5s all ease;
    border: 0;
}

    .custom-btn-circle.add {
        color: var(--darkBlue);
        color: #fdfdfd;
    }

    .custom-btn-circle.remove {
        color: var(--customRed_3);
        background: #fdfdfd;
    }

        .custom-btn-circle.remove:hover {
            color: var(--customRed);
        }

    .custom-btn-circle:hover {
        box-shadow: var(--shadow2);
    }

.custom-btn-squircle {
    border-radius: 0.5rem;
    border: 0;
    font-size: 1.2rem;
    width: 2rem;
    height: 2rem;
    box-shadow: var(--shadow1);
    transition: 0.5s all ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .custom-btn-squircle:hover {
        box-shadow: var(--shadow2);
    }

    .custom-btn-squircle.add {
        background: var(--darkBlue);
        color: #fdfdfd;
    }

.mail-server-parent > div.mail-fields-parent:not(:last-child) {
    border-bottom: 1px solid #eee;
    margin-bottom: 1rem;
}

.lead-req-margin{
    margin-top:1.5rem !important;
}

.sub-component-header > div > h3 > a,
.more-question {
    margin-left: 1rem;
    font-size: 1.2rem;
    color: var(--darkBlue_3);
    transition: 0.5s all ease;
    text-decoration: none;
}

    .sub-component-header > div > h3 > a:hover,
    .more-question:hover {
        color: var(--darkBlue);
    }

.remove-mail {
    position: absolute;
    right: 0;
    top: 0;
}

.permission-name {
    display: flex;
    margin: 2rem 0;
}

.name-textbox {
    display: flex;
    align-items: center;
    flex: 1;
}

    .name-textbox > i {
        transition: 0.5s all ease;
        color: #444;
        opacity: 0.2;
        margin: 0 2rem 0 1rem;
    }

    .name-textbox > input {
        border: 0;
        border-bottom: 2px solid transparent;
        font-size: 1.3rem;
        font-weight: 600;
        color: #444;
        transition: 0.2s all ease;
        flex: 1;
        padding: 0 0 0.25em;
    }

        .name-textbox > input:hover {
            border-bottom: 2px solid #ddd;
            color: #333;
        }

            .name-textbox > input:hover ~ i {
                opacity: 0.75;
            }

        .name-textbox > input:focus {
            color: #222;
            border-bottom: 2px solid #999;
        }

            .name-textbox > input:focus ~ i {
                opacity: 1;
            }

.perm-accordions-header {
    display: flex;
    justify-content: space-between;
}

    .perm-accordions-header > span {
        font-size: 1rem;
        font-weight: 500;
    }

    .perm-accordions-header > p {
        margin: 0;
    }

.btn-row > button:not(:last-child) {
    margin-right: 1rem;
}

.cons-parent.error {
    border: 1px solid var(--customRed);
}

.cons-parent {
    display: flex;
    flex-direction: column;
    height: 10rem;
    overflow-y: scroll;
    font-size: 1rem;
    width: 100%;
    border: 1px solid #eee;
    border-radius: 0.25rem;
    padding: 0.25rem;
}

    .cons-parent > label {
        margin: 0.25rem 0;
    }

        .cons-parent > label > span {
            display: block;
            width: 100%;
            padding: 0.25rem 1rem;
            cursor: pointer;
            border-radius: 0.25rem;
            transition: 0.5s all ease;
        }

            .cons-parent > label > span:hover {
                background: var(--boxGrayHover);
            }

        .cons-parent > label > input[type="checkbox"] {
            display: none;
        }

            .cons-parent > label > input[type="checkbox"]:checked + span {
                background: var(--darkBlue_3);
            }

.todo-comments {
    max-height: 5rem;
    transition: 0.4s all ease;
    margin-top: 0.5rem;
    color: #777;
    font-size: 0.9rem;
    overflow-y: scroll;
    padding: 0.25rem;
    border-top: 1px solid #eee;
}

    .todo-comments:not(.showComment) {
        max-height: 0;
        overflow: hidden;
        padding: 0 0.25rem;
    }

.todo-parent {
    background: var(--boxGray);
    padding: 1rem;
    height: calc(100vh - 6rem);
    display: flex;
    flex-direction: column;
}

.todo-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #ccc;
    height: 2.5rem;
}

.todo-type-tab {
    display: flex;
    align-items: flex-end;
}

    .todo-type-tab > a.current {
        font-size: 1.5rem;
        font-weight: 600;
        opacity: 1;
    }

    .todo-type-tab > a {
        color: #333;
        transition: 0.5s all ease;
        opacity: 0.4;
        cursor: pointer;
        font-weight: 400;
        font-size: 1.4rem;
        text-decoration: none;
    }

        .todo-type-tab > a:hover {
            opacity: 0.75;
        }

.todo-tab {
    display: flex;
    align-items: center;
}

    .todo-tab > a.current {
        opacity: 1;
        border-bottom: 2px solid var(--darkBlue_3);
    }

    .todo-tab > a:hover {
        opacity: 0.75;
    }

    .todo-tab > a {
        text-transform: uppercase;
        font-size: 1rem;
        letter-spacing: 4px;
        font-weight: 600;
        padding-bottom: 0.25rem;
        border-bottom: 2px solid transparent;
        color: var(--darkBlue);
        opacity: 0.4;
        cursor: pointer;
        transition: 0.5s all ease;
        text-decoration: none;
    }

        .todo-tab > a:first-child,
        .todo-type-tab > a:first-child {
            margin-right: 1rem;
        }

.todo-body {
    padding: 1rem;
    flex: 1;
    overflow-y: scroll;
}

.todo-body-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1rem;
    align-items: flex-start;
}

.todo-block,
.deal-block {
    background: #fff;
    padding: 1rem;
    box-shadow: var(--shadow1);
    border-radius: 1rem;
    animation: fade-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

    .todo-block > div:first-child {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .todo-block > div:first-child > h5 {
            margin: 0;
            font-size: 1rem;
            color: #777;
            font-weight: 600;
        }

        .todo-block > div:first-child > button {
            width: 2rem;
            height: 2rem;
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 0;
            transition: 0.4s all ease;
            cursor: pointer;
        }

.todo-btn > button {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 0;
    transition: 0.2s all ease;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.8;
}

.todo-block > div:first-child > button.done:hover {
    background: var(--customGreen);
    color: #fdfdfd;
}

.todo-block > div:first-child > button.done {
    background: var(--customGreen_1);
    color: var(--customGreen);
}

.todo-block > div:first-child > button.undo {
    background: var(--darkBlue_1);
    color: var(--darkBlue);
}

    .todo-block > div:first-child > button.undo:hover {
        background: var(--darkBlue);
        color: #fdfdfd;
    }

.todo-inner {
    margin-top: 0.5rem;
}

    .todo-inner > p {
        font-size: 1.5rem;
        font-weight: 600;
        color: #333;
        margin: 0;
    }

.lead-todo-info {
    display: inline-block;
    font-size: 1rem;
    color: #777;
}

    .lead-todo-info > a {
        margin-left: 0.25rem;
        color: var(--darkBlue);
        font-weight: 600;
        cursor: pointer;
    }

.todo-btn {
    display: flex;
    justify-content: space-evenly;
    margin-top: 0.5rem;
}

    .todo-btn > button.comment-btn {
        background: rgb(255 193 7 / 0.1);
        color: #ffc107;
    }

        .todo-btn > button.comment-btn:hover {
            /* background: #FFC107;
    color: #fdfdfd; */
            border: 2px solid rgba(255, 193, 7, 0.3);
            opacity: 1;
        }

    .todo-btn > button.edit-btn {
        background: rgba(100, 149, 237, 0.1);
        color: #6495ed;
    }

        .todo-btn > button.edit-btn:hover {
            /* background: #6495ed;
  color: #fdfdfd; */
            border: 2px solid rgba(100, 149, 237, 0.1);
            opacity: 1;
        }

    .todo-btn > button.delete-btn {
        background: var(--customRed_1);
        color: rgb(255, 128, 82);
    }

        .todo-btn > button.delete-btn:hover {
            /* background: var(--customRed);
  color: #fdfdfd; */
            border: 2px solid var(--customRed_3);
            opacity: 1;
        }

.lead-block-wrap {
    position: relative;
}

.lead-block {
    position: relative;
    padding: 0.75rem;
    background: #fff;
    margin: 0.5rem;
    border-radius: 4px;
    border: 1px solid #eee;
    overflow: hidden;
    animation: fade-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.lead-head {
    display: flex;
    align-items: center;
}

    .lead-head div img {
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 50%;
        object-position: center;
        margin-right: 0.75rem;
    }

.lead-head > a {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    display: block;
    color: #333;
    position: relative;
    z-index: 1;
}

    .lead-head > a > span {
        padding-right: 0.5rem;
        font-size: var(--lengthSm3);
        font-weight: 500;
        line-height: 1.1;
    }

.lead-body {
    display: flex;
    align-items: center;
    margin: 0.5rem 0;
    justify-content: space-between;
}

    .lead-body > div:first-child > img {
        width: 2rem;
        height: 2rem;
        object-fit: cover;
        border-radius: 50%;
        box-shadow: var(--shadow1);
    }

    .lead-body > div:last-child {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }

        .lead-body > div:last-child > span:first-child {
            font-size: 0.7rem;
            color: #999;
            font-weight: 400;
            text-align: right;
        }

        .lead-body > div:last-child > span:last-child {
            font-size: 0.8rem;
            color: #333;
            font-weight: 600;
        }

.lead-footer {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

    .lead-footer > div:last-child > span {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 50%;
        display: block;
        position: relative;
        z-index: 1;
        margin-bottom: 5px;
    }

.lead-block:not(:hover) .leads-hover {
    opacity: 0;
}

.leads-hover {
    display: flex;
    padding: 0.25rem;
    background: rgb(0 0 0 / 5%);
    border-radius: 2rem;
    transition: 0.5s all ease;
    position: relative;
    z-index: 1;
}

    .leads-hover > button:hover {
        opacity: 1;
        background: rgb(0 0 0 / 10%);
    }

    .leads-hover > button {
        border: 0;
        background: transparent;
        padding: 0;
        width: 1.25rem;
        height: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        border-radius: 50%;
        transition: 0.2s all ease;
        color: #333;
        opacity: 0.75;
        background: transparent;
        cursor: pointer;
    }

        .leads-hover > button:not(:last-child) {
            margin-right: 0.5rem;
        }

.lead-tags-strip {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 0.25rem;
}

    .lead-tags-strip > li {
        flex: 1;
    }

.lead-underlay {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: transparent;
}

.rent-lead-workspace {
    background: #45aed5;
}

.sales-lead-workspace {
    background: #88eb4c;
}

.exceed-lead-yellow {
    background: #f9fbcc !important;
    border: 1px solid #ffd577 !important;
}

.exceed-lead-orange {
    background: #fff0c7 !important;
    border: 1px solid #ffd577 !important;
}

.exceed-lead-red {
    background: #ffeeee !important;
    border: 1px solid #ffc6c6 !important;
}

/*.tab-right {
    padding: 2rem 1rem 0;
}*/

.workspace-stage-wrap {
    display: flex;
    /* width: calc(82vw - 2.5rem);
  height: calc(100vh - 11.5rem);
  overflow: scroll; */
}

.workspace-wrap {
    margin-top: 1rem;
    width: calc(100vw - 9rem);
    height: calc(100vh - 20.5rem);
    transition: 0.8s all ease;
    overflow-y: scroll;
    overflow-x: hidden;
}

.workspace-stage {
    flex: 1;
    min-width: 12rem;
    position: relative;
    margin: 0 0.5rem;
    height: max-content;
    border: 1px solid #eee;
    border-radius: 0.5rem;
    transition: 0.5s all ease;
    background: white;
}

    .workspace-stage:hover {
        border: 1px solid var(--darkBlue_1);
    }

    .workspace-stage:not(:hover) > .stage-left,
    .workspace-stage:not(:hover) > .stage-right {
        opacity: 0;
    }

.stage-left {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    transition: 0.5s all ease;
}

.stage-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    z-index: 1;
    transition: 0.5s all ease;
}

    .stage-left > button,
    .stage-right > button {
        background: #fdfdfd;
        width: 1.7rem;
        height: 1.7rem;
        border-radius: 50%;
        border: 0;
        box-shadow: var(--shadow2);
        color: var(--darkBlue);
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.2s all ease;
    }

        .stage-left > button:hover,
        .stage-right > button:hover {
            background: var(--darkBlue);
            color: #fdfdfd;
        }

.stage-head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.5rem 0.5rem 0 0.5rem;
    background: white;
    /*border-bottom: 1px solid #eee;*/
    border-radius: 8px;
}

.stage-head-upper {
    display: flex;
    /* justify-content: space-between; */
    padding: 0.25rem 0.5rem;
    /*background: #fff;*/
    /*border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;*/
    background: rgb(239 239 239 / 75%);
    border-radius: 4px;
}

    .stage-head-upper > div {
        flex: 1;
        display: flex;
        align-items: center;
    }

        .stage-head-upper > div:last-child {
            justify-content: flex-end;
        }

            .stage-head-upper > div:last-child > *:not(:last-child) {
                margin-right: 0.5rem;
            }

            .stage-head-upper > div:last-child > span {
                font-size: 1rem;
                margin: auto;
            }

                .stage-head-upper > div:last-child > span.won-stage,
                .stage-icons > span.won {
                    color: #ffc107;
                }

                .stage-head-upper > div:last-child > span.final-stage,
                .stage-icons > span.archive {
                    color: #20c997;
                }

        .stage-head-upper > div > label {
            margin: 0 auto;
            font-size: var(--lengthMd1);
            font-weight: 600;
            color: black;
        }

.stage-name {
    /*border-top: 1px solid #eee;*/
}

    .stage-name > p {
        margin: 0;
        padding: 0.25rem 0.5rem;
        text-align: center;
        color: #000000;
        font-weight: 600;
        font-size: var(--lengthMd1);
        text-transform: uppercase;
        /*background: var(--boxGray);*/
    }

.days-stage {
    padding: 0 0.5rem;
    font-size: 0.8rem;
    margin: auto auto auto 0;
    border-radius: 0.25rem;
    background: var(--darkBlue_1);
    font-weight: 600;
    color: var(--darkBlue);
}

.stage-footer {
    display: flex;
    background: var(--darkBlue_1);
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    border-top: 1px solid #eee;
    transition: 0.5s all ease;
}

    .stage-footer > div {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

        .stage-footer > div > button,
        .stage-footer > div > a {
            background: transparent;
            border: 0;
            font-size: 1rem;
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: 0.2s all ease;
            cursor: pointer;
            opacity: 0.75;
        }

            .stage-footer > div > button.edit-stage {
                color: var(--darkBlue);
            }

            .stage-footer > div > button.remove-stage {
                color: var(--customRed);
            }

            .stage-footer > div > a.more-stage {
                color: var(--navy);
            }

            .stage-footer > div > button:hover,
            .stage-footer > div > a:hover {
                background: var(--darkBlue_1);
                opacity: 1;
            }

.stage-total-value {
    color: #ff7f50;
}

.currency-breakdown.visible {
    transform: translateY(0);
    position: absolute;
    padding: 8px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 8px;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    animation: fadeInOpacity 0.5s both;
    backdrop-filter: blur(8px);
}

.currency-breakdown {
    display: none;
    transform: translateY(-8px);
    z-index: 1;
    transition: 0.3s all ease;
}

    .currency-breakdown ul {
        padding: 0;
        border: 0 !important;
        margin: 0;
    }

        .currency-breakdown ul li {
            text-align: left;
            font-weight: 600;
            padding: 2px 4px;
            font-size: 0.9rem;
        }

            .currency-breakdown ul li:not(:last-child) {
                border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            }

.more-stage-dropdown {
    top: -4.5rem;
    font-size: 0.9rem;
}

    .more-stage-dropdown > .dropdown-item {
        padding: 0.25rem 1rem;
        border-radius: 0 !important;
    }

.stage-footer > div.open > div.dropdown-menu {
    display: block;
}

.todo-body > div.todo-section:not(:last-child) {
    margin-bottom: 1rem;
}

.todo-date-div > h5 {
    font-size: 1.2rem;
    color: var(--darkBlue);
    margin-bottom: 0.5rem;
    background: var(--darkBlue_1);
    padding: 0.25rem 1rem;
    border-radius: 0.5rem;
    text-align: center;
}

.deal-parent {
    display: flex;
    flex-direction: column;
}

.deal-tab-parent {
    flex: 1;
    overflow-y: scroll;
    animation: fade-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.deal-detail-parent {
    padding: 1rem;
    background: #fdfdfd;
    box-shadow: var(--shadow2);
    border-radius: 1rem;
}

.custom-form.text-format > div > label {
    margin: 0;
}

.custom-form.text-format > div > span {
    line-height: 1.3;
    font-size: 1rem;
    color: #222;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-form.text-format > div > *:last-child {
    flex: 1;
}

.deal-footer {
    display: flex;
    justify-content: space-between;
    margin: 1rem 0 0;
}

.deal-amount-summary {
    display: flex;
    width: 50%;
    padding: 0.5rem;
    background: var(--boxGray);
    border-radius: 0.5rem;
}

    .deal-amount-summary > div {
        display: flex;
        align-items: center;
        flex-direction: column;
        flex: 1;
    }

        .deal-amount-summary > div > label,
        .deal-summary-left > div > label {
            margin: 0;
            font-size: 1rem;
            font-weight: 600;
            color: var(--darkBlue);
        }

        .deal-amount-summary > div > span,
        .deal-summary-left > div > span {
            font-size: 1.4rem;
            font-weight: 500;
            color: #444;
        }

.deal-summary-right {
    flex: 1;
}

.deal-total-summary > div:not(:last-child) {
    margin-right: 2rem;
}

.deal-total-summary > div {
    display: flex;
    align-items: flex-end;
}

    .deal-total-summary > div > label {
        margin: 0;
        color: #666;
        font-size: 1rem;
        margin-right: 0.5rem;
    }

    .deal-total-summary > div > span {
        font-size: 1.2rem;
        font-weight: 600;
        color: #555;
    }

.deal-section {
    margin: 1rem 0 2rem;
}

    .deal-section > h5 {
        margin: 0 0 1rem;
        font-size: 1.1rem;
        font-weight: 600;
        color: #222;
    }

.deal-footer.create {
    justify-content: center;
}

.deal-summary {
    display: flex;
    flex-direction: column;
}

.deal-summary-left {
    padding: 0.5rem;
    background: var(--darkBlue_1);
    border-radius: 0.5rem;
    display: flex;
    margin: 1rem 0;
}

    .deal-summary-left > div {
        display: flex;
        flex-direction: column;
        flex: 1;
        text-align: center;
    }

.deal-property {
    margin: 0;
    font-size: 1rem;
    background: var(--darkBlue_1);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    color: var(--darkBlue);
    display: flex;
    align-items: center;
}

    .deal-property > i {
        margin-right: 0.5rem;
    }

.deal-summary-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.5rem;
    background: #fdfdfd;
    padding: 1rem;
    border: 1px solid #eee;
}

    .deal-summary-inner > div {
        display: flex;
        align-items: flex-end;
    }

        .deal-summary-inner > div > label {
            font-size: 0.9rem;
            font-weight: 400;
            color: #777;
            margin: 0;
            width: 40%;
        }

        .deal-summary-inner > div > span {
            font-size: 1rem;
            color: #444;
            font-weight: 600;
        }

.amount-credit-balance {
    color: var(--customGreen);
}

.deal-invoice-calendar {
    margin-top: 1rem;
}

.deal-amount-summary.create-deal-summary {
    width: 100%;
    margin: 1rem 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
}

.invoice-modal-body > .deal-amount-summary {
    width: 100%;
    margin-bottom: 1rem;
}

.invoice-modal-inner > div > span {
    font-size: 1.2rem;
    color: #333;
    font-weight: 600;
}

.invoice-modal-check > label:not(:last-child) {
    margin-bottom: 0.5rem;
}

.invoice-modal-check > label {
    display: flex;
    align-items: center;
    margin: 0;
}

    .invoice-modal-check > label > i {
        margin-right: 0.5rem;
        color: #000;
        opacity: 0.4;
        font-size: 1rem;
    }

        .invoice-modal-check > label > i.sent,
        .invoice-checkbox > label > i.sent {
            color: var(--customGreen);
            opacity: 1;
        }

.invoice-checkbox {
    justify-content: flex-end;
}

    .invoice-checkbox > label:not(:last-child) {
        margin-bottom: 0.25rem;
    }

    .invoice-checkbox > label {
        display: flex;
        align-items: center;
        margin: 0;
    }

        .invoice-checkbox > label > input[type="checkbox"] {
            margin-right: 0.5rem;
        }

.deal-block-parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 1rem;
}

.deal-block-body {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #eee;
}

    .deal-block-body > div {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }

        .deal-block-body > div > label {
            margin: 0;
            font-size: 0.9rem;
            color: #777;
        }

        .deal-block-body > div > span {
            font-size: 1rem;
            font-weight: 600;
            color: #333;
        }

.deal-block > h5 {
    font-size: 1.1rem;
    color: var(--darkBlue);
    font-weight: 600;
    margin: 0;
}

.dt-btn-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

    .dt-btn-row > button:not(.custom-btn),
    .dt-btn-row > div > button,
    .dt-btn-row > a {
        font-size: 1.1rem;
        border: 0;
        background: transparent;
        cursor: pointer;
        transition: 0.2s all ease;
        opacity: 0.9;
        color: #444;
        padding: 0.25rem 0.5rem;
    }

        .dt-btn-row > button:hover,
        .dt-btn-row > div > button:hover,
        .dt-btn-row > a:hover {
            opacity: 1;
        }

        .dt-btn-row > button.red,
        .dt-btn-row > div > button.red,
        .dt-btn-row > a.red {
            color: var(--customRed);
        }

        .dt-btn-row > button.green,
        .dt-btn-row > div > button.green,
        .dt-btn-row > a.green {
            color: var(--customGreen);
        }

        .dt-btn-row > button.blue,
        .dt-btn-row > div > button.blue,
        .dt-btn-row > a.blue {
            color: var(--darkBlue);
        }

    .dt-btn-row > *:not(:last-child) {
        margin-right: 0.5rem;
    }

.req-tab-parent {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1;
    width: 40%;
}

    .req-tab-parent > div {
        margin: 0;
    }

/*.modal-body {
    padding: 1.5rem;
}*/

.hide {
    display: none;
}

.lead-popover .popover-content {
    padding: 1rem;
    width: 20rem;
    max-height: 15rem;
    overflow-y: scroll;
}

.lead-popover.lead-info-popover .popover-content {
    display: flex;
    width: 25rem;
}

    .lead-popover.lead-info-popover .popover-content > div {
        flex-direction: column;
        align-items: flex-start;
        flex: 1;
    }

        .lead-popover.lead-info-popover .popover-content > div > label {
            width: 100%;
        }

.lead-popover .popover-content > div {
    display: flex;
    align-items: flex-end;
}

    .lead-popover .popover-content > div > label {
        margin: 0;
        font-size: 0.9rem;
        color: #555;
        width: 40%;
    }

    .lead-popover .popover-content > div > span {
        flex: 1;
        font-size: 1rem;
        color: #444;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.popover,
.tippy-popper {
    max-width: none;
}

.contact-details-head {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 0.25rem;
}

    .contact-details-head > div {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .contact-details-head._5 > div {
        flex: none;
        width: 20%;
    }

    .contact-details-head > div > label {
        margin: 0;
        font-size: 0.9rem;
        color: #555;
    }

    .contact-details-head > div > span {
        font-size: 1rem;
        font-weight: 500;
        color: #222;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.contact-details-wrap {
    height: 100vh;
    overflow-y: scroll;
    padding: 2rem 1rem;
}

    .contact-details-wrap.with-width {
        width: calc(100vw - 16rem);
        transition: 0.8s all ease;
    }

.maximized .contact-details-wrap.with-width {
    width: calc(100vw - 3rem);
}

.maximized .workspace-wrap {
    width: calc(100vw - 22rem);
}

.global-search-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 30rem;
    display: inline-block;
}

.leadclass {
    background-color: #f79232;
}

.dealclass {
    background-color: #1c72f3;
}

.propertiesclass {
    background-color: #29b129;
}

.supplier-main-content {
    display: flex;
    flex-direction: column;
}

.supplier-inner {
    flex: 1;
    overflow-y: scroll;
}

    .supplier-inner > div:first-child {
        margin-bottom: 1rem;
    }

.stage-icons {
    position: relative;
}

    .stage-icons > span {
        position: absolute;
        left: -1.4rem;
        top: 50%;
        transform: translate(0, -50%);
    }

.form-btn > button {
    justify-content: center;
    padding: 0.75rem 0.5rem;
}

.form-btn:not(.without-label) > button {
    margin-top: 1.5rem;
}

.loader-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.email-msg-wrap {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

.email-msg-body {
    flex: 1;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
}

.email-msg-table > thead > tr > th {
    padding: 0.5rem;
    background: var(--darkBlue_1);
    color: var(--darkBlue);
    font-size: 1rem;
}

.email-msg-table > tbody > tr > td {
    padding: 0.5rem;
    color: #333;
    border: 1px solid #eee;
}

.email-msg-pagination {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 2px solid var(--darkBlue_3);
    padding: 0.25rem;
    border-radius: 0.5rem;
}

.email-msg-footer {
    padding: 1rem;
    display: flex;
    justify-content: center;
    background: var(--boxGray);
    border-radius: 0.5rem;
}

.email-msg-pagination > li:not(:last-child) {
    margin-right: 0.25rem;
}

.email-msg-pagination > li > a {
    display: flex;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    transition: 0.5s all ease;
    border-radius: 0.5rem;
    cursor: pointer;
}

    .email-msg-pagination > li > a:hover {
        background: var(--darkBlue_1);
        color: var(--darkBlue) !important;
    }

    .email-msg-pagination > li > a.chosen {
        background: var(--darkBlue);
        color: #fdfdfd;
        font-weight: 600;
    }

#img-heart {
    width: 1.8rem;
    height: 1.8rem;
    display: block;
    /*position: absolute;*/
    right: 10.3rem;
    top: 40%;
    transform: translate(0, -50%);
    opacity: 1;
    margin-right: 5px;
    margin-left: 0;
}

#todoCount {
    transform: translate(20%, 0);
    width: 0.75rem;
    height: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    background: #fdfdfd;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--customRed);
    box-shadow: var(--shadow1);
    opacity: 1;
}

    #todoCount:not(.showToDoCount) {
        display: none;
    }

#img-heart > img {
    width: 60%;
    height: 60%;
}

.report-top-icons {
    flex-direction: column;
}

    .report-top-icons > span {
        margin: 0 !important;
        font-style: italic;
        text-align: center;
        color: var(--darkBlue);
        font-weight: 600;
    }

    .report-top-icons > div {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 0.5rem;
    }

        .report-top-icons > div > button:first-child {
            margin-right: 0.5rem;
        }

        .report-top-icons > div > button {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            border: 0;
            background: var(--boxGrayHover);
            color: #333;
            transition: 0.2s all ease;
            cursor: pointer;
        }

            .report-top-icons > div > button:hover {
                background: var(--darkBlue_1);
            }

            .report-top-icons > div > button > img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

#reportHeader ~ .panel.panel-default .table-responsive table {
    border-collapse: collapse !important;
}

#reportHeader ~ .panel.panel-default .table-responsive td {
    font-size: 0.9rem;
}

.bi-report-header {
    width: 100%;
    min-width: none;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    font-size: 1rem;
    color: #555;
    font-weight: 500;
}

.page-nav > span.pull-right {
    font-size: 1rem;
    margin-right: 0 !important;
}

.page-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 20px;
    background: var(--boxGray);
}

    .page-nav > div:first-child {
        display: flex !important;
        align-items: center;
    }

    .page-nav > .pagination {
        order: 3;
    }

    .page-nav > .pager {
        list-style: none;
        display: flex;
        order: 2;
        padding: 0;
        margin: 0 1.5rem !important;
    }

    .page-nav > span.pull-right {
        font-size: 1rem;
        margin-right: 0;
    }

    .page-nav > .pager > li {
        border-radius: 50%;
        background: ghostwhite;
        width: 2.5rem;
        height: 2.5rem;
        transition: 0.25s all ease;
        box-shadow: var(--shadow2);
        border: 1px solid transparent;
        display: flex;
        justify-content: center;
    }

        .page-nav > .pager > li > a {
            font-size: 2rem;
            color: var(--darkBlue);
            cursor: pointer;
            line-height: 0.9;
        }

    .page-nav > .pager li:first-child {
        margin-right: 0.5rem;
    }

    .page-nav > .pager li.disabled {
        background: white;
        box-shadow: none;
    }

    .page-nav > span.pull-right span {
        margin: 0 1.5rem;
        font-size: 1rem;
        color: #333;
    }

    .page-nav .pagination > li {
        transition: all 0.25s ease;
        position: relative;
        border-radius: 0.5rem;
    }

        .page-nav .pagination > li:not(:last-child) {
            margin-right: 0.25rem;
        }

        .page-nav .pagination > li > a,
        .page-nav .pagination > li > span {
            padding: 0.5rem 1rem;
            display: flex;
            cursor: pointer;
            transition: 0.25s all ease;
            border-radius: 0.5rem;
            text-decoration: none;
            color: var(--darkBlue);
            font-size: 1rem;
        }

        .page-nav .pagination > li.active > a,
        .page-nav .pagination > li.active > span {
            color: #fff;
            background-color: var(--darkBlue);
            font-weight: 600;
        }

        .page-nav .pagination > li:not(.active) > a:hover {
            background: var(--darkBlue_1);
        }

    .page-nav > div:first-child select {
        display: none;
    }

    .page-nav > .pager li.disabled:hover {
        box-shadow: none;
    }

        .page-nav > .pager li.disabled:hover a {
            font-weight: 100;
        }

    .page-nav > .pager li:hover {
        cursor: pointer;
        box-shadow: 0 0 17px -1px rgba(0, 0, 0, 0.34);
    }

        .page-nav > .pager li:hover a {
            font-weight: bold;
        }

    .page-nav > .pager li.disabled:hover a {
        font-weight: 100;
    }

.workspace-legend {
    display: flex;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

    .workspace-legend > li:not(:last-child) {
        margin-right: 1.5rem;
    }

    .workspace-legend > li {
        font-size: 0.9rem;
        color: #333;
        display: flex;
        align-items: center;
    }

        .workspace-legend > li > span {
            /*margin-right: 0.5rem;
            width: 1rem;
            height: 1rem;*/
            /* cursor: pointer;
    border-radius:50px;*/
            width: 26px;
            height: 26px;
            border: 1px solid #ffcbcb;
            border-radius: 50%;
            margin: 0 0.75rem 0 0;
        }

            .workspace-legend > li > span.white,
            .info-drop-inner > ul > li > span.white {
                background: #fdfdfd;
                border: 1px solid #aaa;
            }

            .workspace-legend > li > span.yellow,
            .info-drop-inner > ul > li > span.yellow {
                background: #f9fbcc;
                border: 1px solid #ffd577;
            }

            .workspace-legend > li > span.orange,
            .info-drop-inner > ul > li > span.orange {
                background: #fff0c7;
                border: 1px solid #ffd577;
            }

            .workspace-legend > li > span.red,
            .info-drop-inner > ul > li > span.red {
                background: #ffeeee;
                border: 1px solid #ffc6c6;
            }

.bi-report-wrap {
    width: calc(100vw - 18.3rem);
    overflow: scroll;
    margin-top: 1rem;
}

.page-nav .pagination {
    padding: 0.2rem;
    border: 1px solid var(--darkBlue_3);
    border-radius: 0.5rem;
}

.panel-heading.drag-drop-panel div:first-child {
    color: #333;
    font-size: 0.9rem;
}

.bi-report-wrap table {
    border-collapse: collapse !important;
}

.dropdown-menu .list-group {
    box-shadow: 0px 0px 7px -2px rgba(0, 0, 0, 0.28);
}

.dropdown-menu .list-group-item.active {
    background-color: var(--darkBlue);
    border-color: var(--darkBlue);
}

.dropdown-menu .list-group-item:hover {
    cursor: pointer;
    background-color: var(--darkBlue);
    border-color: var(--darkBlue);
    color: #fff;
}

.dropdown-menu .list-group-item {
    padding: 5px 18px;
    font-size: 13px;
    text-transform: capitalize;
    transition: 0.25s all ease;
    text-align: left;
    display: flex;
    align-items: center;
}

.drag-drop-panel {
    background: #fdfdfd;
    border: 1px solid #eee;
    border-bottom: 0;
}

    .drag-drop-panel .btn-group.drag-drop-border {
        border: none;
        padding: 0px;
        margin: 5px;
        border-radius: 0.25rem;
        background: #f1f1ff;
    }

.grouping-panel-container {
    border: 1px solid #dee2e6;
    border-radius: 5px;
    background: white;
    margin-bottom: 5px;
    margin-top: 5px;
}

    .grouping-panel-container .glyphicon-remove {
        font-size: 14px !important;
        color: #777;
        margin-left: -15px !important;
    }

.empty-preview {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    font-weight: bold;
    font-size: 25px;
    color: #c3bfbf;
}

    .empty-preview i {
        color: #c3bfbf;
        font-size: 184px;
        padding-bottom: 15px;
    }

#subscription-plan {
    animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

    #subscription-plan:not(.show-subscription-plan) {
        display: none;
    }

#myTable {
    padding: 16px 32px;
    background: linear-gradient( to right, rgba(253, 253, 253, 0.8), rgba(250, 250, 250, 0.8) );
    border-radius: 8px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2), 0px 1px 14px -8px rgba(0, 0, 0, 0.14), 0px 2px 10px -6px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(10px);
    z-index: 1;
    margin: auto;
    margin-top: 2rem;
    border-collapse: collapse;
    overflow: hidden;
    position: relative;
    width: 100%;
}

    #myTable > tbody > tr:first-child {
        background: linear-gradient( to right, rgba(253, 253, 253, 0.4), rgba(250, 250, 250, 0.4) );
        box-shadow: 0 1px 16px -12px rgba(0, 0, 0, 0.8);
        position: relative;
        overflow: hidden;
    }

    #myTable th {
        padding: 18px 12px;
        background: #f0eff7;
        color: var(--darkBlue);
        font-weight: 600;
    }

        #myTable th span {
            display: flex;
            flex: 1;
            justify-content: center;
        }

        #myTable th > span:nth-child(2) {
            justify-content: center;
            padding: 0.25rem;
            line-height: 0.6;
            font-weight: 600;
            font-size: 1.8rem;
        }

        #myTable th > span:first-child {
            background: var(--darkBlue_1);
            border: 1px solid #eee;
            color: var(--darkBlue);
            border-radius: 0.25rem;
            font-weight: 100;
            font-size: 0.9rem;
            padding: 0 0.5rem;
        }

        #myTable th > span:last-child {
            font-size: 0.8rem;
        }

    #myTable > tr:nth-child(odd) {
        background: #f9f9f9;
    }

.check {
    color: var(--customGreen);
}

.cross {
    color: var(--customRed);
}

#myTable > tr:not(:first-child) > td:not(:first-child) {
    text-align: center;
}

#myTable tr > td:first-child {
    padding: 0.8rem 2.5rem;
    color: #666;
    font-size: 1rem;
    width: 45%;
    letter-spacing: 0.2px;
    word-spacing: 0.5px;
}

#myTable > tbody > tr:not(:first-child) > td:not(:first-child) {
    text-align: center;
    font-size: 16px;
    border-bottom: 1px solid #ddd;
}

#myTable > tbody > tr:not(:first-child):not(:last-child) > td:first-child {
    background: rgba(129, 134, 240, 0.1);
}

#myTable button {
    padding: 1rem 0;
    /* margin: 8px 0; */
    background: transparent;
    border: 0;
    width: 100%;
    cursor: pointer;
    font-size: 1rem;
    cursor: pointer;
    text-transform: capitalize;
    letter-spacing: 1.2px;
    font-weight: 700;
    transition: 0.3s all ease;
    background: linear-gradient(to right, #188788 0%, #6aa0f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: 0.3s all ease;
    /* border-top: 4px solid; */
    text-transform: uppercase;
    border-bottom: 4px solid transparent;
}

    #myTable button.subscribed {
        border-bottom: 4px solid #328fa9 !important;
        box-shadow: inset 0 -23px 36px -29px rgba(103, 174, 183, 0.45);
    }

    #myTable button:hover {
        border-bottom: 4px solid #328fa9;
    }

    #myTable button:focus {
        outline: none;
    }

#myTable > tbody > tr:first-child td {
    text-align: center;
    padding: 4px 8px;
    position: relative;
}

#myTable > tbody > tr:last-child {
    box-shadow: 0 1px 8px -4px rgba(0, 0, 0, 0.8);
}

#myTable > tbody > tr:first-child > td > span:first-child {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 12px;
    color: #8086f0;
    font-weight: 600;
}

#myTable > tbody > tr:first-child > td > span:last-child {
    font-size: 32px;
    font-weight: 600;
    color: #686dc3;
    display: block;
    margin-top: -6px;
}

#myTable > tbody > tr:first-child > td > div {
    display: flex;
    flex-direction: column;
    position: relative;
}

    #myTable > tbody > tr:first-child > td > div > span:first-child {
        position: absolute;
        left: 20px;
        top: 4px;
        font-size: 24px;
        font-weight: 600;
        color: #686dc3;
    }

    #myTable > tbody > tr:first-child > td > div > span:nth-child(2) {
        font-size: 32px;
        font-weight: 600;
        color: #686dc3;
        display: block;
    }

    #myTable > tbody > tr:first-child > td > div > span:nth-child(3) {
        font-weight: 600;
        color: #686dc3;
        display: block;
        margin-top: -6px;
    }

    #myTable > tbody > tr:first-child > td > div > span:nth-child(4) {
        font-weight: 600;
        color: #686dc3;
        display: block;
    }

.modal {
    animation: scale-in-center-modal 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.pdf-content-modal {
    width: 100%;
    height: 75vh;
    position: relative;
    z-index: 1;
}

.subscription-form > div > span {
    font-size: 18px;
    font-weight: 600;
    color: var(--darkBlue);
    line-height: 0.8;
    min-height: 22px;
}

.stepsIndicator::before {
    content: "";
    position: absolute;
    width: 93%;
    top: 33px;
    height: 1px;
    /* margin: 0 33px; */
    z-index: 1;
    left: 30px;
    background: #eee;
}

.stepsIndicator > div.currentStep {
    color: #fdfdfd;
    background: var(--darkBlue);
    box-shadow: 0 0 10px -2px rgba(0, 123, 255, 1);
}

.payment-selection input {
    display: none;
}

.payment-selection,
.payment-selection > form {
    display: flex;
    flex: 1;
    margin-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

    .payment-selection label {
        flex: 1;
        text-align: center;
        margin: 0;
        border: 1px solid #cbcae3;
        padding: 8px;
        color: var(--darkBlue);
        font-size: 14px;
        cursor: pointer;
        transition: 0.25s all ease;
        min-height: 42px;
    }

        .payment-selection label:hover {
            background: #e9e9f7;
        }

    .payment-selection > form > label:first-child {
        border-right: 0;
    }

    .payment-selection label.selected {
        background: #e9e9f7;
        /* color: #fdfdfd; */
        font-weight: 600;
        font-size: 15px;
    }

.stepsPage {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
}

    .stepsPage > div {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 35px;
        color: rgba(36, 71, 167, 0.5);
        padding: 10px;
        background: transparent;
        transition: 0.4s all ease;
        cursor: pointer;
        z-index: 1;
        width: 50px;
        height: 50px !important;
        border-radius: 50%;
    }

.stepsContainer > div:not(:last-child) {
    padding: 0 32px;
}

.stepsPage > div:hover {
    color: rgba(36, 71, 167, 1);
    background: rgba(0, 0, 0, 0.15);
}

.stepsPage > div.dis {
    background: none !important;
    color: #cccccc !important;
    cursor: not-allowed !important;
}

.stepsContainer > div:not(.stepsPage) {
    z-index: 1;
    position: relative;
}

.subscription-details {
    margin-top: -18px;
}

.sub-first {
    display: flex;
}

.sub-details {
    background: #f9f9f9;
    width: 60%;
    padding: 1rem;
    border-left: 15px solid #e0e0e0 !important;
    border: 1px solid #e0e0e0;
}

    .sub-details > div {
        display: flex;
        align-items: center;
    }

        .sub-details > div > div {
            display: flex;
            position: relative;
            flex-direction: column;
            flex: 1;
            margin: 12px 0;
        }

            .sub-details > div > div > span:first-child {
                font-size: 0.9rem;
                color: #666;
                letter-spacing: 0.5px;
                word-spacing: 0.5px;
            }

            .sub-details > div > div > span:last-child {
                font-size: 1.6rem;
                font-weight: 600;
                color: var(--darkBlue);
                line-height: 0.8;
            }

.sub-text {
    font-size: 20px !important;
    padding: 8px 48px;
    color: #666;
    display: flex;
    flex-direction: column;
}

.export-to-excel {
    text-align: right;
    margin-top: -5px;
    font-size: 11px;
    font-style: oblique;
}

.note-text {
    font-size: 11px;
    font-style: oblique;
    text-align: right;
    color: #026fe2;
    text-transform: capitalize;
    line-height: 1.4;
}

.dev-report-loader {
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.bulk-img {
    border-radius: 10px;
    background: #f5f5f5;
    padding: 15px;
    margin-top: 8px;
}

.bulk-contact {
    padding-bottom: 10px;
    text-align: left;
    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.28);
}

.bulk-email-header {
    color: #575757;
    font-weight: 600;
}

.bulk-email-check div:first-child p {
    width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 0;
}

.bulk-email-contact.content .bulk-email-check div:first-child p {
    width: 175px !important;
}

.bulk-email-user span {
    font-size: 15px;
    color: #444;
}

.bulk-email-user:hover span {
    color: #777;
}

.income-commission-wrap {
    margin-top: 1rem;
}

.income-commission {
    flex-direction: row !important;
    align-items: flex-end;
}

    .income-commission > label {
        margin: 0 !important;
        font-size: 1rem !important;
    }

    .income-commission > span {
        font-size: 1.1rem;
        padding-left: 1rem;
        font-weight: 600;
        color: #444;
    }

.lead-report-wrap {
    display: flex;
}

.outline-btn {
    font-size: 0.9rem;
    border-radius: 0.25rem;
    border: 1px solid var(--darkBlue_1);
    background: transparent;
    color: var(--darkBlue);
    padding: 0.15rem 0.35rem;
    transition: 0.5s all ease;
    cursor: pointer;
}

.outline-btn-workspace {
    font-size: 1rem;
    border-radius: 0.25rem;
    border: 1px solid var(--darkBlue_1);
    background: transparent;
    color: var(--darkBlue);
    padding: 0.5rem;
    transition: 0.5s all ease;
    cursor: pointer;
}

.outline-btn > i {
    padding-right: 0.5rem;
    color: var(--darkBlue_3);
    transition: 0.5s all ease;
}

.outline-btn-workspace > i {
    color: var(--darkBlue_3);
    transition: 0.5s all ease;
}

.outline-btn:hover,
.outline-btn-workspace:hover {
    border: 1px solid var(--darkBlue_3);
}

    .outline-btn:hover > i,
    .outline-btn-workspace:hover > i {
        color: var(--darkBlue);
    }

.lead-report-header {
    text-align: center;
}

    .lead-report-header > label {
        text-align: center;
        color: var(--darkBlue);
        font-size: 1.1rem;
        font-weight: 600;
        padding-bottom: 0.25rem;
        border-bottom: 1px solid var(--darkBlue_1);
    }

.chart-container {
    width: 100%;
    padding: 1.5rem 0;
    height: 65vh !important;
}

.sales-report-wrap {
    height: 65vh;
    width: 100%;
    padding: 0 1rem;
}

.source-profit-wrap {
    height: 55vh !important;
    padding: 0 1rem;
}

    .source-profit-wrap > div.recharts-wrapper {
        width: calc(85vw - 8rem) !important;
    }

.power-bi-report-wrap {
    height: calc(100vh - 8rem);
}

.power-bi-container {
    margin-top: 1rem;
}

.visitor-detail-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.5rem;
}

    .visitor-detail-wrap > div {
        display: flex;
        align-items: flex-end;
    }

        .visitor-detail-wrap > div > label {
            margin: 0;
            font-size: 0.9rem;
            color: #555;
            width: 25%;
        }

        .visitor-detail-wrap > div > span {
            font-size: 1rem;
            color: #333;
            font-weight: 600;
            flex: 1;
        }

.steps-head > div > div > div > div:first-child {
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow2);
}

.steps-head > div > div > div > a {
    color: var(--darkBlue) !important;
    font-weight: 600 !important;
}

.steps-head {
    margin-top: -24px;
}

.lead-report-filter {
    display: flex;
    justify-content: space-between;
    flex-direction: row !important;
}

.facility-switch > div {
    display: flex;
    align-items: center;
}

    .facility-switch > div > label {
        margin: 0 1rem 0 0;
    }

.error-pdf {
    display: block;
    text-align: left;
}

    .error-pdf > a {
        margin: 0 0.25rem;
    }

.list-of-property {
    margin-top: 1rem;
}

.list-property-block {
    display: flex;
    align-items: stretch;
    width: max-content;
    border: #fdfdfd;
    box-shadow: var(--shadow2);
    animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

    .list-property-block > div:first-child {
        width: 5rem;
        height: 5rem;
        padding: 0.25rem;
    }

        .list-property-block > div:first-child > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .list-property-block > div:last-child {
        padding: 0.25rem 0.5rem 0.25rem 1rem;
        position: relative;
        display: flex;
        flex-direction: column;
    }

        .list-property-block > div:last-child > label {
            margin: 0;
            font-size: 0.9rem;
            font-weight: 600;
            color: #333;
        }

        .list-property-block > div:last-child > span {
            font-size: 0.8rem;
            color: #777;
        }

        .list-property-block > div:last-child > button {
            position: absolute;
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 50%;
            border: 0;
            background: #fdfdfd;
            color: var(--customRed_7);
            right: 0;
            top: 0;
            box-shadow: var(--shadow1);
            transition: 0.2s all ease;
            cursor: pointer;
            transform: translate(50%, -50%);
        }

            .list-property-block > div:last-child > button:hover {
                color: #fdfdfd;
                background: var(--customRed);
            }

.loyal-scheme-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 1rem;
    font-size: 1.2rem;
}

.login-wrap {
    height: 100vh;
    background: linear-gradient(45deg, var(--darkBlue), #8a1292);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .login-wrap > div {
        width: 70%;
        height: 80vh;
        padding: 1rem;
        min-height: 500px;
        background: #fff;
        border-radius: 0.5rem;
        display: flex;
        flex-direction: column;
        animation: scale-in-center-modal 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }

.login-inner {
    display: flex;
    flex: 1;
}

    .login-inner > div {
        flex: 1;
        padding: 0 1rem;
    }

.login-img {
    display: flex;
    align-items: center;
}

    .login-img > img {
        width: 100%;
        animation: fade-in 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    }

.login-fields {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    align-content: center;
    grid-gap: 1rem;
    position: relative;
}

.login-tabs {
    align-items: flex-end;
    display: flex;
}

    .login-tabs > a {
        flex: 1;
        text-align: center;
        padding: 0.25rem;
        font-size: 1rem;
        color: #000;
        text-transform: uppercase;
        font-weight: 600;
        text-decoration: none;
        opacity: 0.5;
        transition: 0.5s all ease;
        position: relative;
    }

        .login-tabs > a:hover {
            opacity: 1;
        }

        .login-tabs > a.current {
            font-size: 1.2rem;
            font-weight: 800;
            background-image: linear-gradient(to right, #2345a6, #4bf2d8);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: 1.5px;
            opacity: 1;
        }

            .login-tabs > a.current::before {
                content: "";
                display: block;
            }

.custom-form-login {
    display: grid;
    grid-gap: 1rem;
    width: 80%;
    margin: auto;
}

    .custom-form-login.supplier {
        width: 40%;
    }

    .custom-form-login > h1,
    .supplier-register > h1 {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 800;
        margin-bottom: 1rem;
        color: #3a3a3a;
    }

    .custom-form-login > div {
        position: relative;
    }

        .custom-form-login > div > i {
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            left: 1.75rem;
            font-size: 1rem;
            color: #666;
        }

        .custom-form-login > div > button,
        .payment-btn {
            background: #57b845;
            width: 100%;
            color: #fdfdfd;
            padding: 0.7rem;
            border-radius: 1.1rem;
            border: 0;
            font-weight: 700;
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .custom-form-login > div > button > div,
            .payment-btn > div {
                position: absolute;
                right: 1rem;
                width: 2rem;
                height: 2rem;
            }

            .custom-form-login > div > button > i,
            .payment-btn > i {
                padding-right: 0.5rem;
            }

        .custom-form-login > div > input {
            border-radius: 1.2rem;
            border: 0;
            background: #e6e6e6;
            width: 100%;
            padding: 0.75rem 1rem 0.75rem 4rem;
            font-size: 1rem;
            transition: 0.4s all ease;
        }

            .custom-form-login > div > input:hover {
                background: #eee;
            }

            .custom-form-login > div > input:focus {
                background: #fafafa;
            }

            .custom-form-login > div > input.error {
                border: 1px solid var(--customRed);
            }

.forgot-password {
    text-align: center;
}

    .forgot-password > a {
        color: #333;
        font-weight: 600;
        font-size: 0.9rem;
        opacity: 0.8;
        transition: 0.5s all ease;
        text-decoration: none;
    }

        .forgot-password > a:hover {
            opacity: 1;
        }

.login-wrap > img {
    position: absolute;
    bottom: 0;
    right: 50%;
    width: 10rem;
    transform: translate(50%, 0);
}

.login-password > span {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: 1rem;
    color: #333;
    transition: 0.5s all ease;
    opacity: 0.8;
}

    .login-password > span:hover {
        opacity: 1;
    }

.supplier-register {
    overflow-y: scroll;
    max-height: 58vh;
    padding-right: 0.25rem;
    margin-top: 3rem;
}

.supp-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    border: 1px solid var(--darkBlue);
    transform: skew(-5deg);
    font-size: 0.8rem;
    color: var(--darkBlue);
    padding: 0.25rem;
    border-radius: 0.25rem;
}

    .supp-toggle > div {
        width: 50%;
        text-align: center;
        cursor: pointer;
        padding: 0.25rem 1rem;
        transition: 0.3s all ease;
        font-weight: 500;
        border-radius: 0.25rem;
    }

        .supp-toggle > div:first-child {
            margin-right: 0.25rem;
        }

        .supp-toggle > div:hover {
            color: var(--darkBlue);
            font-weight: 600;
            background: var(--darkBlue_1);
        }

        .supp-toggle > div.selected {
            color: #fdfdfd;
            background: var(--darkBlue);
            font-weight: 600;
        }

.login-fields.supplier > div:last-child {
    animation: fade-in 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.recommendedProductsWrapper {
    position: fixed;
    z-index: 1;
    right: 1rem;
    bottom: 1rem;
    height: 70%;
    max-width: 25rem;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    background: #fdfdfd;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: var(--shadow6);
}

.recommendedHeadWrap {
    position: fixed;
    padding: 8px 0px 8px 0px;
    background: #fff;
    z-index: 12;
    margin-top: -10px;
    width: 335px;
}

.recommendedProductsWrapper.minize .recommendedHeadWrap {
    position: initial !important;
    width: inherit;
    margin-top: 0;
    background: none;
    padding: 0;
    z-index: 0;
}

.recommendedProductsWrapper.minize {
    height: 3.5rem;
    max-width: 25%;
}

    .recommendedProductsWrapper.minize h5 {
        font-size: 1rem;
    }

.recommended-body {
    padding: 1rem;
    border-top: 1px solid #eee;
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
}

    .recommended-body > div:not(:last-child) {
        margin-bottom: 0.5rem;
    }

.rec-block {
    display: flex;
    background: #fff;
    box-shadow: var(--shadow1);
}

    .rec-block > div:first-child {
        width: 30%;
        height: 6.5rem;
        padding: 0.25rem;
    }

        .rec-block > div:first-child > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .rec-block > div:last-child {
        display: flex;
        flex-direction: column;
        padding: 0.5rem 1rem;
        flex: 1;
        justify-content: space-between;
    }

        .rec-block > div:last-child > div {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }

            .rec-block > div:last-child > div > p {
                margin: 0;
                font-size: 0.9rem;
                color: #333;
                font-weight: 500;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 13rem;
            }

            .rec-block > div:last-child > div > label {
                margin: 0;
                font-size: 0.8rem;
                color: #777;
            }

            .rec-block > div:last-child > div > span {
                color: #ffc107;
                font-weight: 600;
                font-size: 1rem;
            }

        .rec-block > div:last-child > *:not(:last-child) {
            margin-bottom: 0.25rem;
        }

        .rec-block > div:last-child > button {
            margin-left: auto;
        }

.rec-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

    .rec-head > h5 {
        margin: 0;
        font-size: 1.2rem;
        color: var(--darkBlue);
    }

    .rec-head > div {
        display: flex;
        align-items: center;
    }

        .rec-head > div > button:hover {
            opacity: 1;
            background: var(--boxGray);
        }

        .rec-head > div > button {
            background: transparent;
            font-size: 0.8rem;
            border: 0;
            width: 1.5rem;
            height: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            opacity: 0.8;
            transition: 0.2s all ease;
            cursor: pointer;
        }

            .rec-head > div > button:first-child {
                color: var(--navy);
            }

        .rec-head > div > *:not(:last-child) {
            margin-right: 0.5rem;
        }

        .rec-head > div > button:last-child {
            color: var(--customRed);
        }

.temp-wrapper {
    border: 1px solid #e9e9e9;
    background: var(--boxGray);
    padding: 1rem;
    border-radius: 0.5rem;
}

    .temp-wrapper select:focus,
    .temp-wrapper input:focus {
        outline: none;
        box-shadow: none;
    }

.email-template-footer > label > i {
    color: var(--darkBlue);
    margin-right: 0.5rem;
}

.email-template-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

#email-editor .tox-tinymce {
    height: calc(100vh - 10rem) !important;
}

#email-editor:not(.show-editor) {
    display: none;
}

div .ReactTable .rt-tbody .rt-tr-group > div > div a p {
    margin: 0px !important;
}

.ld-contact-name {
    display: inline-flex;
    /*color: var(--darkBlue) !important;*/
    text-decoration: none !important;
    font-size: 12px;
    color: #000000 !important;
}

    .ld-contact-name > p {
        padding-left: 1rem;
    }

.ReactTable {
    height: 100%;
}

.dt-record-wrap {
    display: flex;
    align-items: center;
}

    .dt-record-wrap > a {
        /*color: var(--darkBlue);*/
        text-decoration: none;
        font-size: 12px;
        color: #000000 !important;
    }

    .dt-record-wrap > span {
        margin-right: 0.5rem;
    }

.subscription-inner-text {
}

    .subscription-inner-text > div {
        display: flex;
        flex-direction: column;
    }

        .subscription-inner-text > div > span {
            font-size: 0.9rem;
            color: #333;
            margin: 0.25rem;
        }

            .subscription-inner-text > div > span > a {
                font-size: 0.9rem;
                color: var(--darkBlue);
                font-weight: 600;
                text-decoration: none;
            }

.multi-step {
    display: flex;
    flex-direction: column;
    width: 100%;
}

    .multi-step > div:first-of-type {
        order: 2;
        margin: 1rem 0;
        padding: 1rem 0;
        border-top: 1px solid #eee;
    }

    .multi-step > .footer-buttons {
        display: flex;
        justify-content: space-between;
        height: 40px;
        position: relative;
    }

        .multi-step > .footer-buttons > button:last-child {
            margin-left: auto;
        }

#AttachCSVCheckbox,
#AttachDADICheckbox,
#NotifyCheckBox,
#ReceiveEmailsCheckBox {
    display: none;
}

.ReactTable .rt-thead .rt-tr {
    /* padding-right: 15px; */
    /* font-size: 14px; */
    color: #444;
}

.ReactTable .rt-thead {
    background: #f4f5f7;
    padding: 0.25rem 0;
}

.Map-loader {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.req-map-loader {
    top: 200% !important;
}

.req-add-new {
    display: flex;
    justify-content: space-between;
}

.shortlist-loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

.ReactTable .rt-tbody .rt-tr-group > div > div {
    font-size: 12px;
    color: #000000;
}

.new-todo-drop {
    display: none;
}

.deal-invoice-checkbox {
    margin: 0;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #666;
}

    .deal-invoice-checkbox > input[type="checkbox"] {
        margin-right: 0.5rem;
    }

.dt-icon {
    font-size: 1rem;
    margin-right: 0.5rem;
}

    .dt-icon.default {
        color: var(--navy);
    }

.report-company {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

    .report-company > div:first-child {
        width: 25%;
    }

        .report-company > div:first-child > img {
            width: 100%;
            height: 8em;
            object-fit: cover;
        }

.report-company-inner {
    display: flex;
    flex-direction: column;
    padding-left: 1rem;
}

    .report-company-inner > *:not(:last-child) {
        margin-bottom: 0.25rem;
    }

    .report-company-inner > h2 {
        margin: 0;
        font-size: 1.2rem;
        color: #343434;
    }

    .report-company-inner > h3 {
        margin: 0;
        font-size: 1.1rem;
        color: var(--darkBlue);
    }

    .report-company-inner > p {
        margin: 0;
        font-size: 0.9rem;
        color: #444;
    }

    .report-company-inner > label {
        font-size: 0.8rem;
        color: #777;
        font-weight: 600;
    }

#popover-trigger-click-root-close {
    opacity: 1;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--darkBlue);
}

.temp-wrapper > div > div {
    animation: fade-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

    .temp-wrapper > div > div.btn-row {
        width: max-content;
        margin: auto;
    }

.bulk-top-wrap {
    padding: 1rem;
    background: var(--boxGray);
    border: 1px solid #eee;
}

.bulk-template-header {
    display: flex;
    align-items: stretch;
    margin: 2rem 0;
    position: relative;
}

    .bulk-template-header > input {
        flex: 1;
    }

    .bulk-template-header > div {
        margin-left: 1rem;
    }

        .bulk-template-header > div > button {
            height: 100%;
        }

.bulk-file {
    margin: 2rem 0;
}

    .bulk-file > .file-upload-wrap {
        margin-top: 1rem;
    }

.tags-color-btn {
    display: flex;
    justify-content: space-between;
    margin: 0.5rem 0;
}

    .tags-color-btn > button > i {
        padding-right: 0;
    }

.affiliate-invoice {
    background-color: var(--darkBlue);
    width: 100%;
    border-radius: 5px;
}

.deal-invoice-paid {
    background-color: var(--customGreen);
    width: 100%;
    border-radius: 5px;
}

.deal-invoice-not-paid {
    background-color: #f7971e;
    width: 100%;
    border-radius: 5px;
}

.ReactTable .colorview_container {
    width: 5%;
}

.colorview_container > div {
    width: 1.5rem;
    height: 1.5rem;
}

.channel-datatable {
    width: 2rem;
    height: 2rem;
    margin: 0 0.5rem;
}

.lead-active,
.lead-won,
.lead-lost,
.lead-archived,
.lead-overdue-green,
.lead-overdue-yellow,
.lead-overdue-orange,
.lead-overdue-red,
.sales-lead,
.rent-lead {
    display: inline-block;
    border-radius: 50%;
    width: 0.6rem;
    height: 0.6rem;
    cursor: pointer;
}

.lead-overdue-green,
.lead-overdue-yellow,
.lead-overdue-orange,
.lead-overdue-red,
.sales-lead,
.rent-lead {
    margin-right: 5px;
}

.popover-more {
    background: none;
    padding: 0;
    border: 0;
    font-size: 1rem;
    outline: 0 !important;
}

.ReactTable .btn {
    padding: 2px 8px;
    outline: 0 !important;
}

.lead-overdue-green {
    background: var(--customGreen);
}

.lead-overdue-yellow {
    background: yellow;
}

.lead-overdue-orange {
    background: orange;
}

.lead-overdue-red {
    background: var(--customRed);
}

.lead-won {
    background: var(--customGreen);
}

.lead-lost {
    background: var(--customRed);
}

.lead-archived {
    background: #222;
}

.lead-active {
    background: #157197;
}

.rent-lead {
    background: #45aed5;
}

.lead-status-align > span:not(:last-child) {
    margin-right: 0.25rem;
}

.lead-success,
.lead-fail {
    color: #fff;
    border-radius: 0 !important;
    padding: 0.45em 2em;
    width: 108px;
    max-width: 108px;
    display: flex;
    justify-content: center;
}

.lead-success {
    background: var(--customGreen);
}

.lead-fail {
    background: var(--customRed);
}

.btno {
    background-color: var(--customGreen);
    border-radius: 0;
    margin-right: 2px;
}

.bg-chat-blink {
    animation: blinking 1.5s infinite;
}
/*Chat Blinking effect*/
@keyframes blinking {
    0% {
        background-color: #fff;
        border: 2px solid #fff;
    }

    100% {
        background-color: #ebc96b;
        border: 2px solid #ebc96b;
    }
}

.carousel .thumb img {
    object-fit: contain;
}

.load-more-btn {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    transform: translate(-50%, 0);
}

.content-social-icons {
}

    .content-social-icons > span {
        width: 2rem;
        height: 2rem;
        display: block;
    }

        .content-social-icons > span > img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

.no-records-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

    .no-records-icon > i {
        font-size: 4rem;
        color: #ddd;
    }

    .no-records-icon > h6 {
        margin: 0.5rem 0 0;
        font-size: 1.7rem;
        font-weight: 100;
        color: #999;
    }

.lead-summary > div:last-child {
    border-radius: 0.5rem;
    padding: 0.5rem;
    /* margin: -0.5rem 0; */
    text-align: center;
    margin-left: 0.5rem;
}

.lead-summary > div.lead-yellow > span,
.lead-summary > div.lead-yellow > label {
    color: #7f7f05;
}

.lead-summary > div.lead-orange > span,
.lead-summary > div.lead-orange > label {
    color: #f98900;
}

.lead-summary > div.lead-red > span,
.lead-summary > div.lead-red > label {
    color: var(--customRed);
}

.lead-yellow {
    background: #f9fbcc;
}

.lead-orange {
    background: #fff0c7;
}

.lead-red {
    background: #ffeeee;
}

.activeMenu {
    background: var(--boxGrayHover);
    color: var(--darkBlue) !important;
    font-weight: 600;
}

.joyride-overlay {
    mix-blend-mode: multiply !important;
}

.joyride-spotlight {
    background-color: #fff !important;
}

.img-admin,
.overlay-admin {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.parent-login {
    z-index: 3;
    position: relative;
    height: 100vh;
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.admin-login {
    width: 80%;
    margin: auto;
    padding: 1.5rem;
}

    .admin-login > div {
        display: flex;
        flex-direction: column;
        margin: 1rem 0;
    }

        .admin-login > div > label {
            color: #fdfdfd;
            font-size: 0.75rem;
            margin: 0;
            background: #51495e;
            width: max-content;
            padding: 0 0.5rem;
            border-radius: 0.25rem 0.25rem 0 0;
        }

.input-admin {
    border: 1px solid #51495e;
    background: none;
    padding: 0.75rem 1rem;
    border-radius: 0 0.25rem 0.25rem 0.25rem !important;
    background-color: #fff !important;
    transition: all 0.5s ease;
}

.btn-login-admin {
    padding: 0.75rem 0.5rem;
    background: #51495e;
    box-shadow: none;
    border: none;
    border-radius: 0.25rem;
    color: #fdfdfd;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 5px;
    border-bottom: 4px solid #7a6e8e;
    margin-top: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .btn-login-admin > div {
        position: absolute;
        right: 1rem;
    }

.admin-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(55, 47, 53, 0.8);
    z-index: 10;
    transition: all 0.3s ease;
    border-bottom: 4px solid hsla(315, 5%, 51%, 0.8);
}

    .admin-nav:hover {
        background: rgba(55, 47, 53, 0.9);
    }

    .admin-nav > div:first-child {
        position: relative;
        padding: 0.5rem 1rem;
    }

.inner-nav {
    display: flex;
}

    .inner-nav > div {
        flex: 1;
        display: flex;
        align-items: center;
    }

        .inner-nav > div > span:first-child {
            width: 150px;
        }

        .inner-nav > div > span {
            position: relative;
        }

        .inner-nav > div img {
            height: 60px;
        }

        .inner-nav > div > span > a {
            color: #fdfdfd !important;
            padding: 0.75rem 1rem;
            background: transparent;
            border-radius: 0.25rem;
            text-decoration: none;
            transition: all 0.5s ease;
            cursor: pointer;
        }

            .inner-nav > div > span > a:hover {
                background: hsla(0, 0%, 99%, 0.4);
            }

        .inner-nav > div:last-child {
            text-align: right;
            justify-content: flex-end;
        }

.userDetails > span {
    padding: 0.5rem 2.5rem;
    background: hsla(0, 0%, 99%, 0.8);
    border: 1px solid hsla(0, 0%, 87%, 0.05);
    color: #493f41;
    border-radius: 0.25rem;
    text-decoration: none;
    transition: all 0.5s ease;
    font-weight: 600;
    cursor: pointer;
}

    .userDetails > span:hover {
        background: #fdfdfd;
    }

#adminDropdown:not(.show),
#adminSub:not(.show) {
    max-height: 0 !important;
    padding: 0 !important;
    border: 0;
}

#adminOverlay:not(.show) {
    display: none;
}

#adminOverlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 11;
    width: 100%;
    height: 100%;
}

#adminDropdown > a,
#adminSub > a {
    color: #493f41;
    padding: 0.5rem 2.25rem;
    text-decoration: none;
    background: transparent;
    transition: all 0.5s ease;
    text-align: center;
    font-size: 0.8rem;
    cursor: pointer;
}

    #adminDropdown > a:not(:last-child),
    #adminSub > a:not(:last-child) {
        border-bottom: 1px solid rgba(66, 58, 60, 0.1);
    }

    #adminDropdown > a:hover,
    #adminSub > a:hover {
        background: hsla(0, 0%, 99%, 0.2);
    }

#adminDropdown,
#adminSub {
    position: absolute;
    display: flex;
    flex-direction: column;
    background: #fdfdfd;
    padding: 4px;
    max-height: 500px;
    overflow: hidden;
    transition: all 0.5s ease;
    border-radius: 4px;
    border: 1px solid rgba(73, 63, 65, 0.1);
    width: max-content;
    z-index: 15;
}

#adminDropdown {
    right: 16px;
    top: 54px;
}

#adminSub {
    left: 0;
    top: 38px;
}

.company-management-chip-active {
    background-color: #28a745;
    border-radius: 5px;
    padding: 5px;
    display: inline-block;
    color: white;
    width: 100px;
    text-align: center;
}

.company-management-chip-suspended {
    background-color: #c30000;
    border-radius: 5px;
    padding: 5px;
    display: inline-block;
    color: white;
    width: 100px;
    text-align: center;
}

.demo-request-chip-pending {
    background-color: var(--navy);
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    display: inline-block;
    color: #fff;
    width: 100px;
    text-align: center;
    font-size: 0.8rem;
}

.demo-request-chip-rejected {
    background-color: var(--customRed);
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    display: inline-block;
    color: #fff;
    width: 100px;
    text-align: center;
    font-size: 0.8rem;
}

.demo-request-chip-accepted {
    background-color: var(--customGreen);
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    display: inline-block;
    color: #fff;
    width: 100px;
    text-align: center;
    font-size: 0.8rem;
}

.demo-rquest-reason-indicator {
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1rem;
    color: dodgerblue;
}

.admin-component {
    width: 90%;
    margin: 6rem auto 2rem;
}

    .admin-component > h1 {
        margin: 0 0 1rem;
        font-size: 1.6rem;
        color: var(--darkBlue);
    }

    .admin-component > .user-modal-tab {
        width: 50%;
        margin: 0 auto 1rem;
    }

.demo-request-chip-container {
    display: flex;
    align-items: center;
}

.prop-info {
    padding: 1rem;
    background: linear-gradient(180deg, #eaeaea, #fbfbfb);
    border-radius: 0.5rem;
}

.prop-info-span {
    margin-top: 0.5rem;
    word-break: break-all;
    font-size: 0.75rem;
    color: #463d3d;
}

.prop-info-header {
    color: #222;
    font-weight: 600;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #e1e1e1;
    font-size: 1rem;
}

.btn-detail-close {
    position: absolute;
    right: 0;
    border-radius: 0;
    background: transparent;
    color: #e71919;
    padding: 2px 10px;
    transition: 0.2s ease;
    border: 0;
}

    .btn-detail-close:hover {
        background: hsla(0, 0%, 91%, 0.5);
    }

.prop-info > div:first-child {
    position: relative;
}

    .prop-info > div:first-child img {
        object-fit: cover;
        border-radius: 0.5rem;
    }

.contact-body-wrap {
    display: flex;
    align-items: flex-start;
}

    .contact-body-wrap > .contact-body {
        flex: 1;
    }

    .contact-body-wrap > .prop-info {
        width: 20rem;
        margin-left: 1rem;
        height: 100%;
    }

.info-bg {
    padding: 0.75rem 1rem;
    background: hsla(0, 0%, 100%, 0.8);
    border-radius: 0.5rem;
    margin: 1rem 0;
}

.request-reject-form {
    margin-top: 1rem;
}

.contact-flex {
    column-gap: 1rem;
}

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

.lead-expandable-tooltip {
    position: fixed;
    z-index: 1060;
    background: rgb(0 0 0 / 0.6);
    color: #fdfdfd;
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    backdrop-filter: blur(12px);
    border-radius: 0.25rem;
    animation: fade-in 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.color-picker {
    background: transparent;
    border: 1px solid #eee;
    padding: 1.15rem;
}

    .color-picker.error {
        border: 1px solid var(--customRed);
    }

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

/*Error Message*/

#notfound {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #dfdfdf85;
    top: 0;
}

    #notfound .notfound {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

.notfound {
    max-width: 520px;
    width: 100%;
    text-align: center;
}

    .notfound .notfound-bg {
        position: absolute;
        left: 0px;
        right: 0px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: -1;
    }

        .notfound .notfound-bg > div {
            width: 100%;
            background: #fff;
            border-radius: 90px;
            height: 78px;
        }

            .notfound .notfound-bg > div:nth-child(1) {
                -webkit-box-shadow: 5px 5px 0px 0px #cfcfcf;
                box-shadow: 5px 5px 0px 0px #cfcfcf;
            }

            .notfound .notfound-bg > div:nth-child(2) {
                -webkit-transform: scale(1.3);
                -ms-transform: scale(1.3);
                transform: scale(1.3);
                -webkit-box-shadow: 5px 5px 0px 0px #cfcfcf;
                box-shadow: 5px 5px 0px 0px #cfcfcf;
                position: relative;
                z-index: 10;
            }

            .notfound .notfound-bg > div:nth-child(3) {
                -webkit-box-shadow: 5px 5px 0px 0px #cfcfcf;
                box-shadow: 5px 5px 0px 0px #cfcfcf;
                position: relative;
                z-index: 90;
            }

    .notfound h1 {
        font-family: "Quicksand", sans-serif;
        font-size: 86px;
        text-transform: uppercase;
        font-weight: 700;
        margin-top: 0;
        margin-bottom: 8px;
        color: #151515;
    }

    .notfound h2 {
        font-family: "Quicksand", sans-serif;
        font-size: 26px;
        margin: 0;
        font-weight: 700;
        color: #151515;
    }

    .notfound a {
        font-family: "Quicksand", sans-serif;
        font-size: 14px;
        text-decoration: none;
        text-transform: uppercase;
        background: #18e06f;
        display: inline-block;
        padding: 15px 30px;
        border-radius: 5px;
        color: #fff;
        font-weight: 700;
        margin-top: 20px;
    }

.notfound-social {
    margin-top: 20px;
}

    .notfound-social > a {
        display: inline-block;
        height: 40px;
        line-height: 40px;
        width: 40px;
        font-size: 14px;
        color: #fff;
        background-color: #dedede;
        margin: 3px;
        padding: 0px;
        -webkit-transition: 0.2s all;
        transition: 0.2s all;
    }

        .notfound-social > a:hover {
            background-color: #18e06f;
        }

/*ERROR PAGE STYLE*/

.error-page {
    display: flex;
    margin-top: 130px;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

    .error-page h1 {
        font-size: 30vh;
        font-weight: bold;
        position: relative;
        margin: -8vh 0 0;
        padding: 0;
    }

        .error-page h1:after {
            content: attr(data-h1);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            color: transparent;
            /* webkit only for graceful degradation to IE */
            background: -webkit-repeating-linear-gradient( -45deg, #71b7e6, #69a6ce, #b98acc, #ee8176, #b98acc, #69a6ce, #9b59b6 );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-size: 400%;
            text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.25);
            animation: animateTextBackground 10s ease-in-out infinite;
        }

        .error-page h1 + p {
            color: #d6d6d6;
            font-size: 8vh;
            font-weight: bold;
            line-height: 10vh;
            max-width: 600px;
            position: relative;
        }

            .error-page h1 + p:after {
                content: attr(data-p);
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                color: transparent;
                text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
                -webkit-background-clip: text;
                -moz-background-clip: text;
                background-clip: text;
            }

.proposal-modal-body > div > object {
    width: 100%;
    height: 100%;
}

.input-group-btn > button {
    display: flex;
    align-items: center;
    height: 100%;
}

/*Payment portal styles*/
.custom-form-login.supplier.pp-otp > p.otp-message {
    text-align: center;
}

.custom-form-login.supplier.pp-otp > div > button:disabled {
    background: #aaa !important;
    color: #fdfdfd !important;
}

.payment-details-message {
    text-align: center;
}

    .payment-details-message > span {
        font-size: 5rem;
        color: var(--customGreen);
    }

.payment-portal {
    display: grid;
    grid-gap: 1rem;
    width: 100%;
    margin: auto;
}

    .payment-portal > h1,
    .supplier-register > h1 {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 800;
        margin-bottom: 1rem;
        color: #3a3a3a;
    }

    .payment-portal > div {
        position: relative;
    }

        .payment-portal > div > i {
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            left: 1.75rem;
            font-size: 1rem;
            color: #666;
        }

payment-portal > div > button {
    background: #57b845;
    width: 100%;
    color: #fdfdfd;
    padding: 0.7rem;
    border-radius: 1.1rem;
    border: 0;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-portal > div > button > div {
    position: absolute;
    right: 1rem;
    width: 2rem;
    height: 2rem;
}

.payment-portal > div > button > i {
    padding-right: 0.5rem;
}

.payment-portal > div > input {
    border-radius: 1.2rem;
    border: 0;
    background: #e6e6e6;
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 4rem;
    font-size: 1rem;
    transition: 0.4s all ease;
}

    .payment-portal > div > input:hover {
        background: #eee;
    }

    .payment-portal > div > input:focus {
        background: #fafafa;
    }

    .payment-portal > div > input.error {
        border: 1px solid var(--customRed);
    }

.pp-card-details {
    display: flex;
    flex-direction: column;
}

.offer {
    flex: 1;
    margin-left: 8px;
    position: relative;
    border: 1px solid #e0e0e0;
    background: #fdfdfd;
}

    .offer > div:first-child {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 70px;
        padding: 32px;
        height: 45%;
    }

    .offer > div:last-child {
        height: 55%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .offer > div:first-child > span:first-child {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 25%;
        background: #605ca8;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
    }

    .offer > div:first-child > span:last-child {
        width: 105px;
        height: 105px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background: #fdfdfd;
        box-shadow: 0 0 12px -4px rgba(0, 0, 0, 0.45);
        color: #605ca8;
        z-index: 1;
    }

    .offer > div:nth-child(2) > div {
        font-size: 15px;
        text-align: center;
        padding: 12px;
    }

        .offer > div:nth-child(2) > div:nth-child(2) {
        }

    .offer button {
        width: 70%;
        background: linear-gradient( -45deg, rgba(47, 6, 41, 0.8), rgba(100, 181, 246, 0.8) );
        border: 0;
        text-transform: uppercase;
        color: #fdfdfd;
        border-radius: 4px;
        padding: 12px;
        border: 1px solid #aeaaf2;
        transition: 0.5s all ease;
        letter-spacing: 2px;
        font-weight: 700;
        transform: scale(1);
        cursor: pointer;
    }

        .offer button:hover {
            transform: scale(1.03);
        }

.sub-text {
    font-size: 20px !important;
    padding: 8px 48px;
    color: #666;
    display: flex;
    flex-direction: column;
}

.color-picker-wrap {
    position: absolute;
    z-index: 10;
}

.theme-selector-wrap {
    display: flex;
    column-gap: 1rem;
}

    .theme-selector-wrap > div:first-child {
        flex: 1;
        border-radius: 0.25rem;
        box-shadow: var(--shadow1);
    }

    .theme-selector-wrap > button > i {
        padding-right: 0;
    }

.premium-package {
    margin: 0 0 0 0.25rem;
    font-size: 0.5rem;
    padding: 0.1rem 0.25rem;
    border-radius: 0.25rem;
    background: var(--customGreen);
    color: #fff;
    font-weight: 600;
}

.pro-parent {
    display: flex;
}

.pro-bg {
    background-image: url(../../wwwroot/dist/images/pro.jpg);
    height: calc(100vh - 53px);
    transition: 0.5s all ease;
}

.pro-text {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    .pro-text > div:first-child > span:nth-child(1) {
        font-size: 65px;
        font-weight: 600;
        color: #444;
        line-height: 0.5;
    }

    .pro-text > div:first-child > span:nth-child(2) {
        color: #777;
        font-size: 63px;
        line-height: 1.4;
        letter-spacing: 2px;
        word-spacing: 10px;
    }

    .pro-text > div {
        display: flex;
        flex-direction: column;
    }

        .pro-text > div:last-child > span:nth-child(1) {
            font-size: 44px;
            font-weight: 600;
            /* line-height: 0.8; */
            background: #385a64;
            border-radius: 8px;
            color: #fdfdfd;
            letter-spacing: 8px;
            text-align: center;
            transition: 0.5s all ease;
            cursor: pointer;
        }

            .pro-text > div:last-child > span:nth-child(1) > a {
                padding: 6px 66px;
                color: #fdfdfd;
                text-decoration: none;
            }

            .pro-text > div:last-child > span:nth-child(1):hover {
                background: gold;
                transform: scale(1.05);
            }

        .pro-text > div:last-child > span:nth-child(2) {
            font-size: 60px;
            color: #444;
            line-height: 1;
        }

.theme-body {
    min-height: 30rem;
}

.pp-otp > .loader-bg {
    min-height: 35px;
}

.payment-details {
    padding: 2rem 1rem;
    background: var(--boxGray);
    border-radius: 1rem;
}

    .payment-details > div {
        display: flex;
        flex-direction: column;
        row-gap: 0.5rem;
    }

        .payment-details > div > div {
            display: flex;
            align-items: flex-end;
            line-height: 1;
        }

    .payment-details.inner-payment > div > div > label {
        width: 40%;
    }

    .payment-details > div > div > label {
        margin: 0;
        font-size: 0.9rem;
        width: 20%;
        color: #333;
    }

    .payment-details > div > div > span {
        font-size: 1;
        flex: 1;
        font-weight: 600;
        color: #333;
    }

    .payment-details > h6 {
        margin: 0 0 1rem;
        font-size: 1.2rem;
        color: var(--darkBlue);
        text-align: center;
    }

    .payment-details > p {
        margin: auto 0 0;
        display: flex;
        align-items: flex-end;
        line-height: 1;
        justify-content: flex-end;
        font-size: 1rem;
    }

.payment-inner {
    column-gap: 3rem;
}

.payment-details > p > label {
    margin: 0 0 0 1rem;
    font-size: 1.3rem;
    color: #3a3a3a;
    font-weight: 700;
}

.payment-modal-wrap {
    display: flex;
    column-gap: 2rem;
}

    .payment-modal-wrap > div {
        flex: 1;
    }

.sign-link {
    position: absolute;
    left: 50%;
    bottom: 1%;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #3a3a3a;
    display: flex;
    align-items: center;
    text-decoration: none !important;
    column-gap: 0.5rem;
    transform: translate(-50%, 0);
}

    .sign-link > i {
        position: relative;
        left: 0;
        transition: 0.8s all ease;
    }

    .sign-link:hover {
        color: #3a3a3a;
    }

        .sign-link:hover > i {
            left: 6px;
        }

@media (min-width: 768px) {
    .lead-details-tags > span:not(:hover) > i {
        opacity: 0;
    }

    .lead-info-drop {
        display: none !important;
    }

    .bi-report-menu > div {
        flex: 1;
    }

    #biReportMenu {
        align-items: center;
    }

        #biReportMenu > label {
            margin: 0 1rem 0 0;
        }

    .carousel .slide img {
        height: 25rem;
        object-fit: cover;
    }

    .list-menu {
        margin: 1.5rem 0 0.5rem;
    }

    .nav-menu-drop {
        bottom: 0;
    }

    .workspace-stage:not(:hover) .stage-footer {
        opacity: 0;
    }

    .stage-footer:hover {
        opacity: 1;
    }

    .deal-invoice-checkbox {
        padding-right: 0.5rem;
    }

    #lead-deal div.col-md-6.h-40 > label,
    .bc-send-preview,
    .pdf-content {
        height: 100%;
    }

    .pdf-content {
        width: 100%;
    }

    .ReactTable:not(.without-action) .rt-tbody .rt-td:last-child {
        padding-right: 30px;
        -ms-flex-pack: end !important;
        justify-content: flex-end !important;
        text-align: right;
    }

    .email-template-parent {
        display: flex;
        flex-direction: column;
    }

    .email-template-wrapper {
        display: flex;
        flex: 1;
    }

        .email-template-wrapper > div:first-child {
            width: 25%;
            margin-right: 1rem;
        }

        .email-template-wrapper > div:last-child {
            width: 75%;
        }

    .lead-req-inner > .user-modal-tab {
        width: 60%;
        margin: 0 auto 1rem;
    }

    .ReactTable
    .rt-tbody
    .rt-tr-group > div > div:first-child:not(.dropdownSubService):not(.rt-expandable) {
        padding-left: 0.5rem;
    }

    .focus-drop > a:focus ~ div.droppableContainer,
    div.droppableContainer:hover {
        display: flex !important;
    }

    .hover-drop > a:hover ~ div.droppableContainer {
        display: flex;
    }

    .appointment-modal-checkbox {
        grid-column: 1 / span 2;
    }

    .user-modal-inner {
        height: 65vh;
        overflow-y: scroll;
        padding: 0.5rem 1rem;
    }

    .supplier-tabs {
        width: 50%;
        margin: auto;
    }

    .lead-req-inner {
        max-height: 75vh;
        overflow-y: scroll;
        padding: 0 0.5rem 0 0.5rem;
    }

    .lead-req-inner-map {
        max-height: 75vh;
        overflow-y: scroll;
        padding: 0 2rem 0 1rem;
    }

    .contact-details-head > div:not(:last-child) {
        margin-bottom: 0.5rem;
    }

    .deal-tab {
        width: 75%;
        margin: 0 auto 1rem;
    }

    .lead-report-wrap > div:last-child {
        padding-left: 1rem;
        flex: 1;
    }

    .lead-report-wrap > div:first-child {
        width: 25%;
        padding-right: 1rem;
        border-right: 1px solid #eee;
        height: calc(100vh - 6rem);
        overflow-y: scroll;
    }

    .settings-right {
        padding: 1rem;
        height: calc(100vh - 12rem);
        overflow-y: scroll;
    }

    .company-inner {
        flex: 1;
        padding: 0 0 0 1rem;
    }

    .property-modal-inner > div:last-child {
        padding-left: 1rem;
    }

    .property-modal-top > div:first-child > div.switch {
        margin-right: 0.5rem;
    }

    .property-modal-top > div:last-child > div.switch {
        margin-left: 0.5rem;
    }

    .property-modal-inner > div:first-child {
        padding-right: 1rem;
        border-right: 1px solid #eee;
    }

    .component-header > div:last-child > *:not(:last-child) {
        margin-right: 1rem;
    }

    .quick-filter-wrap > button:first-child > i {
        padding-right: 0.5rem;
    }
}

@media only screen and (max-width: 767px) {
    .payment-modal-wrap {
        flex-direction: column;
        row-gap: 1rem;
    }

    .deal-footer-btn > button {
        margin-right: 0 !important;
    }

    .rbc-toolbar {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        row-gap: 0.5rem;
    }

    .lead-info-drop > a {
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--boxGrayHover);
        color: var(--darkBlue);
        font-size: 1rem;
        border-radius: 50%;
        box-shadow: var(--shadow2);
    }

    .lead-info-drop {
        position: relative;
        display: flex;
        align-items: center;
    }

    .hover-drop.lead-info-drop > a:hover ~ div.droppableContainer {
        display: flex;
    }

    .info-drop-inner {
        position: absolute;
        z-index: 10;
        width: max-content;
        padding: 1rem 2rem;
        top: 2rem;
        left: 0;
        background: #fdfdfd;
        border-radius: 1rem;
        box-shadow: var(--shadow3);
    }

        .info-drop-inner > ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            display: flex;
            flex-direction: column;
            row-gap: 0.5rem;
        }

            .info-drop-inner > ul > li {
                display: flex;
                align-items: center;
                column-gap: 0.5rem;
            }

                .info-drop-inner > ul > li > span {
                    width: 15px;
                    height: 15px;
                }

    .deal-footer-btn {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 1rem auto;
        row-gap: 0.5rem;
    }

    .pro-bg {
        position: fixed;
        left: -50%;
        top: 0%;
    }

    .pro-parent {
        height: 100vh;
    }

    .pro-text {
        z-index: 2;
        width: 100%;
        margin: auto;
        padding: 20px;
        background: rgba(253, 253, 253, 0.9);
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

    .income-commission-wrap {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .report-date-body {
        display: flex !important;
        align-items: stretch;
    }

        .report-date-body .box-div > .rdt > input,
        .profit-wrap .box-div > .rdt > input {
            width: 100%;
        }

    #login .row {
        flex-wrap: nowrap;
    }

    #login .col-md-2,
    #login .col-md-10 {
        padding-right: 0;
        padding-left: 0;
    }

    .login-wrapper {
        display: inline;
        width: 100%;
    }

    #login {
        border-right: 0;
        padding: 0;
        width: 100%;
    }

    .login-logo {
        padding-left: 0;
        width: 100%;
        position: absolute;
        top: -6em;
    }

    .forgotbck-respon {
        margin-left: -12px !important;
    }

    .forgotpass-respon {
        margin-left: -10px !important;
        width: 108% !important;
    }

    .admin-component .component-header {
        flex-wrap: wrap;
    }

        .admin-component .component-header > div:last-child {
            margin-top: 0.5rem;
            width: 100%;
        }

            .admin-component .component-header > div:last-child > button {
                margin-right: 0.5rem;
            }

    .inner-nav > div > span:first-child {
        width: auto;
    }

    .userDetails > span {
        padding: 0.5rem 1rem;
    }

    .inner-nav > div > span > a {
        font-size: 0.7rem;
    }

    .inner-nav > div img {
        height: 45px;
    }

    .admin-component > .user-modal-tab {
        width: 100%;
        margin: 2rem auto;
    }

    .admin-login {
        border-radius: 2rem;
    }

    .chat-toggle-btn {
        height: 3rem !important;
        width: 3rem !important;
    }

    .chat-box {
        bottom: 11rem !important;
        right: 1rem !important;
    }

    .report-date-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .report-date-toggler {
        margin: 1rem 0;
        border-radius: 50%;
        border: 0;
        background: #fdfdfd;
        width: 2rem;
        height: 2rem;
        color: var(--darkBlue);
        font-size: 1.2rem;
        box-shadow: var(--shadow3);
        justify-content: center;
        align-items: center;
        display: flex;
    }

    #img-heart {
        right: 5rem;
    }

    .bulk-template-body {
        margin-bottom: 2rem;
    }

    [data-tooltip]:hover::before,
    [data-tooltip]:hover::after {
        display: none !important;
    }

    #myTable th > span:first-child {
        font-size: 0.8rem;
        text-align: center;
    }

    .ReactTable .rt-table {
        overflow-y: scroll !important; /* has to be scroll, not auto */
        -webkit-overflow-scrolling: touch;
    }

    .deal-invoice-checkbox {
        font-weight: 400;
        color: #666;
        font-size: 0.9rem;
        margin-bottom: 0.2rem;
        position: relative;
        text-align: left;
    }

        .deal-invoice-checkbox > input {
            margin-right: 0.5rem;
        }

    .email-template-footer > label {
        margin-bottom: 3rem;
        font-size: 0.9rem;
        text-align: center;
        margin-top: 1rem;
    }

    .tox-tinymce {
        min-height: 40vh;
    }

    #email-editor .tox-tinymce {
        margin-top: 1rem;
        width: calc(100vw - 2rem);
    }

    .settings-wrap .tox-tinymce {
        width: calc(100vw - 2rem);
    }

    .deal-summary-inner > div {
        align-items: flex-start;
    }

        .deal-summary-inner > div > span {
            display: flex;
            flex-direction: column;
        }

    .email-msg-footer {
        margin-bottom: 2rem;
    }

    .ReactTable .rt-noData {
        font-size: 0.9rem;
        padding: 1rem;
    }

    div.ReactTable .rt-tbody .rt-tr-group > div > div {
        display: flex;
        align-items: center;
    }

    .global-search-text {
        max-width: 85%;
    }

    .global-inner-container > div > div:last-child:not(.global-search-wrap) {
        min-width: auto !important;
        width: 80%;
    }

    .recommendedProductsWrapper.minize {
        max-width: 60%;
    }

    .recommendedProductsWrapper {
        height: 80%;
    }

    .login-wrap > div {
        width: 95%;
    }

    .login-inner > div {
        padding: 0;
    }

    .hover-drop > a.drop ~ div.droppableContainer {
        display: flex;
    }

    .proposal-modal-head > div:first-child,
    .send-appointment-block > div:first-child {
        margin-bottom: 0.5rem;
    }

    .proposal-modal-head > div:last-child {
        margin-left: auto;
    }

    .pdf-download-link {
        margin: 0 0.25rem;
        color: var(--darkBlue) !important;
        font-weight: 600;
    }

    .browser-preview-unsupported {
        padding: 1rem;
        font-size: 1rem;
        background: var(--customRed_1);
        margin: 0;
        text-align: center;
        font-weight: 400;
        color: var(--customRed);
    }

    .proposal-modal-checkbox {
        flex-wrap: wrap;
    }

        .proposal-modal-checkbox > label {
            margin: 0.5rem;
        }

    .global-inner-container {
        z-index: 560;
    }

        .global-inner-container > div:first-child {
            width: 80%;
        }

    .nav-menu-drop > ul {
        max-height: 38vh;
    }

    .lead-archived-tags {
        margin: 1rem 0;
    }

    .ReactTable .-pagination .-center {
        margin: 0.25rem 0 !important;
    }

    .bc-legend {
        right: 50%;
        transform: translate(50%, 0);
    }

    .lead-req-parent > div:last-child {
        height: 50vh;
        margin-top: 1rem;
    }

    .lead-tab-search.without-assign > .custom-btn {
        margin-right: 0.5rem;
    }

    .mob-lead-stage {
        display: flex;
        flex-direction: column;
    }

        .mob-lead-stage > label {
            font-size: 0.8rem;
            margin: 0;
        }

    .default-contact-details {
        flex-wrap: wrap;
        margin: 2rem 0;
        justify-content: space-between;
    }

        .default-contact-details > div {
            width: 48%;
        }

    .file-uploader_droparea > span {
        font-size: 0.8rem;
        text-align: center;
    }

    .lead-details-left > div > div:not(.navMenu-toggler) {
        padding: 1rem 2rem;
    }

    .default-contact-heat > div,
    .default-contact-heat-modal {
        flex-wrap: wrap;
    }

        .default-contact-heat > div > div,
        .default-contact-heat-modal > div {
            min-width: 25%;
        }

    .lead-info-top {
        width: 100vw;
        padding: 2rem 1rem 0.5rem;
    }

    .lead-tab-create {
        margin-bottom: 0.5rem;
    }

    .ReactTable .-pagination .-btn {
        padding: 0.25rem 0.5rem !important;
    }

    .ReactTable .-pagination .-previous,
    .ReactTable .-pagination .-next {
        flex: none !important;
    }

    .ReactTable .-pagination .-pageInfo,
    .ReactTable .-pagination .-pageSizeOptions {
        margin: 0 !important;
    }

    .lead-details-toggler {
        position: fixed;
        bottom: 7rem;
        z-index: 15;
        width: 3rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        right: 1rem;
        background: #fdfdfd;
        border: 0;
        border-radius: 50%;
        box-shadow: var(--shadow1);
        font-size: 1.2rem;
        color: var(--darkBlue);
    }

    .lead-tabs-mob {
        width: calc(100vw - 2rem);
        margin-bottom: 4rem;
        padding-bottom: 2rem;
    }

        .lead-tabs-mob > ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

            .lead-tabs-mob > ul > li {
                display: flex;
                flex-direction: column;
            }

                .lead-tabs-mob > ul > li > a {
                    display: flex;
                    position: relative;
                    padding: 0.5rem 1rem;
                    align-items: center;
                    color: #333;
                    background: var(--darkBlue_1);
                    margin-bottom: 0.5rem;
                    box-shadow: var(--shadow1);
                    border-radius: 0.25rem;
                }

                .lead-tabs-mob > ul > li:not(.selectedTab) > a {
                    color: var(--darkBlue) !important;
                }

                .lead-tabs-mob > ul > li > a > i {
                    margin-right: 1rem;
                }

                .lead-tabs-mob > ul > li > div {
                    margin: 0.5rem 0 1rem;
                }

                .lead-tabs-mob > ul > li > a > div {
                    display: flex;
                    align-items: center;
                    flex: 1;
                }

                    .lead-tabs-mob > ul > li > a > div > i {
                        font-size: 1.3rem;
                        position: relative;
                        margin-right: 0.5rem;
                    }

                        .lead-tabs-mob > ul > li > a > div > i > span {
                            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
                            position: absolute;
                            right: 0;
                            top: 0;
                            transform: translate(50%, -50%);
                            font-size: 0.6rem;
                            background: var(--customRed);
                            width: 1rem;
                            height: 1rem;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: #fdfdfd;
                            font-weight: 600;
                            border-radius: 50%;
                            box-shadow: var(--shadow1);
                        }

                    .lead-tabs-mob > ul > li > a > div > label {
                        font-weight: 400;
                        display: block;
                        width: 80%;
                        margin: 0 auto;
                        font-size: 0.8rem;
                    }

                .lead-tabs-mob > ul > li > a > button {
                    margin-left: auto;
                    border-radius: 50%;
                    width: 1.5rem;
                    height: 1.5rem;
                    color: var(--darkBlue);
                    border: 0;
                    background: #fdfdfd;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .lead-tabs-mob > ul > li.selectedTab > a {
                    background: var(--darkBlue);
                    color: #fdfdfd !important;
                    font-weight: 600;
                }

                    .lead-tabs-mob > ul > li.selectedTab > a > i,
                    .lead-tabs-mob > ul > li:not(.selectedTab) > a > button {
                        display: none;
                    }

    .lead-details-left.minimized {
        display: none;
    }

    .lead-details-left {
        min-height: 500px;
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        border-right: 0;
        animation: fade-in 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    }

    .sub-details {
        width: 100%;
        margin: 0;
        border: 0 !important;
    }

        .sub-details > div > div > span:last-child {
            line-height: 1;
            font-size: 1.2rem;
        }

        .sub-details > div > div > span:first-child {
            letter-spacing: 0;
            word-spacing: 0;
        }

    .mobile-user-menu > div.droppableContainer {
        position: absolute;
        bottom: 2rem;
        right: 0;
        background: #fdfdfd;
    }

    .noti-wrap > div:last-child,
    .no-noti > span {
        white-space: nowrap;
    }

    .noti-wrap {
        top: auto;
        bottom: 3rem;
        left: 50%;
        transform: translate(-50%, 0);
        width: auto;
    }

 

    

    .todo-tab > a {
        font-size: 0.9rem;
        letter-spacing: 2px;
    }

        .todo-tab > a:first-child,
        .todo-type-tab > a:first-child {
            margin-right: 0.5rem;
        }

    .deal-tab-parent {
        margin: 0 0 2rem;
    }

    .invoice-checkbox,
    .invoice-modal-check {
        flex-direction: row !important;
    }

        .invoice-checkbox > label,
        .invoice-modal-check > label {
            margin: 0;
            flex: 1;
            font-size: 1rem;
        }

    .custom-form.text-format > div > span {
        max-width: calc(100vw - 4rem);
    }

    .deal-summary-inner > div > label {
        width: 65%;
    }

    .deal-property {
        font-size: 0.8rem;
        margin: 0.5rem 0 0;
    }

    .deal-total-summary {
        margin-top: 0.5rem;
    }

        .deal-total-summary > div > span {
            font-size: 1rem;
            line-height: 1.3;
        }

        .deal-total-summary > div:not(:last-child) {
            margin-right: 1rem;
        }

    .deal-tab-parent > .lead-req-header {
        flex-direction: column;
        align-items: stretch;
    }

    .deal-amount-summary > div > label,
    .deal-summary-left > div > label {
        text-align: center;
    }

    .deal-block-parent,
    .deal-amount-summary.create-deal-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-nav > span.pull-right span {
        margin: 0 1rem;
        font-size: 0.9rem;
    }

    .email-msg-pagination > li > a {
        padding: 0.25rem 0.5rem;
        font-size: 0.9rem;
    }

    .no-records {
        font-size: 1.2rem;
    }

    .recharts-wrapper,
    .recharts-wrapper svg {
        height: calc(100vh - 20rem) !important;
    }

    .lead-report-wrap > div:last-child {
        margin-top: 1rem;
    }

    .page-nav {
        padding: 0.5rem;
    }

        .page-nav .pagination > li > a,
        .page-nav .pagination > li > span {
            font-size: 0.8rem;
            padding: 0.25rem 0.5rem;
        }

    .name-textbox {
        width: 80%;
    }

    .permission-name {
        margin: 1rem 0;
        justify-content: space-between;
    }

    .perm-accordions-header > p {
        margin: 0 0.5rem;
    }

    .perm-accordions-header {
        align-items: flex-end;
    }

    .mail-fields-wrap {
        order: 2;
    }

    .settings-right {
        padding: 1rem 0.5rem 3rem;
    }

    .company-image > img,
    .user-modal-img > div {
        width: 6rem;
        height: 6rem;
    }

    .settings-tabs > li:not(:last-child) {
        margin-right: 0.5rem;
    }

    .settings-tabs > li > a > span {
        white-space: nowrap;
    }

    .settings-tabs {
        overflow-x: scroll;
        padding: 0.25rem 0;
    }

    .carousel .thumb img {
        object-fit: contain;
    }

    .property-modal-inner > div:last-child {
        margin-top: 1rem;
    }

    .carousel .slide img {
        height: 12rem;
        object-fit: cover;
    }

    .product-image-block > label {
        padding-left: 0.5rem;
        font-size: 0.8rem;
    }

    .property-modal-top > div {
        justify-content: space-between;
        font-size: 0.75rem;
    }

    .property-modal-section > .component-header > div:last-child > *:not(:last-child),
    .deal-tab-parent > .component-header > div:last-child > *:not(:last-child),
    .settings-wrap .component-header > div:last-child > *:not(:last-child),
    .main-permission-head > div:last-child > *:not(:last-child) {
        margin-right: 1rem;
    }

    .property-modal-section > .component-header > div > h3,
    .deal-tab-parent > .component-header > div > h3,
    .settings-wrap .component-header > div > h3,
    .main-permission-head > div > h3 {
        margin-bottom: 0.5rem;
    }

    /* pr0 */
    .property-modal-section > .component-header > div:last-child > button.custom-btn > i,
    .deal-tab-parent > .component-header > div:last-child > button.custom-btn > i,
    .settings-wrap .component-header > div:last-child > button.custom-btn > i,
    .perm-inner > .modal-btn-wrap > .custom-btn > i,
    .permission-name > .custom-btn > i,
    .main-permission-head > div:last-child > .custom-btn > i,
    #AddLeadBtn > i,
    .lead-tab-create > .custom-btn > i,
    .lead-tab-search.without-assign > .custom-btn > i,
    .admin-component .custom-btn.add > i,
    .report-date-body > .form-btn > .custom-btn > i {
        padding-right: 0;
    }

    .property-modal-section > .component-header,
    .deal-tab-parent > .component-header,
    .settings-wrap .component-header,
    .main-permission-head {
        flex-direction: column;
        align-items: stretch;
    }

    .property-modal-top > div:first-child > div.switch {
        order: 2;
    }

    .modal-body,
    .mdl-body-lg,
    .mdl-body-xl,
    .mdl-body-xxl {
        max-height: 72vh;
        overflow-y: scroll;
    }

    .custom-form-login {
        width: 90% !important;
    }

    /* w100 */
    .custom-form.flex > div.quarter,
    .admin-component .lead-search-wrap > input,
    .parent-login,
    .admin-login,
    .custom-form.flex > div.half,
    .mail-img,
    .settings-wrap
    .component-header > div:last-child > div.lead-search-wrap > input,
    .bi-report-wrap,
    .deal-amount-summary,
    .email-date > div > input,
    .lead-tab-search > .lead-search-wrap > input,
    .lead-tab-create > div > input,
    .user-modal-parent > div:first-child,
    .property-add-modal .property-modal-section .lead-search-wrap > input {
        width: 100%;
    }

    .custom-form.grid._3,
    .custom-form.grid._2,
    .custom-form.grid._4,
    .deal-summary-inner,
    .todo-body-inner,
    .visitor-detail-wrap {
        grid-template-columns: repeat(1, 1fr);
    }

    .modal-dialog,
    .mdl-mid .modal-dialog,
    .mdl-mid .modal-dialog,
    .mdl-half .modal-dialog,
    .mdl-xxl .modal-dialog,
    .mdl-visitor .modal-dialog,
    .mdl-small .modal-dialog {
        min-width: auto;
        width: 95vw;
    }

    .property-upload-head {
        overflow-x: scroll;
    }

    .data-upload-info > div > label,
    .data-upload-info > label {
        white-space: nowrap;
    }

    .property-upload-head > *:not(:last-child) {
        margin-right: 1rem;
    }
    /* fcolumn */
    .stage-end-wrap,
    .email-template-footer,
    .property-modal-inner,
    .property-modal-top,
    .company-wrap,
    .mail-fields-parent,
    .lead-report-wrap,
    .deal-footer,
    .contact-details-head,
    .lead-tab-search:not(.without-assign),
    .lead-req-parent,
    .user-modal-parent,
    .ReactTable .-pagination,
    .lead-archive-top,
    .proposal-modal-body,
    .proposal-modal-head,
    .send-appointment-block,
    .bi-report-wrap .page-nav {
        flex-direction: column;
    }

        .stage-end-wrap > div.stage-pipeline-drop {
            margin-bottom: 0.5rem;
        }

            /* f1 */
            .stage-end-wrap > div.stage-pipeline-drop > select,
            .admin-component .lead-search-wrap,
            .property-modal-section > .component-header > div:last-child > div:first-child,
            .deal-tab-parent > .component-header > div:last-child > div:first-child,
            .settings-right
            .property-modal-section > .component-header > div:last-child > div:first-child,
            .property-modal-section > .component-header > div:last-child > div.lead-search-wrap,
            .settings-wrap .component-header > div:last-child > div.lead-search-wrap,
            .main-permission-head > div:last-child > .lead-search-wrap,
            .deal-summary-inner > div > span,
            .lead-tab-create > div,
            .lead-tab-search.without-assign > .lead-search-wrap {
                flex: 1;
            }

    .dt-wrap.full {
        height: calc(100vh - 13rem);
    }

    .dt-wrap.full,
    .dt-wrap.third,
    .dt-wrap.deal-supplier {
        overflow-y: visible;
    }

    .component-main-content > .component-header {
        flex-direction: column;
        align-items: stretch;
    }

        .component-main-content > .component-header > div > h3 {
            margin: 0 0 0.5rem;
        }

        .component-main-content > .component-header .lead-search-wrap,
        .component-main-content > .component-header .lead-search-wrap > input,
        .property-modal-section > .component-header > div:last-child > div:first-child > input,
        .deal-tab-parent > .component-header > div:last-child > div:first-child > input,
        .main-permission-head > div:last-child > .lead-search-wrap > input {
            width: 100%;
        }

        .component-main-content > .component-header > div:last-child > button.custom-btn {
            position: fixed;
            left: 1rem;
            z-index: 120;
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .component-main-content > .component-header > div:last-child > button.custom-btn:first-child,
            .filter-menu-drop {
                bottom: 3rem;
            }

            .component-main-content > .component-header > div:last-child > button.custom-btn:nth-child(2) {
                bottom: 7rem;
            }

            .component-main-content > .component-header > div:last-child > button.custom-btn:nth-child(3) {
                bottom: 11rem;
            }

    .clear-cache-btn {
        bottom: 15rem;
    }

    .component-main-content > .component-header > div:last-child > button.custom-btn > i {
        padding-right: 0;
    }

    .component-main-content {
        padding: 1rem;
    }

    .nav-menu-drop,
    .todo-drop {
        right: 0;
        width: 85%;
        margin: auto;
        top: 3rem;
        left: auto;
    }

    .list-menu > ul {
        width: 100%;
    }

    .mob-nav-toggle-wrap > div.droppableContainer {
        position: fixed;
        background: #fdfdfd;
        width: 95%;
        left: 0;
        right: 0;
        z-index: 540;
        top: 0;
        margin: auto;
        box-shadow: var(--shadow2);
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }

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

    .add-lead-wrap > input {
        flex: 1;
    }

    .add-lead-wrap {
        justify-content: flex-end;
    }

    .workspace-head > .lead-search-wrap {
        margin: 0 0.5rem;
        flex: 1;
    }

        .workspace-head > .lead-search-wrap > input {
            width: 100%;
        }

    .quick-filter-wrap {
        position: fixed;
        right: 1rem;
        bottom: 7rem;
        z-index: 120;
        width: 100%;
        justify-content: flex-end;
        flex-direction: column;
        align-items: flex-end;
    }

    .global-search-toggler {
        height: 3rem;
        width: 3rem;
        right: 1rem;
        bottom: 3rem;
    }

    .quick-filter-wrap > button:first-child {
        width: 3rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        box-shadow: var(--shadow3);
        border: 0;
        padding: 0;
        order: 2;
        margin: 0;
    }

    #filterDropContainer {
        order: 1;
        margin-bottom: 1rem;
        transform: none;
        animation: none;
        position: static;
    }

    /* dnone */
    .quick-filter-wrap > button:first-child > label,
    .workspace-legend,
    .admin-component .custom-btn.add > span,
    .property-modal-title > span,
    .default-contact-heat > p,
    .login-img,
    .global-search-wrap > a > span,
    .page-nav > .pager,
    .outline-btn-workspace,
    .user-list,
    .workspace-info > div:not(.lead-info-drop),
    #AddLeadBtn > span,
    .cache-delete-info,
    .property-modal-section > .component-header > div:last-child > button.custom-btn > span,
    .settings-wrap .component-header > div:last-child > button.custom-btn > span,
    .main-permission-head > div:last-child > .custom-btn > span,
    .component-main-content > .component-header > div:last-child > button.custom-btn > span,
    .perm-inner > .modal-btn-wrap > .custom-btn > span,
    .permission-name > .custom-btn > span,
    .permission-set-header > div > .lead-search-wrap,
    .report-top-icons,
    .lead-tab-create > .custom-btn > span,
    .lead-tab-search.without-assign > .custom-btn > span,
    .report-date-body > div:nth-child(3),
    .report-date-body > .form-btn > button > span {
        display: none !important;
    }

    .tab-right {
        padding: 1rem;
    }

    /* fstart */
    .workspace-legend > li,
    .prop-type-label,
    .panel-heading.drag-drop-panel div:first-child,
    .deal-block-body > div > label,
    .deal-tab > .user-modal-tab > span,
    .deal-total-summary > div > label,
    .amount-credit-balance,
    .default-contact-details > div > label,
    .lead-req-header > div > label,
    .lead-req-google-search > div > label,
    .selected-property-block > div > label,
    .bc-legend label,
    .login-tabs > a {
        font-size: 0.7rem;
    }

    .deal-block-body > div > span,
    .deal-amount-summary > div > label,
    .deal-summary-left > div > label,
    .default-contact-details > div > span,
    .user-modal-tab > span,
    #myTable tr > td:first-child,
    .todo-block > div:first-child > h5,
    .display-bc-body > p,
    .bc-details-section > div > span,
    .property-availability > span,
    .bc-details-section > ul > li {
        font-size: 0.8rem;
    }

    .todo-type-tab > a,
    .lead-todo-info,
    .login-tabs > a.current,
    .ReactTable .rt-thead .rt-resizable-header-content,
    .ReactTable .rt-tbody .rt-td,
    .display-bc-body > label,
    .bc-details-section > div > label,
    .property-availability > label {
        font-size: 0.9rem;
    }

    input[type="text"]:not(.custom),
    .global-search-wrap > input,
    input[type="email"],
    input[type="password"]:not(.custom),
    input[type="number"]:not(.custom),
    input[type="tel"]:not(.custom),
    select:not(.custom),
    textarea,
    .lead-search-wrap > input,
    .add-lead-wrap > input,
    .display-bc-body > h4,
    .bc-details-section > h5 {
        font-size: 1rem;
    }

    .dt-btn-row > button,
    .dt-btn-row > div > button,
    .dt-btn-row > a {
        font-size: 1rem;
    }

    .deal-amount-summary > div > span,
    .deal-summary-left > div > span,
    .todo-type-tab > a.current {
        font-size: 1.1rem;
    }

    .todo-inner > p {
        font-size: 1.2rem;
    }

    .display-bc-head > span {
        font-size: 1.5rem;
    }

    .mob-nav-wrap {
        position: relative;
        z-index: 550;
    }

    .mob-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 100;
        background: var(--boxGray);
    }

        .mob-bottom > ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            display: flex;
        }

            .mob-bottom > ul > li {
                flex: 1;
                text-align: center;
                position: relative;
            }

                .mob-bottom > ul > li > a {
                    font-size: 1.5rem;
                    color: var(--darkBlue);
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0.5rem;
                    text-decoration: none;
                }

                    .mob-bottom > ul > li > a > img {
                        width: 1.5rem;
                        height: 1.5rem;
                        border-radius: 50%;
                        object-fit: cover;
                    }

    .mob-nav-toggle-wrap > a {
        position: fixed;
        right: 1rem;
        top: 0.5rem;
        z-index: 550;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.5rem;
        background: rgb(253 253 253 / 0.6);
        color: var(--darkBlue) !important;
        box-shadow: var(--shadow2);
        font-size: 1.5rem;
        backdrop-filter: blur(6px);
    }

    .workspace-wrap {
        width: 100%;
        height: calc(100vh - 14.5rem);
    }

    .workspace-stage {
        min-width: calc(100vw - 3rem);
    }
}

/*animations - start*/
.slide-in-top {
    -webkit-animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.slide-in-right {
    -webkit-animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.fade-out {
    -webkit-animation: fade-out 1s ease-out both;
    animation: fade-out 1s ease-out both;
}

.slide-in-left {
    -webkit-animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.fade-in {
    -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.slide-in-fwd-center {
    -webkit-animation: slide-in-fwd-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-fwd-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.scale-in-center {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.fade-in-top {
    -webkit-animation: fade-in-top 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    animation: fade-in-top 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.fade-in-bottom {
    -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.scale-in-ver-top {
    -webkit-animation: scale-in-ver-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: scale-in-ver-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.heartbeat {
    -webkit-animation: heartbeat 2s ease-in-out infinite both;
    animation: heartbeat 2s ease-in-out infinite both;
}

@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1) translate(0, -50%);
        transform: scale(1) translate(0, -50%);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    10% {
        -webkit-transform: scale(0.91) translate(0, -50%);
        transform: scale(0.91) translate(0, -50%);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    17% {
        -webkit-transform: scale(0.98) translate(0, -50%);
        transform: scale(0.98) translate(0, -50%);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    33% {
        -webkit-transform: scale(0.87) translate(0, -50%);
        transform: scale(0.87) translate(0, -50%);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    45% {
        -webkit-transform: scale(1) translate(0, -50%);
        transform: scale(1) translate(0, -50%);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes heartbeat {
    from {
        -webkit-transform: scale(1) translate(0, -50%);
        transform: scale(1) translate(0, -50%);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    10% {
        -webkit-transform: scale(0.91) translate(0, -50%);
        transform: scale(0.91) translate(0, -50%);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    17% {
        -webkit-transform: scale(0.98) translate(0, -50%);
        transform: scale(0.98) translate(0, -50%);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    33% {
        -webkit-transform: scale(0.87) translate(0, -50%);
        transform: scale(0.87) translate(0, -50%);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    45% {
        -webkit-transform: scale(1) translate(0, -50%);
        transform: scale(1) translate(0, -50%);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@-webkit-keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes scale-in-ver-top {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
}

@keyframes scale-in-ver-top {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOutOpacity {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes scale-in-top {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
    }
}

@keyframes scale-in-top {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
    }
}

@-webkit-keyframes scale-in-top-filter {
    0% {
        -webkit-transform: scale(0) translateX(-50%);
        transform: scale(0) translateX(-50%);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1) translateX(-50%);
        transform: scale(1) translateX(-50%);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
    }
}

@keyframes scale-in-top-filter {
    0% {
        -webkit-transform: scale(0) translateX(-50%);
        transform: scale(0) translateX(-50%);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1) translateX(-50%);
        transform: scale(1) translateX(-50%);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
    }
}

@keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes fade-in-bottom-filter {
    0% {
        -webkit-transform: translateY(50px) translateX(-50%);
        transform: translateY(50px) translateX(-50%);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0) translateX(-50%);
        transform: translateY(0) translateX(-50%);
        opacity: 1;
    }
}

@keyframes fade-in-bottom-filter {
    0% {
        -webkit-transform: translateY(50px) translateX(-50%);
        transform: translateY(50px) translateX(-50%);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0) translateX(-50%);
        transform: translateY(0) translateX(-50%);
        opacity: 1;
    }
}

@-webkit-keyframes fade-in-top {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fade-in-top {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes dot-keyframes {
    0% {
        opacity: 0.4;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
    }

    100% {
        opacity: 0.4;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}

@keyframes dot-keyframes {
    0% {
        opacity: 0.4;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
    }

    100% {
        opacity: 0.4;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes scale-in-center-modal {
    0% {
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes slide-in-fwd-center {
    0% {
        -webkit-transform: translateZ(-1400px);
        transform: translateZ(-1400px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes slide-in-fwd-center {
    0% {
        -webkit-transform: translateZ(-1400px);
        transform: translateZ(-1400px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}
/*end*/
@media print {
    /* All your print styles go here */
    #header,
    #footer,
    #nav {
        display: none !important;
    }

    .printIgnore {
        display: none;
        background: linear-gradient(180deg, #6c85a2, #316aaf) !important;
    }

    .report-top-wrapper {
        display: none;
    }

    #reportHeader {
        display: block;
    }

        #reportHeader > img {
            color: black;
            background-color: black;
        }

    .tableFilterRow {
        display: none;
    }

    #reportHeader ~ .panel.panel-default .table-responsive {
        height: auto !important;
    }

        #reportHeader ~ .panel.panel-default
        .table-responsive > table > thead > tr:nth-child(2) {
            display: none !important;
        }

    #reportHeader ~ .panel.panel-default .panel-heading.drag-drop-panel {
        display: none !important;
    }

    #reportHeader ~ .panel.panel-default
    .table-responsive
    table
    th:not(:last-child) {
        border-right: 1px solid #dee2e6;
    }
}

@page {
    size: auto;
    margin: 0mm;
}

/* Spinner Start - Sajid*/
.atom-spinner,
.atom-spinner * {
    box-sizing: border-box;
}

.atom-spinner {
    height: 80px;
    width: 80px;
    overflow: hidden;
}

    .atom-spinner .spinner-inner {
        position: relative;
        display: block;
        height: 100%;
        width: 100%;
    }

    .atom-spinner .spinner-circle {
        display: block;
        position: absolute;
        color: #3a3570;
        font-size: calc(80px * 0.24);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .atom-spinner .spinner-line {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        animation-duration: 1s;
        border-left-width: calc(80px / 25);
        border-top-width: calc(80px / 25);
        border-left-color: #3a3570;
        border-left-style: solid;
        border-top-style: solid;
        border-top-color: transparent;
    }

        .atom-spinner .spinner-line:nth-child(1) {
            animation: atom-spinner-animation-1 1s linear infinite;
            transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);
        }

        .atom-spinner .spinner-line:nth-child(2) {
            animation: atom-spinner-animation-2 1s linear infinite;
            transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);
        }

        .atom-spinner .spinner-line:nth-child(3) {
            animation: atom-spinner-animation-3 1s linear infinite;
            transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);
        }

@keyframes atom-spinner-animation-1 {
    100% {
        transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg);
    }
}

@keyframes atom-spinner-animation-2 {
    100% {
        transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg);
    }
}

@keyframes atom-spinner-animation-3 {
    100% {
        transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg);
    }
}

.loader-background {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #ece9e6;
    background: -webkit-linear-gradient(to right, #ffffff, #ece9e6);
    background: linear-gradient(to right, #ffffff, #ece9e6);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -35px 0 0 -56px;
    width: 112px;
    height: 70px;
    z-index: 9;
}

.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #000000b0;
    z-index: 1;
    top: 0;
}

.loading:before,
.loading:after {
    display: table;
    content: "";
}

.loading:after {
    clear: both;
}

/* Spinner End - Sajid*/

/* from site css */
.modal-backdrop {
    opacity: 0.4;
    z-index: 1050;
}
/*style for tooltip*/
[data-tooltip] {
    position: relative;
}

    [data-tooltip]::before,
    [data-tooltip]::after {
        position: absolute;
        display: none;
        opacity: 0.85;
    }

    [data-tooltip]::before {
        /*
   * using data-tooltip instead of title so we
   * don't have the real tooltip overlapping
   */
        content: attr(data-tooltip);
        background: #000;
        color: #fff;
        font-size: 13px;
        padding: 5px;
        border-radius: 5px;
        /* we don't want the text to wrap */
        white-space: nowrap;
        text-decoration: none;
        z-index: 9999;
        font-weight: normal;
    }

    [data-tooltip]::after {
        width: 0;
        height: 0;
        border: 6px solid transparent;
        content: "";
    }

    [data-tooltip]:hover::before,
    [data-tooltip]:hover::after {
        display: block;
    }

    /** positioning **/

    /* left tooltip */
    [data-tooltip][data-placement="left"]::before {
        top: -25%;
        right: 100%;
        margin-right: 10px;
    }

    [data-tooltip][data-placement="left"]::after {
        border-left-color: #000;
        border-right: none;
        top: 50%;
        right: 100%;
        margin-top: -6px;
        margin-right: 4px;
    }

    /* right tooltip */
    [data-tooltip][data-placement="right"]::before {
        top: -25%;
        left: 100%;
        margin-left: 10px;
    }

    [data-tooltip][data-placement="right"]::after {
        border-right-color: #000;
        border-left: none;
        top: 50%;
        left: 100%;
        margin-top: -6px;
        margin-left: 4px;
    }

    /* top tooltip */
    [data-tooltip][data-placement="top"]::before {
        bottom: 100%;
        left: 0;
        margin-bottom: 10px;
    }

    [data-tooltip][data-placement="top"]::after {
        border-top-color: #000;
        border-bottom: none;
        bottom: 100%;
        left: 10px;
        margin-bottom: 4px;
    }

    /* bottom tooltip */
    [data-tooltip][data-placement="bottom"]::before {
        top: 100%;
        left: 0;
        margin-top: 10px;
    }

    [data-tooltip][data-placement="bottom"]::after {
        border-bottom-color: #000;
        border-top: none;
        top: 100%;
        left: 10px;
        margin-top: 4px;
    }

.api-method {
    flex-direction: row !important;
    grid-gap: 1em;
    font-weight: 600;
}

.api-details {
    height: 60vh;
    overflow-y: scroll;
    border: 1px solid gray;
    padding: 1em;
    box-shadow: var(--shadow1);
}


.api-key > div {
    padding-bottom: 20px;
}

    .api-key > div > label {
        margin-right: 1em;
    }

.api-desc {
    font-size: 0.9rem;
}

.api-fonts {
    font-weight: 600;
}


.justify {
    justify-content: center;
    padding: 20px;
}

.api-content {
    padding: 20px
}

.api-generate {
    padding-right: 20px;
}

.disable-api-key {
    width: 45px;
}

.perm-inner-feature {
    justify-content: space-between;
    align-items: center;
}

.feature-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.feature-btn-row {
    justify-content: center;
}

    .feature-btn-row > button {
        margin: auto;
    }

.self-owned {
    display: -webkit-box !important;
    margin-top: 2.3em !important;
}

    .self-owned > div {
        margin-right: 1em;
    }

.lead-contact {
    padding-left: 10px;
}

    .lead-contact > div {
        display: flex;
        align-items: flex-end;
    }

        .lead-contact > div > label {
            font-size: 0.9rem;
            color: #999;
            margin-right: 0.5em;
        }

        .lead-contact > div > span {
            font-size: 0.9rem;
            font-weight: 600;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 0.5rem;
        }

.contact-assigned-to {
    /*display: flex;
    align-items: center;
    margin-top: 0.5rem;*/
}

    .contact-assigned-to > div > img {
        width: 4rem;
        height: 4rem;
        object-fit: cover;
        border-radius: 50%;
    }

    .contact-assigned-to > span {
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.2px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .contact-assigned-to > *:not(:last-child) {
        margin-bottom: 0.5rem;
    }

    .contact-assigned-to > div:last-child {
        letter-spacing: 1px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.lead-proposal-btn-wrap > button > i {
    padding-right: 0px;
}

.contact-assigned-to > div:last-child > div {
    margin-bottom: 0.5rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .contact-assigned-to > div:last-child > div:first-child {
        /*font-weight: 700;*/
        font-size: 14px;
        color: black;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .contact-assigned-to > div:last-child > div > i {
        margin-right: 0.5rem;
    }

.lead-cost-wrap > div > input {
    padding: 0.25rem 0.75rem !important;
}

.lead-details-btn {
    width: 100%;
}

.hide-assign {
    display: none;
}

.lead-contact-details {
    border-bottom: 1px solid #eee;
    border-radius: 8px;
}

.lead-config-btn > button:first-child {
    margin-left: 0px;
}

.lead-details-tags > span:first-child {
    margin-left: 0px;
}

.lead-proposal-btn-wrap > button:first-child {
    margin-left: 0px;
}

/*Notification Dropdown*/
.header-notifications .dropdown-menu.show {
    width: 250px;
    padding: 0;
    margin-left: -5.5em;
}

.noti-container > .noti-title {
    padding: 5px;
    position: relative;
    z-index: 100;
    text-align: center;
    box-shadow: 0px 1px 4px #bfbfbf;
}

.noti-title > .new-noti-title {
    font: 13px bold 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-align: center;
    line-height: 30px;
}

.noti-container > .noti-title > .noti-count {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    font-size: 10px;
    line-height: 20px;
    margin-left: 5px;
    margin-top: 5px;
}

.noti-container > .noti-body {
    list-style-type: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow: auto;
}

    .noti-container > .noti-body > .noti-text {
        display: block;
        cursor: pointer;
        padding: 8px 12px 12px 12px;
        line-height: 17px;
        background-color: #E9EFF2;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
        color: #6b6a6a;
    }

        .noti-container > .noti-body > .noti-text.has-read {
            background-color: #fff;
        }

.noti-container > .noti-footer {
    cursor: pointer;
    text-align: center;
    font: 13px bold 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 8px;
    border-top: 2px solid #ddd;
}

.noti-user-icon {
    width: 25px;
    float: left;
    margin-right: 8px;
    margin-top: 4px;
}

    .noti-user-icon + p {
        margin-bottom: 0;
        padding-top: 3px;
    }

.noti-body {
    padding: 15px 5px 0px 15px;
    list-style: none;
    font-size: 0.8rem;
    color: #333;
    height: 50vh;
    overflow-y: scroll;
}

.noti-text > a {
    color: #333;
}

.notiTime {
    position: absolute;
    left: 15px;
    top: 25px;
}

.noti-text {
    display: flex;
}

    .noti-text > a > div {
        margin-right: -5px !important;
    }

.clearNotiInput {
    border: none !important;
    height: 0 !important;
    width: fit-content !important;
}

.Number-Label {
    border-radius: 100%;
    width: 19px;
    height: 19px;
    font-size: 9px;
    padding: 0px !important;
    position: absolute;
    top: -1px;
    right: 2px;
    z-index: 9999;
    background-color: red !important;
}

    .Number-Label span {
        display: block;
        display: block;
        line-height: 1.5;
        font-size: 11px;
        margin-top: 0px;
        font-weight: bold;
        margin-left: 0px;
    }

.dropdown-toggle::after {
    display: none;
}

.show-map {
    display: block;
}

.no-show-map {
    display: none;
}
/* site css end */


/*New interface changes start - wazil*/
@font-face {
    font-family: Avenir;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../css/font/Avenir-ExtraLight.ttf");
}

@font-face {
    font-family: Avenir;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../css/font/Avenir-Light.ttf");
}

@font-face {
    font-family: Avenir;
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../css/font/Avenir-Italic.ttf");
}

@font-face {
    font-family: Avenir;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../css/font/Avenir-Regular.ttf");
}

@font-face {
    font-family: Avenir;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../css/font/Avenir-SemiBold.ttf");
}

@font-face {
    font-family: Avenir;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../css/font/Avenir-Black.ttf");
}

@font-face {
    font-family: Avenir;
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../css/font/Avenir-Black.ttf");
}

html,
body {
    height: 100%;
    color: var(--colorText);
}

body {
    margin: 0;
}

    body,
    body > *:not(.fa):not(.fas):not(.far):not(.fab):not(.customFont),
    button {
        color: var(--colorTextPrimary);
        font-family: "Avenir", sans-serif;
    }

.modal-header {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 0;
    position: relative;
}

.modal-title {
    font-size: var(--lengthMd2);
    color: var(--colorTextPrimary);
}

.mdl-mid .modal-dialog {
    width: 90vw;
    max-width: none;
}

.modal-body {
    padding: 1rem 1rem;
    background: #fafafa;
}

.close-modal:hover {
    opacity: 1;
}

.close-modal svg {
    fill: var(--colorError);
}

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

.flex-space.center {
  align-items: center;
}

.flex-space.end {
  align-items: flex-end;
}

.row-section._1_5 > *:not(:last-child) {
    margin-right: 1.5rem;
}

.row-section._1 > *:not(:last-child) {
    margin-right: 1rem;
    margin-bottom: 0;
}

.row-section._0_5 > *:not(:last-child) {
    margin-right: 0.5rem;
}

.tab-outer {
  display: flex;
}
.tab-outer a {
  display: flex;
  align-items: center;
  border: 1px solid #d5d5d5;
  padding: 0.75rem 1rem;
  font-size: var(--lengthMd1);
  border-radius: 4px;
  transition: 0.4s all ease;
  cursor: pointer;
}

.tab-outer a.selected,
.tab-outer a:hover {
  background: #d8ffe0;
  color: var(--colorPrimary);
}
.tab-outer a.selected img {
}
.tab-outer a img {
  margin-right: 0.5rem;
}
.tab-outer a.selected, .tab-outer a:hover {
    background: #d8ffe0;
    color: var(--colorPrimary) !important;
}
.tab-outer a i {
    margin-right: 0.5rem;
}

.row-center {
    display: flex;
}

    .row-center:not(.mob-column) {
        align-items: center;
    }

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

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.tab-container > div {
    animation: fadeIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

    /*.tab-container > div:not(.showContainer) {
        display: none;
    }*/

.column-section._3 > *:not(:last-child) {
    margin-bottom: 3rem;
}

.column-section._2_5 > *:not(:last-child) {
    margin-bottom: 2.5rem;
}

.column-section._2 > *:not(:last-child) {
    margin-bottom: 2rem;
}

.column-section._1_5 > *:not(:last-child) {
    margin-bottom: 1.5rem;
}

.column-section._1 > *:not(:last-child) {
    margin-bottom: 1rem;
}

.column-section._0_5 > *:not(:last-child) {
    margin-bottom: 0.5rem;
}
.row-section._1_5 > *:not(:last-child) {
    margin-right: 1.5rem;
}

.row-section._1 > *:not(:last-child) {
    margin-right: 1rem;
}

.row-section._0_5 > *:not(:last-child) {
    margin-right: 0.5rem;
}

.accordion {
    border-radius: 6px;
    border: 1px solid #d4d4d4;
    background: #fff;
}

    .accordion.sm .accordion-header h5 {
        font-size: var(--lengthSm3);
    }

    .accordion.sm .accordion-header button {
        width: 20px;
        height: 20px;
    }

    .accordion.sm {
        background: var(--colorGrey2);
        padding: 0.5rem 1rem;
        border-radius: 8px;
    }

.accordion-header {
}

    .accordion-header h5 {
        font-size: var(--lengthMd2);
        font-weight: 600;
        color: var(--colorThemeGrey);
        flex: 1;
        margin: 0 2rem 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .accordion-header a {
        padding: 1rem 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .accordion-header button {
        background: var(--colorThemeGrey);
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 50%;
        border: 2px solid transparent;
        transition: 0.35s all ease;
        cursor: pointer;
    }

        .accordion-header button:hover {
            background: #fff;
            border: 2px solid var(--colorPrimary);
        }

            .accordion-header button:hover svg {
                fill: var(--colorPrimary);
            }

        .accordion-header button svg {
            fill: #fff;
            width: 12px;
            height: 12px;
            transition: 0.35s all ease;
        }

.accordion-body {
    overflow: hidden;
    padding: 0 1.5rem 1rem;
    transition: 0.4s all ease;
}

.accordion-list {
}

    .accordion-list h5 {
        font-size: var(--lengthSm3);
        font-weight: 400;
        display: flex;
        align-items: center;
    }

        .accordion-list h5 > label {
            display: flex;
            align-items: center;
            cursor: pointer;
        }

    .accordion-list input[type="checkbox"] {
        margin-right: 8px;
    }

    .accordion-list > li > a > label {
    }

    .accordion-list > li > a {
        display: flex;
        padding: 0.75rem;
        border-radius: 6px;
        background: #fff;
        justify-content: space-between;
        font-size: var(--lengthSm3);
        font-weight: 400;
    }

    .accordion-list > li:not(:last-child) {
        margin-bottom: 8px;
    }

.accordion-body.showAccordion {
    margin-top: 1rem;
}

.accordion-body:not(.showAccordion) {
    max-height: 0 !important;
}

.grid-outer {
    display: flex;
}

    .grid-outer > div {
        flex: 1;
    }

.input-width > input {
    width: 100%;
}

.custom-form > div > label {
    font-weight: 600;
    color: var(--colorText);
    font-size: var(--lengthMd1);
    margin-bottom: 0.5rem;
    position: relative;
}

.custom-form.grid,
.custom-grid {
    display: grid;
    grid-gap: 2rem;
}

.custom-form.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.custom-form > div > span:not(.custom) {
    font-size: var(--lengthMd2);
    color: var(--colorTextPrimary);
    font-weight: 400;
}

.custom-form.form-text > div:not([class]) {
    flex-direction: row;
    align-items: flex-end;
    line-height: 1;
}

.custom-form.form-text > div {
    margin: 0.25em 0;
}

    .custom-form.form-text > div > *:last-child {
        flex: 1;
        padding-left: 0.5em;
    }

    .custom-form.form-text > div > span {
        font-size: var(--lengthMd1);
        font-weight: 600;
        color: var(--colorThemeGrey);
    }

    .custom-form.form-text > div > label {
        margin: 0;
        width: 30%;
        font-size: var(--lengthMd1);
    }

.custom-form.flex > div.full {
    width: 100%;
}

.custom-form.flex > div.quarter {
    width: 25%;
}

.custom-form.flex > div.flex_1 {
    flex: 1;
}

.custom-form.flex > div.half {
    width: calc(50% - 0.5rem);
}

.custom-form.flex > div {
    margin: 0.5rem 0;
}

.custom-form > div {
    display: flex;
    flex-direction: column;
    position: relative;
}

    .custom-form > div > label {
        font-weight: 600;
        color: var(--colorText);
        font-size: var(--lengthMd1);
        margin-bottom: 0.5rem;
        position: relative;
    }

    .custom-form > div > input,
    .custom-form > div > select {
        width: 100%;
    }

.text-sm-3 {
    font-size: var(--lengthSm3);
}

.text-sm-2 {
    font-size: var(--lengthSm2);
}

.text-sm-1 {
    font-size: var(--lengthSm1);
}

.text-md-3 {
    font-size: var(--lengthMd3);
}

.text-md-2 {
    font-size: var(--lengthMd2);
}

.text-md-1 {
    font-size: var(--lengthMd1);
}

.text-lg-3 {
    font-size: var(--lengthLg4);
}

.text-lg-2 {
    font-size: var(--lengthLg2);
}

.text-lg-1 {
    font-size: var(--lengthLg1);
}

.text-md-2,
.accordion-header h5,
.sec-header {
    font-size: var(--lengthMd1);
}

.font-regular {
    font-weight: 400 !important;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
    font-family: "Avenir", sans-serif !important;
    font-weight: 500;
}

    input[type="text"]:not(.custom),
    input[type="search"]:not(.custom),
    input[type="email"]:not(.custom),
    input[type="password"]:not(.custom),
    input[type="number"]:not(.custom),
    input[type="tel"]:not(.custom),
    select:not(.custom),
    textarea:not(.custom) {
        padding: 0.8rem 1rem;
        border: 1px solid #d2d2d2;
        transition: 0.4s all ease;
        letter-spacing: 0.4px;
        font-size: var(--lengthMd1);
        resize: none;
        color: var(--colorText);
        background: transparent;
        border-radius: 4px;
    }

        input[type="text"]:not(.custom):focus::placeholder,
        input[type="search"]:not(.custom):focus::placeholder,
        input[type="email"]:not(.custom):focus::placeholder,
        input[type="password"]:not(.custom):focus::placeholder,
        input[type="number"]:not(.custom):focus::placeholder,
        input[type="tel"]:not(.custom):focus::placeholder,
        select:not(.custom):focus::placeholder,
        textarea:not(.custom):focus::placeholder {
            color: var(--colorAccent);
        }

        input[type="text"]:not(.custom)::placeholder,
        input[type="search"]:not(.custom)::placeholder,
        input[type="email"]:not(.custom)::placeholder,
        input[type="password"]:not(.custom)::placeholder,
        input[type="number"]:not(.custom)::placeholder,
        input[type="tel"]:not(.custom)::placeholder,
        select:not(.custom)::placeholder,
        textarea:not(.custom)::placeholder {
            transition: 0.4s all ease;
        }

        input[type="text"]:not(.custom):hover,
        input[type="search"]:not(.custom):hover,
        input[type="email"]:hover,
        input[type="password"]:not(.custom):hover,
        input[type="number"]:not(.custom):hover,
        input[type="tel"]:not(.custom):hover,
        select:not(.custom):hover,
        textarea:not(.custom):hover,
        input[type="text"]:not(.custom):focus,
        input[type="email"]:not(.custom):focus,
        input[type="password"]:not(.custom):focus,
        input[type="number"]:not(.custom):focus,
        input[type="tel"]:not(.custom):focus,
        select:not(.custom):focus,
        textarea:not(.custom):focus {
            border: 1px solid var(--colorAccent);
            outline: none;
            box-shadow: none;
        }

.font-bold {
    font-weight: 600 !important;
}

.mb-3 {
    margin-bottom: 3rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-_0_5 {
    margin-bottom: 0.5rem;
}

b {
    font-weight: 600;
}

.custom-button {
    padding: 0.45rem 1.4rem;
    font-size: var(--lengthMd1);
    border-radius: 0;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    /* letter-spacing: 1px; */
    opacity: 1;
    cursor: pointer;
    width: max-content;
    transition: 0.2s all ease;
    border-radius: 4px;
    /*min-width: 180px;*/
    border: 2px solid transparent;
}

.custom-button.disabled {
    border: 2px solid transparent;
    background: #efefef;
}

.custom-button.disabled:hover {
    background: #ddd;
}

.custom-button.transparent {
    border: 2px solid transparent;
    background: transparent;
    color: var(--colorPrimary);
}

.custom-button.transparent:hover {
    background: #efefef;
}

.custom-button.sm {
    padding: 0.6rem 1.5rem;
    font-size: var(--lengthSm2);
}

.custom-button.sm.text-sm-3 {
    font-size: var(--lengthSm3);
}

.w-max {
    width: max-content;
}

.custom-button.color-error {
    color: var(--colorError);
}

.custom-button.w-max {
    min-width: auto;
}

.custom-button > svg {
    margin-right: 0.5rem;
    fill: var(--colorTextPrimary);
    transition: 0.2s all ease;
}

.custom-button.colored:hover svg {
    fill: var(--colorPrimary);
}

.custom-button.colored2 > svg,
.custom-button.colored svg {
    fill: #fff;
}

.custom-button.colored2:hover svg {
    fill: var(--colorThemeGrey);
}

.custom-button.bordered {
    border: 2px solid var(--colorAccent);
    background: transparent;
    color: var(--colorAccent);
    transition: 0.4s all ease;
    cursor: pointer;
    opacity: 0.8;
}

.custom-button.bordered:hover {
    opacity: 1;
}

.custom-button.colored.dark {
    border: 0;
    background: var(--colorPrimary);
    color: #fff;
}

.custom-button.colored:hover {
    background: #fff;
    border: 2px solid var(--colorPrimary);
    color: var(--colorPrimary) !important;
}

.custom-button.colored2:hover {
    background: #fff;
    color: var(--colorThemeGrey);
    border: 2px solid;
}

.custom-button.sm > svg {
    width: 18px;
    height: 18px;
}

.mt-auto {
    margin-top: auto;
}

.mt-3 {
    margin-top: 3rem;
}

.mt-2 {
    margin-top: 2rem !important;
}

.mt-1_5 {
    margin-top: 1.5rem;
}

.mt-1 {
    margin-top: 1rem;
}

.mt-0_5 {
    margin-top: 0.5rem;
}

.custom-button.colored {
    background: var(--colorPrimary);
    color: #fff !important;
}

.custom-button.colored2 {
    background: var(--colorThemeGrey);
    color: #fff;
    border: 2px solid var(--colorThemeGrey);
}

.custom-button.accent {
    border-color: var(--colorAccent);
    background: var(--colorAccent);
}

.custom-button:not(.colored).accent {
    color: #fff;
}

.location-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #efefef;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    height: 50px;
}

    .location-block p {
        margin: 0;
    }

    .location-block input {
        height: 100%;
        padding: 0.5rem;
        max-width: 100px;
        border-radius: 4px;
        border: 0;
        background: white !important;
    }

    .location-block div {
        display: flex;
        height: 100%;
        align-items: center;
    }

.ab {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 200ms all ease;
    border: 2px solid transparent;
    cursor: pointer;
}

    .ab.outline {
        border: 2px solid var(--colorLabel);
        background: transparent;
    }

        .ab.outline svg {
            fill: var(--colorLabel);
        }

    .ab.sm {
        width: 28px;
        height: 28px;
    }

    .ab.xs {
        width: 18px;
        height: 18px;
    }

    .ab.grey {
        background: var(--colorThemeGrey);
    }

    .ab.error {
        background: var(--colorError);
    }

    .ab.primary {
        background: var(--colorPrimary);
    }

    .ab svg {
        transition: 200ms all ease;
        fill: #fff;
    }

    .ab.sm svg {
        width: 12px;
        height: 12px;
    }

    .ab.xs svg {
        width: 8px;
        height: 8px;
    }

    .ab:hover {
        border: 2px solid var(--colorPrimary);
        background: #fff;
    }

        .ab:hover svg {
            fill: var(--colorPrimary);
        }

    .ab.error:hover {
        border: 2px solid var(--colorError);
        background: #fff;
    }

        .ab.error:hover svg {
            fill: var(--colorError);
        }

.accordion-body > * {
    opacity: 0;
    transition: 0.2s all ease;
}

.accordion-body.showAccordion > * {
    opacity: 1;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.para-line {
    line-height: 1.75;
}

.map-height {
    height: 60vh;
}

.map-height .p-relative {
    height: 54vh !important;
}

.table-pagination .ReactTable .-pagination {
    height: 43px;
    background: #fff;
    font-size: 12px;
    padding: 0.5rem 0.4rem;
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    width: 18%;
    float: right;
    z-index: 200;
}

.table-pagination .ReactTable .pagination-top .-pagination {
    box-shadow: none;
    /*border: none;*/
    background-color: white;
}

    .table-pagination .ReactTable .pagination-top .-pagination .-center > span:last-child {
        position: absolute;
        right: 18%;
    }

.table-pagination .ReactTable .-pagination input, .ReactTable .-pagination select {
    /*padding: 0.8rem 1rem !important;*/
    height: 35px;
}

    .table-pagination .ReactTable .-pagination input, .ReactTable .-pagination select:hover {
        border: 1px solid var(--colorPrimary);
        outline: none;
    }

.table-pagination .ReactTable .-pagination .-pageJump input {
    border: none;
}

.table-pagination .ReactTable .-pagination .-btn {
    background: transparent !important;
    font-weight: bolder;
    padding: 0px 10px !important;
    border-radius: 4px !important;
    color: #000 !important;
    width: 50% !important;
    margin-left: 13px;
}

    .table-pagination .ReactTable .-pagination .-btn:hover {
        background: var(--colorPrimary);
        color: white;
    }

    .table-pagination .ReactTable .-pagination .-btn:hover {
        background: var(--colorError) !important;
        color: #fff !important;
    }

    .table-pagination .ReactTable .-pagination .-btn[disabled] {
        cursor: pointer !important;
        opacity: 1 !important;
        width: auto;
    }

.table-pagination .ReactTable .-pagination .-pageJump input {
    width: 30px !important;
    text-align: center;
    padding: 0px !important;
}

.table-pagination .ReactTable {
    border: none;
}

    .table-pagination .ReactTable .rt-table .rt-thead {
        background: none;
        padding-bottom: 0.6rem;
    }

        .table-pagination .ReactTable .rt-table .rt-thead .rt-tr .rt-th {
            border: none;
        }

            .table-pagination .ReactTable .rt-table .rt-thead .rt-tr .rt-th .rt-resizable-header-content {
                font-weight: 600;
                color: #484848;
                text-transform: uppercase;
                font-size: 13px;
                letter-spacing: 0.5px;
            }


    .table-pagination .ReactTable .rt-table .rt-tbody .rt-tr-group .rt-tr {
        background: #F9F9F9 !important;
        height: 40px;
        align-items: center;
        box-shadow: 0 2px 3px -3px grey;
    }

        .table-pagination .ReactTable .rt-table .rt-tbody .rt-tr-group .rt-tr .rt-td {
            border: none;
        }

    .table-pagination .ReactTable .-pagination .-pageInfo {
        height: 26px;
        position: absolute;
        top: 1px;
    }

.table-bottom-pagination .ReactTable .-pagination {
    height: 43px;
    background: #fff;
    font-size: 12px;
    padding: 0.5rem 0.4rem;
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    width: 18%;
    float: right;
    z-index:200;
}

.table-bottom-pagination .ReactTable .pagination-bottom .-pagination {
    box-shadow: none;
    /*border: none;*/
    background-color:white;
}

    .table-bottom-pagination .ReactTable .pagination-bottom .-pagination .-center > span:last-child {
        position: absolute;
        right: 18%;
    }

.table-bottom-pagination .ReactTable .-pagination input, .ReactTable .-pagination select {
    /*padding: 0.8rem 1rem !important;*/
    height: 35px;
}

    .table-bottom-pagination .ReactTable .-pagination input, .ReactTable .-pagination select:hover {
        border: 1px solid var(--colorPrimary);
        outline: none;
    }

.table-bottom-pagination .ReactTable .-pagination .-pageJump input {
    border: none;
}

.table-bottom-pagination .ReactTable .-pagination .-btn {
    background: transparent !important;
    font-weight: bolder;
    padding: 0px 10px !important;
    border-radius: 4px !important;
    color: #000 !important;
    width: 50% !important;
    margin-left: 13px;
}

    .table-bottom-pagination .ReactTable .-pagination .-btn:hover {
        background: var(--colorPrimary);
        color: white;
    }

    .table-bottom-pagination .ReactTable .-pagination .-btn:hover {
        background: var(--colorError) !important;
        color: #fff !important;
    }

    .table-bottom-pagination .ReactTable .-pagination .-btn[disabled] {
        cursor: pointer !important;
        opacity: 1 !important;
        width: auto;
    }

.table-bottom-pagination .ReactTable .-pagination .-pageJump input {
    width: 30px !important;
    text-align: center;
    padding: 0px !important;
}

.table-bottom-pagination .ReactTable {
    border: none;
}

.table-bottom-pagination .ReactTable .rt-table .rt-thead {
    background: none;
    padding-bottom: 0.6rem;
}

    .table-bottom-pagination .ReactTable .rt-table .rt-thead .rt-tr .rt-th {
        border: none;
    }

        .table-bottom-pagination .ReactTable .rt-table .rt-thead .rt-tr .rt-th .rt-resizable-header-content {
            font-weight: 600;
            color: #484848;
            text-transform: uppercase;
            font-size: 13px;
            letter-spacing: 0.5px;
        }


    .table-bottom-pagination .ReactTable .rt-table .rt-tbody .rt-tr-group .rt-tr {
        background: #F9F9F9;
        height: 40px;
        align-items: center;
        box-shadow: 0 2px 3px -3px grey;
    }

    .table-bottom-pagination .ReactTable .rt-table .rt-tbody .rt-tr-group .rt-tr .rt-td {
        border: none;

    }

    .table-bottom-pagination .ReactTable .-pagination .-pageInfo {
        height: 26px;
        position: absolute;
        bottom: 10px;
    }

    .btc {
        color: #18394f;
        font-size: 15px;
    }



.work-left {
    display: flex;
    /*flex-direction: column;
    justify-content: space-between;*/
    padding: 2rem 1rem;
    transition: 0.4s all ease;
}

    .work-left.showPanel {
        min-width: 18rem;
        max-width: 18rem;
    }

    .work-left:not(.showPanel) {
        min-width: 4.75rem;
        max-width: 4.75rem;
    }

        .work-left:not(.showPanel) .nav-list a span {
            opacity: 0;
            display: none;
        }

        .work-left:not(.showPanel) .nav-top h5 {
            display: none;
        }

    .work-left .nav-list a span {
        opacity: 1;
        transition: 0.4s all ease;
    }

    .work-left .nav-top h5 {
        animation: fade-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }

    .work-left:not(.showPanel) .nav-top > div {
        justify-content: center;
    }

.nav-top > div {
    min-height: 42px;
}

.nav-btn {
    background: transparent;
    border: 0;
    border-radius: 4px;
    padding: 0.25rem;
    transition: 0.4s all ease;
}

    .nav-btn:hover {
        background: var(--colorGrey);
    }

    .nav-btn img {
    }

.nav-list {
    /*margin: 2rem 0 0;*/
}

    .nav-list > li:not(:last-child) {
        margin-bottom: 0.5rem;
    }

    .nav-list a {
        transition: 0.4s all ease;
        padding: 0.75rem;
        border-radius: 6px;
        display: flex;
        font-size: var(--lengthMd1);
        align-items: center;
        line-height: 1;
        text-decoration: none;
        color: black;
    }

        .nav-list a:hover {
            /*background: var(--colorGrey);*/
        }

        .nav-list a img {
            width: 2.5rem;
            height: 2.5rem;
            text-align: left;
            object-fit: cover;
        }

        .nav-list a span {
            margin-left: 0.75rem;
        }

.nav-bottom {
}

.work-right {
    flex: 1;
}

.work-top,
.work-mid {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.work-top-right {
    display: flex;
    align-items: center;
}

.search-input {
    position: relative;
}

    .search-input input {
    }

    .search-input img {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        right: 1rem;
    }

    .search-input i {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        right: 1rem;
    }

.work-top-right button {
    background: #fff;
    border: 1px solid #e6e6e6;
    height: 50px;
    width: 50px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s all ease;
}

    .work-top-right button:hover {
        border-color: var(--colorPrimary);
    }

    .work-top-right button img {
    }

.work-mid {
    padding: 1.5rem 2rem;
}

.flex-space h5 img {
    margin-bottom: 5px;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #eee;
}

.flex-space h5 {
    padding: 0.75rem;
}

.work-top {
    background: #f6f6f6;
    padding: 2rem;
}

.uppercase {
    text-transform: uppercase;
}

.color-light {
    color: #fff;
}

.color-dark {
    color: var(--colorTextPrimary);
}

.color-accent {
    color: var(--colorAccent);
}

.color-primary {
    color: #ff6767 !important;
}

.color-text {
    color: var(--colorText);
}

.color-primary-2 {
    color: var(--colorPrimary2);
}

.color-grey {
    color: var(--colorLabel);
}

.color-error {
    color: var(--colorError);
}

.bg-accent {
    background: var(--colorAccent);
}

.bg-accent-2 {
    background: var(--colorAccent2);
}

.sub-header {
    font-weight: 500;
    font-size: var(--lengthMd3);
    margin: 0 0 1rem;
}

.sec-header {
    font-weight: 500;
    font-size: var(--lengthMd2);
    margin: 0 0 1rem;
}

.custom-button.accent:hover {
    border-color: var(--colorAccent);
    background: #fff;
    color: var(--colorAccent) !important;
}

    .custom-button.accent:hover svg {
        fill: var(--colorAccent);
    }

.custom-button > svg {
    margin-right: 0.5rem;
    fill: var(--colorTextPrimary);
    width: 16px;
    height: 16px;
    transition: 0.2s all ease;
}

.custom-button.accent > svg {
    fill: #fff;
}

.work-body {
    padding: 1.5rem 2rem;
    background: #f6f6f6;
}

.mr-right-1 {
    margin-right: 1rem;
}

input[type="text"]:not(.custom),
input[type="search"]:not(.custom),
input[type="email"]:not(.custom),
input[type="password"]:not(.custom),
input[type="number"]:not(.custom),
input[type="tel"]:not(.custom),
select:not(.custom),
textarea:not(.custom) {
    padding: 0.45rem 1rem;
    border: 1px solid #e6e6e6;
    transition: 0.4s all ease;
    letter-spacing: 0.4px;
    font-size: var(--lengthMd1);
    resize: none;
    color: var(--colorText);
    background: #fff;
    border-radius: 4px;
}

.stage-number {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffcbcb;
    font-weight: 600;
    font-size: var(--lengthMd1);
}

.symbol {
    margin: 0;
    background: #ff5353;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.help-icn li:last-child a {
    /*font-size: 1.7rem;*/
}

.help-icn li:last-child a span {
    font-size: var(--lengthMd1);
}

.comp-toggle {
    width: 16rem !important;
    justify-content: space-between;
}

    .comp-toggle span {
        margin: 0 !important;
        /*padding-left: 0;
        justify-content: start !important;
        align-items: start !important;*/
        box-shadow: var(--shadow1);
    }

.work-left:not(.showPanel) .nav-list .comp-toggle span {
    display: none;
}

/*.work-left.showPanel .nav-list li:first-child {
    margin-bottom: 2rem;
}

.work-left .nav-list li:first-child {
    margin-bottom: 2rem;
}*/

.menu-btn {
    margin-bottom: 2rem !important;
}

.lead-body div:last-child span {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    display: block;
    position: relative;
    z-index: 1;
}

.lead-footer div:first-child {
    display: flex;
    flex-direction: column;
}

    .lead-footer div:first-child span:first-child {
        margin: 0 0 0.25rem;
        font-size: var(--lengthMd1);
        font-weight: 600;
    }

    .lead-footer div:first-child span:last-child {
        margin: 0;
        font-weight: 500;
        color: var(--colorLabel);
        font-size: var(--lengthSm2);
    }

.stage-count {
    color: #03394F;
    background: #e4e4e473;
    width: 22px;
    height: 22px;
    margin-right: 12px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    padding: 0;
}

a.selectedStagesLead span {
    background: white;
    font-weight: 700;
}

.selectStageTag:hover span {
    background: white;
    font-weight: 700;
}

.selectReqTag:hover span {
    background: white;
    font-weight: 700;
}

.selectStageWrapper {
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

#nevBarProfineImage {
    border-radius: 50%;
}

.req-add-new > div > a:first-child {
    margin-left: 0;
}

.stage-mid {
    border: 1px solid #e1e1e1;
    border-radius: 8px;
}

.gb-search-ht {
    height: 50px;
    margin-right: 1px;
    width: 20rem;
}

.visit-btn {
    width: 18% !important;
}

.visit-btn i {
    font-size: 0.8rem;
}

.show-map-end {
    justify-content: flex-end;
}

.switch.on .switch-toggle {
    left: 28px !important;
}

.switch-toggle {
    width: 21px !important;
    height: 21px !important;
    top: 1px;
}

.focus-drop-btn {
    background: #fff;
    border: 1px solid #e6e6e6;
    height: 50px;
    width: 50px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s all ease;
}

.add-lead-btn-end {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
}

.default-contact-heat {
    background: white;
    border-radius: 4px;
    padding: 0.25rem 1.5rem;
    margin-top: 1.5rem;
}

    .default-contact-heat p {
        display: flex;
        justify-content: space-between;
    }

    .default-contact-heat p div label {
        display: flex;
        margin-bottom: 5px !important;
    }

    .default-contact-heat p div:last-child {
        display: flex;
    }

@media (min-width: 769px) {
    .row-center {
            flex-direction: row !important;
        }

        .row-center-center {
            flex-direction: row !important;
        }

        .grid-outer > div:first-child {
            padding-right: 2rem;
            border-right: 1px solid var(--colorGrey2);
        }

        .grid-outer > div:last-child {
            padding-left: 2rem;
        }

        .property-search {
            min-width: 400px;
        }

        a {
            cursor: pointer;
        }

        .mdl-xl {
            width: 90vw;
        }

        .mdl-lg {
            width: 80vw;
        }

        .search-input input {
            min-width: 18rem;
        }
    }
    /*New interface changes end - wazil*/
    /*Ashfaq Changes*/
    .lead-contact-details {
    background: #F7F7F7;
    padding: 15px;
    margin-bottom: 0.8rem;
    border-radius:0px !important;
}

.work-left2.showPanel2 {
    min-width: 18rem;
    max-width: 18rem;
    background: #EEEEEE;
    overflow: auto;
    position: relative;
    opacity: 1;
    width: 18rem;
    overflow-x: hidden;
}

.work-left2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.8rem 0.8rem;
    width: 0;
    opacity: 0;
    transition: 0.4s all ease;
}

.enguiry-top, .assigned-to, .lead-value {
    background: #F7F7F7;
    padding: 15px;
    margin-bottom: 0.8rem;
}

.enquiry-title {
    font-size: 18px;
}

.user-details {
    padding: 15px;
}

.user-details p{
    font-weight: 700;
    font-size: 16px;
    margin: 5px 0px 0px 0px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 54px !important;
    height: 26px;
    margin-bottom: 0;
}

.lead-share-switch span {
    font-size: 15px;
    font-weight: 600 !important;
}

.enguiry-contact a {
    text-decoration: underline;
    color: #1293DD !important;
    margin-left: 10px;
    font-size: 14px;
}

.title-secondary {
    font-weight: 700;
    font-size: 16px;
    margin: 0px;
}

.title-secondary {
    font-weight: 700;
    font-size: 16px;
    margin: 0px;
}

.mr-3, .mx-3 {
    margin-right: 1rem !important;
}

.label-yellow {
    background: #FBF2CC;
    display: flex;
    font-size: 11px;
    height: 28px;
    align-items: center;
    border-radius: 4px;
    padding: 0px 8px 0px 8px;
}

.enter-amount {
    display: flex;
    align-items: center;
    flex-flow: nowrap;
}

.assign-options a {
    background: #fff;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
}

.label-yellow {
    background: #FBF2CC;
    display: flex;
    font-size: 11px;
    height: 28px;
    align-items: center;
    border-radius: 4px;
    padding: 0px 8px 0px 8px;
}

.enter-amount {
    display: flex;
    align-items: center;
    flex-flow: nowrap;
}

.enter-amount input {
    height: 32px;
    padding: 0px 8px!important;
    font-size: 13px!important;
    width: 95%;
    margin-right: 8px;
}

.btn-green {
    background: #1EA646;
    height: 30px;
    color: #fff;
    font-size: 12px;
    padding: 5px 22px;
    border: 1px solid transparent;
    transition: all 0.4s ease;
}

.btn-green:hover {
    background: transparent;
    color: #1EA646;
    border-color: #1EA646;
}

.enguiry-actions-padd {
    padding: 0 !important;
}

.enguiry-actions-padd button {
    width: 38%;
    cursor: pointer;
}

.enguiry-actions button {
    width: 48%;
    cursor: pointer;
}

.enguiry-actions {
    padding: 0px !important;
}

.btn-dark-green {
    border: 0;
    font-size: 12px;
    padding: 0px 10px;
    background: #03394F;
    color: #fff;
    border-radius: 4px;
    height: 30px;
    border: 1px solid transparent;
    transition: all 0.4s ease;
}

.btn-dark-green:hover {
    background: transparent;
    color: #03394F;
    border-color: #03394F;
}

.btn-dark-red {
    border: 0;
    font-size: 12px;
    padding: 0px 10px;
    background: #FF6060;
    color: #fff;
    border-radius: 4px;
    height: 30px;
    border: 1px solid transparent;
    transition: all 0.4s ease;
}

.btn-dark-red:hover {
    background: transparent;
    color: #FF6060;
    border-color: #FF6060;
}

#profileBtn {
    background: none;
    outline: 0;
    margin-left: -1.7em;
    z-index: 99;
    margin-right: -1.7em;
    display: flex;
    align-items: end;
    margin-bottom: 13vh;
}

.lead-details-item-count {
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
    transform: translate(50%, -50%);
    font-size: 0.5rem;
    width: 0.9rem;
    height: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--customRed);
    color: #fdfdfd;
    box-shadow: var(--shadow1);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: 600;
}

.noti-pop {
    position: absolute;
    background: #F27171;
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    line-height: 0;
    border-radius: 30px;
    right: 1px;
    top: -3px;
}

.ReactTable .rt-tbody .rt-tr-group {
    border-bottom: 8px solid transparent !important;
    
}

.workspace-textbox {
    padding: 0.8rem 1rem !important;
}
.global-search-top-wrap {
    position: relative;
    display: flex;
    animation: fade-in-top 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.Number-Label {
    border-radius: 100%;
    width: 19px;
    height: 19px;
    font-size: 9px;
    padding: 0px !important;
    position: absolute;
    top: 0px;
    right: 3px;
    z-index: 9999;
    background-color: red !important;
}

.noti-wrap {
    flex-direction: column;
    position: absolute;
    right: 1rem !important;
    background: #fff;
    box-shadow: var(--shadow4);
    color: #333;
    overflow: hidden;
    z-index: 20;
    top: 5rem;
    width: 12vw;
}
.rotate-icon {
    transform: rotate(180deg);
}

.border-radius-4 {
    border-radius: 4px;
}

.lead-req-click{
    cursor:pointer;
    color:darkblue;
    text-decoration:underline;
}