/*
01. Ball content
02. wp Chat bot Message container
-A Link Item
-B Loading
03. wp Chat bot Message Editor
04. wp Chat bottom Tab Nav Editor
05. Tab Feature Product
06. Tab Cart
07. Product Details
*/
/*********************
01. Ball content wrapper
**********************/
.wp-chatbot-container {
/* width: 420px;*/
border-radius: 5px;
background: url("../../images/defult-bg.jpg") no-repeat bottom center;
background-size: cover;
}
/******************************
02. wp Chat bot Message container
*********************************/
.wp-chatbot-header {
background-color: rgba(38, 176, 187, 0.90);
}
.wp-chatbot-header h3 {
color: #ffffff;
font-size: 18px !important;
letter-spacing: 1px;
}
.wp-chatbot-content {
padding-left: 35px;
padding-right: 35px;
}
ul.wp-chatbot-messages-container {
padding: 0;
margin: 0;
overflow: visible;
}
ul.wp-chatbot-messages-container li {
font-size: 14px;
}
ul.wp-chatbot-messages-container > li.wp-chat-user-msg:after, ul.wp-chatbot-messages-container > li .wp-chatbot-products:after {
clear: both;
display: block;
content: "";
height: 1px;
}
#wp-chatbot-messages-container .wp-chatbot-avatar img, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar img {
width: 25px !important;
height: 25px !important;
}
ul.wp-chatbot-messages-container > li > .wp-chatbot-avatar, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
position: absolute;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.62);
width: 25px;
height: 25px;
margin-top: -17px;
top: 50%;
}
ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-avatar, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
left: -35px;
}
ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
right: -35px;
}
ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph, .wp-chatbot-bubble {
padding: 8px 15px;
display: block;
background-color: rgba(38, 176, 187, 0.75);
position: relative;
box-sizing: border-box;
border-radius: 2px;
color: #FFF;
line-height: 150%;
}
ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph:before, .wp-chatbot-bubble:before {
content: "";
position: absolute;
top: 50%;
width: 0;
height: 0;
margin-top: -7px;
}
ul.wp-chatbot-messages-container > li.wp-chat-user-msg > .wp-chatbot-paragraph:before {
right: -10px;
border-top: 7px solid transparent;
border-left: 10px solid rgba(38, 176, 187, 0.75);
border-bottom: 7px solid transparent;
}
ul.wp-chatbot-messages-container > li.wp-chatbot-msg > .wp-chatbot-paragraph:before, .wp-chatbot-bubble:before {
left: -10px;
border-top: 7px solid transparent;
border-right: 10px solid rgba(38, 176, 187, 0.75);
border-bottom: 7px solid transparent;
}
ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
text-align: right;
}
/************ 02.A Loading *******************/
ul.wp-chatbot-messages-container > li .wp-chatbot-paragraph img.wp-chatbot-comment-loader {
background-color: #fff;
padding: 1px;
border-radius: 5px;
margin: 0 auto;
display: block;
}
/************02.B Link Item*************/
span.qcld-chatbot-product-category,
span.qcld-chatbot-support-items,
span.qcld-chatbot-wildcard,
span.qcld-chatbot-suggest-email,
span.qcld-chatbot-reset-btn,
#wp-chatbot-loadmore {
color: #000000;
background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%);
background-size: 200% auto;
box-shadow: 0 5px 15px #c3c3c3;
border: 1px solid #ffffff;
}
span.qcld-chatbot-product-category:hover,
span.qcld-chatbot-support-items:hover,
span.qcld-chatbot-wildcard:hover,
span.qcld-chatbot-suggest-email:hover,
span.qcld-chatbot-reset-btn:hover,
#wp-chatbot-loadmore:hover {
background-position: right center;
box-shadow: none;
}
/*******************************
03. wp Chat bottom Tab Nav Editor
**********************************/
.wp-chatbot-footer {
background-color: #26B0BB;
}
/*******************************
04. wp Chat bot Message Editor
**********************************/
.wp-chatbot-editor-container {
border-bottom: 1px solid #1398a2;
}
.wp-chatbot-editor-container input {
color: #ffffff;
}
.wp-chatbot-editor-container input::placeholder {
color: #ffffff;
}
.wp-chatbot-editor-container input::-webkit-input-placeholder {
color: #ffffff;
}
.wp-chatbot-editor-container input::-moz-placeholder {
color: #ffffff;
}
.wp-chatbot-editor-container input:-ms-input-placeholder {
color: #ffffff;
}
.wp-chatbot-editor-container input:-moz-placeholder {
color: #ffffff;
}
/******************************************
05. Tab Feature Product
******************************************/
.wp-chatbot-agent-profile {
position: relative;
box-sizing: border-box;
word-wrap: break-word;
list-style: none;
display: block;
clear: both;
line-height: 150%;
min-height: 50px;
margin: 0 0 10px 0;
}
.wp-chatbot-widget-title {
color: #353535;
text-align: center;
padding-bottom: 10px;
}
/*********************************************
06. Tab Cart
*******************************************/
.wp-chatbot-cart-header {
background-color: #F5F5F5;
}
.wp-chatbot-cart-single {
background-color: rgba(245, 245, 245, 0.1);
border-bottom: 1px solid #dddddd;
}
.wp-chatbot-cart-single:nth-child(2n+1) {
background-color: rgba(245, 245, 245, 0.5);
}
.wp-chatbot-cart-footer div a {
text-decoration: none;
background: #70aca9;
color: #ffffff;
}
.wp-chatbot-cart-footer div a:hover, .wp-chatbot-cart-footer div:last-child a {
background: #5a8c89;
}
/******************************************
07. Product Details
*******************************************/
.wp-chatbot-product-details {
box-shadow: 0 0 10px #ccc;
background-color: rgba(255, 255, 255, 0.9);
}
.active-chatbot-product-details {
margin-right: -5px;
}
.wp-chatbot-product-cart-button input[type="button"], #wp-chatbot-loadmore {
border: 1px solid #26B0BB;
background: #26B0BB;
color: #ffffff;
box-shadow: 0 0 2px #999;
}
.wp-chatbot-product-cart-button input[type="button"]:hover, #wp-chatbot-loadmore:hover {
background: #229da7;
color: #ffffff;
}
/*************************
Right-to-left text direction
**************************/
.wp-chatbot-rtl {
text-align: right;
direction: RTL;
}
.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg.wp-chatbot-msg-flat {
padding: 0;
}
.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg > .wp-chatbot-paragraph {
text-align: right;
}
.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg > .wp-chatbot-paragraph:before,
.wp-chatbot-rtl .wp-chatbot-bubble:before {
right: -10px;
left: auto;
border-top: 7px solid transparent;
border-left: 10px solid rgba(38, 176, 187, 0.75);
border-right: none;
border-bottom: 7px solid transparent;
}
.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg > .wp-chatbot-paragraph:before {
left: -10px;
right: auto;
border-top: 7px solid transparent;
border-right: 10px solid rgba(38, 176, 187, 0.75);
border-left: none;
border-bottom: 7px solid transparent;
}
.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-avatar,
.wp-chatbot-rtl .wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
right: -30px;
left: auto;
}
.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
left: -30px;
right: auto;
}
.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg > .wp-chatbot-paragraph {
text-align: left;
}
.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
margin-left: 0;
}
.wp-chatbot-rtl .wp-chatbot-editor-container input {
text-align: right;
direction: RTL;
}
.wp-chatbot-rtl .wp-chatbot-products-area ul li:nth-child(2n+2) {
margin: auto;
}
.wp-chatbot-rtl .wp-chatbot-products-area ul li {
margin: 1%;
vertical-align: middle;
}
/*@media screen and (max-width: 767px) {*/
/*.wp-chatbot-container {*/
/*width: 270px;*/
/*}*/
/*}*/
في ظل التحول الرقمي المتسارع، أصبح التسويق الإلكتروني أحد أهم الأدوات التي تعتمد عليها المؤسسات والشركات لتحقيق الانتشار والوصول إلى جمهور أوسع.
في هذا الحوار التسجيلي، نسلّط الضوء على مفهوم التسويق الإلكتروني، أهميته في العصر الحديث، وكيف غيّر قواعد اللعبة في عالم المال والأعمال.
ال