/*************************
      General
  *************************/

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    outline: none;
    color: #504747;
    font-size: 14px;
    line-height: 22px;
    font-weight: normal;
    background-color: #EFEEEE /*#f8f1f4*/;
}

a, .btn {
    color: #001233;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    text-decoration: none;
    cursor: pointer;
}

    a:focus {
        text-decoration: none !important;
    }

    a:focus, a:hover {
        text-decoration: none;
        box-shadow: none !important;
        color: #DB3823;
    }

a, button, input {
    outline: medium none !important;
}

    input:focus, textarea:focus {
        box-shadow: none !important;
    }

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

::placeholder, ::-moz-placeholder, ::-webkit-input-placeholder {
    color: #bbc8d2;
}

.dropdown-menu.show {
    border: 1px solid rgb(222, 222, 222);
    /*box-shadow: 0px 0px 6px 1px rgb(0 0 0 / 10%);*/
}

.btn {
    border-radius: 3px;
    color: #fff;
    border: 0;
    padding: 14px 20px;
    font-size: 14px;
    outline: none;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    display: inline-block;
}

    .btn:focus, .btn:focus:active, .btn:active, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle, .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
        box-shadow: none;
    }

.btn-primary {
    background-color: #001233;
    border-color: #001233;
    color: #ffffff;
}


    .btn-primary:hover {
        background-color: #DB3823;
        border-color: #DB3823;
        color: #ffffff;
    }

    .btn-primary.focus, .btn-primary:focus {
        background-color: #001233;
        border-color: #001233;
        color: #ffffff;
    }

    .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #001233;
        border-color: #001233;
    }

.btn.back-login-btn {
    background-color: #DB3823;
    border-color: #DB3823;
    color: #ffffff;
}

.btn.btn-secondary {
    background-color: #DB3823;
    border-color: #DB3823;
    color: #ffffff;
}

    .btn.btn-secondary:hover {
        background-color: #001233;
        border-color: #001233;
        color: #ffffff;
    }

.btn-secondary.focus, .btn-secondary:focus {
    background-color: #001233;
    border-color: #001233;
    color: #ffffff;
}


.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
    background-color: #001233;
    border-color: #001233;
    color: #ffffff;
}

.btn.back-login-btn:hover {
    background-color: #001233;
    border-color: #001233;
    color: #ffffff;
}

.btn-secondary {
    background-color: #504747;
    border-color: #504747;
    color: #ffffff;
}

    .btn-secondary:hover {
        background-color: #001233;
        border-color: #001233;
        color: #ffffff;
    }

.btn.add-btn {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #001233;
}

    .btn.add-btn:hover {
        background-color: #DB3823;
        border-color: #DB3823;
        color: #ffffff;
    }

.btn.back-btn {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #001233;
}

    .btn.back-btn:hover {
        background-color: #DB3823;
        border-color: #DB3823;
        color: #ffffff;
    }

.btn.submit-btn {
    background-color: #DB3823;
    border-color: #DB3823;
    color: #ffffff;
}

    .btn.submit-btn:hover {
        background-color: #001233;
        border-color: #001233;
        color: #ffffff;
    }

.btn.close-btn {
    background-color: #DB3823;
    border-color: #DB3823;
    color: #ffffff;
}

    .btn.close-btn:hover {
        background-color: #001233;
        border-color: #001233;
        color: #ffffff;
    }

.btn-icon {
    padding: 0px;
    overflow: hidden;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    outline: none;
    border: 0px;
    cursor: pointer;
    text-decoration: none;
    height: 30px;
    width: 30px;
    margin-left: 10px;
    height: 30px;
    width: 30px;
    line-height: 14px;
    font-size: 14px;
    margin-right: 0px /*10px*/;
    color: #fff;
}

    .btn-icon.btn-icon-email:hover svg {
        color: #40a2d9;
    }

    .btn-icon.btn-icon-chat:hover svg {
        color: #819cff;
    }

    .btn-icon.btn-icon-user:hover svg {
        color: #ffd460;
    }

.btn-icon-help.show svg,
.btn-icon-help:hover svg {
    color: #BF0D1C;
}
/*.right-buttons-wrapper .btn-icon {
    padding: 0px;
    overflow: hidden;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    outline: none;
    border: 0px;
    cursor: pointer;
    text-decoration: none;
    height: 30px;
    width: 30px;
    margin-left: 10px;
    height: 30px;
    width: 30px;
    line-height: 14px;
    font-size: 14px;
    margin-right: 0px;
    color: #fff;
}*/

.tab-primary {
    background-color: #BF0D1C;
    border-color: #BF0D1C;
    color: #ffffff;
}

