* {
    margin: 0;
    padding: 0;
    /*   font-family: 'Inter', sans-serif;*/
    box-sizing: border-box
}

p,
label,
span,
h1,
h2,
h3,
h4,
ul,
li,
a {
    margin: 0;
    padding: 0
}

img {
    max-width: 100%;
}

.crm-wrapper {
    /*padding: 24px;*/
    background: #efefef
}

    .crm-wrapper .crm-main-heading {
        font-size: 32px;
        line-height: 39px;
        margin-bottom: 16px;
        font-weight: 500
    }

    .crm-wrapper .crm-table .crm-table-top {
        margin-bottom: 16px;
        display: flex;
        flex-wrap: wrap;
        align-items: center
    }

    .crm-wrapper .crm-table .crm-table-top-left {
        width: 24%;
        padding-right: 20px;
        position: relative
    }

        .crm-wrapper .crm-table .crm-table-top-left input {
            width: 100%;
            background: #fff;
            border-radius: 8px;
            height: 40px;
            border: 0;
            font-size: 14px;
            color: #222;
            padding-left: 56px
        }

        .crm-wrapper .crm-table .crm-table-top-left span {
            position: absolute;
            top: 9px;
            left: 16px
        }

            .crm-wrapper .crm-table .crm-table-top-left span img {
                max-width: 20px
            }

    .crm-wrapper .crm-table .crm-table-top-right {
        width: 76%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

        .crm-wrapper .crm-table .crm-table-top-right .crm-table-select {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-right: 20px
        }

            .crm-wrapper .crm-table .crm-table-top-right .crm-table-select:last-child {
                margin-right: 0
            }

            .crm-wrapper .crm-table .crm-table-top-right .crm-table-select p {
                font-size: 16px;
                line-height: 20px;
                color: #222;
                margin-right: 10px
            }

            .crm-wrapper .crm-table .crm-table-top-right .crm-table-select select {
                background: #fff;
                border-radius: 8px;
                height: 40px;
                border: 0;
                font-size: 14px;
                color: #222;
                width: 134px;
                padding-left: 10px
            }

            .crm-wrapper .crm-table .crm-table-top-right .crm-table-select button {
                width: 153px;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                height: 40px;
                background: #222;
                border-radius: 12px;
                border: 0;
                color: #fff;
                font-size: 16px;
                font-weight: 500
            }

                .crm-wrapper .crm-table .crm-table-top-right .crm-table-select button img {
                    padding-right: 10px
                }

    .crm-wrapper .crm-table .crm-table-main table {
        width: 100%;
        border-collapse: collapse
    }

        .crm-wrapper .crm-table .crm-table-main table th {
            font-size: 13px;
            color: #fff;
            font-weight: 500;
            padding: 12px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.3);
            background: #343a40;
            text-align: left
        }

            .crm-wrapper .crm-table .crm-table-main table th:first-child {
                border-top-left-radius: 20px
            }

            .crm-wrapper .crm-table .crm-table-main table th:last-child {
                border-top-right-radius: 20px
            }

        .crm-wrapper .crm-table .crm-table-main table td {
            font-size: 13px;
            color: #222;
            font-weight: 500;
            padding: 12px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.3);
            background: #fff;
            text-align: left
        }

            .crm-wrapper .crm-table .crm-table-main table td .crm-table-action {
                display: flex;
                flex-wrap: wrap;
                align-items: center
            }

                .crm-wrapper .crm-table .crm-table-main table td .crm-table-action a {
                    color: #222;
                    text-decoration: underline
                }

                .crm-wrapper .crm-table .crm-table-main table td .crm-table-action button {
                    padding: 0;
                    border: 0;
                    background: transparent;
                    margin-left: 16px
                }

    /* CRM DELTA CORPORATION PAGE */

    .crm-wrapper .crm-delta-details {
        display: flex;
        flex-wrap: wrap
    }

        .crm-wrapper .crm-delta-details .crm-delta-details-left {
            width: 27%;
            background: #fff;
            padding: 16px;
            border-radius: 20px
        }

        .crm-wrapper .crm-delta-details .crm-delta-details-right {
            width: calc(73% - 24px);
            background: #fff;
            padding: 16px;
            border-radius: 20px;
            margin-left: 24px
        }

.crm-delta-details .crm-delta-details-title {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    line-height: 21px;
    color: #222;
    margin-bottom: 16px
}

.crm-delta-details-left .crm-delta-details-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px;
    font-size: 14px
}

.crm-delta-details-content .delta-details-input {
    width: 137px;
    display: flex;
    flex-wrap: wrap
}

.crm-delta-details-content .delta-details-value {
    width: calc(100% - 152px);
    display: flex;
    flex-wrap: wrap
}

.crm-delta-details-content .delta-details-edit {
    width: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    position: relative
}

.crm-delta-details-content .delta-details-input img {
    margin-right: 10px
}

.crm-delta-details-wrapper .mbot-40 {
    margin-bottom: 40px
}

.service-container .delta-service-btn {
    width: auto;
    height: 37px;
    border-radius: 18px;
    background: #f1f1f1;
    border: 0;
    margin-right: 16px;
    margin-bottom: 16px;
    color: #222;
    font-size: 14px;
    padding: 0 12px;
}

.crm-delta-details-wrapper .delta-archive {
    width: 115px;
    height: 42px;
    border-radius: 8px;
    background: #fff;
    color: #222;
    box-shadow: 0 3px 6px #0000000A;
    margin-right: 16px;
    box-shadow: none
}

.crm-delta-details-wrapper .delta-convert {
    width: 168px;
    height: 42px;
    border-radius: 8px;
    background: #222;
    color: #fff;
    border: 0;
    box-shadow: none
}

.crm-delta-details-right .delta-header {
    background: #efefef;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 16px
}

.delta-header .delta-header-menu {
    width: 100%;
    height: 60px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px
}

.delta-header-menu svg {
    margin-right: 10px
}

.header-menu .delta-header-menu.active {
    background: #222;
    color: #f2b66b
}

    .header-menu .delta-header-menu.active svg path:last-child {
        fill: #f2b66b
    }

.crm-delta-details-right .delta-notes textarea {
    width: 100%;
    height: 180px;
    border-radius: 8px;
    padding: 10px;
    color: #222;
    outline: 0
}

.crm-delta-details-right .discard-btn {
    width: 115px;
    height: 42px;
    background: #fff;
    color: #222;
    border-radius: 8px;
    margin-right: 30px;
    font-size: 14px;
    line-height: 17px;
    box-shadow: none
}

.crm-delta-details-right .save-btn {
    width: 97px;
    height: 42px;
    background-color: #181818;
    font-size: 14px;
    color: #F8FBF6;
    border-radius: 8px;
    line-height: 17px;
    box-shadow: none;
    border: 1px solid #181818;
    border-radius: 8px;
}

    .crm-delta-details-right .save-btn:hover {
        background-color: transparent !important;
        border-color: #181818 !important;
        color: #181818 !important;
    }

.crm-delta-details-right .notes-conform-btn {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-top: 16px
}

