.sai-chat-btn {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
background-color: blue;
color: #fff;
font-size: 22px;
border: none;
position: fixed;
bottom: 20px;
right: 30px;;
cursor: pointer;
z-index: 1000;
}
.sai-chat-btn .sai-close {
display: none
}
.sai-chat-btn i {
transition: all 0.9s ease
}
#check:checked ~ .sai-chat-btn i {
display: block;
pointer-events: auto;
transform: rotate(180deg)
}
#check:checked ~ .sai-chat-btn .sai-comment {
display: none;
}
.sai-chat-btn i {
font-size: 22px;
color: #fff !important
}
input[type=”checkbox”] + label.sai-chat-btn,
input[type=”radio”] + label.sai-chat-btn {
display: flex;
}
input.sai-form-control {
margin-bottom: 0em;
}
#sai-wrapper {
position: fixed;
background-color: #fff;
}
.sai-wrapper {
position: fixed;
right: 20px;
bottom: 80px;
width: 350px;
height: 78%;
background-color: #fff;
border: 1px solid #f03551;
border-radius: 15px 15px 0px 0px;
visibility: hidden;
overflow: hidden;
transition: all 0.0s;
z-index: 3000;
}
.sai-form-container {
position: relative;
overflow: auto !important;
height: 60%;
}
#check:checked ~ .sai-wrapper {
visibility: visible;
}
.sai-header {
background-color: blue;
border-radius: 15px 15px 0px 0px;
color: #fff;
height: 20%;
}
.sai-footer {
background-color: #e1e1e1;
color: #000000;
height: 20%;
padding-top: .5rem;
}
.sai-chat-form {
padding: 15px;
height: 100%;
}
.sai-form-control:focus,
.btn:focus {
box-shadow: none
}
#check {
display: none !important
}
.sai-chat-layout .sai-chat-box-wrapper {
padding: 1.5rem;
}
.sai-load-messages {
display: block;
width: 90%;
}
.sai-chat-wrapper {
width: 100%;
}
.sai-chat-box-wrapper {
display: flex;
clear: both;
padding: .75rem;
}
.sai-chat-box-wrapper .sai-chat-box {
box-shadow: 0 0 0 transparent;
position: relative;
opacity: 1;
background: #e0f3ff;
border: 0;
padding: .75rem 1.5rem;
border-radius: 30px;
border-top-left-radius: 30px;
border-top-left-radius: .25rem;
max-width: 100%;
min-width: 85%;
text-align: left;
}
.sai-sidebar-message {
padding: 10px 14px;
background-color: #ffffff;
border-radius: 10px;
margin-bottom: 10px;
transition: background-color 0.3s ease;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
}
.sai-chat-box-wrapper.sai-chat-box-wrapper-right .sai-chat-box {
border-radius: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
border-top-right-radius: .25rem;
margin-left: auto;
}
.sai-dropdown-item.active, .sai-dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #3f6ad8;
}
.sai-typing .sai-dot {
animation: mercuryTypingAnimation 1.8s infinite ease-in-out;
background-color: #495057;
border-radius: 50%;
height: 7px;
margin-right: 4px;
vertical-align: middle;
width: 7px;
display: inline-block;
}
.sai-typing .sai-dot:nth-child(1) {
animation-delay: 100ms;
}
.sai-typing .sai-dot:nth-child(2) {
animation-delay: 200ms;
}
.sai-typing .sai-dot:nth-child(3) {
animation-delay: 300ms;
}
.sai-typing .sai-dot:last-child {
margin-right: 0;
}
@keyframes mercuryTypingAnimation {
0% {
transform: translateY(0px);
background-color: #6CAD96;
}
28% {
transform: translateY(-7px);
background-color: #9ECAB9;
}
44% {
transform: translateY(0px);
background-color: #B5D9CB;
}
}
.sai-blinking-cursor {
margin-left: 5px;
background-color: #495057;
animation: blink 1s infinite;
}
.sai-after_modal_appended {
position: relative;
}
.sai-block {
width: 100%;
height: 200px;
}
.sai-assistant-box:hover, .sai-assistant-box:focus {
transform: scale(1.05);
z-index: 100;
}
.sai-d-flex {
display: flex !important;
}
.sai-flex-column {
flex-direction: column !important;
}
.sai-overflow-auto {
overflow: auto !important;
}
.sai-row {
display: flex;
flex-wrap: wrap;
margin-top: 0;
margin-right: calc(-0.75rem);
margin-left: calc(-0.75rem);
}
.sai-col-sm-12 {
flex: 0 0 auto;
width: 100%;
}
.sai-text-center {
text-align: center !important;
}
.sai-pe-1 {
padding-right: 0.25rem !important;
}
.sai-p-1 {
padding: 0.25rem !important;
}
.sai-p-2 {
padding: 0.5rem !important;
}
.sai-mb-1 {
margin-bottom: 0.25rem !important;
}
.sai-mb-2 {
margin-bottom: 0.5rem !important;
}
.sai-mb-3 {
margin-bottom: 1rem !important;
}
.sai-custom-chat-header {
border-color: #000000;
border-style: dotted;
border-radius: 25px;
background: #ffffff;
padding: 0;
text-align: center;
clear: both;
font-style: italic;
}
.sai-align-items-end {
align-items: flex-end !important;
}
.sai-form-control {
display: block;
width: 92%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #ffffff;
background-clip: padding-box;
border: 1px solid #ced4da;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.sai-form-select {
–bs-form-select-bg-img: url(“data:image/svg+xml,%3csvg xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 16 16’%3e%3cpath fill=’none’ stroke=’%23343a40′ stroke-linecap=’round’ stroke-linejoin=’round’ stroke-width=’2′ d=’m2 5 6 6 6-6’/%3e%3c/svg%3e”);
display: block;
width: 100%;
padding: .375rem 2.25rem .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
background-image: url(“data:image/svg+xml,%3csvg xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 16 16’%3e%3cpath fill=’none’ stroke=’%23343a40′ stroke-linecap=’round’ stroke-linejoin=’round’ stroke-width=’2′ d=’m2 5 6 6 6-6’/%3e%3c/svg%3e”),var(–bs-form-select-bg-icon,none);
background-repeat: no-repeat;
background-position: right .75rem center;
background-size: 16px 12px;
border: 1px solid #dee2e6;
border-radius: var(–bs-border-radius);
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.sai-form-check {
display: block;
min-height: 1.5rem;
padding-left: 1.5em;
margin-bottom: .125rem;
}
.sai-form-check .sai-form-check-input {
float: left;
margin-left: -1.5em;
}
.sai-form-check-input {
–bs-form-check-bg: #fff;
width: 1em;
height: 1em;
margin-top: .25em;
vertical-align: top;
background-color: #fff;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: 1px solid #dee2e6;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-print-color-adjust: exact;
color-adjust: exact;
print-color-adjust: exact;
}
.sai-form-check-input:checked[type=”radio”] {
–bs-form-check-bg-image: url(“data:image/svg+xml,%3csvg xmlns=’http://www.w3.org/2000/svg’ viewBox=’-4 -4 8 8’%3e%3ccircle r=’2′ fill=’%23fff’/%3e%3c/svg%3e”);
}
.sai-form-check-input:checked {
background-color: #0d6efd;
border-color: #0d6efd;
}
.sai-form-check-input[type=”radio”] {
border-radius: 50%;
}
.sai-input-group {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: 100%;
}
.sai-input-group > .sai-form-control,
.sai-input-group > .sai-form-select,
.sai-input-group > .sai-form-floating {
position: relative;
flex: 1 1 auto;
width: 1%;
min-width: 0;
}
.sai-input-group > .sai-form-control:focus,
.sai-input-group > .sai-form-select:focus,
.sai-input-group > .sai-form-floating:focus-within {
z-index: 5;
}
.sai-input-group-text {
display: flex;
align-items: center;
padding: 0.375rem 0.75rem;
font: 400 1rem/1.5 sans-serif;
color: #333;
text-align: center;
white-space: nowrap;
background-color: #f8f9fa;
border: 1px solid #ced4da;
border-radius: 0.25rem;
}
.sai-input-group-text-border-0 {
display: flex;
align-items: center;
padding: 0.375rem 0.75rem;
font: 400 1rem/1.5 sans-serif;
color: #333;
text-align: center;
white-space: nowrap;
background-color: #f8f9fa;
}
.sai-input-group-text-p-0 {
display: flex;
align-items: center;
font: 400 1rem/1.5 sans-serif;
color: #333;
text-align: center;
white-space: nowrap;
background-color: #f8f9fa;
}
.padding-0 {
padding: 0rem;
}
.sai-rounded-start-5 {
border-bottom-left-radius: 0.75rem !important;
border-top-left-radius: 0.75rem !important;
}
.sai-btn-check {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
.sai-btn-check[disabled] + .sai-btn, .sai-btn-check:disabled + .sai-btn {
pointer-events: none;
filter: none;
opacity: 0.65;
}
.sai-btn {
–bs-btn-padding-x: 0.75rem;
–bs-btn-padding-y: 0.375rem;
–bs-btn-font-family: ‘Helvetica Neue’, sans-serif;
–bs-btn-font-size: 1rem;
–bs-btn-font-weight: 400;
–bs-btn-line-height: 1.5;
–bs-btn-color: #333;
–bs-btn-bg: transparent;
–bs-btn-border-width: 1px;
–bs-btn-border-color: transparent;
–bs-btn-border-radius: 0.25rem;
–bs-btn-hover-border-color: transparent;
–bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
–bs-btn-disabled-opacity: 0.65;
–bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.5);
display: inline-block;
font-family: var(–bs-btn-font-family);
font-size: var(–bs-btn-font-size);
font-weight: var(–bs-btn-font-weight);
line-height: var(–bs-btn-line-height);
color: var(–bs-btn-color);
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border: var(–bs-btn-border-width) solid var(–bs-btn-border-color);
border-radius: var(–bs-btn-border-radius);
background-color: var(–bs-btn-bg);
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.sai-w-100 {
width: 100% !important;
}
.sai-text-white {
–bs-text-opacity: 1;
color: rgba(255, 255, 255, var(–bs-text-opacity)) !important;
}
.sai-lead {
font-size: 1.25rem;
font-weight: 300;
}
.sai-fw-lighter {
font-weight: lighter !important;
}
.sai-justify-content-between {
justify-content: space-between !important;
}
.sai-justify-content-center {
justify-content: center !important
}
.sai-sticky-top {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1020;
}
.sai-h6, .sai-h5, .sai-h4, .sai-h3, .sai-h2, .sai-h1 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
color: inherit;
}
.sai-h1 {
font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
.sai-h1 {
font-size: 2.5rem;
}
}
h2, .sai-h2 {
font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
.sai-h2 {
font-size: 2rem;
}
}
.sai-h3 {
font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
.sai-h3 {
font-size: 1.75rem;
}
}
.sai-h4 {
font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
.sai-h4 {
font-size: 1.5rem;
}
}
.sai-h5 {
font-size: 1.25rem;
}
.sai-h6 {
font-size: 1rem;
}
.sai-dropdown {
display: inline-block;
}
.sai-dropdown-toggle {
color: #fff;
padding: 10px;
border: none;
cursor: pointer;
}
.sai-dropdown-menu {
display: none;
position: absolute;
background-color: #fff;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
border: 1px solid #ced4da;
border-radius: 0.25rem;
right: 0;
}
.sai-dropdown-menu a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
.sai-dropdown-menu a:hover {
background-color: #f8f9fa;
}
.show {
display: block;
}
.sai-modal-overlay {
display: none;
position: relative;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 1020
}
.sai-modal {
background-color: #fff;
padding: 0px 0px 20px 0px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
max-width: 600px;
width: 100%;
}
.sai-modal-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
padding: 1rem 0rem;
border-top-left-radius: calc(0.3rem – (1px));
border-top-right-radius: calc(0.3rem – (1px));
}
.sai-modal-header .sai-btn-close {
padding: 0.25rem 0.25rem;
margin: -0.125rem -0.125rem -0.125rem auto;
}
.sai-close {
cursor: pointer;
font-size: 20px;
}
.sai-modal-content {
padding: 20px;
}
.sai-btn-close {
box-sizing: content-box;
width: 1em;
height: 1em;
padding: 0.25em 0.25em;
color: #000;
background: transparent url(“data:image/svg+xml,%3csvg xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 16 16′ fill=’%23000’%3e%3cpath d=’M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z’/%3e%3c/svg%3e”) center/1em auto no-repeat;
border: 0;
border-radius: 0.375rem;
opacity: 0.5;
}
.sai-btn-close:hover {
color: #000;
text-decoration: none;
opacity: 0.75;
}
.sai-btn-close:focus {
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
opacity: 1;
}
.sai-btn-close:disabled,
.sai-btn-close.disabled {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
opacity: 0.25;
}
.sai-float-end {
float: right !important;
}
.sai-text-dark {
color: rgba(33, 37, 41, 1) !important;
}
.sai-rounded-circle {
border-radius: 50% !important;
}
.sai-lead {
font-size: 1.25rem;
font-weight: 300;
}
.sai-fs-4 {
font-size: 1.2rem !important;
}
.sai-fs-5 {
font-size: 1rem !important;
}
.sai-fs-6 {
font-size: .8rem !important;
}
.sai-fw-lighter {
font-weight: lighter !important;
}
.sai-justify-content-center {
justify-content: center !important;
}
.sai-border-bottom {
border-top: 1px solid black;
}
.hidden-div {
display: none;
}
.hidden-div p{
margin-bottom: 0px;
}
.toggle-checkbox:checked ~ .hidden-div {
display: block;
width: 50%;
background-color: #fff;
border: 1px solid #f03551;
border-radius: 5px 5px 5px 5px;
padding: 5px;
overflow: hidden;
transition: all 0.0s;
z-index: 3000;
}
.custom-file-input {
position: relative;
display: inline-block;
cursor: pointer;
width: 100%;
padding: 5px;
border-radius: 5px 5px 5px 5px;
}
.custom-file-input:hover {
background-color: #d6d6d6;
}
.hidden-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.sai-dropup {
/*display: inline-block;*/
}
.sai-dropup-toggle {
color: #fff;
border: none;
cursor: pointer;
}
.sai-dropup-menu {
text-align: left;
display: none;
position: absolute;
bottom: 100%;
left: 0;
width: 150px;
background-color: #fff;
border: 1px solid #f03551;
border-radius: 5px 5px 5px 5px;
padding: 5px;
margin-bottom: 3px;
overflow: hidden;
transition: all 0.0s;
z-index: 4000;
}
.sai-dropup-menu a {
display: block;
text-decoration: none;
color: #333;
}
.sai-dropup-menu a:hover {
background-color: #f8f9fa;
}
.show {
display: block;
}
.cursor-pointer {
cursor: pointer;
}
.cursor-pointer:hover {
transform: scale(1.25);
}
.sai-alert {
padding: 8px 15px;
border-radius: 5px;
font-size: 14px;
}
.sai-alert-success {
background-color: rgba(46, 202, 139, 0.9);
color: #ffffff;
border-color: #2eca8b;
}
.sai-alert-info {
background-color: rgba(23, 162, 184, 0.9);
color: #ffffff;
border-color: #17a2b8;
}
.sai-alert-warning {
background-color: rgba(241, 116, 37, 0.9);
color: #ffffff;
border-color: #f17425;
}
.sai-alert-danger {
background-color: rgba(228, 63, 82, 0.9);
color: #ffffff;
border-color: #e43f52;
}
.sai-alert-light {
background-color: white;
color: #3c4858;
border-color: #e9ecef;
}
.sai-alert-dark {
background-color: rgba(60, 72, 88, 0.9);
color: #ffffff;
border-color: #3c4858;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.chat-icon-pulsing {
animation: pulse 2s infinite alternate;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
.chat-icon-bounce {
animation: bounce 2s infinite;
}
@keyframes speech-bubble {
0% { transform: translateY(0); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0); }
}
.chat-icon-speech {
animation: speech-bubble 1.5s infinite;
}
@keyframes wave {
0% { transform: rotate(0deg); }
25% { transform: rotate(20deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-20deg); }
100% { transform: rotate(0deg); }
}
.chat-icon-wave {
animation: wave 2s infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.chat-icon-rotate {
animation: rotate 4s linear infinite;
}
@keyframes mascot-animation {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
.chat-icon-mascot {
animation: mascot-animation 1s infinite;
}
@keyframes fade {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
.chat-icon-fade {
animation: fade 2s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
.chat-icon-float {
animation: float 3s ease-in-out infinite;
}
@keyframes glow {
0% { box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); }
50% { box-shadow: 0 0 20px rgba(0, 0, 255, 0.8); }
100% { box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); }
}
.chat-icon-glow {
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes pop-in-out {
0% { transform: scale(0); }
50% { transform: scale(1.2); }
100% { transform: scale(0); }
}
.chat-icon-pop-in-out {
animation: pop-in-out 2s ease-out infinite;
}
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
100% { transform: translateX(0); }
}
.chat-icon-shake {
animation: shake 1s ease-in-out infinite;
}
@keyframes sparkle {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
.chat-icon-sparkle {
animation: sparkle 1s ease-in-out infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(0.5);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
.chat-icon-pulse-ring {
animation: pulse-ring 1s ease-in-out infinite;
}
.chat-icon-position-left {
left: 30px;
}
.chat-icon-position-center {
left: 50%;
transform: translateX(-50%);
}
.chat-icon-position-right {
right: 30px;
}
p{
color: inherit;
}