.form-checkbox-group {
    display: block;
}

    .form-checkbox-group input {
        padding: 0;
        height: initial;
        width: initial;
        margin-bottom: 0;
        display: none;
        cursor: pointer;
    }

    .form-checkbox-group label {
        position: relative;
        cursor: pointer;
        margin-bottom: 0px;
    }

        .form-checkbox-group label:before {
            content: '';
            -webkit-appearance: none;
            background-color: transparent;
            border: 2px solid #001233;
            padding: 8px;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            cursor: pointer;
            margin-right: 5px;
            border-radius: 5px;
        }

    .form-checkbox-group input:checked + label:after {
        content: '';
        display: block;
        position: absolute;
        top: 4px;
        left: 6px;
        width: 6px;
        height: 12px;
        border: solid #000;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

/*-----------------------
      Login
-----------------------*/

.login-wrapper {
    text-align: center;
    width: 100%;
    margin-top: 50px;
    margin-bottom: 50px;
    min-height: calc(100vh - 163px);
}

.logo-wrapper {
    margin-bottom: 50px;
}

    .logo-wrapper img {
        max-height: 70px;
    }

.login-form {
    width: 100%;
    height: 100%;
    min-height: 50px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #e8ecf0;
    box-shadow: 0px 0px 3px 0px #e8ecf0;
    padding: 24px;
    max-width: 440px;
    margin: 0 auto;
}

    .login-form .custom-input {
        width: 100%;
        border: 2px solid #e8ecf0;
        background: #fff;
        font-size: 16px;
        line-height: 20px;
        border-radius: 5px;
        height: 52px;
        padding: 0 20px;
    }

.signup-form {
    width: 100%;
    min-height: 50px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #e8ecf0;
    box-shadow: 0px 0px 3px 0px #e8ecf0;
    padding: 24px;
    max-width: 440px;
    margin: 0 auto;
}

    .signup-form .custom-input {
        width: 100%;
        border: 2px solid #e8ecf0;
        background: #fff;
        font-size: 16px;
        line-height: 20px;
        border-radius: 5px;
        height: 52px;
        padding: 0 20px;
    }

.forgot-password-link-wrapper {
    position: relative;
}

.forgot-password-link {
    position: absolute;
    top: 15px;
    right: 15px;
}

fieldset.or-option {
    border-top: 2px solid #f1f4f8;
    text-align: center;
}

.or-option legend {
    text-transform: uppercase;
    padding: 5px;
    color: #6d8291;
    text-align: center;
    margin: 0 auto;
    font-weight: bold;
    font-size: 12px;
    width: 30px;
    letter-spacing: 1px;
}

.btn-google {
    height: 46px;
    width: 191px;
    border: 0;
    outline: none;
    border-radius: 2px;
    background-size: 100% !important;
    background: url(../image/btn_google_signin_dark_normal_web.png) no-repeat;
    cursor: pointer;
}

.btn-microsoft {
    height: 46px;
    width: 191px;
    border: 0;
    outline: none;
    border-radius: 2px;
    background-size: 100% !important;
    background: url(../image/btn_microsoft_signin_normal_web.png) no-repeat;
    cursor: pointer;
}

.btn-signUpGoogle {
    height: 46px;
    width: 180px;
    border: 0;
    outline: none;
    border-radius: 2px;
    background-size: 100% !important;
    background: url(../image/btn_google_signup.png) no-repeat;
    cursor: pointer;
}

.btn-signUpMicrosoft {
    height: 46px;
    width: 180px;
    border: 0;
    outline: none;
    border-radius: 2px;
    background-size: 100% !important;
    background: url(../image/btn_microsoft_signup.png) no-repeat;
    cursor: pointer;
}

/*--------------------
       Footer
--------------------*/

footer {
    border-top: 1px solid #e8ecf0;
    color: #6d8291;
    height: 63px;
    display: flex;
    align-items: center;
}

    footer a {
        color: #6d8291;
    }

    footer ul {
        text-align: right;
    }

        footer ul li {
            display: inline-block;
            margin-left: 30px;
        }

@media only screen and (max-width: 576px) {
    .login-wrapper {
        min-height: calc(100vh - 253px);
    }

    footer {
        height: auto;
        margin-top: 80px;
        margin-bottom: 20px;
        padding-top: 20px;
    }

        footer ul {
            text-align: left;
        }

            footer ul li {
                display: block;
                margin-left: 0px;
                line-height: 16px;
            }

    .copyright-text {
        margin-top: 10px;
    }
}

/*--------------------
       Header
--------------------*/

header {
    display: flex;
    align-items: center;
    -webkit-box-pack: justify;
    flex-wrap: nowrap;
    min-width: 100%;
}

.top-header {
    justify-content: space-between;
    align-items: center;
    background-color: #001233;
    /*height: 60px;*/
    padding: 10px 0px;
}

.header-nav {
    background-color: #ffffff;
    justify-content: center;
    box-shadow: 0px 0px 6px 1px rgb(0 0 0 / 10%);
}

.header-logo a {
    padding-left: 10px;
    padding-right: 10px;
    /* background-color: #ffffff;*/
    border-radius: 5px;
    display: block;
    margin-left: 20px;
}

    .header-logo a img {
        max-height: 35px;
    }

    .header-logo a:hover svg {
        color: #ffffff;
    }

.header-logo svg {
    color: #b8c3d5;
    width: 20px;
    height: 20px;
}

.navbar {
    padding: 0px;
}

    .navbar ul {
        display: flex;
        /*width: 100%;*/
        justify-content: space-between;
        /*padding: 10px 20px;*/
    }

        .navbar ul li a {
            white-space: nowrap;
            line-height: 20px;
            font-size: 16px;
            padding: 10px 15px; /*25px;*/
            color: #fff;
            display: inline-block;
            cursor: pointer;
            position: relative;
            margin-right: 5px; /*15px;*/
        }

            .navbar ul li a:hover, .navbar ul li a:hover svg {
                color: #40a2d9
            }

        .navbar ul li:last-child a {
            margin-right: 0px;
        }

        .navbar ul li a svg {
            color: #fff;
            width: 14px;
            height: 14px;
            margin-top: -3px;
            vertical-align: middle;
            margin-right: 10px;
        }

        .navbar ul li.active a {
            background-color: #ffffff;
            color: #504747;
            border-radius: 5px;
        }

            .navbar ul li.active a svg {
                color: #504747;
            }

.search-input-wrapper {
    width: 300px;
    position: relative;
    margin-right: 10px;
}

    .search-input-wrapper input {
        width: 100%;
        border-radius: 20px;
        height: 40px;
        padding-left: 46px;
        font-size: 16px;
        border: 0px;
        line-height: normal;
        padding-right: 20px;
    }

    .search-input-wrapper svg {
        position: absolute;
        z-index: 999;
        left: 10px;
        top: 7px;
        color: #504747;
    }

.right-buttons-wrapper {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.profile-link-wrapper .dropdown-menu.show {
    padding: 10px;
}

.main-tab-wrapper .profile-link-wrapper .dropdown-more.dropdown-menu.show {
    left: auto !important;
    right: -77px !important;
    margin-top: 0;
}

.main-tab-wrapper .profile-link-wrapper .dropdown-menu.show {
    margin-top: 0;
}

.profile-link-wrapper .dropdown-item {
    padding: 10px;
    border-bottom: 1px solid #f1f4f8;
}

    .profile-link-wrapper .dropdown-item:last-child {
        border-bottom: 0px solid #f1f4f8;
    }

.profile-img-wrapper {
    display: flex;
    align-items: center;
}

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

.top-header .dropdown-toggle {
    color: #fff;
}

.need-help-wrapper {
    text-align: center;
    padding: 20px 15px;
    min-width: 340px;
}

.team-help-wrapper {
    background-color: #001233;
    margin-top: 30px;
    border-radius: 5px;
    color: #ffffff;
    padding: 15px;
}

    .team-help-wrapper .team-images {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

        .team-help-wrapper .team-images img {
            width: 50px;
            height: 50px;
            margin: 0px 10px;
            border-radius: 50%;
        }

    .team-help-wrapper h6 {
        font-size: 14px;
        font-weight: 400;
    }

    .team-help-wrapper p {
        margin-top: 20px;
        margin-bottom: 5px;
        font-size: 16px;
    }

    .team-help-wrapper a {
        color: #ffffff;
        font-size: 16px;
    }

.content-wrapper {
    padding: 20px 0px;
}

.content-bg {
    padding: 10px 15px;
    box-shadow: 0px 0px 6px 1px rgb(0 0 0 / 10%);
    background-color: #ffffff;
    border-radius: 5px;
}

.main-tab-wrapper .nav.nav-pills a {
    color: #504747;
}

.main-tab-wrapper .nav-pills .nav-link.active, .main-tab-wrapper .nav-pills .show > .nav-link {
    color: White;
}

.main-tab-wrapper .nav.nav-pills > a.active {
    color: #001233;
    background-color: transparent;
    position: relative;
}

.main-tab-wrapper .dropdown.profile-link-wrapper .dropdown-menu .dropdown-item.active {
    border-bottom: 3px solid #001233;
}
/* .main-tab-wrapper .nav.nav-pills a.active::after{ */
/* width: 100%; */
/* height: 5px; */
/* content: ""; */
/* position: absolute; */
/* bottom: -15px; */
/* left: 0px; */
/* border:none; */
/* border-bottom: 5px solid #001233; */
/* } */
.custom-card-header {
    border-bottom: 1px solid #f1f4f8;
    padding: 10px 15px 20px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    width: 100%;
}

.content-header-left, .content-header-right {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Roboto';
}

/*.content-header-left svg {
        margin-right: 8px;
    }*/

.custom-card-header .btn-icon {
    background-color: #DB3823;
    /*width: 24px;
	height: 24px;*/
    border-radius: 50%;
    margin: 0px;
    margin-left: 8px;
}

    .custom-card-header .btn-icon:hover {
        background-color: #001233;
        color: White;
    }

.custom-card-header svg {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.custom-card-header .btn {
    font-size: 13px;
    max-height: 30px;
    padding: 9px 15px;
}

.tab-content {
    width: 100%;
}

.custom-card-text {
    padding: 0px 15px;
}

    .custom-card-text .table thead th {
        border-top: medium none;
        border-bottom: 1px solid #f1f4f8;
        color: #504747;
    }

.table-profile-detail {
    display: flex;
}

.profile-detail {
    text-align: center;
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(255 255 255 / 21%);
}

.table-profile-detail .profile-detail a {
    margin-bottom: 0px;
    color: #504747;
    display: block;
    font-size: 14px;
}

.profile-detail a {
    font-size: 24px;
    color: #fff;
    margin-bottom: 10px;
    display: block;
}

.profile-detail span {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
}

.table-contact-info {
    display: flex;
}

    .table-contact-info .table-icon-call {
        padding-right: 7px;
    }

.task-detail li {
    margin-bottom: 5px;
}

.task-detail svg {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.task-detail-wrapper {
    display: flex;
}

.timeline-img {
    width: 100%;
    height: 160px;
    overflow: hidden;
}

    .timeline-img img {
        width: 100%;
    }

.profile-img-big {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin-top: -70px;
    margin-left: 30px;
    margin-right: 30px;
    border: 5px solid #fff;
    flex: 0 0 150px;
    /*box-shadow: 0px 0px 6px 1px rgb(0 0 0 / 10%);*/
}

.profile-detail-text .profile-info {
    display: flex;
    justify-content: space-between;
    flex: 0 0 70%;
}

    .profile-detail-text .profile-info .profile-name,
    .profile-detail-text .profile-info .profile-phone,
    .profile-detail-text .profile-info .profile-mail,
    .profile-detail-text .profile-info .profile-address {
        width: 25%;
    }

.profile-img-big img {
    width: 100%;
}

.profile-detail-text {
    margin-top: 15px;
    display: flex;
}

.add-phonenumber {
    display: flex;
}

    .add-phonenumber a {
        margin-right: 5px;
        width: auto; /*110px;*/
    }

.profile-detail-text svg {
    width: 16px;
    height: 16px;
    margin-bottom: 6px;
    color: #BF0D1C;
}
/*26-07-2021*/
.profile-detail-text .profile-phone svg {
    color: #4ad09f;
}

.profile-detail-text .profile-mail svg {
    color: #40a2d9;
}

.profile-detail-text .profile-address svg {
    color: #ffd460;
}

.profile-detail-text .btn {
    padding: 6px 15px;
    font-size: 13px;
    margin-top: 10px;
}

.profile-detail-text h4 {
    margin-bottom: 4px;
    font-size: 20px;
}

.profile-detail-text p, .profile-detail-text a {
    margin-bottom: 0px;
    font-size: 13px;
    display: block;
    color: #504747;
    font-weight: 500;
    word-break: break-word;
}

    .profile-detail-text a span {
        color: #4ad09f;
        font-size: 11px;
    }

.profile-card-wrapper {
    /* margin-top: 30px; */
    background: #504747;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    min-height: 270px;
    height: 100%;
    max-height: 270px;
    overflow: auto
}
    /*26-07-2021*/
    .profile-card-wrapper.profile-card-details {
        background: #ffd460;
    }

    .profile-card-wrapper.profile-card-background {
        background: #40a2d9;
    }

    .profile-card-wrapper.profile-card-socialprofile {
        background: #819cff;
    }

    .profile-card-wrapper.profile-card-customfields {
        background: #4ad09f;
    }

    .profile-card-wrapper .custom-card-header {
        padding: 0px 5px 10px;
        margin-bottom: 5px;
    }

    .profile-card-wrapper .custom-card-text {
        padding: 0px 5px;
    }

    .profile-card-wrapper .custom-card-header .btn-icon {
        background-color: #ffffff;
    }

        .profile-card-wrapper .custom-card-header .btn-icon svg {
            color: #504747;
        }

    .profile-card-wrapper .custom-card-text p {
        margin-bottom: 5px;
        font-size: 14px;
        word-wrap: break-word;
        font-family: 'Roboto', sans-serif;
    }

.custom-card-text p strong {
    min-width: 60px;
    display: inline-block;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}

.custom-card-text p strong {
    font-size: 14px;
    display: inline-block;
    font-family: 'Roboto', sans-serif;
}

.custom-card-text p span.btn-tag {
    padding: 5px 8px;
    font-size: 14px;
    background: #fff;
    margin-right: 4px;
    border-radius: 30px;
    color: #000;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
}

.create-note-wrapper textarea {
    width: 100%;
    text-align: left;
    background-color: #f9f9f9;
    border-radius: 5px;
    min-height: 200px;
    border: 2px solid #f1f4f8;
    padding: 10px;
    outline: none;
}

.chat-listing-tab .nav-link {
    display: flex;
}

    .chat-listing-tab .nav-link svg {
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }

    .chat-listing-tab .nav-link span {
        font-size: 12px;
        font-weight: 600;
        color: #000;
    }

.chat-header-detail h5 {
    font-size: 14px;
    margin-bottom: 0px;
}

.chat-header-detail span {
    font-size: 13px;
}

.divider {
    border: 1px solid #f1f4f8;
}

.profile-card-wrapper .custom-card-text .follow-us strong {
    min-width: 60px;
}

.profile-card-wrapper .custom-card-text .follow-us span.btn-tag {
    padding: 5px 8px;
    font-size: 12px;
    background: #fff;
    margin-right: 4px;
    border-radius: 30px;
    color: #000;
    font-weight: 500;
    margin-bottom: 5px;
}

.profile-card-wrapper .custom-card-text .follow-us {
    margin-bottom: 5px;
    font-size: 14px;
    display: flex;
    font-family: 'Roboto', sans-serif;
}

.profile-card-wrapper .custom-card-text .follow-us-inner {
    display: flex;
    flex-wrap: wrap;
}

.custom-card-text.upcoming-appointment {
    width: 100%;
}

.appointment-title {
    display: flex;
    justify-content: space-between;
}




.gallery-title {
    font-size: 36px;
    color: #BF0D1C;
    text-align: center;
    font-weight: 500;
    margin-bottom: 70px;
}

    .gallery-title:after {
        content: "";
        position: absolute;
        width: 7.5%;
        left: 46.5%;
        height: 45px;
        border-bottom: 1px solid #5e5e5e;
    }

.filter-button {
    font-size: 18px;
    border: 1px solid #BF0D1C;
    border-radius: 5px;
    text-align: center;
    color: #BF0D1C;
    margin-bottom: 30px;
}

    .filter-button:hover {
        font-size: 18px;
        border: 1px solid #BF0D1C;
        border-radius: 5px;
        text-align: center;
        color: #ffffff;
        background-color: #BF0D1C;
    }

.btn-default.active {
    font-size: 18px;
    border: 1px solid #BF0D1C;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    background-color: #BF0D1C;
}
/**/
.filter-button.active {
    font-size: 18px;
    border: 1px solid #BF0D1C;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    background-color: #BF0D1C;
}

.port-image {
    width: 100%;
}

.gallery_product {
    margin-bottom: 30px;
}

.my-custom-scrollbar {
    position: relative;
    /*height: 200px;*/
    overflow: auto;
}

.table-wrapper-scroll-y {
    display: block;
}

.fileImg {
    min-width: 80px;
    min-height: 60px;
    height: 66%;
    border-radius: 4px;
    background-color: rgb(232, 236, 240);
    margin-right: 10px;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    color: rgb(187, 200, 210);
    text-decoration: none;
    border: 1px solid rgb(232, 236, 240);
    cursor: pointer
}

.fileImg-leaddetail {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background-color: rgb(232, 236, 240);
    /* margin-right: 10px; */
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    text-transform: uppercase;
    font-size: 60px;
    font-weight: bold;
    color: rgb(187, 200, 210); /*#BF0D1C*/
    text-decoration: none;
    border: 1px solid rgb(232, 236, 240);
    cursor: pointer;
}

.fileImg:hover {
    color: #001233;
}

.fileImg img {
    border-radius: 5px;
}

.fileImg-MailboxRight {
    min-width: 30px;
    min-height: 30px;
    height: 66%;
    border-radius: 50%;
    background-color: rgb(232, 236, 240);
    margin-right: 10px;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    color: rgb(187, 200, 210);
    text-decoration: none;
    border: 1px solid rgb(232, 236, 240);
    cursor: pointer;
}

    .fileImg-MailboxRight:hover {
        color: #001233;
    }

.fileImg-leaddetail:hover {
    color: #001233;
}

.file-lead {
    display: flex;
    margin-bottom: 15px;
}

.deleteFilebtn a {
    margin-right: 10px;
}




/*new css Header menu*/
.menu-wrap {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1001;
    width: 300px;
    height: 100%;
    background-color: #dedede;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    transition: all 0.5s cubic-bezier(0.7,0,0.3,1);
    transform: translate3d(360px,0,0);
    padding-bottom: 70px;
}

    .menu-wrap.active {
        transform: translate3d(0px,0,0);
    }

    .menu-wrap .menu .icon-list a {
        position: relative;
        display: block;
        padding: 15px 20px;
        text-decoration: none;
        color: #000;
        font-size: 16px;
        transition: all 0.3s ease;
    }

    .menu-wrap .menu {
        padding-top: 15px;
    }

.menu-button,
.close-button {
    position: fixed;
    top: 0px;
    width: 50px;
    height: 50px;
    background-color: inherit;
    font-size: 20px;
    border: none;
    outline: none;
    cursor: pointer;
    color: #fff;
}

.menu-button {
    right: 0px;
    z-index: 102;
}

.close-button {
    right: 0px;
    z-index: 100;
}

.profile-link-wrapper .dropdown-item {
    background: inherit;
    border-bottom: 0px;
}

.profile-user img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.profile-user {
    text-align: center;
}

.profile-detail-01 {
    text-align: center;
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(255 255 255 / 21%);
}

    .profile-detail-01 a {
        font-size: 24px;
        color: #fff;
        margin-bottom: 10px;
        display: block;
    }

    .profile-detail-01 span {
        font-size: 14px;
        color: #fff;
        margin-bottom: 10px;
    }

    .profile-detail-01 a.agent-doc {
        font-size: 16px;
        margin-bottom: 0px;
        /* margin-top: 15px;*/
    }

        .profile-detail-01 a.agent-doc:hover {
            color: #40a2d9
            /* margin-top: 15px;*/
        }

.top-menu {
    background: #001233;
    padding-top: 40px;
}

.light-button ul {
    display: flex;
}

    .light-button ul li {
        width: 50%;
        text-align: center;
    }

        .light-button ul li a {
            color: #fff;
        }

        .light-button ul li .dropdown-item:hover {
            color: #40a2d9;
        }

        .light-button ul li .dropdown-item {
            border-right: 1px solid rgb(255 255 255 / 21%);
        }

.subscription {
    padding: 20px;
}

    .subscription h5 {
        padding-top: 0px;
    }

.menuscroll {
    height: 100%;
    max-height:300px;
    overflow:auto;
}

ul.sub-icon {
    display: flex;
    flex-wrap: wrap;
}

li.icon {
    flex-wrap: wrap;
    display: flex;
}

ul.sub-icon li.icon a.table-icon-call {
    padding: 0;
    margin-right: 0;
    color: #001233;
}

    ul.sub-icon li.icon a.table-icon-call svg {
        color: #001233;
        width: auto;
        height: auto;
        margin: 0;
    }

li.icon p {
    padding-left: 15px;
}

.search {
    vertical-align: middle;
    display: table;
    height: 100%;
    float: left;
}

    .search .search-btn {
        display: initial;
        height: 22px;
        line-height: 22px;
        position: relative;
        text-indent: -9999px;
        width: 14px;
        transition: color 300ms ease 0s;
        transition: 0.5s ease-in-out;
        color: #fff;
    }

.search-box {
    display: block;
    margin: 0;
    opacity: 0 !important;
    position: absolute;
    right: 15px;
    top: 60px;
    transition: visibility 300ms ease 0s, opacity 300ms ease 0s;
    visibility: hidden;
    width: 327px;
    z-index: 888;
    border-radius: 3px;
    transform: rotateX(90deg);
    transform-origin: 0 0;
    transition: all 400ms ease;
}

    .search-box.open {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }

.search.search-open .search-box {
    opacity: 1 !important;
    visibility: visible !important;
    transform: rotateX(0deg);
}

.search .search-box button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.5s ease-in-out;
}

.search .search-box .form-control {
    height: 58px;
}

.right-buttons-wrapper li {
    list-style: none;
}


/*accordion css*/
.panel-default > .panel-heading {
    color: #333;
    background-color: #fff;
    border-color: #e4e5e7;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .panel-default > .panel-heading a {
        display: block;
        padding: 20px 15px;
        font-size: 16px;
        color: #364650;
    }

        .panel-default > .panel-heading a:hover,
        .panel-default > .panel-heading a:focus {
            color: #364650;
        }

.panel.panel-default {
    margin-bottom: 30px;
}

    .panel.panel-default h4 {
        margin-bottom: 0px;
    }

.panel-collapse {
    background: #fff;
    padding: 20px;
    border-top: 1px solid rgb(232, 236, 240);
}

.panel-default > .panel-heading a:after {
    content: "";
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    float: right;
    transition: transform .25s linear;
    -webkit-transition: -webkit-transform .25s linear;
}

.panel-default > .panel-heading a[aria-expanded="true"] {
    color: #364650;
    background: #fff;
    font-size: 16px;
}

    .panel-default > .panel-heading a[aria-expanded="true"]:after {
        content: "\2212";
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

.panel-default > .panel-heading a[aria-expanded="false"]:after {
    content: "\002b";
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.accordion-option {
    width: 100%;
    float: left;
    clear: both;
    margin: 15px 0;
}

#Mobile {
    position: relative;
    height: 50px;
    border-radius: 0px 50px 50px 0px;
    width: 50%;
}

.input-group-prepend {
    position: relative;
    width: 50%;
}

    .input-group-prepend .input-group-text {
        position: absolute;
        top: -50px;
        right: 0;
        height: 50px;
        background: #BF0D1C;
        border-color: #BF0D1C;
        color: #fff;
        border-radius: 0px 50px 50px 0px;
    }

.accordion-option .title {
    font-size: 20px;
    font-weight: bold;
    float: left;
    padding: 0;
    margin: 0;
}

.accordion-option .toggle-accordion {
    float: right;
    font-size: 16px;
    color: #6a6c6f;
}



/*NEW CSS*/

.custom-card-mail-reply {
    border: 1px solid #dedede;
    border-radius: 5px;
    padding: 20px;
    background-color: #f9f9f9;
    width: 97%;
    margin-left: 3%;
    margin-top: 30px;
    margin-bottom: 30px;
}
/*LOADER CSS*/
/*.circle__spinner {
    animation: 2s linear infinite svg-animation;
    max-width: 100px;
}

.circle_loader {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    background-color: rgba(0,0,0,0.6);
}

.circle__item {
    width: 200px;
    height: 200px;
}*/

/*Mail-box*/

.mail-nav ul li a {
    padding: 5px 0px;
    display: block;
    margin-bottom: 10px;
    color: #504747;
}

.mail-nav ul li .emails-tab.active {
    color: #40a2d9;
}

.mail-nav ul li .texts-tab.active {
    color: #819cff;
}

.mail-nav ul li .calls-tab.active {
    color: #4ad09f;
}

.user-list .media h6 {
    color: #DB3823 /* #504747*/;
}

.user-list .media:hover h6 {
    color: #BF0D1C;
}

.avatar-small {
    width: 50px;
    border-radius: 50%;
}

.mail-topbar {
    background: #ffffff;
    padding: 12px 20px;
}

.badge {
    padding: 6px 5px 5px;
    font-weight: 500;
    /* line-height: 6px;*/
    border-radius: 3px !important;
}


/*new 17-06*/
.bg-white {
    background-color: #ffffff;
}

.content-wrapper.mailbox-wrapper {
    padding: 0px 0px;
    border: 1px solid #dedede;
    margin: 20px;
    border-radius: 5px;
    background-color: #ffffff;
}

    .content-wrapper.mailbox-wrapper .conversations,
    .content-wrapper.mailbox-wrapper .inbox-mailbox,
    .content-wrapper.mailbox-wrapper .mailbox-info,
    .content-wrapper.mailbox-wrapper .myinbox {
        border-right: 1px solid #dedede;
    }

/*.content-wrapper.mailbox-wrapper .myinbox {
        border-right: 1px solid #dedede;
        border-left: 1px solid #dedede;
    }*/

.mailbox-wrapper .content-bg {
    box-shadow: none;
}

.user-list {
    height: 430px /*670px*/;
    overflow-y: auto;
}

    .user-list ul li {
        border-left: 2px solid transparent;
    }

        .user-list ul li:hover {
            border-left: 2px solid #DB3823 /*#BF0D1C*/;
            background-color: #f8f9fa;
        }

.custom-card-mail {
    border: 1px solid #dedede;
    border-radius: 5px;
    padding: 15px;
    background-color: #f9f9f9;
    /*width: 100%;*/
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 15px;
}

    .custom-card-mail .custom-card-header {
        padding: 0;
        padding-bottom: 15px;
    }

        .custom-card-mail .custom-card-header .chat-action .btn {
            padding: 5px 11px;
            height: auto;
            font-size: 10px;
        }

    .custom-card-mail .custom-card-text {
        padding: 0;
    }

        .custom-card-mail .custom-card-text p:last-child {
            margin-bottom: 0;
        }

.content-bg.inbox-mail {
    padding-bottom: 80px;
    position: relative;
}

.inbox-mail-reply {
    margin-top: 30px;
}

    .inbox-mail-reply button i {
        padding-right: 10px;
    }

.content-bg.inbox-mail .inbox-mail-body {
    height: 550px;
    overflow-y: auto;
}

.content-bg.inbox-mail .inbox-mail-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.inbox-mailbox .inbox-mail-footer .form-group {
    position: relative;
}

    .inbox-mailbox .inbox-mail-footer .form-group .form-control {
        border-radius: 0;
        height: 40px;
        background-color: #f9dee0;
        border: 1px solid #f9dee0;
        color: #504747;
    }

    .inbox-mailbox .inbox-mail-footer .form-group .create-note-btn {
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 0;
        padding: 13px 40px;
    }

.mailbox-info-body .contact-info {
    padding: 10px;
}


    .mailbox-info-body .contact-info .phone-info a i {
        color: #4ad09f;
    }

    .mailbox-info-body .contact-info .mail-info a i {
        color: #40a2d9;
    }

.mailbox-info .mailbox-info-body .accordion .card {
    border-radius: 0;
    border-left: none;
    border-right: none;
}

    .mailbox-info .mailbox-info-body .accordion .card .card-header {
        padding: 0px;
        background-color: inherit;
    }

        .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.collapsed {
            color: #504747;
            background-color: #f8f9fa;
        }

            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.collapsed.relationships-btn,
            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.collapsed.details-btn,
            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.collapsed.recent-conversations-btn,
            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.collapsed.activity-btn {
                color: #504747;
            }

        .mailbox-info .mailbox-info-body .accordion .card .card-header .btn {
            color: #BF0D1C;
            background-color: #ffffff;
            border-radius: 0;
            position: relative;
        }

            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.relationships-btn {
                color: #40a2d9;
            }

            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.details-btn {
                color: #ffd460;
            }

            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.recent-conversations-btn {
                color: #819cff;
            }

            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.activity-btn {
                color: #00c4c9;
            }

            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn > i {
                margin-right: 10px;
            }

            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.relationships-btn > i {
                color: #40a2d9;
            }

            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.details-btn > i {
                color: #ffd460;
            }

            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.recent-conversations-btn > i {
                color: #819cff;
            }

            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.activity-btn > i {
                color: #00c4c9;
            }


            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.collapsed span {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                font-size: 12px;
                right: 10px;
            }

            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn span {
                position: absolute;
                writing-mode: vertical-rl;
                right: 10px;
                transform: rotate(90deg);
            }

            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.btn-link:hover {
                text-decoration: none;
                color: #BF0D1C;
                background-color: #ffffff;
            }

            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.btn-link.relationships-btn:hover {
                color: #40a2d9;
            }

            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.btn-link.details-btn:hover {
                color: #ffd460;
            }

            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.btn-link.recent-conversations-btn:hover {
                color: #819cff;
            }

            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.btn-link.activity-btn:hover {
                color: #00c4c9;
            }

            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.btn-link.focus,
            .mailbox-info .mailbox-info-body .accordion .card .card-header .btn.btn-link:focus {
                text-decoration: none;
            }

.mailbox-info .ditail-list li span {
    font-weight: bold;
    margin-right: 15px;
}

.mailbox-info .ditail-list li,
.mailbox-info .recent-list li {
    margin-bottom: 10px;
}

    .mailbox-info .recent-list li a {
        color: #504747;
    }

        .mailbox-info .recent-list li a i {
            margin-right: 10px;
        }

        .mailbox-info .recent-list li a:hover {
            color: #001233;
        }

.content-wrapper.mailbox-wrapper .custom-card-header {
    justify-content: flex-start;
}

.content-wrapper.mailbox-wrapper .inbox-mailbox .custom-card-header .user {
    flex: 0 0 60px;
}

.content-wrapper.mailbox-wrapper .inbox-mailbox .custom-card-header .chat-header-detail {
    flex: 0 0 180px;
}

.content-wrapper.mailbox-wrapper .inbox-mailbox .custom-card-header .chat-action {
    margin-left: auto;
}

.content-wrapper.mailbox-wrapper .custom-card-header .btn-icon {
    margin-left: 0;
    flex: 0 0 24px;
    font-size: 10px;
}

.mailbox-info .activity-body {
    padding: 15px;
}

    .mailbox-info .activity-body .btn {
        font-size: 12px;
        padding: 10px 15px;
    }

/*******New-Style for new mailbox like gmail******/

.conversations .nav-pills li {
    width: 250px;
}

.conversations .nav-pills .nav-link {
    color: #504747;
    font-size: 14px;
    font-weight: 500;
    background-color: inherit;
    padding: 20px; /*10px;*/
}

    .conversations .nav-pills .nav-link i {
        font-size: 18px;
        padding-right: 10px;
    }

.conversations .mail-tab {
    /*padding: 25px 15px;*/
    padding: 0px 0px;
    border-top: 1px solid;
}

.conversations .nav-pills li {
    position: relative;
}

.conversations .nav-pills .nav-link:before {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    bottom: 0;
    content: '';
    display: block;
    height: 3px;
    left: 0;
    margin: 0 8px;
    position: absolute;
    right: 0;
    width: 230px;
    background-color: transparent;
    opacity: 0;
}

.conversations .nav-pills .nav-link.active:before {
    opacity: 1;
}

.conversations .nav-pills .nav-link.active {
    color: #d93025;
}

.conversations .nav-pills .nav-link.emails-tab.active {
    color: #40a2d9;
}

.conversations .nav-pills .nav-link.emails-tab:before {
    background-color: #40a2d9;
}

.conversations .nav-pills .nav-link.texts-tab.active {
    color: #819cff;
}

.conversations .nav-pills .nav-link.texts-tab:before {
    background-color: #819cff;
}

.conversations .nav-pills .nav-link.calls-tab.active {
    color: #4ad09f;
}

.conversations .nav-pills .nav-link.calls-tab:before {
    background-color: #4ad09f;
}

.mail-tab .table tbody tr th {
    border: none;
}

.mail-tab .table-hover tbody tr {
    background: rgba(242,245,245,0.8);
    border-top: 1px solid #dedede;
}


    .mail-tab .table-hover tbody tr:hover {
        box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
        z-index: 2;
        cursor: pointer;
    }

.mail-tab .table th {
    min-width: 185px;
    display: flex;
    align-items: center;
}

.mail-tab .table tr th i {
    padding-right: 9px;
    color: #d2d0d0;
}

.mail-tab .table tr th span {
    font-weight: normal;
}

.mail-tab .table-hover tbody tr.new-mail {
    background-color: #fff;
}

    .mail-tab .table-hover tbody tr.new-mail:hover {
        box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
        z-index: 2;
    }

    .mail-tab .table-hover tbody tr.new-mail th span {
        font-weight: bold;
    }


    .mail-tab .table-hover tbody tr.new-mail td span {
        font-weight: bold;
    }

.main-social {
    padding: 10px 15px;
}

    .main-social ul li i {
        font-size: 18px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;
        transition: all 0.3s ease-out 0s;
        /*font-size: 18px;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 50px;
transition: all 0.3s ease-out 0s;*/
    }

        .main-social ul li i:hover {
            background-color: rgba(32,33,36,0.059);
        }

    .main-social ul li .dropdown-toggle {
        background-color: inherit !important;
        color: #504747 !important;
        padding-left: 0;
    }

    .main-social ul a {
        color: #504747;
    }

    .main-social .dropdown {
        display: flex;
        align-items: center;
    }

    .main-social

    .main-social .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
        color: #fff;
        background-color: #504747;
        border-color: #504747;
    }

    .main-social .custom-control-input:checked ~ .custom-control-label::before {
        color: #fff;
        border-color: #504747;
        background-color: #504747;
    }

    .main-social .custom-control-input:focus ~ .custom-control-label::before {
        box-shadow: inherit;
    }

    .main-social .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
        border-color: transparent;
        ;
    }

.mail-tab .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    color: #fff;
    background-color: #504747;
    border-color: #504747;
}

.mail-tab .custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #504747;
    background-color: #504747;
}

.mail-tab .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: inherit;
}