.delta-history-wrapper-inner .planned-top .planned-btn {
    width: 140px;
    height: 33px;
    border-radius: 8px;
    background: #222;
    color: #fff;
    font-size: 14px;
    line-height: 17px;
    border: 0
}

.delta-history-wrapper .planned-top {
    margin-bottom: 16px
}

.history-planned-container {
    margin-bottom: 60px;
    padding-left: 62px
}

.crm-delta-details-right .delta-history-wrapper h3 {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 17px;
}

.crm-delta-details-right .delta-history-wrapper h4 {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 17px;
    width: 90%;
}

.history-plan-details .history-plan-input {
    width: 100%;
    height: 52px;
    border: 1px solid #222;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    margin-left: 20px
}

.history-planned-container .history-plan-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
    position: relative
}

    .history-planned-container .history-plan-details:before {
        content: '';
        background: url(../../../img/crm/images/ic_call_big.svg) no-repeat;
        width: 60px;
        height: 60px;
        position: absolute;
        top: -2px;
        left: -53px
    }

.history-planned-container .history-done-details {
    margin-bottom: 20px;
    position: relative;
    padding-left: 20px
}

    .history-planned-container .history-done-details::before {
        content: '';
        background: url(../../../img/crm/images/ic_person_big.svg) no-repeat;
        width: 60px;
        height: 60px;
        position: absolute;
        top: -2px;
        left: -53px
    }

.history-plan-input .history-plan-input-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;
    line-height: 17px
}

.history-done-input .history-done-bottom-input {
    padding: 10px 0;
    font-size: 14px;
    line-height: 17px
}

.plan-schedule-content .planned-call-btn {
    width: 120px;
    border-radius: 8px;
    background: #222;
    color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    padding: 7px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between
}

.plan-schedule-content .plan-schedule-right {
    width: 80%;
    position: relative
}

    .plan-schedule-content .plan-schedule-right input {
        position: relative;
        border: 1px solid #222;
        border-radius: 8px;
        padding: 8px;
        width: 100%;
        background: #f1f1f1;
        font-size: 14px;
        line-height: 17px
    }

.history-planned-container .plan-schedule-content {
    width: 46%;
    background: #f1f1f1;
    border-radius: 14px;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 20px;
    font-size: 14px;
    line-height: 17px
}

.schedule-bottom-content .schedule-hr-btn {
    width: 51px;
    height: 33px;
    background: #fff;
    color: #222;
    border-radius: 8px;
    border: 0;
    margin-right: 10px;
    font-size: 14px;
    line-height: 17px
}

    .schedule-bottom-content .schedule-hr-btn:focus {
        background: #222;
        color: #fff
    }

.schedule-bottom-content .schedule-week-btn {
    width: 89px;
    height: 33px;
    background: #fff;
    color: #222;
    border-radius: 8px;
    border: 0;
    margin-right: 8px;
    font-size: 14px;
    line-height: 17px
}

    .schedule-bottom-content .schedule-week-btn:focus {
        background: #222;
        color: #fff
    }

.plan-schedule-right .schedule-bottom-content {
    margin-top: 10px
}

    .plan-schedule-right .schedule-bottom-content a {
        color: #4070f3;
        text-decoration: none
    }

.history-done-details .history-done-input {
    width: 100%;
    border: 1px solid #222;
    border-radius: 10px;
    padding: 17px
}

.history-done-input .history-done-input-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.history-done-input .history-done-top-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    line-height: 17px
}

.history-plan-input .history-plan-input-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;
    line-height: 17px;
    position: relative
}

    .history-plan-input .history-plan-input-right p {
        margin-right: 20px
    }

.container {
    margin: 0 auto
}

.crm-delta-details .f-14 {
    font-size: 14px;
    line-height: 17px
}

.crm-delta-details .f-19 {
    font-size: 19px;
    line-height: 23px
}

.delta-history-wrapper .delta-history-wrapper-inner {
    position: relative
}

    .delta-history-wrapper .delta-history-wrapper-inner:before {
        content: '';
        width: 1px;
        height: 100%;
        background: rgba(52, 58, 64, 0.2);
        position: absolute;
        top: 0;
        left: 40px
    }

.delta-activity textarea {
    width: 100%;
    height: 60px;
    border-radius: 8px;
    padding: 10px;
    color: #222;
    margin-bottom: 24px
}

.crm-notes-container .delta-documents {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center
}

.delta-documents .choose-documents p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 25px 50px;
    border: 2px dashed #222;
    border-radius: 8px
}

.delta-documents .choose-documents img {
    margin-right: 8px
}

.crm-notes-container .delta-documents.document-details {
    margin-top: 25px
}

.planned-call-btn .planned-call-left img {
    margin-right: 10px
}

.plan-schedule-content .planned-call-left {
    font-size: 14px;
    line-height: 17px
}

.plan-schedule-content .plan-schedule-left {
    font-size: 14px;
    line-height: 17px
}

.delta-activity-bottom .activity-button {
    width: 120px;
    height: 33px;
    border-radius: 8px;
    background: #fcfcfc;
    color: #282d33;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-right: 29px;
    padding: 10px;
    font-size: 14px;
    line-height: 17px
}

    .delta-activity-bottom .activity-button.active {
        background: #222;
        color: #FFF
    }

    .delta-activity-bottom .activity-button .act-img {
        display: none
    }

    .delta-activity-bottom .activity-button.active .act-img {
        display: block
    }

    .delta-activity-bottom .activity-button.active .nor-img {
        display: none
    }

    .delta-activity-bottom .activity-button img {
        margin-right: 10px
    }

.delta-activity-call-details .delta-activity-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px
}

.crm-notes-container .delta-activity-details {
    margin-bottom: 20px
}

.delta-activity-details .delta-activity-call-details {
    background: #efefef;
    padding: 10px;
    border-radius: 8px
}

.delta-activity-call-details .delta-activity-call-input input {
    width: 100%;
    height: 33px;
    border-radius: 8px;
    border: 1px solid #222;
    outline: 0;
    padding: 8px;
    background: #efefef
}

.delta-activity-bottom .activity-button:focus {
    background: #343a40;
    color: #fff
}

.crm-delta-details-right .delta-activity-timeline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px
}

.delta-activity-timeline .delta-activity-timeline-left {
    width: 24px
}

.delta-activity-timeline .delta-activity-timeline-right {
    width: calc(100% - 24px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 -12px;
    padding: 0 12px
}

.delta-activity-timeline .drop-arrow-people {
    position: absolute;
    right: 22px
}

.delta-activity-timeline .drop-arrow {
    position: absolute;
    right: 18px;
    top: 8px
}

.delta-activity-timeline .delta-activity-timeline-right.select-drop {
    position: relative
}

.delta-activity-timeline-right .delta-activity-timeline-input {
    width: calc(25% - 20px);
    padding: 0 12px;
    box-sizing: border-box
}

.delta-activity-timeline-right-input .delta-activity-dash {
    width: 80px;
    text-align: center
}

.delta-activity-timeline-right .delta-activity-timeline-right-input {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.delta-activity-schedule {
    display: flex;
    flex-wrap: wrap
}

.delta-activity-timeline .delta-activity-timeline-right textarea {
    width: 100%;
    height: 114px;
    border-radius: 8px;
    border: 1px solid #222;
    padding: 10px
}

.delta-activity-timeline .delta-activity-timeline-right input {
    width: 100%;
    height: 36px;
    border-radius: 8px !important;
    border: 1px solid #222;
    padding: 9px
}

.delta-activity-time-schedule .delta-activity-timeline input[type='checkbox'] {
    margin-right: 25px;
    margin-left: 2px;
}

.crm-notes-container .delta-activity-time-schedule {
    margin-bottom: 52px
}

.delta-activity-timeline .container-square {
    display: block;
    position: relative;
    padding-left: 80px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 14px;
    line-height: 17px
}

    .delta-activity-timeline .container-square input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0
    }

.delta-activity-timeline .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    padding-left: 80px;
    background-color: #fff;
    border: 1px solid #222
}

