/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_AIChatBot
 * @author    Webkul Software Private Limited
 * @copyright Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */

 @charset "utf-8";
 @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css);
 /* CSS Document */
 
 /* ---------- GENERAL ---------- */
 
 a {
     text-decoration: none;
 }
 
 fieldset {
     border: 0;
     margin: 0;
     padding: 0;
 }
 
 h4,
 h5 {
     line-height: 1.5em;
     margin: 0;
 }
 
 div#tab-label-login,
 div#tab-label-register {
     width: 50%;
     margin: 0px;
 }
 
 hr {
     background: #e9e9e9;
     border: 0;
     -moz-box-sizing: content-box;
     box-sizing: content-box;
     height: 1px;
     margin: 0;
     min-height: 1px;
 }
 
 img {
     border: 0;
     display: block;
     height: auto;
     max-width: 100%;
 }
 
 input {
     border: 0;
     color: inherit;
     font-family: inherit;
     font-size: 100%;
     line-height: normal;
     margin: 0;
 }
 
 p {
     margin: 0;
 }
 
 .clearfix {
     *zoom: 1;
 }
 
 /* For IE 6/7 */
 .clearfix:before,
 .clearfix:after {
     content: "";
     display: table;
 }
 
 .clearfix:after {
     clear: both;
 }
 
 /* ---------- chatbox-component ---------- */
 
 #button-chatbot {
     display: block;
 }
 
 #full-chatbot {
     display: none;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     background: #2c3245;
     border-radius: 12px;
     overflow: hidden;
 }
 
 #chatbox-component {
     bottom: 16px;
     font-size: 12px;
     display: flex;
     gap: 8px;
     flex-direction: column;
     right: 24px;
     position: fixed;
     width: 360px;
     z-index: 899;
     transition: all 0.4s ease-in-out;
     box-shadow: 0px 8px 10px -6px #0000001a;
 }
 
 #chatbox-component .loading-state {
     position: absolute;
     top: 57px;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
     z-index: 1000;
     width: 50%;
     height: 20px;
     text-align: center;
     color: #f34903;
 }
 
 div#chatbox-component:has(.chatboxBottomTransition) {
     box-shadow: none;
 }
 
 #chatbox-component header {
     color: #0c0b0ac2;
     cursor: pointer;
     padding: 10px 24px;
     position: relative;
     height: 25px;
     /* box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.2); */
     /* border-bottom: 2px solid #42a1c5; */
 }
 
 #chatbox-component .chatbox-avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: white;
     margin-left: -12px;
     position: relative;
     padding: 3px;
     box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.2);
     transition: 0.1s ease-out;
 }
 
 #chatbox-component .chatbox-avatar img {
     width: 100%;
     height: 100%;
     border-radius: 50%;
 }
 
 #chatbox-component .support_status {
     background: #1a8a34;
     border-radius: 50%;
     content: "";
     display: inline-block;
     height: 10px;
     width: 10px;
     position: absolute;
     bottom: 4px;
     right: 0;
 }
 
 #chatbox-component h4 {
     font-size: 14px;
     font-weight: 600;
 }
 
 #chatbox-component h5 {
     font-size: 14px;
     font-weight: 600;
     color: #000000;
     padding-left: 6px;
     padding-right: 6px;
 }
 
 #chatbox-component header.chatbox-header {
     color: #ffffff;
     display: flex;
     padding: 16px;
     height: 100%;
     gap: 12px;
     align-items: center;
 }
 
 /*authentication foem style*/
 #chatbox-component #login-form {
     padding: 0px !important;
 }
 
 #chatbox-component #login-form .fieldset {
     margin: 0 0 10px !important;
 }
 
 .chat-message-client-counter {
     background: #e62727;
     border: 1px solid #fff;
     border-radius: 50%;
     display: none;
     font-size: 12px;
     font-weight: bold;
     height: 28px;
     left: 0;
     line-height: 28px;
     margin: -15px 0 0 -15px;
     position: absolute;
     text-align: center;
     top: 0;
     width: 28px;
 }
 
 .chat-message-admin-counter {
     background: #e62727;
     border: 1px solid #fff;
     border-radius: 50%;
     display: none;
     font-size: 12px;
     font-weight: bold;
     height: 28px;
     left: 0;
     line-height: 28px;
     margin: -15px 0 0 -15px;
     position: absolute;
     text-align: center;
     top: 0;
     width: 28px;
 }
 
 .chat-close {
     background: #f6f6f6;
     border-radius: 50%;
     color: #fff;
     display: block;
     float: right;
     font-size: 16px;
     height: 17px;
     line-height: 16px;
     margin: 2px 0 0 0;
     text-align: center;
     width: 18px;
 }
 
 #minim-chat {
     margin-right: -12px;
 }
 
 a.minim-button {
     /* background: #616161; */
     font-size: 18px;
     padding: 4px 6px;
     text-decoration: none;
     color: #fff;
 }
 
 .minim-button:hover,
 .minim-button:hover {
     color: #c6c6c6;
 }
 
 .chat {
     height: 500px;
     display: block;
     box-shadow: 0px 4px 16px 0px #2c31453d;
     border-radius: 12px 12px 0 0;
     position: relative;
     overflow-y: auto;
 }
 
 .chat .fieldset {
     display: flex;
     margin: 0;
     gap: 8px;
     flex-direction: column;
 }
 
 .chat .fieldset > .field,
 .chat .fieldset > .fields > .field {
     margin: 0 0 5px;
 }
 
 .chat .fieldset > .field > .label,
 .chat .fieldset > .fields > .field > .label {
     font-weight: 400;
     color: #334155;
     font-size: 14px;
 }
 
 .chat .fieldset > .field > .label:after,
 .chat .fieldset > .fields > .field > .label:after {
     /* color: inherit; */
 }
 
 #bottom-controls {
     display: flex;
     background: #f8f9fa;
     position: relative;
 }
 
 .chat-form {
     height: 42px;
     padding: 10px;
     gap: 4px;
     border-top: 1px solid #e1e7ef;
     display: flex;
     align-items: center;
 }
 
 .chat-form textarea.type_message {
     resize: none;
     overflow: hidden;
     border: none;
     box-shadow: none;
     width: 100%;
     background: none;
     font-size: 14px;
     padding: 8px;
     /* padding-right: 20%; */
 }
 .center-loader {
    margin: 0 40%;
 }