.mail-tab .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: transparent;
}

/*mail tab*/
.mail-tab .tab-content .mail-name {
    font-weight: bold;
}

.mail-tab .tab-content .mail-sort-des span {
    font-weight: bold;
}

.mail-tab .tab-content .seen-mail .mail-name {
    font-weight: normal;
}

.mail-tab .tab-content .seen-mail .mail-sort-des span {
    font-weight: normal;
}

.mail-tab .tab-content .star i {
    padding-right: 9px;
    color: #d2d0d0;
}

.mail-tab .tab-content .new-mail {
    background: rgba(242,245,245,0.8);
    border-top: 1px solid #dedede;
    padding: 8px;
    cursor: pointer;
}

    .mail-tab .tab-content .new-mail:hover {
        box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
        z-index: 2;
    }

.mail-tab .tab-content .mail-title {
    display: flex;
    flex: 0 0 155px;
    justify-content: flex-start;
}

.mail-tab .tab-content .mail-icon {
    display: flex;
    justify-content: flex-start;
    flex: 0 0 50px;
}

.mail-tab .tab-content .mail-title {
    display: flex;
    justify-content: flex-start;
    flex: 0 0 150px;
}

.mail-tab .tab-content .mail-des {
    justify-content: flex-start;
    overflow: hidden;
}