.delta-activity-timeline .container-square input:checked ~ .checkmark {
    background-color: #222
}

.delta-activity-timeline .checkmark:after {
    content: "";
    position: absolute;
    display: none
}

.delta-activity-timeline .container-square input:checked ~ .checkmark:after {
    display: block
}

.delta-activity-timeline .container-square .checkmark:after {
    left: 4px;
    top: 0;
    width: 3px;
    height: 9px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.delta-header .header-menu {
    width: 25%
}

.crm-delta-details-right .crm-notes-container {
    margin-bottom: 40px;
    display: none
}

.history-plan-input-right .show-option {
    width: 156px;
    height: 130px;
    background: #fff;
    box-shadow: 3px 3px 27px #0000000D;
    position: absolute;
    top: 20px;
    right: 3px;
    display: none;
    z-index: 1
}

    .history-plan-input-right .show-option li {
        padding: 7px 10px;
        list-style: none
    }

.history-plan-input-right .show-done-option {
    width: 156px;
    height: 130px;
    background: #fff;
    box-shadow: 3px 3px 27px #0000000D;
    position: absolute;
    top: 20px;
    right: 3px;
    display: none;
    z-index: 1
}

    .history-plan-input-right .show-done-option li {
        padding: 7px 10px;
        list-style: none
    }

.delta-details-edit .edit-details-content {
    width: 350px;
    height: 112px;
    background: #fff;
    box-shadow: 3px 3px 27px #0000000D;
    position: absolute;
    top: 18px;
    right: 2px;
    display: none;
    padding: 18px 12px
}

.delta-details-edit .edit-details-search {
    position: relative;
    margin-bottom: 20px
}

    .delta-details-edit .edit-details-search input {
        position: relative;
        width: 100%;
        padding: 10px;
        color: #222;
        border: 1px solid #222;
        border-radius: 8px;
        background: #fff;
        padding-left: 35px
    }

    .delta-details-edit .edit-details-search img {
        position: absolute;
        top: 11px;
        left: 11px
    }

.edit-details-content .edit-details-bottom label {
    margin-right: 30px;
    font-size: 14px;
    line-height: 17px
}

.edit-details-content .edit-details-bottom input {
    margin-right: 10px
}

.edit-interested-service .edit_service_content {
    width: 350px;
    height: 371px;
    box-shadow: 3px 3px 27px #0000000D;
    background: #fff;
    position: absolute;
    top: 20px;
    right: 10px;
    padding: 12px;
    display: none
}

    .edit-interested-service .edit_service_content h4 {
        margin-bottom: 12px
    }

.crm-delta-details-title .edit-interested-service {
    position: relative
}

.edit-service-bottom .container-service {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    line-height: 17px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

    .edit-service-bottom .container-service input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0
    }

.edit-service-bottom .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 14px;
    width: 14px;
    background-color: #fff;
    border: 1px solid #222
}

.edit-service-bottom .container-service input:checked ~ .checkmark {
    background-color: #222
}

.edit-service-bottom .checkmark:after {
    content: "";
    position: absolute;
    display: none
}

.edit-service-bottom .container-service input:checked ~ .checkmark:after {
    display: block
}

.edit-service-bottom .container-service .checkmark:after {
    left: 3px;
    top: 0;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.edit_service_content .edit-service-bottom {
    padding-left: 20px
}

.service_update_content .service-update-btn {
    width: 97px;
    height: 42px;
    box-shadow: 0 3px 6px #0000000A;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    line-height: 17px;
    background: #222
}

.edit_service_content .service_update_content {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    align-items: center
}

.edit-details-bottom .edit-warm {
    color: #ccae17
}

.edit-details-bottom .edit-hot {
    color: #ff2c2c
}

.edit-details-bottom .edit-cold {
    color: #285ceb
}

.edit-details-bottom .container-radio {
    display: block;
    position: relative;
    padding-left: 27px;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-right: 10px;
}

    .edit-details-bottom .container-radio:last-child {
        margin-right: 0;
    }

    .edit-details-bottom .container-radio input {
        position: absolute;
        opacity: 0;
        cursor: pointer
    }

.edit-details-bottom .checkmark-radio {
    position: absolute;
    top: 3px;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: white;
    border-radius: 50%;
    border: 1px solid black
}

.edit-details-bottom .container-radio input:checked ~ .checkmark-radio {
    background-color: white
}

.edit-details-bottom .checkmark-radio:after {
    content: "";
    position: absolute;
    display: none
}

.edit-details-bottom .container-radio input:checked ~ .checkmark-radio:after {
    display: block
}

.edit-details-bottom .container-radio .checkmark-radio:after {
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: black
}

.edit-details-content .edit-details-bottom {
    display: flex;
    flex-wrap: wrap
}

.delta-details-edit .show-edit-img {
    display: none
}

.crm-delta-details-wrapper .crm-delta-details-content:hover .show-edit-img {
    display: block
}

.crm-delta-details-wrapper .crm-delta-details-content:hover {
    background-color: #f1f1f1;
    border-radius: 8px
}

.history-plan-input-left .history-call-circle {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

    .history-plan-input-left .history-call-circle img {
        margin-right: 17px
    }


/*POPUP START*/
.popup-open {
    overflow: hidden;
}

.custom-popup-inner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    z-index: 11111;
    width: 100%;
    transform: translate(-50%, -50%);
    width: 980px;
    border-radius: 15px;
    padding: 16px 0;
    max-height: 100%;
    height: 90%;
}

.custom-popup-wrapper {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}

    .custom-popup-wrapper.active-popup-bg {
        display: block;
    }

.custom-popup-inner.active-popup-main {
    display: block;
}

.custom-popup-inner .custom-popup-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 16px 16px 16px;
}

    .custom-popup-inner .custom-popup-header h2 {
        font-size: 22px;
        font-weight: bold;
        width: calc(100% - 30px);
        padding-right: 10px;
        box-sizing: border-box;
    }

    .custom-popup-inner .custom-popup-header button {
        height: 30px;
        width: 30px;
        border-radius: 50%;
        background: #efeff0;
        border: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

.custom-popup-inner .custom-popup-content {
    padding: 0 16px 16px 16px;
    max-height: calc(100% - 70px);
    overflow: auto;
}

    .custom-popup-inner .custom-popup-content p {
        height: 1000px;
    }

.custom-popup-inner .custom-popup-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: 0 16px;
}

