#screenreadertrick {
position: absolute !important; /* Outside the DOM flow */
height: 1px; width: 1px; /* Nearly collapsed */
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}
/* old opener */
body {
font-family: 'Roboto', sans-serif;
}
.chatbot button:focus {
outline: none;
}
.chat-btn {
position: fixed;
bottom: /*2rem*/40px;
right: /*2rem*/40px;
z-index: -1;
text-decoration: none;
display: -moz-flex;
display: -o-flex;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 70px;
height: 70px;
background: linear-gradient(135deg, rgb(42, 39, 218), rgb(0, 204, 255)) !important;
color: #ffffff;
border-radius: 50%;
font-size: 30px;
will-change: transform;
transition: all 0.2s ease-in-out 0s;
box-shadow: rgba(0, 77, 255, 0.5) 0px 4px 24px;
background: url(https://botcompany.de/images/1102979) !important;
background-size: 100% !important;
box-shadow: none;
border-radius: 0;
}
.chat-btn div {
display: inline;
transition: transform 0.8s;
visibility: visible;
opacity: 1;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotateZ(0);
}
.chat-btn div.hide {
visibility: hidden;
opacity: 0;
transform: translate(-50%, -50%) rotateZ(180deg);
transition: transform 0.8s;
}
.chat-btn .fa-comment-dots {
display: none;
}
.chat-btn .fa-pencil-alt {
display: none;
}
.chat-btn:hover i.fas.fa-comment-dots {
display: none;
}
.chat-btn:focus i.fas.fa-comment-dots {
color: #fff;
}
.chat-btn:hover i.fas.fa-pencil-alt {
display: block;
}
/*.chat-btn:hover {
transform: scale(1.2);
background: #fff !important;
color: rgb(0, 125, 252);
}*/
/*Chatbot Starts*/
.chat-icon button {
font-size: 32px;
line-height: 55px;
-webkit-transition: all .7s ease-out;
-moz-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
color: #fff;
background: transparent;
border: none;
/*width: 50px;*/
height: 50px;
line-height: 50px;
border-radius: 50px;
}
/* country selector */
.chat-bottom select {
float: left;
margin-left: 10px;
margin-top: 10px;
}
#chat_countrycode {
display: none;
}
#chat_countrycode.visible {
display: inline;
}
.chat-bottom a button {
color: #737373;
transition: 0.4s all ease-in;
cursor: pointer;
font-size: 18px;
}
.chat-bottom a button:hover {
color: #f16e00;
}
button.fa-paper-plane {
border: none;
padding: 0;
background: none;
height: 30px;
}
/* get rid of this? */
.chatbot {
font-family: 'Roboto', sans-serif;
}
.chatbot .chat-box {
bottom: 0px;
position: fixed;
margin: 1em;
right: 20px;
z-index: 10998;
max-height: calc(100% - 47px);
overflow: hidden;
box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22);
border-radius: 16px;
}
.chat-icon {
/* latest fixes */
/*display: block;*/
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
text-align: center;
color: #f0f0f0;
margin: 25px auto 0;
box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
cursor: pointer;
-webkit-transition: all .1s ease-out;
transition: all .1s ease-out;
position: relative;
z-index: 10998;
overflow: hidden;
background: #42a5f5;
}
.chat-icon i {
font-size: 2em;
line-height: 55px;
-webkit-transition: all .2s ease-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
/*Chatbox*/
.chat {
/*position: fixed;*/
right: 85px;
bottom: 20px;
width: 400px;
/*font-size: 14px;*/
line-height: 25px;
font-weight: 500;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
opacity: 0;
display: none; /* XXX */
box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22);
border-radius: 10px;
-webkit-transition: all .2s ease-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.chat_fullscreen {
position: fixed;
right: 0px;
bottom: 0px;
top: 0px;
}
.chat, .chat_header {
font-family: 'Roboto', sans-serif;
}
.chat_header {
text-align: center;
font-weight: 500;
color: #fff;
/*height: 55px;*/
background: #42a5f5;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
display: flex;
align-items: center;
background: linear-gradient(135deg, rgb(42, 39, 218) 0%, rgb(0, 204, 255) 100%);
padding: 12px;
}
.chat_header {
position: relative;
}
.chat_header img.header-user {
width: 50px;
height: 50px;
border-radius: 50px;
margin-right: 10px;
display:none;
}
.chat_header .four-people {
width: 52px;
height: 52px;
overflow: hidden;
margin-right: 15px;
}
.chat_header .title-img {
border-radius: 50px;
width: 52px;
height: 52px;
padding: 0px;
background: #fff;
}
.chat_header .four-people .users {
width: 28px;
height: 28px;
border-radius: 50px;
float: left;
}
.chat_header .four-people .users.user-1 {
background: url("https://gaippbots.com/bot/uploaded-image/146356");
background-size: cover;
}
.chat_header .four-people .users.user-2 {
background: url("https://gaippbots.com/bot/uploaded-image/146565");
background-size: cover;
}
.chat_header .four-people .users.user-3 {
background: url("https://gaippbots.com/bot/uploaded-image/146566");
background-size: cover;
}
.chat_header .four-people .users.user-4 {
background: url("https://gaippbots.com/bot/uploaded-image/146567");
background-size: cover;
}
.chat_header .four-people .users:nth-child(2n) {
margin-left: -5px;
}
.chat_header .four-people .users:nth-child(n+3) {
margin-top: -4px;
}
.chat_header h2 {
font-size: 24px;
margin: 0;
color: #ffffff;
font-weight: normal;
}
.chat_header button {
background: transparent;
border: none;
color: #fff;
padding: 0;
margin: 0;
font-size: 19px !important;
width: 40px;
height: 40px;
border-radius: 50px;
display: block;
line-height: 40px;
cursor: pointer;
transition: 0.3s all ease-in;
}
.chat_header button:hover {
background: rgba(0, 36, 92, 0.16);
}
.chat_header button.fas.fa-ellipsis-v {
}
.chat_header .buttons {
/*position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);*/
margin-left: auto;
background-color: transparent !important;
display:flex;
}
.header-bottom {
padding: 15px;
background: linear-gradient(135deg, rgb(42, 39, 218) 0%, rgb(0, 204, 255) 100%);
color: #fff;
position: relative;
clear: both;
}
.header-bottom::before {
content: "";
display: block;
width: 12px;
height: 12px;
position: absolute;
top: calc(50% - 7px);
background: rgb(117 218 95);
border-radius: 50%;
left: 25px;
}
.header-bottom::after {
content: "";
position: absolute;
width: 100%;
bottom: -8px;
left: 0px;
border-image-source: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNzIgMTUiPgogIDxwYXRoIGQ9Ik0zNDkuOCAxLjRDMzM0LjUuNCAzMTguNSAwIDMwMiAwaC0yLjVjLTkuMSAwLTE4LjQuMS0yNy44LjQtMzQuNSAxLTY4LjMgMy0xMDIuMyA0LjctMTQgLjUtMjggMS4yLTQxLjUgMS42Qzg0IDcuNyA0MS42IDUuMyAwIDIuMnY4LjRjNDEuNiAzIDg0IDUuMyAxMjguMiA0LjEgMTMuNS0uNCAyNy41LTEuMSA0MS41LTEuNiAzMy45LTEuNyA2Ny44LTMuNiAxMDIuMy00LjcgOS40LS4zIDE4LjctLjQgMjcuOC0uNGgyLjVjMTYuNSAwIDMyLjQuNCA0Ny44IDEuNCA4LjQuMyAxNS42LjcgMjIgMS4yVjIuMmMtNi41LS41LTEzLjgtLjUtMjIuMy0uOHoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==);
border-image-slice: 0 0 100%;
border-image-repeat: stretch;
border-width: 0px 0px 15px;
border-bottom-style: solid;
}
.header-bottom .online {
color: #fff;
padding-left: 35px;
font-size: 15px;
font-weight: normal;
}
.chat_header .span {
float: right;
}
.chat.is-visible {
display: block; /* XXX */
opacity: 1;
-webkit-animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
}
.is-hide {
opacity: 0
}
.chat_field {
position: relative;
/*margin: 5px 0 5px 0;*/
width: 65%;
font-size: 17px;
line-height: 30px;
font-weight: 500;
color: #4b4b4b;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
border: none;
outline: none;
display: inline-block;
}
.chat_field:focus {
outline: none;
border: none;
}
.chat-bottom #chat_countrycode {
background: #f0f2f7;
border: none;
padding: 3px 5px;
font-size: 15px;
margin: 5px 15px;
}
.chat-bottom #chat_countrycode:focus {
border: none;
outline: none;
}
.chat_field.chat_message {
height: 30px;
resize: none;
font-size: 17px;
line-height: 20px;
font-weight: 400;
font-family: inherit;
padding-left: 15px;
width: 100%;
}
.chat_field.chat_message:hover {
outline: none;
border: none;
}
.chat-bottom {
width: 100%;
display: inline-block;
background: #fff;
/*border-top: 1px solid #eee;*/
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.chat-bottom a {
display: inline-block;
text-align: center;
}
.chat-bottom .camera-icon {
float: left;
background: rgba(0, 0, 0, 0);
}
.chat-bottom .send-icon {
float: right;
background: rgba(0, 0, 0, 0);
}
.chat-bottom a {
width: 35px;
height: 35px;
box-shadow: none;
margin: 5px;
}
.chat-bottom a i {
font-size: 1.6em;
line-height: 35px;
color: #bbb;
}
.chat-bottom a i:hover {
color: #42a5f5;
}
.chat-bottom a i.fa-arrow-circle-left {
font-size: 25px;
color: #108cf1;
}
.chat_converse:focus, button.fas:focus, .chat_message:focus {
/*outline: .2rem solid #f16e00;*/
outline: none;
}
.chat-icon button:focus {
outline: none !important;
box-shadow: 0 0 3pt 2pt #f16e00;
}
.chat-icon {
padding: 3px;
}
.chat_converse {
position: relative;
background: #fff;
padding: 6px 0 0px 0;
height: 350px;
max-height: 350px;
min-height: 150px;
font-size: 17px; /* chat font size */
line-height: 25px;
overflow-y: auto;
width: 100%;
float: right;
padding-bottom: 20px;
}
.chat_converse a {
color: #0071b2;
text-decoration: underline;
}
.chat .chat_converse .chat_msg_item {
position: relative;
margin: 8px 0 15px 0;
padding: 8px 15px;
max-width: 75%;
display: block;
word-wrap: break-word;
border-radius: 7px;
-webkit-animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1);
animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1);
clear: both;
z-index: 9;
font-weight: normal;
font-size: 17px;
line-height: 25px;
}
.status {
margin: 45px -50px 0 0;
float: right;
font-size: 11px;
opacity: 0.3;
}
.status2 {
margin: -10px 20px 0 0;
float: right;
display: block;
font-size: 11px;
opacity: 0.3;
clear: both;
}
.chat .chat_converse .chat_msg_item .chat_avatar {
position: absolute;
top: 0;
}
.chat .chat_converse .chat_msg_item.chat_msg_item_admin .chat_avatar {
left: -52px;
background: rgb(240, 242, 247);
}
.chat .chat_converse .chat_msg_item .chat_avatar,
.chat_avatar img {
width: 40px;
height: 40px;
text-align: center;
border-radius: 50%;
}
.chat .chat_converse .chat_msg_item.chat_msg_item_admin {
margin-left: 60px;
float: left;
background: rgb(240, 242, 247);
color: #000;
}
.chat .chat_converse .chat_msg_item.chat_msg_item_user {
margin-right: 20px;
float: right;
background: linear-gradient(135deg, rgb(42, 39, 218), rgb(0, 204, 255));
color: #eceff1;
}
.chat .chat_converse .chat_msg_item.chat_msg_item_admin:before {
content: '';
position: absolute;
top: 15px;
left: -12px;
z-index: 10998;
border: 6px solid transparent;
border-right-color: rgba(255, 255, 255, .4);
}
#otherSideTyping {
background-color: #fff;
margin-left: 0;
display: flex;
width: 100%;
align-items: center;
padding-left: 30px;
}
#otherSideTyping h4 {
margin-right: 10px;
margin-left: 15px;
}
#otherSideTyping .dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
background: #303131;
animation: wave 1.3s linear infinite;
}
#otherSideTyping .dot:nth-child(2) {
animation-delay: -1.1s;
}
#otherSideTyping .dot:nth-child(3) {
animation-delay: -0.9s;
}
.chat_username {
clear: both;
}
.chat_username p {
position: relative;
float: right;
margin: 0px 20px -5px 0px;
font-size: 12px;
color: #ccc;
}
.chat_botname {
clear: both;
}
.chat_botname p {
position: relative;
float: left;
margin: 0px 0px -6px 60px;
font-size: 12px;
color: #42a5f5;
}
.chat-btn, .chat_header, .chat .chat_converse .chat_msg_item.chat_msg_item_user, .chat_header .fa-redo {
background-color: #db4064;
color: #ffffff;
}
/* limit embedded videos to chat width */
.chat_converse iframe {
max-width: 100% !important;
}
@keyframes wave {
0%,
60%,
100% {
transform: initial;
}
30% {
transform: translateY(-15px);
}
}
/*Chatbox scrollbar*/
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
border-radius: 0;
}
::-webkit-scrollbar-thumb {
margin: 2px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.2);
}
/*Element state*/
.is-active {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.is-float {
box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
}
/*Animation*/
@-webkit-keyframes zoomIn {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0.0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes zoomIn {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0.0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes load {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0.0;
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@keyframes load {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0.0;
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@media only screen and (min-width: 360px) and (max-width: 399px) {
.chat {
width: 275px;
}
.chat_field {
width: 50%;
}
}
@media only screen and (min-width: 400px) and (max-width: 1023px) {
.chat_field {
width: 50%;/*65%;*/
}
}
@media only screen and (min-width: 300px) and (max-width: 767px) {
.chatbot .chat-box {
bottom: 15px;
right: 10px;
}
.chat .chat_converse .chat_msg_item {
font-size: 15px;
line-height: 20px;
}
.chat-btn {
right: 10px;
bottom: 50px;
}
.chat {
width: 300px;
bottom: 50px;
}
}
/* safari fixes */
@media (min-width: 375px) and (max-width: 812px) {
.chat_converse {
height: 280px;
max-height: 280px;
}
.chat-icon {
width: 90px!important;
height: 90px!important;
}
.chat-icon button {
margin-top: 17px;
margin-left: -47px;
font-size: 48px!important;
}
/* Shift comment icon on the left a bit */
/*.chat-icon button.fa-comment-dots {
margin: 0 0 0 -5px !important;
}*/
}
@media (min-width: 768px) and (max-width: 1024px) {
.chat-icon {
width: 90px!important;
height: 90px!important;
}
.chat-icon button {
margin-top: 17px;
margin-left: -47px;
font-size: 48px!important;
}
}
.footer-bottom ul {
list-style: none;
padding: 0px 15px 10px;
margin: 0;
display: flex;
align-items: center;
}
.footer-bottom ul li {
display: inline;
}
.footer-bottom ul li a {
font-size: 14px;
width: auto;
height: auto;
}
.footer-bottom ul li.powered-by {
font-size: 12px;
color: #999999;
}
.footer-bottom ul li.powered-by img {
width: 35px;
margin: -6px 0px 0px 4px;
}
.footer-bottom ul li.powered-by a {
margin: 0;
}
.footer-bottom ul li a.play-icon i {
color: #118bf1;
}
/* Make the icon link position relative*/
.chat-icon {
position: relative;
}
/* Make the icon link position absolute and position it in center */
.chat-icon button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0 !important;
}
/* smaller heading on mobile */
@media (max-width: 614px) {
.chat_header h2 {
font-size: 16px;
}
}
/* Header Dropdown */
.head-dropdown {
display: inline-block;
position: relative;
}
.head-button {
border-radius: 50px;
cursor: pointer;
width: 40px;
height: 40px;
line-height: 40px;
transition: 0.3s all ease-in;
font-size: 19px;
display: flex;
align-items: center;
justify-content: center;
}
.head-button:hover {
background-color: rgba(0, 36, 92, 0.16);
}
.head-input {
display: none;
}
.head-menu {
position: absolute;
top: 100%;
right: -33px;
border-radius: 10px;
padding: 10px;
/* margin: 5px 0px 0px -140px; */
box-shadow: rgb(198 198 198 / 50%) 0px 4px 24px;
background-color: #ffffff;
list-style-type: none;
z-index: 99999;
}
.head-input + .head-menu {
display: none;
}
.head-input:checked + .head-menu {
display: block;
}
.head-menu li {
padding: 8px 20px;
cursor: pointer;
white-space: nowrap;
color: #000;
font-weight: normal;
text-align: left;
}
.head-menu li:hover {
background-color: #f6f6f6;
}
.head-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.head-menu li.divider{
padding: 0;
border-bottom: 1px solid #cccccc;
}
.head-menu li i {
margin-right: 10px;
color: #999;
}
.head-menu li i.fa-star {
color: #fbd701;
}
/*Chatbot Questions*/
.bot-questions {
transition: transform 0.2s ease 0s, margin 0.2s ease 0s;
/* background: rgb(240, 242, 247);*/
color: #000;
clear: both;
max-width: 75%;
border-radius: 20px;
margin-left: 60px;
text-align: left;
font-size: 17px;
/* border: 1px solid rgb(235, 238, 240); */
margin-bottom: 20px;
}
.bot-questions .question-title h4 {
font-size: 17px;
font-weight: normal;
color: #000;
padding: 8px 15px;
margin: 0;
background: rgb(240, 242, 247);
font-family: 'Roboto', sans-serif;
border-radius: 8px;
}
.bot-questions .all-options {
background: #fff;
border-radius: 20px;
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: 15px;
}
.bot-questions .all-options .option-single {
font-size: 16px;
font-weight: normal;
display: block;
color: rgb(0, 125, 252);
text-decoration: none;
padding: 5px 15px;
border: 1px solid rgb(0, 125, 252);
margin: 10px 0px;
border-radius: 8px;
}
.bot-questions .all-options .option-single:hover {
text-decoration: underline;
background: #eef9ff
}
/* Single questions */
.single-choice {
background: transparent !important;
text-align: right;
}
.single-choice .chatbot-choice-button {
font-size: 15px;
padding: 8px 16px;
cursor: pointer;
border: 1px solid rgb(0, 125, 252);
border-radius: 20px;
margin: 3px;
background: transparent;
color: rgb(0, 125, 252);
}
.single-choice .chatbot-choice-button:hover {
text-decoration: underline;
}
.chat-box .btn-ok {
background: #1677ec;
border: none;
color: #fff;
padding: 5px 15px;
border-radius: 20px;
margin: 10px 0px;
}
.chat-box .btn-ok:focus {
outline: none;
}
/* Bot Reload */
.bot-restart {
position: absolute;
right: 10px;
top: 55px;
z-index: 999;
}
.bot-restart button {
width: 30px;
height: 30px;
border: none;
background: #cfefff;
border-radius: 5px;
padding: 0;
color: #0ba5f7;
cursor: pointer;
}
/* hide initially? */
#chat_telephone, .iti { display: none; }
/* Country Flag */
.chatbot .iti #chat_telephone {
border: none;
}
.chatbot .iti #chat_telephone:focus {
border: none;
outline: none;
}
.chatbot .iti__selected-flag {
background-color: transparent !important;
}
.chatbot .iti {
padding: 10px;
z-index: 99999;
}
.chatbot .iti:focus, .chatbot .iti:active {
outline: none;
border: none;
}
.chatbot .iti__flag-container:focus, .iti__selected-flag:focus {
border: none;
outline: none;
}
/*Emoji Styles
.emoji-picker__wrapper {
width: 400px;
z-index: 99999;
left: 140px !important;
border: none;
bottom: 40px !important;
}
.emoji-picker__wrapper .emoji-picker.light {
width: 100%;
height: 300px;
border: none;
}
*/
.emoji-picker.light {
width: 400px;
margin: 10px 0px 0px 90px;
border: none;
height: 360px;
max-height: 350px;
background: #fff;
}
.emoji-picker__wrapper {
z-index: 99999;
width: 300px;
right: 0px !important;
left: 0px !important;
}Began life as a copy of #1029713
Travelled to 4 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, vouqrxazstgt
No comments. add comment
| Snippet ID: | #1030643 |
| Snippet name: | style.css for FIA Bot |
| Eternal ID of this version: | #1030643/18 |
| Text MD5: | d537051da8ff7193448a07fa422ed59c |
| Author: | stefan |
| Category: | javax / css |
| Type: | Document |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2021-02-24 04:08:08 |
| Source code size: | 22878 bytes / 1126 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 439 / 452 |
| Version history: | 17 change(s) |
| Referenced in: | [show references] |