.mail-tab .tab-content .mail-time {
    display: flex;
    justify-content: flex-end;
    /*flex: 0 0 120px;*/
    padding-right: 5px;
    margin-left: auto;
}

.mail-tab .tab-content .mail-sort-des {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mail-tab .tab-content .mail-content {
    display: flex;
    overflow: hidden;
    width: 100%;
}


.mail-tab .new-mail:hover .mail-time .mail-icon {
    opacity: 1;
}

.mail-tab .new-mail:hover .mail-time span {
    display: none;
}

.mail-time .mail-icon {
    opacity: 0;
}

    .mail-time .mail-icon i {
        font-size: 20px;
        margin: 0px 7px;
    }

.mail-pdf {
    display: inline-block;
    align-items: center;
    border: 1px solid #dedede;
    border-radius: 50px;
    padding: 4px 20px;
    margin-top: 5px;
}

    .mail-pdf span {
        color: #504747;
    }

    .mail-pdf i {
        color: #BF0D1C;
    }


/*mail tab-end*/

/********second-page*******/
.mail-box {
    display: flex;
    padding: 20px;
    border-bottom: 1px solid #f1eaea;
}

    .mail-box ul {
        display: flex;
    }

        .mail-box ul li i {
            font-size: 18px;
        }

.mail-text {
    padding-top: 30px;
    padding-left: 80px;
    padding-right: 30px;
    display: flex;
}

    .mail-text .mail-icon ul li a {
        color: #504747;
    }

.mail-icon ul li i {
    font-size: 16px;
}

.mail-box ul li i,
.mail-text .mail-icon ul li i,
.mail-user ul li i {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    transition: all 0.3s ease-out 0s;
    /*width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 50px;
transition: all 0.3s ease-out 0s;*/
}

    .mail-box ul li i:hover,
    .mail-text .mail-icon ul li i:hover,
    .mail-user ul li i:hover {
        background-color: rgba(32,33,36,0.059);
    }

.mail-box ul li a,
.mail-user ul li a {
    color: #504747;
}

.mail-user-profile img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.mail-description {
    padding: 0 70px 0 97px;
}

.mail-user-description h6 {
    font-weight: normal;
}

    .mail-user-description h6 span {
        font-weight: bold;
    }

.mail-user {
    margin: 30px;
}

    .mail-user .dropdown .btn {
        color: #363636;
        background-color: inherit;
    }

/*.mail-user .dropdown.show {
min-width: 600px;
}*/
.mail-user-description .dropdown-menu.show {
    min-width: 400px;
}

.dropdown-menu.show {
    padding: 10px 20px;
}

    .dropdown-menu.show a.active {
        color: #001233;
    }

    .dropdown-menu.show a {
        color: #DB3823;
    }

.mail-btn {
    margin-bottom: 50px;
    margin-left: 30px;
}

    .mail-btn .rply-btn,
    .mail-btn .frwd-btn {
        color: #363636;
        border: 1px solid #cecbcb;
        padding: 7px 20px;
        border-radius: 4px;
    }

        .mail-btn .rply-btn:hover,
        .mail-btn .frwd-btn:hover {
            background-color: rgba(32,33,36,0.059);
        }


/********************************
     Mail Box Accordian css
**********************************/

.to-me-details .table th {
    text-align: right;
    font-weight: 400;
    width: 50px;
}

.to-me-details .table td, .to-me-details .table th {
    border: none;
    font-size: 14px;
    padding: 5px 10px;
}

.mail-user-profile {
    color: #504747;
}

.mail-user-description {
    text-align: left;
}

.mail-icon {
    color: #504747;
}

.mail-user .btn:hover {
    text-decoration: none;
}

.mail-user .btn {
    padding: 0;
    flex-basis: 50%;
}

#mail-accordion .card-header {
    padding: 5px 10px;
    border: none;
    background-color: #fff;
}