.main_container {
    /*max-width: 595px;*/
    background: #ffffff;
    margin: 0 auto;
}

.form_container .form_bottom_inner h1 {
    padding: 50px;
}

.form_bottom_inner .form_input_details {
    display: flex;
    flex-wrap: wrap;
    padding-top: 16px;
    margin: 0 -12px;
}

    .form_bottom_inner .form_input_details .form_input_left {
        width: calc(50% - 24px);
        margin: 0 12px;
        display: grid;
    }

    .form_bottom_inner .form_input_details .form_input_right {
        width: calc(50% - 24px);
        display: grid;
        margin: 0 12px;
    }

.form_input_details .form_input_left input {
    border-color: #b8bdc9;
    border-width: 1px;
    padding: 10px;
    height: 36px;
    border-color: #222222;
    border-radius: 8px;
    width: 100%;
}

.crm-form-wrapper select {
    border-color: #b8bdc9;
    border-width: 1px;
    padding: 0 10px;
    font-size: 14px;
    height: 41px;
    border-color: #222222;
    border-radius: 8px;
}

.form_input_details .form_input_right input {
    height: 36px;
    border-radius: 8px;
    border-color: #222;
    border-width: 1px;
    padding: 10px;
}

.form_input_details label {
    width: 100%;
    margin-bottom: 5px;
    font-size: 14px;
}

.input-valiation-bottom {
    margin-top: 0;
    font-size: 14px;
}

.form-title {
    padding: 14px 0;
    border-bottom: 1px solid #ededf1;
}

    .form-title h2 {
        font-size: 26px;
        line-height: 31px;
        font-weight: 700;
    }

.form-label-name {
    padding: 0 12px;
}

.form-secondary-container {
    padding-top: 30px;
}

.validation-control {
    color: red;
}

.support_information_container {
    /*max-width: 595px;*/
    background: #ffffff;
    margin: 0 auto;
    padding-top: 20px;
}

    .support_information_container .supports-title h1 {
        padding: 14px 0;
        border-bottom: 1px solid #d7d8e1;
    }

    .support_information_container .supports-type-title h3 {
        margin-bottom: 20px;
        margin-top: 30px;
        font-size: 20px;
        line-height: 31px;
    }

.supports-type-title .support-checkbox input[type='checkbox'] {
    margin-right: 10px;
}

.support-checkbox {
    padding-bottom: 10px;
}

.crm-form-wrapper .crm-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .crm-form-wrapper .crm-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
.crm-form-wrapper .crm-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 1px solid #b8bdc9;
}


/* When the checkbox is checked, add a blue background */
.crm-form-wrapper .crm-container input:checked ~ .crm-checkmark {
    background-color: #222;
}

/* Create the checkmark/indicator (hidden when not checked) */
.crm-form-wrapper .crm-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.crm-form-wrapper .crm-container input:checked ~ .crm-checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.crm-form-wrapper .crm-container .crm-checkmark:after {
    left: 6.5px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.support-days-dropdown {
    /*	width: 50%;*/
    margin-top: 12px;
}

.support-days {
    margin-top: 30px;
}

    .support-days h3 {
        font-size: 20px;
        line-height: 31px;
    }

/*.community-access-container h2 {
	padding-bottom: 20px;
	padding-top: 20px;
	border-bottom: 1px solid #ededf1;
	font-size: 26px;
	line-height: 31px;
	font-weight: 700;
}*/

.community-access-container h3 {
    padding-top: 30px;
    padding-bottom: 20px;
    font-size: 20px;
    line-height: 31px;
}

.radio-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default radio button */
    .radio-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

/* Create a custom radio button */
.support_information_container .radio-checkmark {
    position: absolute; 
    top: 3px;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: #fff;
    border: 1px solid #222;
    border-radius: 50%;
}

.nightmode .support_information_container .radio-checkmark {
    position: absolute;
    top: 3px;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 50%;
}
    /* On mouse-over, add a grey background color */
    /*.radio-container:hover input ~ .radio-checkmark {
    background-color: #ccc;
}*/
    /* When the radio button is checked, add a blue background */
    /*.radio-container input:checked ~ .radio-checkmark {
    background-color: #222;
}*/
    /* Create the indicator (the dot/circle - hidden when not checked) */
    .radio-checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .radio-checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.support_information_container .radio-container .radio-checkmark:after {
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #222;
}

.extra-information-container {
    /*max-width: 595px;*/
    background: #ffffff;
    margin: 0 auto;
    padding-top: 20px;
}

    .extra-information-container .supports-title h1 {
        padding: 14px 0;
        border-bottom: 1px solid #d7d8e1;
        font-size: 26px;
        line-height: 31px;
        font-weight: 700;
    }

    .extra-information-container h3 {
        margin-bottom: 16px;
        margin-top: 20px;
        font-size: 20px;
        line-height: 31px;
    }

/*.extra-information-title {
	width: 50%;
}*/

.extra-information-title input {
    width: 100%;
    height: 41px;
    border-radius: 4px;
    border-color: #b8bdc9;
    border-width: 1px;
    padding: 10px;
    font-size: 16px;
}

.extra-information-textarea-container textarea {
    width: 100%;
}

.main-bg {
    background: #EFEFEF;
}

.border-radius-top-bottom-left {
    border-top-left-radius: 38px;
    border-bottom-left-radius: 38px;
}

.pl-24 {
    padding-left: 24px;
}

.pt-28 {
    padding-top: 28px;
}

/*.right-section {
    width: 84%;
}*/

.bg-white-new {
    background: #ffffff;
}

.lead-table-wrapper {
    background: #343A40;
    border-radius: 8px;
}

.delta-activity-timeline-input.time .form-control:hover,
.delta-activity-timeline-input.time .form-control:focus {
    box-shadow: none;
    outline: none;
    border-color: #222222;
}

}

.support_information_container .form-title h2 {
    font-size: 26px;
    line-height: 31px;
    font-weight: 700;
}

.edit-profile-wrapper {
    border-radius: 20px;
    padding: 0 20px 20px 20px;
}

@media (max-width: 767px) {
    .form_bottom_inner .form_input_details .form_input_left {
        width: 100%;
        margin-bottom: 15px;
    }

    .form_bottom_inner .form_input_details .form_input_right {
        width: 100%;
    }
}

.Status.form-select {
    font-size: 14px;
}

