/*
1.ShortCode Grid
2.wp Chat bot Message container
3.Sidebar
-Widget
-Agent
*/
/**********************************************************************************
1. ShortCode Grid
**********************************************************************************/
.chatbot-shortcode-template-02 {
font-family: "quicksandregular", "Helvetica Neue", Helvetica, Aria;
height: auto;
max-width: 1100px;
margin: 0 auto;
position: relative;
box-sizing: border-box;
border-radius: 5px;
background: #ffffff;
}
.chatbot-shortcode-row {
font-size: 0;
}
.chatbot-shortcode-template-02 .wp-chatbot-container, .chatbot-shortcode-template-02 .chatbot-sidebar {
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
font-size: 14px;
}
.chatbot-shortcode-template-02 .chatbot-sidebar {
width: 30%;
padding: 15px;
font-size: 14px;
line-height: 1.8;
position: relative;
}
@keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.chatbot-shortcode-template-02 .wp-chatbot-container {
width: 70%;
background-color: #000;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB) !important;
background-size: 400% 400% !important;
animation: Gradient 15s ease infinite !important;
}
.chatbot-shortcode-template-02 .chatbot-left-sidebar {
background-color: #23A6D5;
}
.chatbot-left-sidebar-inner {
overflow-y: auto;
max-height: 400px;
}
/***************************************************************************************************
2. wp Chat bot Message container
****************************************************************************************************/
.wp-chatbot-header {
background: rgba(109, 203, 227, 0.50);
height: auto;
}
.wp-chatbot-header h3 {
color: #ffffff;
font-size: 18px !important;
font-weight: 700;
line-height: 1.2;
letter-spacing: 1px;
}
.wp-chatbot-comment-loader {
margin: 0 auto;
display: block;
}
ul.wp-chatbot-messages-container {
padding: 0;
margin: 0;
overflow: visible;
}
ul.wp-chatbot-messages-container > li {
font-size: 14px;
margin: 0 30px 10px 30px;
}
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(255, 255, 255, 0.70);
position: relative;
box-sizing: border-box;
border-radius: 2px;
color: #000;
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(255, 255, 255, 0.70);
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(255, 255, 255, 0.70);
border-bottom: 7px solid transparent;
}
ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
text-align: right;
}
/********* Footer ****************/
.wp-chatbot-footer {
border-radius: 5px;
}
/******Message Editor ***********/
.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: #FFF !important;
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;
font-size: 0 !important;
}
.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;
}
.wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
display: none;
}
/***********Widget*************/
.wp-chatbot-widget {
margin-bottom: 30px;
margin-right: 10px;
}
.wp-chatbot-widget:last-child {
margin-bottom: 0;
}
.wp-chatbot-widget h3.wp-chatbot-widget-title {
color: #ffffff;
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 {
position: relative;
padding-left: 35px;
}
.chatbot-left-sidebar > .wp-chatbot-widget:first-child {
margin-bottom: 0;
position: absolute;
top: -18px;
}
h3.chatbot-agent-name {
color: #ffffff;
margin: 0 !important;
font-size: 14px !important;
font-weight: 700;
opacity: 0;
left: 0;
background-color: #23A6D5;
padding: 6px 8px;
transition: all 1s;
}
.chatbot-left-sidebar > .wp-chatbot-widget:hover h3.chatbot-agent-name {
opacity: 1;
left: 100%;
}
.chatbot-agent img {
box-shadow: none !important;
width: 30px;
height: auto;
position: absolute;
left: 0;
cursor: pointer;
border: 2px solid #23A6D5;
border-radius: 50% !important;
}
.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-container div p {
text-align: left !important;
color: #ffffff !important;
}
.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-container input[type="number"] {
width: 40px;
}
.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;
}
/*********************************/
.wp-chatbot-msg .wp-chatbot-products-area ul li {
width: 31%;
margin-right: 2%;
}
.wp-chatbot-msg .wp-chatbot-products-area ul li:nth-child(2n+2) {
margin-left: 0;
}
.wp-chatbot-msg .wp-chatbot-products-area ul li:nth-child(3n+3) {
margin-right: 0;
}
/*************************
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(255, 255, 255, 0.70);
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(255, 255, 255, 0.70);
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) {
.chatbot-shortcode-template-02 {
display: block;
}
.chatbot-shortcode-template-02 .chatbot-shortcode-row {
display: block;
}
.chatbot-shortcode-template-02 .wp-chatbot-container {
display: block !important;
width: 100% !important;
margin-bottom: 30px;
}
}
ما بقاش الذكاء الاصطناعي مجرد خيال علمي أو تطور مستنيينه في المستقبل… لأ، ده بقى واقع عايشينه كل يوم، وبيأثر بشكل مباشر على شغلنا، ومهاراتنا، وحتى على الوظايف نفسها. في الفيديو ده، هنتكلم عن إزاي الذكاء الاصطناعي قلب موازين سوق العمل، إيه المهن اللي بدأت تختفي، وإيه اللي طلع جديد، وإزاي نجهز نفسنا للمستقبل اللي بدأ خلاص.