/* CSS FOR CHAT WIDGET */ 

.chat_widget {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 1000;
}

.chat_widget_trigger {
    position: relative;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    background: #0177BF;
    border-radius: 60px;
    transition: scale .4s;
    cursor: pointer;
    z-index:110;
}

.chat_widget_trigger.notification:after {
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    height: 15px;
    border-radius: 60px;
    background: red;
    content: "";
    border: 2px solid #ffffff;
}

.chat_widget_trigger:before {
    font-family: "Material Icons";
    content: "\E8AF";
    font-size: 22px;
    color: white;
}
/*
.chat_widget_trigger:not(.active):hover {
    border-width: 0;
    line-height: 70px;
}

.chat_widget_trigger:not(.active):hover:before {
    font-size: 26px;
}
*/
.chat_widget_trigger.active {
    transform: scale(0.7);
}

.chat_widget_trigger.active:before {
    content: "\E5CD";
}

.chat_widget_window_page {
    display: none;
}
/*
#chat_home.chat_widget_window_page {
    display: block;
}
*/

.chat_widget_window_page.active {
    display: block;
}

.chat_widget_window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 300px;
    height: 430px;
    background: white;
    border-radius: 4px;
    border: 1px solid gainsboro;
    filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.2));  
    visibility: hidden;
    opacity: 0;
    transition: bottom 0.4s, opacity 1s;
    user-select: none;
    z-index:111;
}

.chat_widget_window.active {
    visibility: visible;
    opacity: 1;
    bottom: 60px;
}

.chat_widget_window:before {
    position: absolute;
    right: 10px;
    bottom: -30px;
    border: 15px solid transparent;
    border-top-color: gainsboro;
    content: "";
}

.chat_widget_window:after {
    position: absolute;
    right: 10px;
    bottom: -28px;
    border: 15px solid transparent;
    border-top-color: white;
    content: "";
}

.chat_widget_window_page_header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 40px 10px 20px;
    background: linear-gradient(90deg, #0177bf, #297aab);
    border-radius: 4px 4px 0 0;
}

.chat_widget_window_page_header .expand_chat_window {
    position: absolute;
    top: 10px;
    right: 7px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    cursor: pointer;
    font-size: 24px;
    text-align: center;
    transition: transform 0.3s;
    text-decoration: none !important;
}

.chat_widget_window_page_header .expand_chat_window:before {
    font-family: "Material Icons";
    content: "\E895";
}

.chat_widget_window_page_header .expand_chat_window.active {
    transform: rotate(180deg);
}

.chat_members_online_status {
    float: left;
    color: white;
    width: calc(100% - 100px);
    font-size: 15px;
}

.chat_members_online_status:before {
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 60px;
    background: #6FD472;
    content: "";
}

.chat_widget_controls {
    float: right;
    max-width: 100px;
}

.chat_widget_controls .item {
    float: left;
    margin-right: 15px;
}

.chat_widget_controls .item a {
    color: white;
    float: left;
}

.chat_widget_controls .item:last-child {
    margin-right: 0;
}

.chat_widget_controls .item .online_switch {
    float: left;
}

.chat_widget_controls .item .online_switch input[type="checkbox"] + label {
    float: left;
    width: 40px;
    height: 22px;
    background: #094B74;
    margin: 0;
    border-radius: 60px;
    position: relative;
    cursor: pointer;
}

.chat_widget_controls .item .online_switch input[type="checkbox"] + label:after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #cecece;
    content: "";
    border-radius: 60px;
    transition: left 0.2s;
}

.chat_widget_controls .item .online_switch input[type="checkbox"]:checked + label:after {
    background: #45C84A;
    left: 20px;
}

.chat_widget_window_page_body {
    position: absolute;
    top: 44px;
    left: 0;
    width: 100%;
    height: calc(100% - 44px);
    padding: 20px;
}

.chat_widget_window_page_body no_padd.no_padd {
    padding: 0;
}

.chat_widget_window_page_body.top_60 {
    top: 60px;
    height: calc(100% - 60px);
}

.chat_widget_window_page_body_head_txt {
    text-align: center;
    font-size: 18px;
}

.chat_widget_window_page_body_sub_txt {
    text-align: center;
    color: #7E7E7E;
    font-size: 13px;
}

.chat_widget_window_page_body .search_user {
    position: relative;
    width: 100%;
    margin: 10px auto 5px auto;
    border-radius: 3px;
    overflow: hidden;
}

.chat_widget_window_page_body .search_user .ico {
    line-height: 0;
    position: relative;
    top: 18px;
    left: 7px;
}