.button.action.primary {
    border:none;
}
 #chat-loader {
   
    width: 100%;
 }
 .chat-form textarea.type_message:focus::-webkit-input-placeholder {
     color: transparent;
 }
 .chat-form textarea.type_message:focus:-moz-placeholder {
     color: transparent;
 } /* FF 4-18 */
 .chat-form textarea.type_message:focus::-moz-placeholder {
     color: transparent;
 } /* FF 19+ */
 .chat-form textarea.type_message:focus:-ms-input-placeholder {
     color: transparent;
 } /* IE 10+ */
 
 .chat-form button.submit-btn {
     background: none;
     border: none;
     padding: 8px;
     font-size: 24px;
 }
 
 #chat-login-form textarea.type_message {
     resize: none;
 }
 
 #register-form textarea.type_message {
     resize: none;
 }
 
 .chat-form textarea.type_message:focus {
     box-shadow: none;
 }
 
 #bottom-controls form {
     width: 100%;
 }
 
 .chat-history {
     height: 427px;
     padding: 8px 8px;
     overflow-y: auto;
     
 }
 
 .chat-message-client p {
     color: #fafafa;
     text-align: left;
     overflow-wrap: break-word !important;
     font-size: 14px;
 }
 
 .chat-message-client {
     margin: 16px 0;
     display: flex;
     gap: 4px;
     padding: 2px 0;
     flex-direction: column;
 }
 
 .chat-message-client img {
     border-radius: 50%;
     float: left;
 }
 
 .chat-message-client-content {
     margin-left: 56px;
 }
 
 .chat-message-client-content img {
     float: none;
     border-radius: 0;
     margin-left: 10px;
 }
 
 .chat-message-client-content .image-type {
     float: none;
     width: 100%;
     border-radius: 6px;
     margin-left: 0px;
 }
 
 .chat-message-admin {
     margin: 16px 0;
     padding: 8px 0;
 }
 
 .chatboxTransition {
     /* animation: chatboxTransition 0.2s linear both; */
     -webkit-animation: scale-up-right 0.3s cubic-bezier(0.39, 0.575, 0.565, 1)
         both;
     animation: scale-up-right 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
     animation-name: scale-up-right;
 }
 .chatboxBottomTransition {
     /* animation: chatboxButtonTransition 0.4s linear both; */
     /* animation: chatboxTransition 0.2s linear both; */
     -webkit-animation: scale-down-right 0.2s cubic-bezier(0.39, 0.575, 0.565, 1)
         both;
     animation: scale-down-right 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
     animation-name: scale-down-right;
 }
 
 .chat-message-admin img {
     border-radius: 50%;
     float: right;
 }
 
 .chat-message-admin-content {
     margin-right: 56px;
     text-align: right;
 }
 
 .chat-message-admin-content img {
     float: none !important;
     border-radius: 0 !important;
     margin-left: 10px;
 }
 
 .chat-message-admin-content .image-type {
     float: none !important;
     width: 100%;
     border-radius: 6px !important;
     margin-left: 0px;
 }
 
 .chat-time {
     font-size: 12px;
     color: #000000;
 }
 
 .chat-message-admin p {
     color: #000000;
     font-weight: 400;
     display: flex;
     flex-direction: column;
     text-align: left;
     overflow-wrap: break-word !important;
     font-size: 14px;
 }
 
 .chat-message-admin .chat-message-bottom {
     justify-content: flex-start;
 }
 
 .chat-message-bottom {
     display: flex;
     gap: 8px;
     padding: 0 4px;
     justify-content: flex-end;
     align-items: center;
 }
 
 .chat-copy-clipboard {
     padding: 4px;
     cursor: pointer;
 }
 
 .chat-copy-clipboard:hover {
     color: #006bb4;
 }
 
 .chat-feedback {
     font-style: italic;
     margin: 0 0 0 80px;
 }
 
 .send-button {
     position: absolute;
     bottom: 5%;
     width: 37px;
     height: 34px;
     right: 20px;
     opacity: 0;
 }
 
 .send-image {
     position: absolute;
     bottom: 5%;
     right: 24px;
 }
 
 .triangle-right.left {
     margin-right: auto;
     background: #eeeeee;
     left: 0px;
     max-width: 256px;
     border-radius: 0 16px 16px 16px;
 }
 
 .triangle-right {
     position: relative;
     padding: 12px;
     width: fit-content;
     color: #fff;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 5px;
 }
 
 .triangle-right.right {
     margin-left: auto;
     background: #e8eaf6;
     right: 0px;
     max-width: 284px;
     border-radius: 16px 16px 0 16px;
 }
 
 .triangle-right.right h5 {
     color: #ffffff !important;
 }
 /*
  start chat style
   */
 .start_message {
     height: 155px;
     border-radius: 2%;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 /*customer controls*/
 .user-info {
     width: 60%;
     float: left;
     position: relative;
 }
 
 .user-info-button {
     float: right;
     font-size: 18px;
     top: 2px;
     position: relative;
     right: 17px;
 }
 
 .user-info img {
     float: left !important;
     margin-right: 5px !important;
     width: 15%;
     border-radius: 50%;
 }
 
 .user-info h4 {
     float: left !important;
     display: inline-block;
     margin-right: 5px;
     left: 0px !important;
     top: 10px;
     color: #969696 !important;
 }
 
 .user-info .customer_status {
     background: #1a8a34;
     border-radius: 50%;
     content: "";
     display: inline-block;
     height: 8px;
     margin: 0 8px 0 0;
     width: 8px;
     position: absolute;
     top: 25px;
     left: 0;
 }
 
 .chatbox-controller {
     bottom: 18px;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     display: flex;
     padding: 5px;
     transition: transform 167ms cubic-bezier(0.33, 0, 0, 1) 0s;
 }

 .chatbox-controller .fa.fa-message {
    margin: 24%;
    font-size: 26px;
}
 
 .chatbox-controller:hover {
     transition: transform 250ms cubic-bezier(0.33, 0, 0, 1) 0s;
     transform: scale(1.1);
 }
 
 #report_form input::-webkit-input-placeholder,
 #report_form input::placeholder,
 #report_form textarea::placeholder {
     color: c2c2c2;
     font-size: 1.2rem;
 }
 
 .customer-controls {
     border-radius: 0;
     background: #fff !important;
     border-bottom-style: ridge;
     z-index: 10;
     color: #3e3333 !important;
     padding: 2px !important;
     box-shadow: 0 6px 7px 0px rgba(0, 0, 0, 0.2) !important;
     top: 4.6rem !important;
     border: none !important;
     position: absolute !important;
     width: 99%;
 }
 
 .customer-controls .controls {
     float: right;
     width: 40%;
 }
 
 .customer-controls .chat_status {
     background: url("../images/drop_down.png");
     background-repeat: no-repeat;
     height: 24px;
     width: 24px;
     float: left;
     position: relative;
     margin-top: 12px;
 }
 
 .chatbox-support-content {
     flex-grow: 1;
 }
 
 #chatbox-component .online_status:before {
     background: #1a8a34;
     border-radius: 50%;
     content: "";
     display: inline-block;
     height: 8px;
     margin: 0 8px 0 0;
     width: 8px;
 }
 
 #chatbox-component .busy_status:before {
     background: #d10000;
     border-radius: 50%;
     content: "";
     display: inline-block;
     height: 8px;
     margin: 0 8px 0 0;
     width: 8px;
 }
 
 #chatbox-component .idle_status:before {
     background: #77777a;
     border-radius: 50%;
     content: "";
     display: inline-block;
     height: 8px;
     margin: 0 8px 0 0;
     width: 8px;
 }
 
 .chat_status .wk_chat_status_options {
     background-color: #ffffff;
     position: absolute;
     width: 182px;
     height: auto;
     top: 29px;
     right: -54px;
     z-index: 999;
     display: none;
     padding: 10px;
     -webkit-box-shadow: -2px 2px 13px 6px rgba(0, 0, 0, 0.48);
     -moz-box-shadow: -2px 2px 13px 6px rgba(0, 0, 0, 0.48);
     box-shadow: -2px 2px 13px 6px rgba(0, 0, 0, 0.48);
     border-radius: 7px;
 }
 
 #chatbox-component .status_point {
     background-color: #ffffff;
     border-width: 1px 0px 0px 1px;
     border-style: solid;
     border-color: #0d5a8f;
     position: absolute;
     width: 15px;
     height: 15px;
     right: 60px;
     top: -8px;
     transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
 }
 
 #chatbox-component .list-group-item {
     padding: 5px;
     border: 1px solid #ddd;
     color: #503333;
 }
 
 .customer-controls .wk_chat_setting {
     background: url(../images/setting.png);
     background-repeat: no-repeat;
     height: 24px;
     width: 24px;
     float: left;
     position: relative;
     margin-top: 7px;
 }
 
 .customer-controls .wk_chat_sound {
     background: url(../images/sound.png);
     background-repeat: no-repeat;
     height: 24px;
     width: 22px;
     float: left;
     margin-top: 7px;
     background-position: -21px 0px;
 }
 
 .customer-controls .wk_sound_play {
     display: none;
 }
 
 /*load chat history*/
 .load_history {
     background: url(../images/load_clock.png);
     background-repeat: no-repeat;
     height: 20px;
     width: 30px;
     margin-top: 2px;
     float: right;
 }
 
 .load_history .wk_chat_history_options {
     background-color: #ffffff;
     border: 1px solid #0d5a8f;
     position: absolute;
     width: 115px;
     height: auto;
     top: 45px;
     right: 0px;
     z-index: 999;
     -webkit-box-shadow: -2px 2px 13px 6px rgba(0, 0, 0, 0.48);
     -moz-box-shadow: -2px 2px 13px 6px rgba(0, 0, 0, 0.48);
     box-shadow: -2px 2px 13px 6px rgba(0, 0, 0, 0.48);
     border-radius: 7px;
     display: none;
     padding: 5px;
 }
 
 /*Setting Pannel*/
 .wk_chat_setting .wk_chat_setting_options {
     background-color: #ffffff;
     position: absolute;
     width: 182px;
     height: auto;
     top: 29px;
     right: -54px;
     z-index: 999;
     display: none;
     padding: 10px;
     -webkit-box-shadow: -2px 2px 13px 6px rgba(0, 0, 0, 0.48);
     -moz-box-shadow: -2px 2px 13px 6px rgba(0, 0, 0, 0.48);
     box-shadow: -2px 2px 13px 6px rgba(0, 0, 0, 0.48);
     border-radius: 7px;
 }
 
 .profile-setting-image {
     height: 50%;
     width: 80%;
     background: rgba(0, 0, 0, 0.7);
     position: absolute;
     top: 20%;
     left: 9%;
     z-index: 200;
     border-radius: 4%;
 }
 
 .profile-setting-image .image_block {
     width: 51%;
     height: 51%;
     background: white;
     position: absolute;
     top: 10%;
     left: 24%;
     border-radius: 50%;
 }
 
 .profile-setting-image .actions-toolbar {
     position: absolute;
     bottom: 10px;
     left: 35px;
 }
 
 .profile_image {
     position: absolute;
     top: 12%;
     left: 25%;
     height: 50%;
     width: 50%;
     opacity: 0;
 }
 
 #user-profile-image {
     width: 100%;
     height: 100%;
     border-radius: 50%;
 }
 
 .chat-loading-mask {
     bottom: 0;
     left: 0;
     margin: auto;
     position: absolute;
     right: 0;
     top: 0;
     z-index: 10001;
     background: rgba(255, 255, 255, 0.5);
 }
 
 .chat-loading-mask .chat-loader > img {
     bottom: 0;
     left: 0;
     margin: auto;
     position: absolute;
     right: 0;
     top: 0;
     z-index: 100;
 }
 
 .chat-date {
     display: block;
     position: relative;
     padding: 5px;
     left: 41%;
     width: max-content;
     top: -12px;
     /* background: rgba(0, 0, 0, 0.7); */
     color: #fff;
     border-radius: 4%;
     /* opacity: 0.5; */
     font-weight: 600;
     color: #293239;
     font-size: 13px;
 }
 
 .chat-message-notification {
     position: fixed;
     background: transparent;
     transition: all 500ms ease-out;
     width: 260px;
     height: auto;
     right: 0px;
     top: 50px;
     z-index: 9999;
 }
 
 .msg_notification {
     width: 260px;
     height: auto;
     border: 1px solid #989898;
     z-index: 9999;
     background-color: #ffffff;
     border-radius: 5px;
     box-shadow: 0 0 6px #b2b2b2;
     display: inline-block;
     position: relative;
     vertical-align: top;
     float: right;
     margin: 5px 20px 5px 45px;
 }
 
 .msg_notification::before {
     background-color: #ffffff;
     content: "\00a0";
     display: block;
     height: 16px;
     position: absolute;
     top: 11px;
     transform: rotate(29deg) skew(-35deg);
     -moz-transform: rotate(29deg) skew(-35deg);
     -ms-transform: rotate(29deg) skew(-35deg);
     -o-transform: rotate(29deg) skew(-35deg);
     -webkit-transform: rotate(29deg) skew(-35deg);
     width: 20px;
     box-shadow: 2px -2px 2px 0 rgba(178, 178, 178, 0.4);
     right: -9px;
 }
 
 .msg_notification .wk_msgLogo {
     width: 20%;
     height: 20%;
     padding-top: 20px;
     float: left;
     padding-left: 5px;
 }
 
 .msg_notification .wk_msgdetails {
     width: 50%;
     height: auto;
     float: left;
     display: block;
     padding-top: 15px;
     line-height: 1;
     position: relative;
 }
 
 .wk_msgdetails .wk_userName {
     width: 80%;
     color: #2b99ce;
     font-family: opensans;
     font-weight: 400;
     font-size: 14px;
     display: inline;
     padding: 5px;
 }
 
 .wk_msgdetails .wk_userMsg {
     width: 100%;
     color: #424242;
     font-family: opensans;
     font-weight: 400;
     font-size: 14px;
     padding: 5px;
     height: 45px;
     overflow: hidden;
     float: left;
     text-overflow: ellipsis;
     display: block;
 }
 
 .wk_msgdetails .wk_userLink {
     width: 100%;
     color: #2b99ce;
     font-family: opensans;
     font-weight: 400;
     font-size: 13px;
     display: block;
     padding: 5px;
     float: left;
 }
 
 .wk_msgdetails .wk_msgClose {
     position: absolute;
     height: 15px;
     width: 13px;
     right: 6px;
     top: 2px;
     background-repeat: no-repeat;
     color: #000000;
     float: left;
     cursor: pointer;
     overflow: hidden;
 }
 
 .status-error {
     margin: 0;
     position: relative;
     top: -10px;
     background: #eeb9b9;
     padding: 5px;
     border-radius: 5px;
 }
 
 .agent-error {
     top: 0;
     left: 10px;
     color: #610505;
     font-size: 1rem;
     z-index: 1;
     position: absolute;
 }
 
 .file-error {
     left: 10px;
     color: #610505;
     font-size: 1rem;
     z-index: 1;
     position: absolute;
     top: 5px;
 }
 
 .report.status-success {
     padding: 3px;
     background: #eaf9ed;
     border: 1px solid #7db78c;
     color: #717171;
 }
 
 .product.data.items {
     margin-bottom: 0px !important;
 }
 
 /* // typing section // */
 .chatbot-reply-container {
     height: auto;
     position: absolute;
     bottom: 0;
     z-index: 10;
     width: 100%;
 }
 
 .chatbot-reply-container .chatbot-typeing {
     text-transform: lowercase;
     color: #0091ff;
     font-size: 12px;
     text-align: right;
     padding-right: 20px;
 }
 
 @media only screen and (max-width: 768px) {
     .product.data.items {
         width: 100%;
     }
 
     .detailed .product.data.items {
         margin-left: 1px;
         margin-right: 3px;
         width: 100%;
     }
 
     .detailed .product.data.items > .item.title {
         width: 50%;
         float: left;
     }
 
     #chatbox-component {
         right: 5px;
     }
 
     .send-image {
         position: absolute;
         bottom: 5%;
         right: 16px;
     }
 
     .chat-form .type_message {
         height: 55px;
     }

     .product.data.items .item.title.active a.lgn-btn::after{
        content: '' ;
     }

     .product.data.items .item.title a.lgn-btn::after{
        content: '' ;
     }

     .product.data.items .item.title a.reg-btn::after{
        content: '' ;
     }
 }

 @media only screen and (max-width: 375px) {
    #chatbox-component {
        right: 5px;
    }
 }

 @media only screen and (min-width: 413px) {
    #chatbox-component {
        right: 26px;
    }
 }

 @media only screen and (min-width: 389px) {
    #chatbox-component {
        right: 14px;
    }
 }

 @media screen and (min-device-width: 429px) and (max-device-width: 431px) {
    #chatbox-component {
        right: 35px;
    }
 }

 @media only screen and (min-width: 412px) {
    #chatbox-component {
        right: 26px;
    }
 }
 
 /*Chat history Page*/
 @media only screen and (min-width: 768px) {
     .wk-mp-design .wk-box {
         width: 48% !important;
     }
 }
 
 @media only screen and (max-width: 767px) {
     .wk-order-title-block {
         display: none;
     }
 }
 
 .wk-mp-design .order-actions-toolbar,
 .wk-mp-design .actions,
 .wk-mp-page-title,
 .wk-sales,
 .wk-orderbox-details .name,
 .wk-ship-row {
     display: inline-block;
     width: 100%;
 }
 
 .wk-mp-design .block-order-details-view {
     margin-bottom: 0 !important;
 }
 
 .wk-mp-design .table-wrapper {
     overflow: auto;
 }
 
 /*end order css*/
 .wk-mp-design .fieldset > .legend {
     box-sizing: border-box;
     float: left;
     font-size: 1.8rem;
     font-weight: 300;
     line-height: 1.2;
     margin: 0 0 20px;
     padding: 0 0 10px;
     width: 100%;
 }
 
 .wk-mp-design .fieldset > .field > .label,
 .fieldset > .fields > .field > .label,
 .wk-mp-model-popup .fieldset > .field > .label,
 .fieldset > .fields > .field > .label {
     display: inline-block;
     margin: 0 0 8px;
     width: auto !important;
 }
 
 .wk-mp-design .wk-mp-fieldset .control {
     width: 100% !important;
     overflow: auto;
 }
 
 @media only screen and (min-width: 0px) and (max-width: 959px) {
     .wk-mp-design table {
         font-size: 12px !important;
     }
 }
 
 #wk-mp-tr-heading {
     background-color: #eeeeee;
 }
 
 #wk-mp-tr-heading th {
     border-color: #d1cfcf;
     border-style: solid;
     border-width: 1px;
     font-size: 0.9em;
     font-weight: bold;
     padding: 3px 9px;
 }
 
 .wk-mp-body td {
     text-align: center;
     padding: 5px 7px;
     border-color: #ffffff;
     border-style: solid;
     border-width: 0 1px 1px 0;
     background: url("../images/filter-row-bg.png") repeat-x #e3eff1;
     background-color: #e3eff1;
     border-bottom: none;
 }
 
 .wk-mp-list-table {
     width: 100%;
     border: 1px solid #cccccc;
 }
 
 .wk-mp-list-table thead span {
     font-weight: bold;
 }
 
 .wk-mp-list-container-table {
     margin-top: 15px;
     margin-bottom: 2px;
     clear: both;
 }
 
 td.wk-mp-td-last {
     border-right: 1px;
 }
 
 .wk-mp-td-span {
     width: 50%;
     float: left;
 }
 
 .wk-mp-td-span input {
     width: 60%;
 }
 
 .wk-mp-label {
     background: none repeat scroll 0 0 #f18200;
     border: 1px solid #de5400;
     color: #ffffff;
     cursor: pointer;
     display: inline-block;
     margin: 2px 15px;
     padding: 1px 5px;
 }
 
 .wk-content th {
     border-left: 1px solid #ccc;
     padding: 5px;
     border-bottom: 1px solid #ccc;
 }
 
 .wk-row-view td {
     border-left: 1px solid #ccc;
     padding: 5px;
     border-bottom: 1px solid #ccc;
 }
 
 .wk-check-first-td {
     border-left: none;
     border-right: 1px solid #ccc;
 }
 
 .wk-first-td {
     width: 26%;
     border-left: none;
 }
 
 .wk-last-tr {
     border-bottom: none;
 }
 
 .send-attachment {
     color: #9a9a9a;
     margin-right: 5px;
     font-size: 24px;
     cursor: pointer;
 }
 
 #send-attachment {
     position: absolute;
     width: 20px;
     height: 20px;
     top: 2px;
     opacity: 0;
 }
 
 .star-ratings-css {
     unicode-bidi: bidi-override;
     color: #c5c5c5;
     font-size: 25px;
     height: 25px;
     width: 100px;
     margin: 0 auto;
     position: relative;
     padding: 0;
     text-shadow: 0px 1px 0 #a2a2a2;
 }
 
 .star-ratings-css-top {
     color: #e7711b;
     padding: 0;
     position: absolute;
     z-index: 1;
     display: block;
     top: 0;
     left: 0;
     overflow: hidden;
 }
 
 .star-ratings-css-bottom {
     padding: 0;
     display: block;
     z-index: 0;
 }
 
 .dashboard-ratings-sprite {
     background: url(../images/star-rating-sprite.png) repeat-x;
     font-size: 0;
     height: 20px;
     line-height: 0;
     overflow: hidden;
     text-indent: -999em;
     width: 75px;
     margin: 0 auto;
     display: inline-block;
     background-size: 15px;
     top: 8px;
     position: relative;
 }
 
 .star-ratings-sprite {
     background: url(../images/star-rating-sprite.png) repeat-x;
     font-size: 0;
     height: 20px;
     line-height: 0;
     overflow: hidden;
     text-indent: -999em;
     width: 75px;
     margin: 0 auto;
     display: inline-block;
     background-size: 15px;
     top: 15px;
     left: -15px;
     position: relative;
 }
 
 .star-ratings-sprite-rating {
     background: url(../images/star-rating-sprite.png) repeat-x;
     background-position: 0 100%;
     float: left;
     height: 14px;
     display: block;
     background-size: 15px;
 }
 
 .emoji {
     width: 1.5em;
     height: 1.5em;
     display: inline-block;
     margin-bottom: -0.25em;
     background-size: contain;
     cursor: pointer;
 }
 
 .chat .dropup.open > .dropdown-menu {
     display: block;
 }
 
 .chat .dropup {
     position: absolute;
     bottom: 20px;
     right: 20px;
 }
 
 .chat .dropup > .emoticons_div {
     background: url(../images/sprite.png) -160px -1px no-repeat;
     width: 20px;
     height: 20px;
     display: inline-block;
     cursor: pointer;
 }
 
 .chat .dropup .dropdown-menu {
     position: absolute;
     bottom: 100%;
     right: 0;
     z-index: 1000;
     display: none;
     float: left;
     min-width: 160px;
     padding: 5px 0;
     margin: 2px 0 0;
     font-size: 14px;
     text-align: left;
     list-style: none;
     background-color: #fff;
     -webkit-background-clip: padding-box;
     background-clip: padding-box;
     border: 1px solid #ccc;
     border: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 4px;
     -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 }
 
 .dropdown-menu-right {
     right: 0;
     left: auto;
 }
 
 .dropdown-menu-right .emoticon_set {
     display: inline-block;
 }
 
 .dropdown-menu-right .smiley_pad {
     margin-bottom: 5px;
 }
 
 .user-rating-dashboard {
     width: 84%;
     position: absolute;
     top: 25px;
     background: #fff;
     padding: 12px;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     left: 10px;
     z-index: 1;
 }
 
 /* Three column layout */
 .user-rating-dashboard .side {
     clear: both;
     float: left;
     width: 15%;
     margin-top: 10px;
 }
 
 .user-rating-dashboard .middle {
     margin-top: 10px;
     float: left;
     width: 65%;
 }
 
 /* Place text to the right */
 .user-rating-dashboard .right {
     text-align: right;
     clear: none !important;
 }
 
 /* Clear floats after the columns */
 .user-rating-dashboard .row:after {
     content: "";
     display: table;
     clear: both;
 }
 
 /* The bar container */
 .user-rating-dashboard .bar-container {
     width: 100%;
     background-color: #f1f1f1;
     text-align: center;
     color: white;
 }
 
 /* Individual bars */
 .user-rating-dashboard .bar-5 {
     width: 0%;
     height: 18px;
     background-color: #4caf50;
 }
 
 .user-rating-dashboard .bar-4 {
     width: 0%;
     height: 18px;
     background-color: #2196f3;
 }
 
 .user-rating-dashboard .bar-3 {
     width: 0%;
     height: 18px;
     background-color: #00bcd4;
 }
 
 .user-rating-dashboard .bar-2 {
     width: 0%;
     height: 18px;
     background-color: #ff9800;
 }
 
 .user-rating-dashboard .bar-1 {
     width: 0%;
     height: 18px;
     background-color: #f44336;
 }
 
 /* Responsive layout - make the columns stack on top of each other instead of next to each other */
 @media (max-width: 400px) {
     .user-rating-dashboard .side,
     .user-rating-dashboard .middle {
         width: 100%;
     }
 
     .user-rating-dashboard .right {
         display: none;
     }
 }
 
 .user-rating-popup {
     padding: 16px;
 }
 
 .cancel-rating-popup {
     float: right;
     position: relative;
     top: -9px;
     cursor: pointer;
 }
 
 .block-comment {
     resize: none;
 }
 
 .block-comment::-webkit-input-placeholder {
     color: #736c6c;
 }
 
 .chat-rating-stars {
     float: left;
     position: relative;
     left: 25%;
 }
 
 /* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
     follow these rules. Every browser that supports :checked also supports :not(), so
     it doesn’t make the test unnecessarily selective */
 .chat-rating-stars:not(:checked) > input {
     position: absolute;
     top: -9999px;
     clip: rect(0, 0, 0, 0);
 }
 
 .chat-rating-stars:not(:checked) > label {
     float: right;
     width: 1em;
     padding: 0 0.1em;
     overflow: hidden;
     white-space: nowrap;
     cursor: pointer;
     font-size: 200%;
     line-height: 1.2;
     color: #ddd;
     text-shadow: 1px 1px #bbb, 2px 2px #666,
         0.1em 0.1em 0.2em rgba(0, 0, 0, 0.5);
 }
 
 .chat-rating-stars:not(:checked) > label:before {
     content: "★ ";
 }
 
 .chat-rating-stars > input:checked ~ label {
     color: #f70;
     text-shadow: 1px 1px #c60, 2px 2px #940,
         0.1em 0.1em 0.2em rgba(0, 0, 0, 0.5);
 }
 
 .chat-rating-stars:not(:checked) > label:hover,
 .chat-rating-stars:not(:checked) > label:hover ~ label {
     color: gold;
     text-shadow: 1px 1px goldenrod, 2px 2px #b57340,
         0.1em 0.1em 0.2em rgba(0, 0, 0, 0.5);
 }
 
 .chat-rating-stars > input:checked + label:hover,
 .chat-rating-stars > input:checked + label:hover ~ label,
 .chat-rating-stars > input:checked ~ label:hover,
 .chat-rating-stars > input:checked ~ label:hover ~ label,
 .chat-rating-stars > label:hover ~ input:checked ~ label {
     color: #ea0;
     text-shadow: 1px 1px goldenrod, 2px 2px #b57340,
         0.1em 0.1em 0.2em rgba(0, 0, 0, 0.5);
 }
 
 .chat-rating-stars > label:active {
     position: relative;
     top: 2px;
     left: 2px;
 }
 
 .start-message {
     margin-top: 0px;
     margin-bottom: 0px;
     height: 140px;
     resize: none;
 }
 
 .chat-file-uploader {
     position: absolute;
     width: 28%;
     bottom: 35px;
     right: 50px;
 }
 
 .chat-file-uploader .upload-info {
     bottom: -9px;
     position: absolute;
     z-index: 100;
     font-size: 1.2rem;
 }
 
 @keyframes chatboxTransition {
     0% {
         /* -webkit-transform: scale(0.5); */
         /* transform: scale(0.5); */
         transform: translateY(100%);
         -webkit-transform-origin: 100% 100%;
         transform-origin: 100% 100%;
     }
     100% {
         /* -webkit-transform: scale(1); */
         /* transform: scale(1); */
         transform: translateY(0%);
         -webkit-transform-origin: 100% 100%;
         transform-origin: 100% 100%;
     }
 }
 
 @keyframes chatboxButtonTransition {
     0% {
         /* -webkit-transform: scale(0.5); */
         /* transform: scale(0.5); */
         transform: translateY(0%);
         -webkit-transform-origin: 100% 100%;
         transform-origin: 100% 100%;
     }
     100% {
         /* -webkit-transform: scale(1); */
         /* transform: scale(1); */
         transform: translateY(calc(100% - 45px));
         -webkit-transform-origin: 100% 100%;
         transform-origin: 100% 100%;
     }
 }
 
 #ai-response-container,
 #chat-loader {
     display: none;
 }
 
 .loading form button {
     opacity: 0.1;
 }
 
 .load {
     display: flex;
     border-radius: 50%;
     flex-direction: row;
 }
 
 .progress {
     width: 1em;
     height: 1em;
     margin: 0.2em;
     scale: 0;
     border-radius: 50%;
     /* background: rgb(255, 255, 255); */
     background: #2c3245;
     animation: loading_492 2s ease infinite;
     animation-delay: 1s;
 }
 
 @keyframes loading_492 {
     50% {
         scale: 1;
     }
 }
 
 .progress:nth-child(2) {
     animation-delay: 1.3s;
 }
 
 .progress:nth-child(3) {
     animation-delay: 1.7s;
 }
 
 .close-icon {
     display: none;
 }
 
 .open .msg-icon {
     display: none;
 }
 
 .open .close-icon {
     display: flex;
     font-size: 28px;
     width: 100%;
     align-items: center;
     justify-content: center;
     height: 100%;
 }
 
 .chat-message-admin.message_container {
     display: flex;
     gap: 2px;
     flex-direction: row;
 }
 
 .admin-logo {
     height: 24px;
     width: 24px;
     border: 1px solid #bdbdbdc2;
 }
 div.chat.loader {
    display: none;
 }
 div.chat.loader .load {
    margin:42%;
 }
 .chat .tabs {
     display: flex;
     margin: 12px;
     border-radius: 30px;
     background: #f0f4f8;
     padding: 5px;
     gap: 5px;
 }
 
 .chat .tabs .tab-item {
     display: flex;
     padding: 12px;
     cursor: pointer;
     border-radius: 30px;
     align-items: center;
     justify-content: center;
     color: #333333;
     font-size: 14px;
 }
 
 .chat .tabs .tab-item a {
     text-decoration: none;
     color: inherit;
 }
 
 .chat .tabs .tab-item.active {
     background-color: #fff;
     font-weight: 600;
     color: #334155;
 }
 
 .chat .tab-content {
     padding: 16px;
 }
 
 .chat .tab-content p.form-title,
 .user-rating-popup p.form-title {
     font-size: 16px;
     text-align: center;
     font-weight: 600;
     margin-bottom: 16px;
     color: #000000;
 }
 
 #report_form {
     margin-top: 64px;
 }
 
 .chat .tab-content input,
 .chat .tab-content textarea,
 .user-rating-popup input,
 .user-rating-popup textarea {
     background: #f8f9fa;
     border: 1px solid #e1e7ef;
     padding: 12px;
     height: auto;
     border-radius: 6px;
 }
 
 div#full-chatbot .actions-toolbar {
     display: flex;
     justify-content: center;
     margin-top: 24px;
 }
 
 div#full-chatbot .actions-toolbar .primary button {
     background: #334155;
     color: #f0f4f8;
     border-radius: 30px;
     padding: 16px 48px;
 }
 

