/*
1.ShortCode Grid
2.wp Chat bot Message container
3.Sidebar
-Widget
-Agent
4.Product Details
*/
/**********************************************************************************
1. ShortCode Grid
**********************************************************************************/
.chatbot-shortcode-template-01 {
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 0 30px rgba(0, 0, 0, .30);
display: table;
}
.chatbot-shortcode-row {
display: table-row;
}
.chatbot-shortcode-template-01 .wp-chatbot-container, .chatbot-shortcode-template-01 .chatbot-sidebar {
display: table-cell;
vertical-align: top;
box-sizing: border-box;
}
.chatbot-shortcode-template-01 .chatbot-sidebar {
width: 30%;
padding: 15px;
font-size: 14px;
line-height: 1.8;
}
.chatbot-shortcode-template-01 .wp-chatbot-container {
width: 40%;
background: #deebe9;
}
/***************************************************************************************************
2. wp Chat bot Message container
****************************************************************************************************/
.wp-chatbot-header {
background: #70aca9;
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 > li {
margin-bottom: 10px;
padding-top: 30px;
}
ul.wp-chatbot-messages-container > li.wp-chatbot-msg {
padding-left: 35px;
}
ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
padding-right: 35px;
}
ul.wp-chatbot-messages-container > li:first-child {
padding: 0;
}
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 #70aca9;
background-color: #70aca9;
width: 40px;
height: 40px;
top: 0;
}
ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-avatar, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
left: 0;
}
ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
right: 0;
}
ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph,
.wp-chatbot-agent-profile .wp-chatbot-bubble {
padding: 10px;
max-width: 90%;
background-color: #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color=#77bdb7)"; /*IE 8*/
-moz-box-shadow: 1px 1px 1px #77bdb7; /*FF 3.5+*/
-webkit-box-shadow: 1px 1px 1px #77bdb7; /*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
box-shadow: 1px 1px 1px #77bdb7; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color=#77bdb7); /*IE 5.5-7*/
}
.wp-chatbot-agent-profile .wp-chatbot-bubble {
background-color: #f5f5f5;
}
ul.wp-chatbot-messages-container li:first-child.wp-chatbot-msg .wp-chatbot-paragraph {
color: #3e3d3d;
box-shadow: none;
}
ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
text-align: right;
float: right;
border-radius: 10px 10px 10px 10px;
color: #999;
}
ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-paragraph, .wp-chatbot-agent-profile .wp-chatbot-bubble {
color: #70aca9;
border-radius: 10px 10px 10px 10px;
}
.wp-chatbot-footer {
border-radius: 5px;
background: rgba(70, 70, 70, 0.5);
}
.wp-chatbot-editor-area {
border-top: 1px solid #deebe9;
border-radius: 0 0 5px 5px;
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: #ffffff;
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 input::-webkit-input-placeholder, .wp-chatbot-editor-area input::-moz-placeholder, .wp-chatbot-editor-area input:-ms-input-placeholder, .wp-chatbot-editor-area input:-moz-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;
padding-left: 35px;
padding-top: 30px;
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: #6dcbe3;
color: #ffffff !important;
}
.wp-chatbot-cart-footer div a:hover, .wp-chatbot-cart-footer div:last-child a {
background: #559db0 !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 #6dcbe3;
background: #6dcbe3;
color: #ffffff;
box-shadow: 0 0 2px #999;
}
.wp-chatbot-product-cart-button input[type="button"]:hover, #wp-chatbot-loadmore:hover {
background: #559db0;
color: #ffffff;
}
#wp-chatbot-shortcode-template-container a.wp-chatbot-product-close {
position: absolute;
top: 0;
right: 0;
background: #6dcbe3 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;
}
/*************************
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-rtl .wp-chatbot-agent-profile {
padding: 0 50px 0 0;
}
.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 {
display: table;
max-width: 90%;
float: right;
text-align: right;
}
.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: 0;
left: auto;
}
.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
padding: 0 0 0 50px;
}
.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
left: 0;
right: auto;
}
.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg > .wp-chatbot-paragraph {
display: table;
max-width: 90%;
float: left;
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: 1024px) {
.chatbot-left-sidebar {
display: none !important;
}
.chatbot-shortcode-template-01 {
display: block;
}
.chatbot-shortcode-template-01 .chatbot-shortcode-row {
display: block;
}
.wp-chatbot-container {
width: 100% !important;
display: block !important;
}
}
@media screen and (max-width: 767px) {
.chatbot-shortcode-template-01 .wp-chatbot-container {
display: block !important;
width: 100% !important;
margin-bottom: 30px;
}
}
ما بقاش الذكاء الاصطناعي مجرد خيال علمي أو تطور مستنيينه في المستقبل… لأ، ده بقى واقع عايشينه كل يوم، وبيأثر بشكل مباشر على شغلنا، ومهاراتنا، وحتى على الوظايف نفسها. في الفيديو ده، هنتكلم عن إزاي الذكاء الاصطناعي قلب موازين سوق العمل، إيه المهن اللي بدأت تختفي، وإيه اللي طلع جديد، وإزاي نجهز نفسنا للمستقبل اللي بدأ خلاص.