#mail-accordion .card {
    border-bottom: 1px solid rgba(0,0,0,.125);
    border-left: none;
    border-right: none;
    border-top: none;
    padding: 15px 0;
}

#mail-accordion .card-body {
    padding: 5px 15px;
}

#mail-accordion .card-header .mail-icon ul li i:hover {
    background-color: rgba(32,33,36,0.059);
}

#mail-accordion .card-header .mail-icon ul li i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #504747;
    text-align: center;
}


/*new-15-07*/

.lead-detail-tab.main-tab-wrapper .content-bg {
    padding: 0px;
}

.lead-detail-tab.main-tab-wrapper .nav.nav-pills {
    border-bottom: 1px solid #dedede;
}

    .lead-detail-tab.main-tab-wrapper .nav.nav-pills .nav-item .nav-link {
        color: #bbafaf;
        background-color: #f9f9f9;
        border: 1px solid #dedede;
        margin-bottom: -1px;
        border-left: none;
        border-radius: 0;
        padding: 12px 20px;
        font-family: 'Roboto', sans-serif;
        font-weight: bold;
    }

        .lead-detail-tab.main-tab-wrapper .nav.nav-pills .nav-item .nav-link i {
            padding-right: 8px;
        }

    .lead-detail-tab.main-tab-wrapper .nav.nav-pills .nav-item:first-child .nav-link {
        border-radius: 5px 0px 0px 0px;
    }

    .lead-detail-tab.main-tab-wrapper .nav.nav-pills .nav-item a.active {
        color: #ffffff;
        background-color: #001233;
        border-bottom: 1px solid transparent;
        font-family: 'Roboto', sans-serif;
        font-weight: bold;
    }

    .lead-detail-tab.main-tab-wrapper .nav.nav-pills .nav-item #Notes-list-tab.active i,
    .lead-detail-tab.main-tab-wrapper .nav.nav-pills .nav-item #create-note-tab.active i {
        color: #ffffff;
    }

    .lead-detail-tab.main-tab-wrapper .nav.nav-pills .nav-item #Emails-list-tab.active i,
    .lead-detail-tab.main-tab-wrapper .nav.nav-pills .nav-item #send-email-tab.active i {
        color: #ffffff;
    }

    .lead-detail-tab.main-tab-wrapper .nav.nav-pills .nav-item #Texts-list-tab.active i,
    .lead-detail-tab.main-tab-wrapper .nav.nav-pills .nav-item #text-tab.active i {
        color: #ffffff;
    }


    .lead-detail-tab.main-tab-wrapper .nav.nav-pills .nav-item #Calls-list-tab.active i,
    .lead-detail-tab.main-tab-wrapper .nav.nav-pills .nav-item #log-call-tab.active i {
        color: #ffffff;
    }

    .lead-detail-tab.main-tab-wrapper .nav.nav-pills a.active::after {
        content: inherit;
    }

.lead-detail-tab.main-tab-wrapper .tab-content {
    padding-top: 20px;
}

    .lead-detail-tab.main-tab-wrapper .tab-content .create-note-wrapper .text-textarea {
        border: 2px solid #dedede;
        border-radius: 5px;
        padding: 10px;
        padding-bottom: 30px;
        margin-bottom: 15px;
        background-color: #f9f9f9;
        position: relative;
    }

        .lead-detail-tab.main-tab-wrapper .tab-content .create-note-wrapper .text-textarea:hover {
            border: 2px solid #819cff;
        }

        .lead-detail-tab.main-tab-wrapper .tab-content .create-note-wrapper .text-textarea textarea {
            border: none;
            margin-bottom: 15px;
            padding: 0px;
            background-color: inherit;
        }

    .lead-detail-tab.main-tab-wrapper .tab-content #create-note textarea {
        background-color: #fffcf6;
    }

    .lead-detail-tab.main-tab-wrapper .tab-content #create-note .custom-card-text {
        padding-bottom: 15px;
    }

.attachments-area {
    position: absolute;
    bottom: 10px;
    right: 20px;
}

    .attachments-area a {
        font-size: 20px;
        color: #504747;
    }

        .attachments-area a.img-attach input {
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            width: 20px;
            z-index: 2;
            cursor: pointer;
        }

.lead-detail-tab.main-tab-wrapper .tab-pane-footer {
    padding-bottom: 15px;
    padding-top: 15px;
}

    .lead-detail-tab.main-tab-wrapper .tab-pane-footer a {
        color: #504747;
        font-weight: 500;
        font-size: 16px;
    }

        /*.lead-detail-tab.main-tab-wrapper .tab-pane-footer a + a {
            margin-left: 15px;
        }*/

        .lead-detail-tab.main-tab-wrapper .tab-pane-footer a i {
            padding-right: 8px;
        }
.attach-btn .form-control {
    width: 210px;
}

.send-email-btn {
    position: relative;
    background-color: #40a2d9;
}


    .send-email-btn span {
        margin-right: 15px
    }

    .send-email-btn:after {
        position: absolute;
        content: "";
        width: 1px;
        background-color: #ffffff;
        height: 100%;
        top: 0;
        right: 40px;
    }

.send-email-to {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    width: 100%;
    border-bottom: 1px solid #dedede;
}

.save-info {
    border-radius: 30px;
    background-color: #f1f4f8;
    display: flex;
    align-items: center;
    padding: 5px 10px;
}

    .save-info .save-text {
        /*margin-right: 5px;*/
        font-weight: bold;
    }

.send-email-to .form-inline {
    width: 80%;
}

    .send-email-to .form-inline input {
        border-radius: 0;
        border: none;
        width: 90%;
    }

.send-email-to-add {
    margin-left: auto;
}

    .send-email-to-add a {
        color: #504747;
        font-weight: 500;
        font-size: 16px;
        padding-left: 10px;
    }

.send-email-subject {
    margin-bottom: 10px;
}

    .send-email-subject .form-inline input {
        border-radius: 0;
        border: none;
        width: 90%;
    }

#send-email .text-textarea:hover {
    border: 1px solid #40a2d9;
}

#send-email .text-textarea:focus-visible {
    border: 1px solid #40a2d9;
}

.templates-btn {
    padding: 10px 25px;
    color: #504747;
    border-radius: 4px;
    font-size: 14px;
    border: 1px solid #dedede;
}

.send-text-btn {
    background-color: #819cff;
}

.log-call-btn {
    background-color: #4ad09f;
}

#log-call select {
    width: 40%;
}

.log-call-notes {
    background-color: #f6fdfa;
    border: 2px solid #dedede;
    border-radius: 5px;
}

.lead-detail-tab.main-tab-wrapper .tab-content .create-note-wrapper .log-call-notes textarea {
    border: none;
    background-color: inherit;
}

.log-call-notes .log-call-footer {
    padding: 5px 10px 10px 10px;
}

.log-info-btn.btn {
    border: 1px solid #4ad09f;
    color: #4ad09f;
    border-radius: 30px;
    padding: 8px 14px;
    font-size: 12px;
}

    .log-info-btn.btn:hover {
        border: 1px solid #41b88c;
        color: #41b88c;
        background-color: #ffffff;
    }

.lead-detail-list-tab .filter-item {
    margin-left: auto;
    margin-right: 15px;
}

.lead-detail-list-tab ul {
    align-items: center;
}

.lead-detail-list-tab .filter-item a {
    border: 1px solid #dedede;
    color: #504747;
    border-radius: 4px;
    padding: 8px 14px;
    font-size: 12px;
}


.all-list > li {
    display: flex;
    position: relative;
    padding: 0px 25px 25px 20px;
    margin: 0px;
    z-index: 2;
}

    .all-list > li:after {
        position: absolute;
        content: "";
        width: 1px;
        background-color: #dedede;
        height: 100%;
        z-index: -1;
    }

    .all-list > li:last-child:after {
        content: inherit;
    }

.all-list li .list-btn {
    height: 40px;
    width: 40px;
    line-height: 40px;
    display: inline-block;
    text-align: center;
    font-size: 20px;
    color: #ffffff;
    background-color: #BF0D1C;
    border-radius: 100%;
    margin-left: -21px;
    flex: 0 0 40px;
}



.all-list li.call-list-box .list-btn {
    background-color: #4ad09f;
}

.all-list li.text-list-box .list-btn {
    background-color: #819cff; /* #4ad09f;*/
}

.all-list li.mail-list-box .list-btn {
    background-color: #40a2d9;
}

.all-list-info {
    margin-left: 15px;
    width: 100%;
}

.all-info-header {
    border-bottom: 1px solid #dedede;
    margin-bottom: 10px;
    padding-bottom: 10px;
    width: 100%;
    display: flex;
}

.bread-co {
    display: flex;
}

.all-info-header .bread-co li {
    font-size: 16px;
    font-weight: 500;
    color: #504747;
    margin-right: 10px;
}

.all-info-header .chat-action {
    margin-left: auto;
}

.chat-action .btn {
    padding: 8px 20px;
}

    .chat-action .btn span {
        padding-left: 8px;
    }