.crm-event-wrapper .event-inner {
    position: relative;
}

    .crm-event-wrapper .event-inner:before {
        background-color: #dee2e6;
        bottom: 0;
        content: "";
        left: 31px;
        margin: 0;
        position: absolute;
        top: 0;
        width: 4px;
    }

    .crm-event-wrapper .event-inner .event-time-label {
        margin-bottom: 20px;
        position: relative;
    }

        .crm-event-wrapper .event-inner .event-time-label span {
            border: 1px solid #2C2C2C;
            border-radius: 8px;
            font-size: 14px;
            color: #222222;
            display: inline-block;
            padding: 5px 20px;
        }

    .crm-event-wrapper .event-inner .event-content-box {
        position: relative;
        margin-bottom: 20px;
    }

        .crm-event-wrapper .event-inner .event-content-box .timeline-icon {
            top: 50%;
            transform: translate(0, -50%);
            left: 8px;
            line-height: 30px;
            position: absolute;
            text-align: center;
            width: 50px;
        }

        .crm-event-wrapper .event-inner .event-content-box .event-box {
            border-radius: 0.25rem;
            margin-left: 60px;
            position: relative;
            border: 1px solid #222;
            border-radius: 10px;
        }

            .crm-event-wrapper .event-inner .event-content-box .event-box .event-box-header {
                padding: 10px;
                border-bottom: 1px solid #222;
            }

                .crm-event-wrapper .event-inner .event-content-box .event-box .event-box-header h3 {
                    margin: auto auto auto 0;
                    font-size: 16px;
                    font-weight: 600;
                }

                .crm-event-wrapper .event-inner .event-content-box .event-box .event-box-header p {
                    width: 300px;
                    text-align: right;
                }

            .crm-event-wrapper .event-inner .event-content-box .event-box .event-box-content {
                padding: 10px;
            }

                .crm-event-wrapper .event-inner .event-content-box .event-box .event-box-content p {
                    white-space: break-spaces;
                }
/* .crm-event-wrapper .event-inner .event-content-box .event-box .event-box-content .crmbtn {
                    width: 96px;
                    height: 35px;
                    background: #222;
                    color: #fff;
                    border-radius: 8px;
                    font-size: 14px;
                    line-height: 10px;
                    box-shadow: none;
                    border: 0;
                    padding : 0;
                    margin : 0;
                }*/

.document-wrapper .crm-document-text {
    width: calc(100% - 105px);
    padding: 0 15px;
    box-sizing: border-box;
}

    .document-wrapper .crm-document-text p {
        word-break: break-all;
        font-size: 14px;
    }

.event-box-content p {
    width: 90%;
    margin-left: 10px
}

.event-box-content .crm_checkBox {
    width: 2%;
    margin-bottom: 22px;
}


.delta-activity-bottom .crm-radio {
    margin-right: 26px;
    height: 33px;
}

    .delta-activity-bottom .crm-radio:last-child {
        margin-right: 0;
    }

.crm-radio .crm-radio-container {
    display: block;
    position: relative;
    padding-left: 120px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .crm-radio .crm-radio-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

.crm-radio .crm-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 33px;
    width: 120px;
    background-color: #fff;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 10px;
}

    .crm-radio .crm-checkmark img {
        margin-right: 10px;
    }

    .crm-radio .crm-checkmark .nor-img {
        display: none;
    }

.crm-radio .crm-radio-container input:checked ~ .crm-checkmark {
    background-color: #222;
    color: #fff;
}

    .crm-radio .crm-radio-container input:checked ~ .crm-checkmark .act-img {
        display: none;
    }

    .crm-radio .crm-radio-container input:checked ~ .crm-checkmark .nor-img {
        display: block;
    }

.crm-radio .crm-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* dark mode start */

.nightmode .main_container {
    background: #343A40;
}
.nightmode .form_input_details .form_input_left input {
    background-color: transparent;
    border-color: #ffffff;
    color: #ffffff; 
    outline: none;
}

.nightmode .form_input_details .form_input_right input {
    background: #343A40;
    border-color: #ffffff;
    color: #ffffff;
    outline: none;
}

.nightmode .crm-form-wrapper select {
    background: #343A40;
    border-color: #ffffff;
    color: #ffffff;
    outline: none;
}
.nightmode .support_information_container {
    background: #343A40;
}

.nightmode .extra-information-container {
    background: #343A40;
}
.nightmode .extra-information-textarea-container textarea {
    background: #343A40;
    outline: none;
    color: #ffffff;
    padding: 10px;
    border-radius: 8px;
}
.nightmode .crm-form-wrapper .crm-checkmark {
    background-color: transparent;
    border: 1px solid #fff;
}
.nightmode .crm-form-wrapper .crm-container input:checked ~ .crm-checkmark {
    background-color: #fff;

}

.nightmode .crm-form-wrapper .crm-container .crm-checkmark:after {
    border-color: #222222;
}

.nightmode .create-service-agreementfor .custom-radio-agree .radio-checkmark::after {
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
}

.nightmode .support_information_container .radio-container .radio-checkmark:after {
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    background-color: #fff;
}

.nightmode .btn-dark {
    border: 1px solid #ffffff;
    color: #222222;
    background: #fff;
}

/*.nightmode .btn:first-child:hover .btn:hover {
    background-color: #ffffff;
    border-color: #222222;*/
    /*color: #282D33;*/
/*}*/
.nightmode .right-wrapper-inner select.form-select {
    background-color: #343A40 !important;
    border-color: #ffffff;
    color: #ffffff;
}

.nightmode input.form-control {
    background: #343A40;
    border-color: #ffffff;
    color: #ffffff;
}

.nightmode .edit-profile-main .form .input-group .select2.select2-container--default .select2-selection--single {
    background: #3D4148;
    border-color: #3D4148;
    color: #ffffff;
}
.nightmode .edit-profile-main .select2-container--default .select2-selection--multiple {
    background: #3D4148;
    border-color: #3D4148;
    color: #ffffff;
}
.nightmode .crm-wrapper {
    background: #5A5E63;
}
.nightmode .crm-wrapper .crm-table .crm-table-top-right .crm-table-select p{
    color: #fff;
}
.nightmode .crm-wrapper .crm-table .crm-table-top-right .crm-table-select select {
    background: #343A40;
    color: #fff;
    outline: none;
 }
.nightmode .crm-delta-details-left .crm-delta-details-content {
    color: #fff;
}

.nightmode .crm-radio .crm-checkmark{
    color: #222222;
}

.nightmode .popup-form .select2-container--default .select2-selection--multiple, .nightmode .popup-form .select2-container--default .select2-selection--single{
    border-radius: 8px;
}
.nightmode .crm-wrapper .crm-delta-details .crm-delta-details-left {
    background: #343A40;
    color: #fff;
}
.nightmode .crm-delta-details .crm-delta-details-title{
    color: #fff;
}
.nightmode .crm-wrapper .crm-delta-details .crm-delta-details-right {
    background: #343A40;
}
.nightmode .crm-delta-details-right .discard-btn {
    border: 1px solid #ffffff;
    color: #ffffff;
    background-color: transparent;
}
.nightmode .crm-delta-details-right .discard-btn:hover {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #282D33;
 }
.nightmode .crm-delta-details-wrapper .delta-archive{
    border: none;
}
.nightmode .delta-activity-timeline .delta-activity-timeline-right input {
    border-color: #ffffff;
    background: #343A40;
    color: #fff;
}
.nightmode button.save-btn:hover{
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
}
.nightmode .delta-documents .choose-documents p {
    border: 2px dashed #fff;
}
.nightmode .schedular-header .scheduler-mid-header-right button{
    background: #fff;
    color: #222222;
}
.nightmode .crm-delta-details-wrapper .crm-delta-details-content:hover{
    color: #222222;
    background: #fff;
}
.nightmode .select2-container--default.select2-container--disabled .select2-selection--single {
    background: #343A40;
}
.nightmode .form-control:focus{
    box-shadow: none;
}
.nightmode .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: none;
}
.nightmode input.form-control {
    background-color: transparent;
}
.nightmode .navigation-wrapper .navigation nav .bg-dark{
    background-color: none;
}
.nightmode .crm-delta-details-wrapper .delta-convert{
   border: 1px solid #fff;
   background-color: transparent;
}