/* scrollbar */
div.chat{
    ::-webkit-scrollbar {
        width: 6px;
        background-color:transparent;
        color: transparent;
      }

      ::-webkit-scrollbar-track{
       visibility: hidden;
      }
      ::-webkit-scrollbar-thumb{
        visibility: hidden;
      }
}

div.chat:hover{
    
      ::-webkit-scrollbar-thumb{
        visibility: visible;
        padding-bottom: 10px;
      }
}
div.block.block-search {
    z-index:1;
}
  
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  }
  
  ::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255, 255, 255, 0.3);
  }
 
 /**
  * ----------------------------------------
  * animation scale-up-br
  * ----------------------------------------
  */
 @-webkit-keyframes scale-up-right {
     0% {
         -webkit-transform: scale(0);
         transform: scale(0);
         -webkit-transform-origin: 100% 100%;
         transform-origin: 100% 100%;
         opacity: 0;
     }
     100% {
         -webkit-transform: scale(1);
         transform: scale(1);
         -webkit-transform-origin: 100% 100%;
         transform-origin: 100% 100%;
         opacity: 1;
     }
 }
 
 @-webkit-keyframes scale-down-right {
     0% {
         -webkit-transform: scale(1);
         transform: scale(1);
         -webkit-transform-origin: 100% 100%;
         transform-origin: 100% 100%;
         opacity: 1;
     }
     100% {
         -webkit-transform: scale(0.2);
         transform: scale(0.2);
         -webkit-transform-origin: 100% 100%;
         transform-origin: 100% 100%;
         opacity: 0;
     }
 }
 
 /**
    * ----------------------------------------
    * animation scale-up-left
    * ----------------------------------------
    */
 @-webkit-keyframes scale-up-left {
     0% {
         -webkit-transform: scale(0);
         transform: scale(0);
         -webkit-transform-origin: 0% 100%;
         transform-origin: 0% 100%;
     }
     100% {
         -webkit-transform: scale(1);
         transform: scale(1);
         -webkit-transform-origin: 0% 100%;
         transform-origin: 0% 100%;
     }
 }
 
 @-webkit-keyframes scale-down-left {
     0% {
         -webkit-transform: scale(1);
         transform: scale(1);
         -webkit-transform-origin: 0% 100%;
         transform-origin: 0% 100%;
     }
     100% {
         -webkit-transform: scale(0.8);
         transform: scale(0.8);
         -webkit-transform-origin: 0% 100%;
         transform-origin: 0% 100%;
     }
 }