.info-text {
    font-size: 16px;
    font-weight: 500;
    color: #504747;
    margin-bottom: 0px;
}

.mail-quote {
    margin-top: 30px;
}

    .mail-quote blockquote {
        border-left: 1px solid #dedede;
        padding: 5px 10px;
        margin-left: 10px;
        margin-bottom: 0px;
    }

        .mail-quote blockquote p:last-child {
            margin-bottom: 0px;
        }

.content-info-icon {
    cursor: pointer;
    color: #9a9ea1;
    font-size: 20px;
}

    .content-info-icon:focus,
    .content-info-icon:hover {
        color: #9a9ea1;
    }




.content-info-text {
    display: none;
}

    .content-info-text.show {
        display: block;
    }

.mail-thread-num {
    color: #504747;
}

    .mail-thread-num:focus,
    .mail-thread-num:hover {
        color: #504747;
    }

/*.mail-thread {
    border: 1px solid rgb(215, 222, 226);
    background: rgb(252, 253, 253);
    padding: 15px;
    border-radius: 4px;
    margin-top: 10px;
}*/

/* .mail-thread.show {
        border: inherit;
        background: inherit;
    }*/

.thread-info {
    display: block;
    border: 1px solid rgb(215, 222, 226);
    background: rgb(252, 253, 253);
    padding: 15px;
    border-radius: 4px;
    margin-top: 10px;
    cursor: pointer;
}

.mail-thread.show .thread-info {
    display: block;
}

    .mail-thread.show .thread-info .thread-info-01 {
        display: flex;
        width: 100%;
    }

.mail-icon {
    padding: 0px 8px;
}

.thread-info-right {
    display: flex;
    margin-left: auto;
}

.attach-file {
    display: flex;
    position: relative;
}

.attach-btn {
    display: flex;
    gap: 15px;
    align-items: center;
}

.attach-btn a {
    display: flex;
}

.attach-file input {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 120px;
    z-index: 2;
    cursor: pointer;
}

.creat-note-btn {
    background-color: #ffd460;
}

