/*
1.ShortCode Grid
2.wp Chat bot Message container
3.Sidebar
-Widget
-Agent
*/
/**********************************************************************************
1. ShortCode Grid
**********************************************************************************/
.chatbot-shortcode-template-03 {
font-family: "quicksandregular", "Helvetica Neue", Helvetica, Aria;
height: auto;
max-width: 1100px;
margin: 0 auto;
position: relative;
box-sizing: border-box;
border-radius: 5px;
box-shadow: 0 5px 40px rgba(0, 0, 0, .10);
background: #ffffff;
display: table;
}
.chatbot-shortcode-row {
display: table-row;
box-shadow: 0 0 10px rgba(102, 122, 255, 0.10);
}
.chatbot-shortcode-template-03 .wp-chatbot-container, .chatbot-shortcode-template-03 .chatbot-sidebar {
display: table-cell;
vertical-align: top;
box-sizing: border-box;
}
.chatbot-shortcode-template-03 .chatbot-sidebar {
width: 30%;
padding: 15px;
font-size: 14px;
line-height: 1.8;
}
.chatbot-shortcode-template-03 .wp-chatbot-container {
width: 40%;
background-color: #f6f6fc;
}
.wp-chatbot-container {
box-shadow: 0 0 50px rgba(102, 122, 255, 0.50);
}
/***************************************************************************************************
2. wp Chat bot Message container
****************************************************************************************************/
.wp-chatbot-header {
background: #667aff;
border-radius: 0 !important;
height: auto;
}
.wp-chatbot-header h3 {
color: #ffffff;
font-size: 18px !important;
font-weight: 700;
line-height: 1.2;
letter-spacing: 1px;
}
.wp-chatbot-content {
}
.wp-chatbot-comment-loader {
margin: 0 auto;
display: block;
}
ul.wp-chatbot-messages-container {
padding: 0;
margin: 0;
}
ul.wp-chatbot-messages-container > li:first-child .wp-chatbot-agent {
display: none !important;
}
ul.wp-chatbot-messages-container > li, .wp-chatbot-agent-profile {
padding-left: 22px;
font-size: 14px;
}
ul.wp-chatbot-messages-container > li .wp-chatbot-comment-loader {
margin: 0 auto;
display: block;
}
ul.wp-chatbot-messages-container > li > .wp-chatbot-avatar, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
position: absolute;
top: 0;
left: 0;
z-index: 2;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.62);
background-color: #70aca9;
width: 40px;
height: 40px;
}
ul.wp-chatbot-messages-container > li > .wp-chatbot-agent,
ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph,
.wp-chatbot-agent-profile .wp-chatbot-bubble, .wp-chatbot-widget-agent {
display: table;
position: relative;
padding-left: 30px;
padding-right: 10px;
}
ul.wp-chatbot-messages-container > li > .wp-chatbot-agent,
.wp-chatbot-widget-agent {
display: table !important;
padding-top: 2px;
padding-bottom: 2px;
background-color: #667aff;
color: #ffffff;
font-size: 10px;
line-height: 12px;
border-radius: 10px 10px 0px 10px;
}
ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph, .wp-chatbot-agent-profile .wp-chatbot-bubble {
padding-top: 8px;
padding-bottom: 8px;
background-color: #36d67c;
color: #ffffff;
font-size: 14px;
line-height: 20px;
border-radius: 10px;
}
ul.wp-chatbot-messages-container > li.wp-chat-user-msg > .wp-chatbot-paragraph {
background-color: #3a98d8;
}
ul.wp-chatbot-messages-container > li.wp-chat-user-msg::before {
left: 19px;
}
ul.wp-chatbot-messages-container > li.wp-chatbot-msg-flat {
color: #ffffff;
}
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;
}
/********* Footer ****************/
.wp-chatbot-footer {
border-radius: 0px;
background: rgba(70, 70, 70, 0.5);
}
/******Message Editor ***********/
.wp-chatbot-editor-area {
border-top: 1px solid #deebe9;
border-radius: 0;
margin: 0;
padding: 6px 15px;
}
.wp-chatbot-editor-area input {
display: inline-block;
border: none;
height: 50px;
font-family: 'Montserrat', sans-serif;
width: 80%;
background-color: transparent;
color: #fff;
font-size: 14px;
margin: 0;
padding: 0;
}
.wp-chatbot-editor-area input:focus {
outline: none;
border: none;
box-shadow: none;
background: none;
}
input.wp-chatbot-editor::placeholder {
color: #ffffff;
}
.wp-chatbot-editor-area button {
display: inline-block;
height: 50px;
background: transparent url("../../images/send-button.png") no-repeat center;
color: transparent;
width: 20%;
cursor: pointer;
margin: 0 0 0 -8px;
padding: 0;
border: none;
outline: none;
}
.wp-chatbot-editor-area button:hover {
background: transparent url("../../images/send-button.png") no-repeat center;
}
.wp-chatbot-editor-area button:focus {
outline: none;
border: none;
box-shadow: none;
background: transparent url("../../images/send-button.png") no-repeat center;
}
/*******************************************************************************************
sidebar element
*******************************************************************************************/
.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;
}
/***********Widget*************/
.wp-chatbot-widget {
margin-bottom: 20px;
}
.wp-chatbot-widget:last-child {
margin-bottom: 0;
}
.wp-chatbot-widget h3.wp-chatbot-widget-title {
color: #999999;
margin: 7px 0 10px;
padding: 0 0 5px;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 1px;
border-bottom: 1px solid #e6e6e6;
}
/************Agent***********/
.chatbot-agent {
text-align: center;
}
.chatbot-agent img {
border: 1px solid #F5F5F5;
box-shadow: none !important;
padding: 3px;
}
h3.chatbot-agent-name {
color: #999999;
margin: 0 0 10px !important;
padding: 0 !important;
font-size: 14px !important;
font-weight: 700;
}
.chatbot-agent-name {
margin: 5px 0;
padding: 0;
color: #999999;
}
.wp-chatbot-widget ul.wp-chatbot-products, .wp-chatbot-products-area {
margin: 0 !important;
}
/**********************************
Reset
**********************************/
/********* Order List *******/
.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: #667aff;
color: #ffffff !important;
}
.wp-chatbot-cart-footer div a:hover, .wp-chatbot-cart-footer div:last-child a {
background: #4e60d8 !important;
}
.wp-chatbot-cart-container div p {
text-align: left !important;
}
/****** Product Details*******/
.wp-chatbot-product-details {
box-shadow: 0 0 10px #ccc;
background-color: #f5f5f5;
}
.wp-chatbot-product-cart-button input[type="button"], #wp-chatbot-loadmore {
border: 1px solid #667aff;
background: #667aff;
color: #ffffff;
box-shadow: 0 0 2px #999;
}
.wp-chatbot-product-cart-button input[type="button"]:hover, #wp-chatbot-loadmore:hover {
background: #4e60d8;
color: #ffffff;
}
#wp-chatbot-shortcode-template-container a.wp-chatbot-product-close {
position: absolute;
top: 0;
right: 0;
background: #667aff url("../../images/wp-boat-product-close-icon.png") no-repeat center;
background-size: 27px;
width: 50px;
height: 50px;
}
#wp-chatbot-shortcode-template-container a.wp-chatbot-product-close:hover {
background-color: red;
}
#wp-chatbot-shortcode-template-container .wp-chatbot-product-details {
box-shadow: none;
}
#wp-chatbot-shortcode-template-container h2#wp-chatbot-product-title {
margin: 0 0 10px !important;
color: #999999;
padding: 0 0 5px;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 1px;
}
#wp-chatbot-shortcode-template-container .wp-chatbot-product-price {
color: #667aff;
font-size: 16px;
font-weight: bold;
}
/*************************
Right-to-left text direction
**************************/
.wp-chatbot-rtl {
text-align: right;
direction: RTL;
}
.wp-chatbot-rtl ul.wp-chatbot-messages-container > li, .wp-chatbot-rtl .wp-chatbot-agent-profile {
padding: 0 10px 0 0;
}
.wp-chatbot-rtl ul.wp-chatbot-messages-container > li > .wp-chatbot-agent,
.wp-chatbot-rtl ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph,
.wp-chatbot-rtl .wp-chatbot-agent-profile .wp-chatbot-bubble, .wp-chatbot-rtl .wp-chatbot-widget-agent {
display: table;
position: relative;
padding-left: 10px;
padding-right: 30px;
}
.wp-chatbot-rtl ul.wp-chatbot-messages-container > li > .wp-chatbot-avatar,
.wp-chatbot-rtl .wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
top: 0;
left: auto;
right: 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: 1024px) {
.chatbot-left-sidebar {
display: none !important;
}
}
@media screen and (max-width: 767px) {
.chatbot-shortcode-template-03 {
display: block;
}
.chatbot-shortcode-template-03 .chatbot-shortcode-row {
display: block;
}
.chatbot-shortcode-template-03 .wp-chatbot-container{
display: block !important;
width: 100% !important;
margin-bottom: 30px;
}
}
في ظل التحول الرقمي المتسارع، أصبح التسويق الإلكتروني أحد أهم الأدوات التي تعتمد عليها المؤسسات والشركات لتحقيق الانتشار والوصول إلى جمهور أوسع.
في هذا الحوار التسجيلي، نسلّط الضوء على مفهوم التسويق الإلكتروني، أهميته في العصر الحديث، وكيف غيّر قواعد اللعبة في عالم المال والأعمال.
ال