.nightmode .crm-delta-details-wrapper .delta-archive:hover{
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
}

.nightmode .crm-delta-details-wrapper .delta-convert:hover{
    background-color: #fff;
    color: #222222;
}

.nightmode .client-incident .incident .timeline-item .timeline-header{
    color: #fff;
}
.nightmode .client-incident .timeline-edit .timeline-edit-left{
    color: #fff;
}
/*.nightmode .add-shift-new .custom-checkbox.shift-finishes p {
    color: #fff;
}*/
input.form-control.pac-target-input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.nightmode .tui-full-calendar-weekday-schedule.tui-full-calendar-weekday-schedule-time .tui-full-calendar-weekday-schedule-title,
.nightmode .tui-full-calendar-weekday-grid .tui-full-calendar-weekday-grid-header span,
.nightmode .tui-full-calendar-month-dayname .tui-full-calendar-month-dayname-item span {
    color: #fff !important;
}

.nightmode .communication_active.bg-dark.active {
    background-color: none;
}
.nightmode .crm-wrapper .crm-table .crm-table-top-left input {
    background-color: #343A40;
    color: #fff;
    outline: none;
}
.nightmode .delta-activity-timeline-input.time .form-control:hover, .delta-activity-timeline-input.time .form-control:focus {
    border-color: #ced4da;
}
.nightmode .select2-container--default .select2-selection--multiple{
    border-radius: 8px;
}

.nightmode .select2-container--default .select2-selection--single{
    background-color: transparent;
}
.nightmode .select2-container--default.select2-container--focus .select2-selection--single{
    border-color: #fff;
}
.nightmode .staff-detail-wrapper form .carer-office-use .btn.active {
    background-color: #222222;
}
.nightmode .col-md-12.mt-3 .btn.btn-dark:hover{
    background-color: #fff;
    color: #222;
}
.scheduler-mid-header-right #btnGenerate{
    color: #fff;
}
.nightmode .btn-group.btn-group-toggle.carer-office-use .btn.btn-outline-dark.ofcUser:hover {
    background-color: #222;
}
.nightmode .btn-group.btn-group-toggle.carer-office-use .btn.btn-outline-dark.carer:hover {
    background-color: #222;
}
.input-group.input-group-md .form-control.ng-pristine.ng-untouched.ng-valid.ng-empty {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.bi-archive::before{
    color: blue;
}

edit-nightmode{
    fill: #fff;
}

edit-lightmode{
    fill: #222222;
}

.nightmode .every-week{
    color: #fff;
}

.nightmode .add-shift-new .custom-checkbox.shift-finishes p{
    color: #fff;
}
.btn-group.btn-group-toggle.carer-office-use .btn.btn-outline-dark.ofcUser.active{
    color:#fff;
}

.nightmode .select2-dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #fff;
    color: #222;
}
.nightmode .select2-dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #222;
}

.nightmode .crm-event-wrapper .event-inner .event-content-box .event-box{
    border: 1px solid #fff;
}
.nightmode .crm-event-wrapper .event-inner .event-content-box .event-box .event-box-header{
    border-bottom: 1px solid #fff;
}
.nightmode .add-dark-mode-svg.service-agreement{
    display:flex;
    flex-wrap: wrap;
    align-items: center;
}
.nightmode .crm-event-wrapper .event-inner .event-time-label span {
    background-color: #fff !important;
    color: #222 !important;
}

.nightmode .form-select {
    background-image: url(../../../assets/images/arrow-down-s-line.png);
    background-size: 19px 16px;
}

.nightmode .services-list-search .client-list-search .search-icon{
    top: 8px;
}

.log-out-btn{
    padding: 15px 0 15px 15px;
}

.log-out-btn .dropdown-item-logout i{
    margin-right: 10px;
}

.left-section.position-relative.active-menu-main .log-out-btn span{
    display: none;
}

/*.select2.select2-container .select2-selection.select2-selection--multiple .select2-selection__rendered{
    padding-left: 0;
}*/

.nightmode .archivedCandidateDetails.crm-wrapper {
    overflow-x: hidden;
    height: 100%;
    overflow-y: auto;
}

.add-document-choose-file {
    padding: 10px 0;
}

.nightmode .add-leave textarea{
    background-color: transparent;
    color: #fff;
}
.nightmode .add-leave textarea:focus{
    border-color: #fff;
}
.nightmode .edit-communication-full .black-edit-incident {
    background: #fff;
    color: #222;
}


    .nightmode .edit-communication-full .black-edit-incident:hover {
        color: #fff;
        border: 1px solid #fff;
    }
/*.delta-activity-timeline-input .form-control.time-picker.datetimepicker-input :focus{
    border: 1px solid #222;
}*/
.delta-activity-timeline-input input:focus {
    border: 1px solid #222;
}

.nightmode .tui-full-calendar-vlayout-container .ic-repeat-b:before {
    content: '';
    height: 12px;
    width: 12px;
    display: inline-block;
    margin-right: 2px;
    background: url('../../../assets/images/night-repeat-line.svg');
}
.nightmode .tui-full-calendar-week-container .ic-repeat-b:before {
    content: '';
    height: 12px;
    width: 12px;
    display: inline-block;
    margin-right: 2px;
    background: url('../../../assets/images/repeat-line.svg');
}
.bi.bi-emoji-smile-fill{
    margin-right: 3px;
}
.bi.bi-clock-fill{
    margin-right: 3px;
}
.nightmode .navigation-top .logo{
    padding: 16px 24.36px 16px 16px;
}
.navigation-top .logo {
    padding: 16px 24.36px 16px 16px;
}

.nightmode .input-group .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #fff;
    color: #222;
}
/*.nightmode .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    color: #222;
}*/
.nightmode .ct-user-detail-time{
    color: #222;
}
.nightmode .ct-user-detail-name{
    color: #222;
}
/*.nightmode .calendar-font-icon.bi-moon-fill{
    color: #222;
}*/

/* scrollbar */

/* width */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #C5C5C5;
    border-radius: 10px;
}

.select2-container--default .select2-selection--multiple{
    border-radius: 8px;
}