.mail-oth {
    font-weight: 500;
    margin-right: 8px;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thread-info-02 {
    display: block;
}

/*.mail-thread.show .thread-info.open .thread-info-01 {
    display: none;
}*/

.thread-info.open .thread-info-02 {
    display: block;
}

.thread-info-02 .mail-oth {
    display: flex;
    justify-content: space-between;
    max-width: 100%;
}

    .thread-info-02 .mail-oth .bread-co li {
        margin-right: 8px;
    }

.thread-info-heder p:last-child {
    margin-bottom: 0;
}

.thread-info-heder {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #dedede;
}

.send-email-to.msgfrom {
    display: block;
}

    .send-email-to.msgfrom .form-inline.msgto {
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #dedede;
        width: 100%;
    }


/*text-index*/

.text-index-box {
    /* margin-top: 30px;*/
    border: 1px solid #ddd;
    position: relative;
}

.text-index-header {
    box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
    background-color: #ffffff;
    width: 100%;
    display: inline-block;
    padding: 15px;
    position: sticky;
    top: 0;
    left: 0;
}

.text-index-box .text-index-body {
    overflow-y: scroll;
    height: 100%;
    max-height: 500px;
}

.text-index-header .text-owner-info {
    display: flex;
    align-items: baseline;
}

    .text-index-header .text-owner-info i {
        font-size: 24px;
        color: #819cff;
    }

    .text-index-header .text-owner-info .text-owner-detail {
        margin-left: 10px;
        position: relative;
        width: 100%;
        text-align: center;
    }

    .text-index-header .text-owner-info .text-owner-name {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
        display: block;
        color: #819cff;
    }

    .text-index-header .text-owner-info .text-owner-number {
        font-size: 14px;
        font-weight: bold;
        display: block;
        color: #504747;
    }

.text-index-body {
    padding: 15px;
}

.text-tipy-date {
    text-align: center;
    font-size: 12px;
    color: #93a5b2;
    padding: 10px 0px;
}

.text-assigned {
    text-align: center;
    margin-bottom: 10px;
    color: #93a5b2;
}



.text-send {
    display: flex;
    margin-bottom: 10px;
}

.text-profile-img {
    width: 25px;
    height: 25px;
    line-height: 25px;
    background-color: #d7dee2;
    display: inline-block;
    border-radius: 100%;
    font-size: 16px;
    color: #6d8291;
    text-align: center;
    margin-right: 10px;
}

.text-send .text-content {
    font-size: 14px;
    line-height: 20px;
    min-width: 0px;
    padding: 5px 10px;
    color: #504747;
    background-color: #f1f4f8;
    border-radius: 3px;
}


.text-ripley {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

    .text-ripley .text-content {
        font-size: 14px;
        line-height: 20px;
        min-width: 0px;
        padding: 5px 10px;
        color: #ffffff;
        background-color: #819cff;
        border-radius: 3px;
    }


.text-index-footer {
    position: sticky;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 1;
    background-color: #ffffff;
}

.footer-menu .nav-tabs .nav-item .nav-link {
    font-size: 16px;
    font-weight: bold;
}

    .footer-menu .nav-tabs .nav-item .nav-link i {
        margin-right: 10px;
        color: #819cff;
    }

.write-text {
    margin: 15px;
}

    .write-text .form-group {
        display: flex;
        margin-bottom: 0px;
    }

        .write-text .form-group textarea {
            height: 40px;
            flex: 0 0 65%;
            border: none;
        }

    .write-text .send-text-btn {
        background-color: #819cff;
        padding: 8px 15px;
    }

    .write-text .text-area-right {
        display: flex;
        align-items: center;
        margin-left: auto;
    }

        .write-text .text-area-right .img-attach i {
            font-size: 20px;
            color: #504747;
        }

.text-area-right a.img-attach {
    position: relative;
    margin-right: 10px;
}

    .text-area-right a.img-attach input {
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        width: 20px;
        z-index: 2;
        cursor: pointer;
    }

/*Task Page CSS 01-09-2021*/
.tasks-box-content .tasks-box-header .tasks-title .title {
    font-size: 16px;
}

.tasks-box-content {
    width: 500px;
    margin: 0 auto;
    box-shadow: 0px 0px 6px 1px rgb(0 0 0 / 10%);
    background-color: #ffffff;
    border-radius: 5px;
}

    .tasks-box-content .tasks-box-header {
        border-bottom: 1px solid #dee2e6;
        padding: 15px;
        display: flex;
        justify-content: space-between;
    }

        .tasks-box-content .tasks-box-header .tasks-title {
            display: flex;
            align-items: center;
        }

    /*.tasks-box-content .tasks-box-list{
    padding: 15px;
}*/

    .tasks-box-content .tasks-box-list h5 {
        font-size: 14px;
        padding: 15px;
        font-weight: normal;
        margin-bottom: 0;
    }

    .tasks-box-content .list-box-header {
        display: flex;
        align-items: flex-start;
        border-bottom: 1px solid #dee2e6;
        padding: 15px;
    }

        .tasks-box-content .list-box-header .chat-header-detail {
            display: flex;
            flex-direction: column;
        }

        .tasks-box-content .list-box-header .chat-action {
            margin-left: auto;
        }

        .tasks-box-content .list-box-header .form-checkbox-group {
            padding: 10px 10px 10px 0px;
        }

.future-tasks-box {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 50px 15px;
}

    .future-tasks-box i {
        font-size: 36px;
        margin-bottom: 10px;
        color: #bbafaf;
    }

    .future-tasks-box h5 {
        color: #bbafaf;
    }

.document-sorting {
    display: flex;
    width: 40%;
    margin: 0 auto;
}

/**===== calendar =====*/
.calendarsidebar {
    border-right: 1px solid #dedede;
}

    .calendarsidebar .content-bg {
        padding: 0;
    }

    .calendarsidebar .nav-pills .nav-item {
        width: 50%;
        /*width: 33.3%;*/
    }

    .calendarsidebar .nav-pills .nav-link {
        padding: 14px 10px;
        font-size: 14px;
        line-height: 45px;
        border: 1px solid #f1f4f8;
        background-color: #f9f9f9;
        text-align: center;
        border-radius: 0px;
        color: #504747;
    }

        .calendarsidebar .nav-pills .nav-link:hover {
            background-color: #ffffff;
            color: #001233;
        }

        .calendarsidebar .nav-pills .nav-link.active {
            border: 1px solid transparent;
            background-color: #ffffff;
            color: #001233;
        }

    .calendarsidebar .tab-content {
        /*padding: 10px 15px;
        max-height: 650px;
        overflow: hidden;
        overflow-y: scroll;*/

        padding: 10px 15px;
        max-height: 410px;
        /* overflow: hidden; */
        /* overflow-y: scroll; */
        overflow: auto;
    }

.calendarsidebar-group .date {
    font-size: 12px;
    font-weight: bold;
    color: #504747;
    background-color: #f9f9f9;
    padding: 10px;
}

.calendarsidebar-group ul {
    list-style-type: none;
}

    .calendarsidebar-group ul li {
        margin: 20px 15px;
    }


.taskitem {
    display: flex;
}

    .taskitem .form-check {
        flex: 0 0 25px;
    }

    .taskitem .taskitem-content {
        flex: 0 0 96%;
    }

    .taskitem .taskitem-topline {
        display: flex;
        align-items: center;
    }

        .taskitem .taskitem-topline .taskitem-time {
            margin-left: auto;
        }

            .taskitem .taskitem-topline .taskitem-time span {
                padding-left: 7px;
            }

.task-user span {
    padding-left: 7px;
}

.calendarsidebar-noitems {
    font-size: 16px;
    color: #bbc8d2;
}


/*===== Agent-Document =====*/



.document-file-bg {
    text-align: center;
    margin-top: 60px;
}

    .document-file-bg img {
        width: 120px;
        height: auto;
    }


.upload-file-box {
    text-align: center;
    margin-top: 50px;
}

    .upload-file-box .form-label {
        font-size: 24px;
        color: #504747;
        font-weight: bold;
    }

.upload-file-browse {
    width: 50%;
    height: 50px;
    border-radius: 30px;
    border: 2px solid #dedede;
    margin: 0 auto;
    margin-top: 30px;
    position: relative;
    z-index: 1;
}

    .upload-file-browse .choose-file {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 20px;
        z-index: -1;
    }

    .upload-file-browse .browse {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 46px;
        line-height: 46px;
        background-color: #f9f9f9;
        border-radius: 0px 30px 30px 0px;
        right: 0;
        padding: 0 20px;
        align-items: center;
        z-index: -1;
    }

    .upload-file-browse input.form-control {
        opacity: 0;
        position: absolute;
        z-index: 2;
        cursor: pointer;
        height: 50px;
    }

.upload-file-list {
    padding: 0px 15px;
    margin: 50px 0px;
}

    .upload-file-list .table-responsive {
        border: 1px solid #dedede;
    }


.action .btn {
    padding: 7px 15px;
    font-size: 13px;
}

    .action .btn i {
        padding-right: 5px;
    }

    .action .btn.cancel {
        background-color: #ffd460;
    }

.drag-and-drop-area {
    /*background: #f0f0f0;
    border-radius: 200px;
    line-height: 200px;
    text-align: center;
    margin-top: 20px;
    width: 100%;
    height: 200px;*/

    background: #001233;
    border-radius: 200px;
    line-height: 50px;
    text-align: center;
    margin-top: 20px;
    width: 50%;
    height: 50px;
    margin: 0 auto;
    cursor: pointer;
    color: #fff
}
.drag-and-drop-area-upload-file {
    background: #001233;
    border-radius: 200px;
    line-height: 50px;
    text-align: center;
    margin-top: 20px;
    width: 50%;
    height: 70px;
    margin: 0 auto;
    cursor: pointer;
    color: #fff
}

.drag-and-drop-area-dragging {
    /* background: #f5f5f5;*/
    background-color: #DB3823
}

.circle__spinner {
    animation: 2s linear infinite svg-animation;
    max-width: 100px;
}

.circle_loader {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    background-color: rgba(0,0,0,0.6);
}

.circle__item {
    width: 200px;
    height: 200px;
}

.directory-list ul {
    margin-left: 10px;
    padding-left: 20px;
    border-left: 1px dashed #ddd;
}

.directory-list li {
    list-style: none;
    color: #DB3823;
    font-weight: normal;
    margin-bottom: 5px;
}

.directory-list a {
    text-decoration: none;
    transition: all 0.2s ease;
}

    .directory-list a:hover {
        border-color: #eee;
        color: #001233;
    }

.directory-list .folder,
.directory-list .folder > a {
    color: #001233;
    font-size: 16px;
}

    .directory-list .folder > a:hover {
        color: #DB3823;
    }

.directory-list li ul {
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 10px;
}

    .directory-list li ul li:hover {
        color: #001233;
        cursor: pointer;
    }

.directory-list li a {
    color: #DB3823;
}
/*
    .directory-list .filelist-ul li {
        color: #001233;
    }

        .directory-list .filelist-ul li:hover {
            color: #DB3823;
            cursor: pointer;
        }
        .directory-list .filelist-ul li a:hover {
            color: #DB3823;
        }*/

.stage {
    /*max-width: 80%;*/
    /* margin: 60px 10%;*/
    position: relative;
}

.folder-wrap {
    display: flex;
    flex-wrap: wrap;
}

    .folder-wrap::before {
        display: block;
        position: absolute;
        top: -40px;
    }

    .folder-wrap:first-child::before {
        display: block;
        position: absolute;
        top: -40px;
    }

.tile {
    border-radius: 3px;
    width: calc(20% - 17px);
    margin-bottom: 23px;
    text-align: center;
    border: 1px solid #001233 /*#eeeeee*/;
    transition: 0.2s all cubic-bezier(0.4, 0.0, 0.2, 1);
    position: relative;
    padding: 35px 16px 25px;
    margin-right: 17px;
    cursor: pointer;
}

    .tile:hover {
        box-shadow: 0px 7px 5px -6px rgba(0, 0, 0, 0.12);
    }

    .tile i {
        color: #001233 /*#00A8FF*/;
        height: 55px;
        margin-bottom: 20px;
        font-size: 55px;
        display: block;
        line-height: 54px;
        cursor: pointer;
    }

        .tile i.mdi-file-document {
            color: #001233 /* #8fd9ff*/;
        }

.back {
    font-size: 15px;
    border-radius: 50px;
    background: #001233 /* #00a8ff*/;
    border: 0;
    color: white;
    width: 30px;
    height: 30px;
    /*margin: 20px 20px 0;*/
    outline: none;
    cursor: pointer;
}

/* Transitioning */
.folder-wrap {
    position: absolute;
    width: 100%;
    transition: .365s all cubic-bezier(.4,0,.2,1);
    pointer-events: none;
    opacity: 0;
    top: 0;
}

    .folder-wrap.level-up {
        transform: scale(1.2);
    }

    .folder-wrap.level-current {
        transform: scale(1);
        pointer-events: all;
        opacity: 1;
        position: relative;
        height: auto;
        overflow: visible;
    }

    .folder-wrap.level-down {
        transform: scale(0.8);
    }

.folderGridview:hover {
    background: #EFEEEE;
}

.mailbox-info-body .contact-info {
    padding: 14px 20px;
}

    .mailbox-info-body .contact-info ul li {
        margin-bottom: 8px;
    }

        .mailbox-info-body .contact-info ul li a {
            display: flex;
            align-items: baseline;
        }

            .mailbox-info-body .contact-info ul li a i {
                margin-right: 8px;
                font-weight: 900;
                font-size: 16px;
            }


/*buyer-box*/
.buyer-box {
    background: #f6f9f9;
    border-top: 5px solid #fab290;
    border-radius: 4px;
    height: 700px;
    min-height: 700px;
}

.deals-box-header {
    background-color: #fff;
    padding: 15px 20px;
    align-items: center;
}

    .deals-box-header i {
        background: #00a1da;
        height: 30px;
        width: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 50%;
        color: #fff;
        cursor: pointer;
    }

.buyer-box p {
    margin: 0px;
    font-weight: 600;
}

.buyer-box h4 {
    margin: 0px;
    font-weight: 600;
}

.buyer-box .price {
    color: #08c99e;
}

.main-street {
    margin: 10px 10px;
    position: relative;
    background: #fff;
    padding: 15px 15px 20px 15px;
}

.lable ul li {
    display: inline-block;
    margin-right: 15px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    background: #d6dde1;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
}

    .lable ul li a img {
        width: 30px;
        height: auto;
    }

    .lable ul li:before {
        position: absolute;
        content: "";
        right: -10px;
        height: 30px;
        width: 1px;
        background: #d6dde1;
    }

    .lable ul li:last-child:before {
        background: none;
    }

/*.lable ul li a {
        background: #d6dde1;
        font-size: 14px;
    }*/

.download-icon {
    position: absolute;
    top: 10px;
    right: 10px;
}

.buyer-box.offer {
    border-top: 5px solid #719df0;
}

.buyer-box.pending {
    border-top: 5px solid #f9cc6b;
}

.buyer-box.closed {
    border-top: 5px solid #08c99e;
}

    .buyer-box.closed .text-red {
        color: red;
    }

.buyer-box .no-deals {
    padding: 50px 20px;
    text-align: center;
    font-weight: 600;
}

    .buyer-box .no-deals a {
        color: #00a1da;
    }

.buyer-box.add-stage a {
    border: none;
    align-items: center;
    color: #00a1da;
    font-weight: 600;
}

.buyer-box.add-stage {
    display: flex;
    justify-content: center;
    align-items: center;
}


/*===== Responsive =====*/
@media (min-width: 1950px) {
    .profile-detail-text .profile-info {
        display: flex;
        justify-content: space-between;
        flex: 0 0 50%;
    }
}

@media (max-width: 1400px) {
    .main-tab-wrapper .nav.nav-pills a {
        padding: 8px 8px;
    }

    .profile-detail-text .profile-name,
    .profile-detail-text .profile-phone,
    .profile-detail-text .profile-mail {
        margin-right: 10px;
    }

    .profile-detail-text .profile-info {
        flex: 0 0 75%;
    }
}

@media (max-width: 1199px) {
    .main-tab-wrapper .nav.nav-pills a {
        padding: 15px 10px;
    }

        .main-tab-wrapper .nav.nav-pills a.active::after {
            bottom: 0px;
        }

    .main-tab-wrapper .nav.nav-pills {
        margin-bottom: 30px;
    }

    .table-contact-info .table-phone-number {
        width: 100px;
    }

    .profile-detail-text {
        display: block;
    }

        .profile-detail-text .profile-info {
            flex: 0 0 100%;
            margin-top: 20px;
        }

    .navbar-collapse {
        position: absolute;
        top: 65px;
        width: 100%;
        background-color: rgb(0, 18, 51);
        z-index: 9;
    }

    .navbar-nav .nav-link {
        padding: 10px 15px;
    }

    .navbar ul li a {
        width: 100%;
        margin-right: 0px;
    }

    .navbar ul li.active a {
        border-radius: 0px;
    }


    .right-buttons-wrapper {
        position: absolute;
        right: 70px;
        margin-right: 0;
        top: 0;
    }

    .top-header .navbar-toggler {
        border-radius: 0;
        color: #ffffff;
        padding: 10px;
    }

    .navbar-toggler-icon {
        position: relative;
        height: 2px;
        background-color: #ffffff;
    }

        .navbar-toggler-icon:before {
            position: absolute;
            content: "";
            height: 2px;
            width: 100%;
            background-color: #ffffff;
            top: 8px;
            left: 0px;
        }

        .navbar-toggler-icon:after {
            position: absolute;
            content: "";
            height: 2px;
            width: 100%;
            bottom: 8px;
            left: 0px;
            background-color: #ffffff;
        }


    .table-profile-detail {
        width: 150px;
    }

    ul.sub-icon li.icon a {
        width: auto;
    }
}

@media (max-width: 991px) {
}


@media (max-width: 767px) {

    .tab-content .custom-card-header {
        display: block;
    }

    .content-header-left,
    .content-header-right {
        justify-content: center;
    }

    .content-header-left {
        margin-bottom: 10px;
    }

    .profile-detail-text {
        display: block;
    }

        .profile-detail-text .profile-info {
            display: block;
        }

        .profile-detail-text .profile-name,
        .profile-detail-text .profile-phone,
        .profile-detail-text .profile-mail {
            margin-bottom: 20px;
        }

    .all-list-info .all-info-header {
        display: block;
    }

        .all-list-info .all-info-header .info-header-left {
            margin-bottom: 20px;
        }

    .thread-info-02 .mail-oth {
        display: block;
    }

        .thread-info-02 .mail-oth .chat-action {
            margin: 15px 0px;
        }

    .profile-detail-text .profile-info .profile-name,
    .profile-detail-text .profile-info .profile-phone,
    .profile-detail-text .profile-info .profile-mail,
    .profile-detail-text .profile-info .profile-address {
        width: auto;
    }
}



@media (max-width: 575px) {

    .right-buttons-wrapper .btn-icon-email,
    .right-buttons-wrapper .btn-icon-chat,
    .right-buttons-wrapper .btn-icon-user,
    .right-buttons-wrapper .btn-icon-help {
        display: none;
    }

    .lead-detail-tab.main-tab-wrapper .nav.nav-pills {
        display: block;
        border-bottom: none;
    }

    .lead-detail-tab .nav-pills .nav-item {
        width: 100%;
    }

    #log-call select {
        width: 100%;
    }

    .lead-detail-list-tab .filter-item a {
        display: inline-block;
        width: 100%;
        text-align: center;
        border-radius: 0;
        margin: 5px 0px;
    }

    ul.sub-icon {
        display: block;
    }
}


@media (max-width: 479px) {

    .search-box {
        right: -70px;
        width: 290px;
    }

    .content-header-right {
        flex-wrap: wrap;
    }

        .content-header-right .btn {
            margin-bottom: 10px;
        }

    .all-list > li {
        display: block;
        padding: 0px 0px 20px 0px;
    }

        .all-list > li:after {
            display: none;
        }

    .all-list li .list-btn {
        margin-left: 0px;
    }

    .all-list-info {
        margin-left: 0;
        width: 100%;
        margin-top: 20px;
    }

    .chat-action .btn {
        display: block;
        margin-bottom: 10px;
    }
}

@media (max-width: 399px) {

    .header-logo a {
        margin: 0;
    }

        .header-logo a img {
            max-height: 25px;
        }
}

#ModelDocumentEditor .modal-dialog.modal-dialog-centered.modal-lg .modal-content {
    height: 800px;
}