.chat_widget_window_page_body .search_user .search_input {
    width: 100%;
    border: none;
    height: 35px;
    font-size: 13px;
    padding: 10px 20px 10px 37px;
    background: #e8ebec;
}

.chat_widget_window_page_body .search_user_result {
    float: left;
    width: 100%;
    height: 215px;
    overflow: auto;
    margin-bottom: 5px;
}

.chat_widget_window_page_body .search_user_result_item {
    float: left;
    width: 100%;
    position: relative;
    padding-left: 48px;
    padding: 5px 10px 5px 50px;
    cursor: pointer;
    border-radius: 4px 0 0 4px;
    margin: 4px 0;
    transition-duration: 0.3s;
}

.chat_widget_window_page_body .search_user_result_item:hover {
    background: #e8ebec;
}

.chat_widget_window_page_body .search_user_result_item:last-child {
    margin: 0;
}

.chat_widget_window_page_body .search_user_result_item .pic {
    position: absolute;
    top: 5px;
    left: 6px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    border-radius: 60px;
    text-align: center;
    background-color: gainsboro;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.chat_widget_window_page_body .search_user_result_item .name {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #3e404c;
}

.chat_widget_window_page_body .search_user_result_item:hover .name {
    color: #0177BF;
}

.chat_widget_window_page_body .search_user_result_item .status {
    color: #878787;
    font-size: 13px;
}

.chat_widget_window_page_body .search_user_result_item:hover .status {
    color: #333;
}

.chat_widget_window_page_body .search_user_result_item .status.active:before {
    display: inline-block;
    margin-right: 7px;
    width: 10px;
    height: 10px;
    line-height: 20px;
    border-radius: 60px;
    background: #45C84A;
    content: "";
}

.total_online_user {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: gray;
}

.chat_widget_selected_user {
    float: left;
    width: 100%;
}

.chat_widget_selected_user .back_to_list {
    float: left;
    color: white;
    margin-right: -10px;
}

.chat_widget_selected_user .back_to_list i {
    font-size: 30px;
    line-height: 0.4;
    position: relative;
    top: 7px;
    left: -14px;
}

.chat_widget_selected_user .pic {
    float: left;
    width: 34px;
    height: 34px;
    line-height: 34px;
    background-color: gainsboro;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 60px;
    margin-right: 10px;
    margin-top: -7px;
    position: relative;
    top: 4px;
}

.chat_widget_selected_user .user_and_status {
    float: left;
    margin-top: -17px;
    position: relative;
    top: 12px;
    max-width: 73%;
}

.chat_widget_selected_user .user_and_status .name {
    font-size: 16px;
    color: white;
    margin-bottom: -2px;
    width: 190px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.chat_widget_selected_user .user_and_status .status {
    color: #c1d8e6;
    font-size: 13px;
}

.chat_widget_selected_user .user_and_status .status.active:before {
    float: left;
    content: "";
    width: 8px;
    height: 8px;
    background: #45C84A;
    border-radius: 60px;
    margin-top: 5px;
    margin-right: 6px;
}

.chat_widget_selected_user .user_and_status .status.active {
    
}

.chat_widget_choose_category {
    float: left;
    width: 100%;
    padding: 0 10px;
    margin: 20px 0 20px 0;
}

.chat_widget_choose_category .item {
    float: left;
    width: 100%;
    margin: 0 0 10px 0;
}

.chat_widget_choose_category .item:last-child {
    margin: 0;
}

.chat_widget_choose_category .item input + label {
    font-size: 15px;
    font-weight: 400;
    color: #A9B1B8;
    cursor: pointer;
}

.chat_widget_choose_category .item input + label:before {
    font-family: "Material Icons";
    content: "\E836";
    font-size: 24px;
    line-height: 0.3;
    position: relative;
    top: 6px;
    margin-right: 7px;
}

.chat_widget_choose_category .item input:checked + label {
    color: #0177BF;
}

.chat_widget_choose_category .item input:checked + label:before {
    content: "\E837";
}

.notify_by_email {
    float: left;
    width: 100%;
    padding: 0 10px;
    margin-bottom: 7px;
}

.notify_by_email input[type="checkbox"] + label {
    color: #53575B;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
}

.notify_by_email input[type="checkbox"] + label:before {
    font-family: "Material Icons";
    content: "\E835";
    font-size: 24px;
    line-height: 0.3;
    position: relative;
    top: 5px;
    margin-right: 7px;
}

.notify_by_email input[type="checkbox"]:checked + label:before {
    content: "\E834";
    color: #0177BF;
}

.chat_widget_btn {
    float: left;
    width: 100%;
    margin-top: 10px;
    text-align: center;
    background: #0177BF;
    color: white !important;
    padding: 10px;
    font-size: 15px;
    border-radius: 60px;
}

.chat_widget_conversation_type {
    float: left;
    width: 100%;
    padding: 6px;
    background: #519bc7;
    color: #ffffff;
    margin-top: 47px;
    text-align: center;
    font-size: 14px;
    position: relative;
    z-index: 10;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.send_message_box {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid #afafaf;
    border-radius: 60px;
    overflow: hidden;
}

.send_message_box .input_field {
    border: none;
    height: 37px;
    width: 100%;
    padding: 0 40px 0 20px;
}

.send_message_box .send_message {
    position: absolute;
    top: 7px;
    right: 10px;
    color: #0177BF;
}

.chat_widget_conversation_box {
    position: absolute;
    bottom: 10px;
    left: 5px;
    right: 0;
    max-height: 339px;
    overflow: auto;
    padding-top: 15px;
}

.chat_widget_conversation_box .message_item {
    float: left;
    clear: both;
    margin-left: 10px;
    max-width: 80%;
    background: linear-gradient(90deg, #d7f0ff, #e0f1fb);
    color: #1c3444;
    border-radius: 4px;
    margin-bottom: 15px;
    padding: 7px 20px 7px 20px;
    font-size: 13px;
    position: relative;
    /* border: 1px solid #ccdee8; */
    line-height: 19px;
    word-break: break-word;
}

.chat_widget_conversation_box .message_item.mine.enter_data {
    padding-right: 40px;
}

.chat_widget_conversation_box .message_item.mine.add_data {
    padding-right: 20px;
}

.chat_widget_conversation_box .message_item .pic {
    position: absolute;
    top: -10px;
    left: -7px;
    height: 24px;
    width: 24px;
    background-color: gainsboro;
    border: 2px solid white;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 60px;
}

.chat_widget_conversation_box .message_item.mine {
    float: right;
    margin-left: auto;
    margin-right: 10px;
    background: #edeeef;
    color: #0c1b23;
    border-radius: 4px 0 4px 4px;
    border-color: transparent;
}

.chat_widget_conversation_box .message_item.mine:after {
    position: absolute;
    top: 0;
    right: -8px;
    border: 5px solid transparent;
    border-left-color: #edeeef;
    border-top-color: #edeeef;
    content: "";
}

.chat_widget_conversation_box .message_item.mine .pic {
    left: auto;
    right: -7px;
    display: none;
}

.chat_widget_conversation_box .message_item.mine.read {
    margin-bottom: 33px;
}

.chat_widget_conversation_box .message_item.mine.read:before {
    content: "Seen";
    position: absolute;
    bottom: -33px;
    right: 0;
    color: gray;
    margin-bottom: 10px;
}

.chat_widget_inbox {
    float: left;
    color: white;
    padding: 1px 0;
    font-size: 15px;
}

.chat_widget_inbox .ico {
    line-height: 0.4;
    position: relative;
    top: 6px;
    margin-right: 3px;
}

.chat_widget_thread_list {
    float: left;
    width: 100%;
    max-height: 380px;
    overflow: auto;
    padding: 10px 10px 0px 10px;
    margin-bottom: 6px;
}

.chat_widget_thread_list .item {
    float: left;
    width: 100%;
    border-bottom: 1px solid gainsboro;
    padding: 12px 10px 10px 58px;
    position: relative;
    border-radius: 3px;
}

.chat_widget_thread_list .item:last-child {
    border-bottom: none;
}

.chat_widget_thread_list .item .name {
    font-size: 15px;
    margin: -2px 0 6px 0;
    line-height: 19px;
    float: left;
    color: #202c33;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
    position: relative;
    padding-right: 15px;
}

.chat_widget_thread_list .item .name:hover {
    color: #0177BF;
}

.chat_widget_thread_list .item .pic {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background-color: gainsboro;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 60px;
}

.chat_widget_thread_list .item .type {
    float: left;
    padding: 2px 7px;
    background: #46B746;
    color: white;
    border-radius: 60px;
    font-size: 12px;
    clear: both;
    margin-bottom: 5px;
}

.chat_widget_thread_list .item .message {
    float: left;
    width: 100%;
    clear: both;
    color: #55646D;
    max-height: 36px;
    overflow: hidden;
}

.chat_widget_thread_list .item .close_thread {
    position: absolute;
    top: 10px;
    right: 4px;
}

.chat_widget_thread_list .item .close_thread i {
    font-size: 18px;
    color: #9eb1bd;
}

.chat_widget_thread_list .item.unread {
    background: #EAF1F5;
}

.chat_widget_thread_list .item.unread .name {
    font-weight: 600;
}

.chat_widget_thread_list .item.unread .name:after {
    content: "";
    width: 8px;
    height: 8px;
    background: #2179af;
    border-radius: 60px;
    float: right;
    margin-left: 7px;
    position: absolute;
    top: 6px;
    right: 0;
}

.chat_widget_conversation_box .message_item .get_data {
    float: left;
    width: 100%;
    margin-top: 7px;
    display: none;
}

.chat_widget_conversation_box .message_item.add_data .get_data {
    display: block !important;
}

.chat_widget_conversation_box .message_item .get_data .input_field {
    border: 1px solid gainsboro;
    height: 30px;
    width: 100%;
    border-radius: 3px;
    padding: 0 10px;
    margin: 0 0 7px 0;
}

.chat_widget_conversation_box .message_item .get_data .submit_btn {
    border: none;
    border-radius: 3px;
    padding: 3px 10px;
    background: #30b378;
    color: white;
    width: 49%;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}

.chat_widget_conversation_box .message_item .get_data .cancel_btn {
    border: none;
    border-radius: 3px;
    padding: 3px 10px;
    background: #dedfe0;
    color: gray;
    width: 48.5%;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}

.chat_widget_note {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    color: gray;
}

.chat_widget_conversation_box .message_item .get_data input[type="radio"] + label {
    font-size: 15px;
    font-weight: 400;
    color: #A9B1B8;
    cursor: pointer;
    margin: 0 6px 6px 0;
}

.chat_widget_conversation_box .message_item .get_data input[type="radio"] + label:last-child {
    margin: 0;
}

.chat_widget_conversation_box .message_item .get_data input[type="radio"] + label:before {
    font-family: "Material Icons";
    content: "\E836";
    font-size: 20px;
    margin: 0 6px 0 0;
    line-height: 0.4;
    position: relative;
    top: 3px;
}

.chat_widget_conversation_box .message_item .get_data input[type="radio"]:checked + label {
    color: #0177BF;
}

.chat_widget_conversation_box .message_item .get_data input[type="radio"]:checked + label:before {
    content: "\E837";
}

.chat_widget_conversation_box .message_item .message_title {
    float: left;
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    margin: 10px 0;
    color: #232020;
}

.chat_widget_conversation_box .message_item .help_list {
    margin: 0;
    padding: 0 0 0 17px;
}

.chat_widget_conversation_box .message_item .help_list li a {
    margin: 0 0 10px 0;
    display: block;
    color: #2f576d;
}

.chat_widget_conversation_box .message_item b {
    font-weight: 600;
}

.upload_resume_btn {
    width: 100%;
    display: block;
    text-align: center;
    background: white;
    border-radius: 4px;
    padding: 20px 10px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
    border: 1px dashed #9c9595;
    color: #1f79b0;
    cursor: pointer;
}

.upload_resume_btn:before {
    font-family: "Material Icons";
    content: "\E2C3";
    font-size: 40px;
    float: left;
    font-weight: 100;
    width: 100%;
    margin: 0 0 10px 0;
}

.upload_resume_btn + .filename {
    background: white;
    padding: 4px 35px 4px 25px;
    border-radius: 4px;
    color: #1f7ab1;
    position: relative;
    word-break: break-all;
    border: 1px solid #dde1e4;
    overflow: hidden;
}

.upload_resume_btn + .filename:before {
    font-family: "Material Icons";
    content: "\E226";
    font-size: 18px;
    position: absolute;
    top: 4px;
    left: 3px;
    color: #333;
    margin-right: 5px;
}

.upload_resume_btn + .filename .delete_file {
    position: absolute;
    right: 0;
    color: gray;
    font-size: 20px;
    top: 0;
    bottom: 0;
    background: #efefef;
    text-align: center;
    width: 30px;
    line-height: 25px;
    border-left: 1px solid #cbd2d8;
}

/*
.chat_widget_conversation_box.typing:after {
    content: "Typing...";
    color: gray;
    float: left;
    clear: both;
    margin: 0 0 0 10px;
}

.chat_widget_conversation_box.typing {
    padding-bottom: 10px;
}
*/

.typing {
    float: left;
    clear: both;
    padding: 10px;
    background: #edeeef;
    border-radius: 60px;
    margin-left: 10px;
}

.typing .dot1,
.typing .dot2, 
.typing .dot3 {
    float: left;
    width: 6px;
    height: 6px;
    border-radius: 60px;
    background: #1f7ab0;
    margin-right: 5px;
    transition-duration: 1s;
    animation-duration: 1s;
}

.typing .dot3 {
    margin-right: 0;
}

.typing .dot1 {
    animation-name: dot1;
    animation-iteration-count: infinite;
    transform: scale(0.5);
}

@keyframes dot1 {
    0% {transform: scale(1.5);}
    50% {transform: rotate(1);}
    75% {transform: rotate(0.5);}
    100% {transform: rotate(0);}
}

.typing .dot2 {
    animation-name: dot2;
    animation-iteration-count: infinite;
    transform: scale(1.0);
}

@keyframes dot2 {
    0% {transform: scale(0.5);}
    50% {transform: rotate(1);}
    75% {transform: rotate(1.5);}
    100% {transform: rotate(0);}
}

.typing .dot3 {
    animation-name: dot3;
    animation-iteration-count: infinite;
    transform: scale(1.5);
}

@keyframes dot3 {
    0% {transform: scale(0.5);}
    50% {transform: rotate(1);}
    75% {transform: rotate(1.5);}
    100% {transform: rotate(0);}
}

.enter_data_txt .edit_user_val {
    position: absolute;
    top: 7px;
    right: 0;
    width: 44px;
    text-align: center;
    color: #0177bf;
}

.enter_data_txt .edit_user_val.non_editable {
    pointer-events: none;
    opacity: 0.2;
}

.message_item.share_current_job ul {
    width: 100%;
    text-align: left;
    margin: 0;
    padding: 0;
}

.message_item.share_current_job li {
    display: inline-block;
}

.message_item.share_current_job li a {
    display: inline-block;
    width: 40px;
    height: 40px !important;
    line-height: 40px;
    background: white;
    border-radius: 60px;
    font-size: 20px;
    margin: 7px 7px 0 0;
    color: #1f79b0;
    text-align: center;
    padding: 0;
    border: 1px solid #b5dbf3;
}

.message_item.share_current_job li a i {
    line-height: 38px;
}

.validationError {
    background: #ffe1e1;
    border: 1px dashed #e4aaaa !IMPORTANT;
    position: relative;
    color: #d02020;
}

.validationErrorMsg {
    color: #f13232;
    font-size: 13px;
    background: #ffe0e0;
    margin: -5px 0px 3px 0;
    text-align: center;
    border-radius: 0;
    border-bottom: 1px solid red;
    padding: 2px;
}

/* width */
.chat_widget_window_page_body  ::-webkit-scrollbar {
  width: 7px;
}

/* Track */
.chat_widget_window_page_body  ::-webkit-scrollbar-track {
  background: #e8e8e8; 
}
 
/* Handle */
.chat_widget_window_page_body  ::-webkit-scrollbar-thumb {
  background: #caccce; 
  border-radius: 60px;
}

/* Handle on hover */
.chat_widget_window_page_body  ::-webkit-scrollbar-thumb:hover {
  background: #1479b6;  
}

.chat_widget_conversation_box .message_item:not(.mine) + .message_item > .pic {
    visibility: hidden;
}

.chat_widget_conversation_box .message_item:not(.mine) {
    margin-bottom: 5px !important;
}

.chat_widget_conversation_box .message_item:not(.mine) + .mine {
    margin-top: 10px;
}

.chat_widget_conversation_box .message_item.mine + .mine:after {
    display: none;
}

/* Expanded Chat Window */

.chat_window_expanded {
    top: 0;
    bottom: 0;
    right: 0;
}

.chat_window_expanded .chat_widget_window.active {
    top: 0;
    bottom: 0;
    right: 0;
    height: 100vh;
    border-radius: 0;
    border: none;
    width: 370px;
}

.chat_window_expanded .chat_widget_window_page_header {
    border-radius: 0;
}

.chat_window_expanded .chat_widget_conversation_box {
    max-height: calc(100vh - 129px);
    padding: 15px 15px 0 15px;
}

.chat_window_expanded .chat_widget_window:before {
    display: none;
}

.chat_actions {
    position: absolute;
    bottom: 12px;
    left: 20px;
    right: 20px;
    text-align: center;
    display: none;
}

.chat_actions .action_item {
    display: inline-block !important;
    padding: 5px 15px;
    border-radius: 60px;
    color: #52595d;
    cursor: pointer;
    background: #edeeef;
}

.chat_actions .action_item.active {
    background: #30b378;
    color: white;
}

/* END OF CSS FOR CHAT WIDGET */