/*.select2.select2-container.select2-container--default .select2-selection.select2-selection--multiple .select2-selection__rendered {
    padding-left: 0;
}*/
body .select2-container .select2-selection--multiple {
    /*padding: 0.46875rem 0.75rem;*/
    height: calc(2.25rem + 2px);
}
.active-guardian .search-guardian 
.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #ced4da;
}
.border-top-left-radius.border-bottom-left-radius.form-control.ng-pristine.ng-untouched.ng-valid.ng-scope.ng-empty {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.input-bg-5A5E63.form-control.text-center.p-0.bg-white.ng-pristine.ng-untouched.ng-valid.ng-not-empty {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.client-guardian-content .guardian-search-client .select2.select2-container.select2-container--default {
    width: 100% !important;
}
.input-group .form-control.add-update-guardian-address{
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}
.form-control.form-select.ng-pristine.ng-untouched.ng-valid.ng-empty:hover {
    border-color: #ced4da;
}
.search-guardian .select2-selection.select2-selection--multiple .select2-selection__rendered{
    padding-left: 0
}

.btn.create-account-reset-button:hover{
    color: #fff;
}
.mb-3.search-guardian .select2-selection.select2-selection--multiple{
    padding: 6px;
}

.crm-event-wrapper .event-inner .event-time-label.notes-history-lead span {
    background-color: #222;
    color: #fff;
}

.nightmode .crm-event-wrapper .event-inner .event-time-label.notes-history-lead span{
    background-color: #fff;
    color: #222;
}

.nightmode .daterangepicker .drp-calendar.left {
    background-color: #343a40;
    border-radius: 4px;
}


.nightmode .daterangepicker .drp-calendar.right {
    background-color: #343a40;
}

.nightmode .daterangepicker .calendar-table {
    background-color: #343a40;
    border: 1px solid #343a40;
}

.nightmode .daterangepicker {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
}

.nightmode .daterangepicker .calendar-table .prev span {
    border: solid #fff;
    border-width: 0 2px 2px 0;
}

.nightmode .daterangepicker select.monthselect {
    background-color: #343a40;
    color: #fff;
}

    .nightmode .daterangepicker select.yearselect {
        background-color: #343a40;
        color: #fff;
    }

/*
.select2 select2-container select2-container--default {
    width: calc(100% - 45px) !important;
}*/

.edit-profile-salutation-name-right{
    width: calc(100% - 45px) !important;
}

.edit-profile-salutation-name .edit-profile-salutation-name-right .select2.select2-container.select2-container--default.select2-container--disabled{
    width: 100% !important;
}

.nightmode .daterangepicker .calendar-table .next span {
    border: solid #fff;
    border-width: 0 2px 2px 0;
}

    .nightmode .daterangepicker td.off {
        background-color: #343a40;
        color: #fff;
    }
.nightmode .daterangepicker .calendar-table td{
    color: #fff;
}
.nightmode .daterangepicker .calendar-table th {
    color: #fff;
}

    /*.nightmode .daterangepicker .calendar-table th:hover {
        background-color: #eee;
    }*/


.nightmode .daterangepicker td.in-range {
    background-color: #5A5E63;
}

    .nightmode .daterangepicker td.available:hover, .nightmode .daterangepicker th.available:hover {
        background-color: #5A5E63;
    }

.nightmode .hrms-wrapper .hrms-left-section.bg-white {
    background: #343A40 !important;
}

.nightmode .hrms-wrapper .hrms-right-section.bg-white {
    background: #343A40 !important;
}

.nightmode .right-section .userDashboardDetails {
    overflow-x: hidden;
    height: 100%;
    overflow-y: auto;
}
.nightmode .form-control.add-new-announcement {
    background: #3D4148;
    border: 1px solid #3D4148;
    color: #fff;
}
.nightmode .form-control.add-organization-news {
    background: #3D4148;
    border: 1px solid #3D4148;
    color: #fff;
}

.nightmode .modal-content.add-candidate .crm-delta-details-right select.form-select {
    background: #3D4148;
    border-color: #3D4148;
}
.nightmode .modal-content.add-candidate .crm-delta-details-right textarea {
    background: #3D4148;
    border-color: #3D4148;
    color: #fff;
}
.nightmode .client-list-table-wrapper.job-board-table .btn.btn-success {
    background: #198754;
    border: 1px solid #198754;
}

.nightmode .right-wrapper-inner .billing-report-header .client-list-search.billing-report-searchbar input {
    background: #343A40;
    border: 1px solid #3D4148;
}

.nightmode .edit-profile-wrapper .btn.btn-dark.add-new-lead-save:hover{
    background: #fff;
    color: #222;
}

.nightmode .staff-detail-wrapper .btn-success.download-services-agree-btn:hover {
    background: #198754;
    color: #fff;
}

.nightmode .scheduler-mid-header-right .btn.btn-lg.btn-dark.generate-select-btn:hover{
    background: #fff;
    color: #222;
}

/*.nightmode input[type='checkbox']{
    border: 2px solid #222;
    background: #fff;
}*/


.nightmode .cleare-filter-close-btn svg [fill="#222"]{
    fill: #fff;
}

.nightmode .staff-action{
    color: #fff !important;
}

/*.nightmode .daterangepicker.ltr.auto-apply.single.opensright.show-calendar {
    left: 232.938px !important;
}*/

.nightmode.test .daterangepicker.ltr.auto-apply.single.opensright.show-calendar {
    left: 225px !important;
}
.nightmode.test.modal-open.modal-open-custom .daterangepicker.ltr.auto-apply.single.opensright.show-calendar {
    left: 525px !important;
}

.nightmode .select2-dark.scheduler-searchbar-wrapper {
    background: #292D30;
    border: 1px solid #3D4148;
    border-radius: 8px;
}

/* light mode start */
input.form-control, select.form-select {
    border-color: #ced4da;
    outline: none;
}

.images-uploader a {
    border-color: #ced4da;
}

.edit-profile-main .form .input-group .select2.select2-container--default .select2-selection--single {
    border-color: #ced4da;
}
.edit-profile-main .select2-container--default .select2-selection--multiple {
    border-color: #ced4da;
}
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select, .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
input[type="search"] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.popup-form .select2-container--default .select2-selection--multiple, .popup-form .select2-container--default .select2-selection--single {
    border-color: #ced4da;
    border-radius: 8px;
}
#emailBulkModal1 .note-editor.note-frame, #emailBulkModal1 .note-editor.note-airframe {
    border-color: #ced4da;
}
#emailBulkModal .select2-container--default .select2-selection--multiple, #smsBulkModal .select2-container--default .select2-selection--multiple {
    border-color: #ced4da;
}
#smsBulkModal textarea {
    border-color: #ced4da;
}
.staff-detail-wrapper form .carer-office-use .btn {
    border-color: #ced4da !important;
}
.client-detail-wrapper form .select2-container--default .select2-selection--single {
    border-color: #ced4da;
}
.client-detail-wrapper form .select2-container--default .select2-selection--multiple {
    border-color: #ced4da;
}
.form_input_details .form_input_left input {
    border: 1px solid #ced4da;
    outline: none;
}
.form_input_details .form_input_right input {
    border: 1px solid #ced4da;
    outline: none;
}
.crm-form-wrapper select {
    border-color: #ced4da;
    height: 36px;
    outline: none;
}
.extra-information-textarea-container textarea {
    border-radius: 8px;
    border-color: #ced4da;
    outline: none;
    padding: 10px;
}
.crm-delta-details-right .discard-btn {
    border: 1px solid #181818;
}
.crm-delta-details-right .discard-btn:hover {
    background-color: #181818;
    border-color: #181818;
    color: #fff;
 }