#ModelDocumentEditor .modal-dialog.modal-dialog-centered.modal-lg iframe#editorBody {
    height: 620px;
}

.agent-follow-us-inner {
    position: relative;
    padding-right: 15px;
}

    .agent-follow-us-inner > a {
        position: absolute;
        right: 0;
        bottom: 10px;
    }

    .agent-follow-us-inner .btn-tag {
        display: block;
        margin-bottom: 5px !important;
    }


/*css for scroll design in lead details page*/
#style-3::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb {
    background-color: #000000;
}

/*lead details page css*/
.email-address-hide {
    white-space: nowrap;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*  .email-address-hide:hover {
            overflow: visible;
        }*/

.email-address-hide-lead-detail {
    white-space: nowrap;
    width: 100px !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

#ModelDocumentEditor iframe#editorBody {
    width: 100%;
    height: 400px;
    border: none;
}

#ModelDocumentEditor .modal-dialog.modal-dialog-centered.modal-lg {
    max-width: 95%;
}

#ModelVoiceCall iframe#voiceCallBody {
    width: 100%;
    height: 400px;
    border: none;
}

#ModelVoiceCall .modal-dialog.modal-dialog-centered.modal-lg {
    max-width: 95%;
}


.modal-body .iti.iti--allow-dropdown {
    width: 100%;
}

.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
    height: 38px;
}

.conformation-text {
    padding: 15px;
}

    .conformation-text ol li span {
        font-size: 14px;
        display: block;
    }

.nav-details-tab .tab-content {
    padding: 20px;
}

.modal-content .modal-header {
    background-color: #001233;
    color: #ffffff;
}

    .modal-content .modal-header .close {
        color: #ffffff;
        opacity: 1;
    }

label#CustomFiedlTitle {
    font-size: 18px;
    font-weight: 700;
    text-transform: capitalize;
    border-bottom: 1px solid #dee2e6;
    display: block;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.item-hover:hover {
    background-color: #f7f7f7;
}

.sortable-item.item-hover {
    margin-right: 15px;
    margin-left: 15px;
}

.top-hover:hover {
    background-color: #f7f7f7;
}

.body-header {
    border-bottom: 1px solid #ced4da;
    margin: 16px 0px;
    padding: 0px 32px;
}

.delete-hover:hover {
    color: #DB3823;
}

#accordion .card.sortable-item, 
#accordion .sortable-list .card.sortable-item {
    margin-bottom: 15px;
}

#accordion .sortable-list .card.sortable-item:last-child {
        margin-bottom: 0px;
}


/*.modal-header .close::before {
    content:inherit;
}

.modal-header .close::after {
    content: inherit;
}

.modal-header .close {
    margin: 0;
    display: flex;
    align-items: center;
}*/

body #MainCustomerForm,
body #MainDivCustomerForm {
    margin: 0;
    padding-top:50px;
}

body #MainMeetingForm {
    margin: 0;
}

.btn-group.group-conditions .btn.btn-primary {
    background-color: #D0D4D3;
    border-color: #ffffff;
    border: solid 1px;
}
.btn-group.group-conditions .btn.btn-primary.active {
    background-color: #286090;
    border-color: #204d74;
    color: #ffffff;
}

.btn-group.group-conditions .btn.btn-primary.disabled.active {
    background-color: #337ab7;
    border-color: #2e6da4;
    opacity: 0.65;
}

/*pricing-table*/

.pricing-wrapper {
    display: flex;
    grid-gap: 0px;
    justify-content:center
}

.pricing-table {
    box-shadow: none;
    padding: 50px 50px;
    border-radius: 0px;
    position: relative;
    z-index: 1;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    flex: 0 0 33.3%;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

    .pricing-table.pricing-table-free {
        border-radius: 15px 0px 0px 15px;
    }

        .pricing-table.pricing-table-free:hover {
            border-radius: 15px;
        }

    .pricing-table.pricing-table-basic {
        box-shadow: none;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
    }

        .pricing-table.pricing-table-basic:hover {
            border-radius: 15px;
        }

    .pricing-table.pricing-table-premium {
        border-radius: 0px 15px 15px 0px;
    }

        .pricing-table.pricing-table-premium:hover {
            border-radius: 15px;
            cursor:pointer;
        }

    .pricing-table:hover {
        box-shadow: 0px -1px 20px -1px rgba(0, 0, 0, 0.3);
        z-index: 2;
        border: 1px solid #db3823;
    }

    .pricing-table .head {
        margin-bottom: 40px;
        border-bottom: 1px solid #ddd;
        min-height: 140px;
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        transition: all 0.3s linear;
    }

    .pricing-table:hover .head {
        border-bottom: 1px solid #db3823;
    }

    .pricing-table .head .title {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 15px;
        text-transform: capitalize;
        color: #001233;
    }

    .pricing-table .head .description {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 0px;
        color: #504747;
    }

    .pricing-table .content p {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 0px;
    }


    .pricing-table .content .pricing-price {
        vertical-align: baseline;
        border-bottom: 1px solid #ddd;
        padding-bottom: 40px;
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        transition: all 0.3s linear;
    }


    .pricing-table:hover .content .pricing-price {
        border-bottom: 1px solid #db3823;
    }


    .pricing-table .content .pricing-price .symbol {
        font-size: 30px;
        line-height: 60px;
        margin-bottom: 0px;
        color: #001233;
        vertical-align: top;
        font-weight: bold;
    }

    .pricing-table .content .pricing-price .price {
        font-size: 60px;
        line-height: 70px;
        margin-bottom: 0px;
        color: #001233;
        font-weight: bold;
    }

    .pricing-table .content .pricing-price .period {
        font-size: 14px;
        line-height: 14px;
        margin-bottom: 0px;
        color: #504747;
    }

    .pricing-table ul.list {
        margin: 40px 0px;
        display: flex;
        flex-wrap: wrap;
    }

        .pricing-table ul.list li {
            margin-bottom: 10px;
            font-size: 16px;
            line-height: 26px;
            flex: 0 0 50%;
        }

            .pricing-table ul.list li i {
                margin-right: 10px;
            }

                .pricing-table ul.list li i.fa-times-circle {
                    color: #f00000;
                }

            .pricing-table ul.list li:last-child {
                margin-bottom: 0px;
            }

    .pricing-table .btn {
        font-size: 14px;
        font-weight: 600;
        color: #001233;
        display: inline-block;
        text-align: center;
        padding: 14px 40px;
        border: 1px solid #db3823;
        border-radius: 50px;
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3 linear;
        transition: all 0.3 linear;
        text-transform: capitalize;
        position: relative;
        text-decoration: none;
        z-index: 50;
        text-decoration: none;
    }

        .pricing-table .btn:hover {
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
            background-color: #db3823;
            color: #ffffff;
        }

    .pricing-table:hover .btn {
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
        background-color: #db3823;
        color: #ffffff;
    }

    .pricing-table.active {
        box-shadow: 0px -1px 20px -1px rgba(0, 0, 0, 0.3);
        z-index: 2;
        border: 1px solid #db3823;
        border-radius: 15px;
    }

        .pricing-table.active .head {
            border-bottom: 1px solid #db3823;
        }

        .pricing-table.active .content .pricing-price {
            border-bottom: 1px solid #db3823;
        }

        .pricing-table.active .btn {
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
            background-color: #db3823;
            color: #ffffff;
        }



/*Rating css*/
.rating {
    display: flex;
}

    .rating input {
        position: absolute;
        left: -100vw;
    }

    .rating label {
        width: 48px;
        height: 48px;
        padding: 48px 0 0;
        overflow: hidden;
        background: url('../image/stars.svg') no-repeat top left;
    }

    .rating:not(:hover) input:indeterminate + label,
    .rating:not(:hover) input:checked ~ input + label,
    .rating input:hover ~ input + label {
        background-position: -48px 0;
    }

    .rating:not(:hover) input:focus-visible + label {
        background-position: -96px 0;
    }





.cron-minutes {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .cron-minutes label {
        margin: 0;
    }

    .cron-minutes input {
        margin-bottom: 0;
    }

.cron-hourly {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

    .cron-hourly label {
        margin: 0;
        min-width: 100px;
    }

    .cron-hourly input {
        margin-bottom: 0;
    }

.cron-hourly-time {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .cron-hourly-time label {
        margin: 0;
        min-width: 100px;
    }

    .cron-hourly-time select {
        margin-bottom: 0;
    }

.cron-daily {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

    .cron-daily label {
        margin: 0;
        min-width: 100px;
    }

    .cron-daily input {
        margin-bottom: 0;
    }

.cron-daily-time {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .cron-daily-time label {
        margin: 0;
        min-width: 100px;
    }

    .cron-daily-time select {
        margin-bottom: 0;
    }

.cron-weekly {
    display: flex;
    gap: 10px;
}

    .cron-weekly label {
        margin: 0;
        min-width: 100px;
    }

    .cron-weekly .cron-weekly-dayname {
        column-count: 3;
        -webkit-column-count: 3;
        -webkit-column-rule: 0px;
        -moz-column-count: 3;
        -moz-column-rule: 0px;
        column-gap: 15px;
        -webkit-column-gap: 15px;
        -moz-column-gap: 15px;
    }

.cron-weekly-time {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px
}

    .cron-weekly-time label {
        margin: 0;
        min-width: 100px;
    }

    .cron-weekly-time select {
        margin-bottom: 0;
    }



.cron-monthly {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

    .cron-monthly label {
        margin: 0;
        min-width: 100px;
    }

    .cron-monthly input {
        margin-bottom: 0;
    }

.cron-monthly-day {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

    .cron-monthly-day label {
        margin: 0;
        min-width: 100px;
    }

    .cron-monthly-day select {
        margin-bottom: 0;
    }


.cron-monthly-time {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .cron-monthly-time label {
        margin: 0;
        min-width: 100px;
    }

    .cron-monthly-time select {
        margin-bottom: 0;
    }


ul.border-top.single-li li {
    width:100%;
    border-right:0;
    border-left:0;
}