.delta-activity-timeline .delta-activity-timeline-right textarea {
    border-color: #ced4da;
    outline: none;
}
.delta-activity-timeline .delta-activity-timeline-right input {
    border-color: #ced4da;
    outline: none;
}
.lightmode select.form-select:hover {
    border: 1px solid #181818;
}
.add-team-wrapper .select2-container--default .select2-selection--single{
    border-color: #ced4da;
}
.popup-form .select2-container--default.select2-container--focus .select2-selection--multiple, .popup-form .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #ced4da;
    border-radius: 8px;
}
.add-team-wrapper .select2-container--default .select2-selection--single{
    background-color: #ffff
}
input.form-control:focus {
    border-color: #ced4da;
}
input.form-control:hover {
    border-color: #ced4da;
}

/*:not(.btn-check) + .btn:hover {
    color: #fff;
}*/


.client-wrapper-left-bottom-wrapper .form ul li .select2.select2-container .select2-selection {
    border-color: #ced4da;
}

.client-communication .select2-container--default .select2-selection--single {
    border-color: #ced4da;
}

.client-communication .communication-box .timeline-item .timeline-body form .col-md-12 .note-editor.note-frame {
    border-color: #ced4da;
}

.add-team-wrapper .select2-container--default .select2-selection--single:focus {
    border-color: #ced4da;
}

.blackborder .input-group .input-group-text {
    border-color: #ced4da;
}
.invoice-list-wrapper .scheduler-mid-header-right button {
    width: 130px;
}

.nightmode .dark-mode-svg [fill="#222"] {
    fill: #fff;
}
.nightmode .add-dark-mode-svg [fill="#fff"]{
    fill: #222;
}


.nightmode .delta-activity-timeline .delta-activity-timeline-right textarea {
    background-color: transparent;
    color: #fff;
}

.lightmode .crm-event-wrapper .event-inner .event-time-label span{
    background-color: #222;
    color: #fff;
}


.crm-lead-bottom {
    background: #fff;
    border-radius: 20px;
    padding: 14px;
}

    .crm-lead-bottom .crm-lead-bottom-top {
        background: #343A40;
        border-radius: 14px;
    }

        .crm-lead-bottom .crm-lead-bottom-top .crm-lead-bottom-top-box {
            color: #fff;
            /*width: 20%;*/
            padding: 20px 0 20px 20px;
            box-sizing: border-box;
        }

            .crm-lead-bottom .crm-lead-bottom-top .crm-lead-bottom-top-box h5 {
                font-size: 18px;
                line-height: 21px;
                margin-bottom: 10px;
                font-weight: 600;
            }

            .crm-lead-bottom .crm-lead-bottom-top .crm-lead-bottom-top-box span,
            .crm-lead-bottom .crm-lead-bottom-top .crm-lead-bottom-top-box label {
                font-size: 14px;
                line-height: 17px;
                position: relative;
            }

            .crm-lead-bottom .crm-lead-bottom-top .crm-lead-bottom-top-box span {
                padding-right: 28px;
            }

                .crm-lead-bottom .crm-lead-bottom-top .crm-lead-bottom-top-box span:before {
                    content: '';
                    height: 4px;
                    width: 4px;
                    background: #fff;
                    border-radius: 50%;
                    position: absolute;
                    top: 6px;
                    right: 12px;
                }

            .crm-lead-bottom .crm-lead-bottom-top .crm-lead-bottom-top-box:last-child:before {
                display: none;
            }

            .crm-lead-bottom .crm-lead-bottom-top .crm-lead-bottom-top-box:before {
                content: '';
                background: url('../../images/lead-top-bg.svg') no-repeat;
                width: 20px;
                height: 87px;
                position: absolute;
                top: 0;
                right: 0;
            }

    .crm-lead-bottom .crm-lead-bottom-content {
        margin: 0 -5px;
    }

        .crm-lead-bottom .crm-lead-bottom-content .crm-lead-bottom-content-inner {
            width: calc(100% - 10px);
            margin: 0 5px;
            display: block !important;
            min-height: 800px;
            background-color: #f9f9f9;
        }

    .crm-lead-bottom .crm-lead-bottom-box {
        background: #EFEFEF;
        border-radius: 8px;
        padding: 10px;
        width: 100%;
        margin-bottom: 10px;
    }

        .crm-lead-bottom .crm-lead-bottom-box .crm-lead-bottom-box-left {
            width: calc(100% - 22px);
            padding-right: 10px;
            box-sizing: border-box;
        }

            .crm-lead-bottom .crm-lead-bottom-box .crm-lead-bottom-box-left h6 {
                font-size: 18px;
                line-height: 21px;
                font-weight: 600;
                margin-bottom: 12px;
            }

            .crm-lead-bottom .crm-lead-bottom-box .crm-lead-bottom-box-left span {
                font-size: 14px;
                line-height: 17px;
                margin-bottom: 10px;
                display: block;
                padding-left: 20px;
                position: relative;
            }

                .crm-lead-bottom .crm-lead-bottom-box .crm-lead-bottom-box-left span:before {
                    content: '';
                    /*background: url('../img/crm/images/ic_user.png') no-repeat;*/
                    background: url('../../images/ic_user.png') no-repeat;
                    width: 14px;
                    height: 14px;
                    position: absolute;
                    top: 3px;
                    left: 0;
                }

            .crm-lead-bottom .crm-lead-bottom-box .crm-lead-bottom-box-left p {
                font-size: 14px;
                line-height: 17px;
                /*padding-left: 20px;
			position: relative;*/
            }

        .crm-lead-bottom .crm-lead-bottom-box .crm-lead-bottom-box-right {
            width: 22px;
        }

.note-editor.note-frame.card {
    width: 100%;
}
.new_lead_button {
    border: 1px solid #000000;
    background: #fafcfe;
    color: #000000;
    cursor: pointer;
    border-radius: 0;
    font-size: 20px;
}

.toggleswitch {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 30px;
}

    .toggleswitch input {
        display: none;
    }
.pipeswitch {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 30px;
}

    .pipeswitch input {
        display: none;
    }

.pipline {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: -35px;
    right: 23px;
    bottom: 0;
    background-color: #ffffff;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 25px;
    border: 1px solid #ffffff;
}

    .pipline:before {
        position: absolute;
        content: "";
        background: url('../../images/ic_leadlist_black.svg')no-repeat;
        height: 26px;
        width: 30px;
        top: 2px;
        left: 0px;
        right: 7px;
        bottom: 0px;
        transition: 0.4s;
        border-radius: 6px;
    }

input:checked + .pipline {
    background-color: #fff;
}

input:focus + .pipline {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .pipline:before {
    -webkit-transform: translateX(51px);
    -ms-transform: translateX(51px);
    transform: translateX(51px);
    background: url('../../images/ic_kanban_black.svg')no-repeat;
}

.pipline:after {
    content: 'Lead';
    display: block;
    position: absolute;
    transform: translate(0,-50%);
    top: 50%;
    right: 10px;
    font-size: 14px;
}

input:checked + .pipline:after {
    content: 'Pipline';
    right: unset;
    left: 5px;
    color: #222222;
}
.w-65{
    width: 65px;
}
.service-agreement-period-details .row .col-md-4 span {
    width: 100%;
}