/*@import "bootstrap.min.css"; */
@font-face {
font-family: 'SFProDisplay';
src: url('fonts/SFProDisplay-Regular.eot');
src: url('fonts/SFProDisplay-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/SFProDisplay-Regular.woff2') format('woff2'),
url('fonts/SFProDisplay-Regular.woff') format('woff'),
url('fonts/SFProDisplay-Regular.ttf') format('truetype'),
url('fonts/SFProDisplay-Regular.svg#SFProDisplay-Regular') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SFProDisplay';
src: url('fonts/SFProDisplay-Medium.eot');
src: url('fonts/SFProDisplay-Medium.eot?#iefix') format('embedded-opentype'),
url('fonts/SFProDisplay-Medium.woff2') format('woff2'),
url('fonts/SFProDisplay-Medium.woff') format('woff'),
url('fonts/SFProDisplay-Medium.ttf') format('truetype'),
url('fonts/SFProDisplay-Medium.svg#SFProDisplay-Medium') format('svg');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SFProDisplay';
src: url('fonts/SFProDisplay-Bold.eot');
src: url('fonts/SFProDisplay-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/SFProDisplay-Bold.woff2') format('woff2'),
url('fonts/SFProDisplay-Bold.woff') format('woff'),
url('fonts/SFProDisplay-Bold.ttf') format('truetype'),
url('fonts/SFProDisplay-Bold.svg#SFProDisplay-Bold') format('svg');
font-weight: bold;
font-style: normal;
font-display: swap;
}
body {
background-color: #F7F2F3;
font-family: 'SFProDisplay';
}
a.active,
a:focus,
button:focus,
button.active {
outline: none;
}
a {
text-decoration: none;
}
a:focus,
a:hover,
a:active {
outline: 0;
box-shadow: none;
}
a:focus,
a:hover {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
font-family: "Inter", sans-serif;
}
a {
text-decoration: none;
transition: all .5s ease-in-out;
}
a:hover {
text-decoration: none;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
list-style: none;
}
ol {
display: block;
list-style-type: decimal;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
unicode-bidi: isolate;
}
p {
margin: 0;
padding: 0;
}
input:focus,
select:focus,
textarea:focus {
outline: none;
}
img {
border-style: none;
display: inline-block;
max-width: 100%;
height: auto;
}
.wrapper {
overflow: hidden;
}
.element-with-scroll {
overflow-y: scroll;
max-height: 100px;
/* Set a maximum height for the scrollable element */
}
::-webkit-scrollbar {
background: #fff;
width: 6px;
}
::-webkit-scrollbar-thumb {
background: #707070;
border-radius: 1ex;
-webkit-border-radius: 1ex;
box-shadow: 0 1px 2px #000000bf;
-webkit-box-shadow: 0 1px 2px #000000bf;
height: 80px;
}
::-webkit-scrollbar-track {
background-color: #ebebeb;
}
.menu-nav-icon {
display: none;
}
/****** HEADER ******/
.sidebar {
background-color: #fff;
border-right: 1px solid rgba(34, 34, 34, 0.08);
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
position: fixed;
left: 0;
top: 0;
height: 100%;
max-width: 260px;
width: 100%;
z-index: 100;
}
.head-logo {
width: 100%;
padding: 32px;
}
.head-logo a {
display: flex;
align-items: center;
justify-content: center;
}
.setting {
padding: 32px 0;
display: flex;
width: 100%;
flex-direction: column;
gap: 15px;
}
.setting-icon {
border-radius: 500px;
border: 1px solid rgba(34, 34, 34, 0.06);
background: #FFF;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 auto;
}
.dropdown-menu {
border-radius: 8px;
border: 1px solid rgba(34, 34, 34, 0.06);
background: #FFF;
padding: 20px 16px;
margin-bottom: 16px !important;
}
.dropdown-menu li {
margin-bottom: 12px;
}
.dropdown-menu li:first-child {
margin-bottom: 0;
}
.dropdown-menu li:last-child {
margin-bottom: 0;
}
.dropdown-item {
color: #222222;
font-weight: normal;
font-size: 14px;
line-height: 1;
display: flex;
align-items: center;
gap: 10px;
padding: 13px 16px;
}
.dropdown-item:hover {
background-color: transparent;
}
.dropdown-item.active,
.dropdown-item:active {
color: #222222;
text-decoration: none;
background-color: transparent;
}
.dropdown-item span {
width: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.hr {
background: rgba(34, 34, 34, 0.06);
height: 1px;
width: 140px;
margin: 11px auto 0;
}
.dark-switch {
display: block;
}
.light-switch {
display: none;
}
.dropdown-menu .modal-close {
display: none;
}
/*********/
.chat-right {
/* padding-left: 104px; */
/* padding-top: 32px; */
padding-bottom: 80px;
transition: margin-left 0.3s ease;
}
.chat-top {
max-width: 800px;
width: 100%;
margin: 0 auto;
margin-bottom:20px;
}
.chat-date {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-bottom: 6px;
position:relative;
margin-top:-4px;
}
.chat-date::after {
position: absolute;
content: "";
left: 0;
top: 50%;
transform: translate(0, -50%);
left: 0;
background: #222;
width: 100%;
height: 1px;
opacity: 0.05;
}
.chat-date span {
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(34, 34, 34, 0.30);
font-size: 16px;
font-weight: normal;
background-color: #F7F2F3;
padding: 0 32px;
position: relative;
z-index: 10;
}
.chat-customer {
display: flex;
align-items: flex-start;
gap: 24px;
margin-bottom: 50px;
}
.chat-customer .iamage-holder {
max-width: 35px;
width: 100%;
}
.chat-customer .text-box {
flex: 1;
width: 100%;
padding: 6px 0 0 0;
}
.chat-customer .text-box h4 {
color: #222222;
font-size: 18px;
font-weight: bold;
line-height: normal;
margin-bottom: 12px;
}
.chat-customer .text-box p {
font-size: 16px;
font-weight: 500;
line-height: 160%;
color: rgba(34, 34, 34, 0.80);
margin-bottom: 14px;
}
.chat-customer .text-box p:last-child {
margin: 0;
}
.chat-customer .text-box ul {
/*display: flex;*/
/*align-items: center;*/
gap: 16px;
margin-bottom: 18px;
}
.chat-customer .text-box ul li a {
width: 16px;
display: flex;
font-size:20px;
align-items: center;
justify-content: center;
color: #555;
}
.chat-customer .text-box ul li a img{
width: 18px;
height: 18px;
}
.chat-bottom {
padding: 32px 0 32px 104px;
position: fixed;
left: 0;
bottom: 0%;
z-index: 10;
width: 100%;
/* background-color: #F7F2F3; */
}
.chat-customer-reply .text-box h4 {
color: #1877f2;
}
.chat-bottom-inner {
max-width: 800px;
width: 100%;
margin: 0 auto;
}
.chat-bottom-inner form {
display: flex;
align-items: center;
position: relative;
gap: 12px;
}
.chat-bottom-inner form .form-control {
/*border-radius: 12px;*/
border: none;
background: #FFF;
/*padding-left: 40px;*/
color: rgba(34, 34, 34, 1);
font-size: 16px;
font-weight: 500;
height: 57px;
border-radius: 12px;
box-shadow: none;
}
.chat-bottom-inner form .form-control::placeholder {
color: rgba(34, 34, 34, 0.50);
}
.chat-bottom-inner form ul {
display: flex;
align-items: center;
gap: 12px;
}
.send-btn {
/*width: 48px;*/
height: 43px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid rgba(34, 34, 34, 0.10);
background: #1877f2;
}
.stop-btn {
border: 1px solid rgb(22 22 22 / 10%);
height: 43px;
display: flex;
align-items: center;
font-size: 16px;
padding: 0 10px;
border-radius: 8px;
font-weight: 500;
line-height: 160%;
color: rgba(34, 34, 34, 0.80);
}
/******* FEEDBACK MODAL ******/
.modal-dialog {
max-width: 800px;
width: 100%;
}
.modal-content {
border-radius: 12px;
border: 1px solid rgba(34, 34, 34, 0.06);
background: #fff;
}
.modal-body {
padding: 25px;
}
.feedback-form .form-group {
margin-bottom: 24px;
}
.feedback-form label {
color: rgba(34, 34, 34, 0.50);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 1;
margin: 0 0 18px 0;
display: flex;
align-items: center;
gap: 4px;
}
.feedback-form label span {
color: rgba(34, 34, 34, 0.30);
display: flex;
align-items: center;
}
.feedback-form .form-control {
border-radius: 12px;
border: 1px solid rgba(34, 34, 34, 0.06);
background: #FFF;
height: 57px;
padding-left: 32px;
border-radius: 12px;
color: rgba(34, 34, 34, 1);
font-size: 16px;
font-weight: 500;
box-shadow: none;
}
.feedback-form .form-control::placeholder {
color: rgba(34, 34, 34, 0.30);
}
.feedback-form textarea.form-control {
height: 211px;
padding-top: 28px;
}
.sumbit-btn {
border-radius: 12px;
border: 1px solid rgba(34, 34, 34, 0.06);
background: #1877f2;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
width: 100%;
height: 57px;
}
.modal-close {
border-radius: 6px;
border: 1px solid rgba(34, 34, 34, 0.06);
background: #FFF;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
position: absolute;
right: -62px;
top: 0;
height: 44px;
}
/******** NOTE MODAL *******/
.note-modal .modal-body {
padding: 40px;
}
.nots-box {
display: flex;
align-items: flex-start;
gap: 24px;
margin-bottom: 50px;
}
.nots-box .image-holder {
width: 56px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 12px;
}
.nots-box .text-box {
flex: 1;
width: 100%;
}
.nots-box .text-box h4 {
color: #222222;
font-weight: 500;
font-size: 16px;
line-height: normal;
margin-bottom: 16px;
}
.nots-box .text-box p {
color: rgba(34, 34, 34, 0.50);
font-weight: 500;
font-size: 16px;
line-height: 160%;
}
.nots-agree p {
color: rgba(34, 34, 34, 0.50);
font-weight: 500;
font-size: 16px;
line-height: normal;
text-align: center;
margin-top: 22px;
}
.nots-agree p a {
color: #1877f2;
text-decoration: underline;
}
/******* DARK MOOD ******/
.dark-mood,
.dark-mood .chat-bottom {
background-color: #161616;
}
.dark-mood .creatorframes-vid-icon {
filter: brightness(0.5) !important;
}
.dark-mood .chat-bottom {
background-color: transparent !important;
}
.dark-mood .ri-attachment-2 {
color: white !important;
}
.dark-mood .sidebar {
border-right: 1px solid rgba(255, 255, 255, 0.08);
background: #1A1A1A;
}
.dark-mood .setting-icon {
border: 1px solid rgba(255, 255, 255, 0.06);
background: #202020;
}
.dark-mood i {
color: #202020 !important;
}
.dark-mood p {
color: white !important;
}
.bubble-action1 img, .bubble-action img {
width:17px; height:17px;
}
.bubble-action1 button, .bubble-action button {
margin-right:6px; margin-top: 4px;
}
.dark-mood h1, .dark-mood h2, .dark-mood h3, .dark-mood h4, .dark-mood h5 {
color:#fff;
}
.dark-mood label {
filter: brightness(800.5%);
color:#fff;
}
.dark-mood .image-gen-btn, .dark-mood .talk-ai-btn {
color:#fff;
filter: none;
background: #333333 !important;
}
.dark-mood .form-text {
filter: brightness(100.5%);
color:#ccc;
}
.dark-mood .modal-header {
border-bottom: 1px solid black;
}
.dark-mood .btn-link {
color: #1877f2;
}
.dark-mood i {
color: #FFFFFF !important;
}
.dark-mood a {
color: #FFFFFF !important;
}
.dark-mood .typingIndicatorBubble {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 40px;
margin: 0px 0px;
}
.dark-mood .typingIndicatorBubbleDot {
width: 4px;
height: 4px;
margin-right: 4px;
background-color: #fff;
border-radius: 50%;
animation-name: bounce;
animation-duration: 1.3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.modal-sm {
max-width: 450px; /* Adjust the width as needed */
}
.reply-container {
position: relative;
}
/*.reply-close {*/
/* position: absolute;*/
/* top: 0.25rem;*/
/* right: 0.25rem;*/
/*}*/
.form-control.form-control-solid {
background-color: #e9eaf1;
}
.form-control {
font-size: 1rem;
}
.dark-mood .setting-icon img,
.dark-mood .dropdown-item img,
.dark-mood .chat-customer .text-box ul li a img,
.dark-mood .chat-customer .bubble-action-main img,
.dark-mood .modal-close img,
.dark-mood .changlog-titlle a img,
.dark-mood .changlog-right .text-box a img,
.dark-mood .dot-img {
filter: brightness(800.5%);
}
.dark-mood .dropdown-menu,
.dark-mood .modal-content {
border: 1px solid rgba(255, 255, 255, 0.06);
background: #2B2B2B;
color: white;
}
.modal-content {
color: black;
}
#genericAlertModal {
background: #000000a3;
}
.dark-mood .dropdown-item,
.dark-mood .nots-box .text-box h4,
.dark-mood .changlog-titlle h4 {
color: #fff;
}
.dark-mood .hr {
background-color: rgba(255, 255, 255, 0.06);
}
.dark-mood .chat-date span {
background-color: #161616;
color: rgba(255, 255, 255, 0.30);
}
.dark-mood .bubble-content-text {
color: rgba(255, 255, 255, 0.80);
}
.bubble-content-text table tr, th, td {
padding: 0 10px;
}
.dark-mood .group-or span {
background: #2B2B2B;
color: rgba(255, 255, 255, 0.30);
}
.dark-mood .chat-date::after,
.dark-mood .group-or::after {
background-color: #FFF;
}
.dark-mood .chat-customer .text-box h4,
.dark-mood .login-title h3,
.dark-mood .account-btn p,
.dark-mood .changlog-left h4,
.dark-mood .changlog-left a,
.dark-mood .changlog-right .text-box a {
color: #fff;
}
.dark-mood .chat-customer .text-box p,
.dark-mood .nots-box .text-box p,
.dark-mood .nots-agree p,
.dark-mood .login-title p,
.dark-mood .feedback-form .form-group .form-check-label {
color: rgba(255, 255, 255, 0.80);
}
.dark-mood .chat-bottom-inner form .form-control,
.dark-mood .feedback-form .form-control {
/*border: 1px solid rgba(255, 255, 255, 0.06);*/
background: #242424;
color: rgba(255, 255, 255, 1);
}
.dark-mood .chat-bottom-inner form .form-control::placeholder,
.dark-mood .feedback-form .form-control::placeholder,
.dark-mood .feedback-form label,
.dark-mood .auth-top .nav-pills .nav-item .nav-link,
.dark-mood .changlog-titlle a,
.dark-mood .changlog-titlle p,
.dark-mood .changlog-left span,
.dark-mood .changlog-right .text-box p {
color: rgba(255, 255, 255, 0.50);
}
.dark-mood .stop-btn {
border: 1px solid rgba(255, 255, 255, 0.06);
background: #242424;
color: #666;
}
.dark-mood .auth-top .nav-pills .nav-item .nav-link {
border: 1px solid rgba(255, 255, 255, 0.06);
}
.dark-mood .dark-switch {
display: none;
}
.dark-mood .light-switch {
display: block;
}
.dark-mood .modal-close {
border: 1px solid rgba(255, 255, 255, 0.06);
background: #333
}
.dark-mood .feedback-form label span {
color: rgba(255, 255, 255, 0.3);
}
.dark-mood .changlog-box::after {
background-color: rgba(255, 255, 255, 0.3);
}
.dark-mood .changlog-left a {
border: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.10);
}
.overly {
opacity: 0.5;
background: #222;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
display: none;
}
/****** LOGIN MODAL ******/
.auth-top {
margin-bottom: 80px;
}
.auth-top .nav-pills {
max-width: 488px;
width: 100%;
margin: 0 auto;
gap: 24px;
}
.auth-top .nav-pills .nav-item {
width: 47%;
}
.auth-top .nav-pills .nav-item .nav-link {
border: 1px solid rgba(15, 15, 15, 0.18);
color: rgb(107, 114, 128);
font-size: 16px;
font-weight: normal;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
width: 100%;
}
.auth-top .nav-pills .nav-item .nav-link.active {
background-color: #1877f2;
border-color: #1877f2;
color: #fff;
}
.login-title {
text-align: center;
margin-bottom: 30px;
}
.login-title h3 {
color: #222;
font-size: 32px;
font-weight: bold;
line-height: normal;
margin-bottom: 8px;
}
.login-title p {
color: rgba(34, 34, 34, 0.50);
font-size: 20px;
font-weight: 500;
line-height: 160%;
}
.form-check {
display: flex;
align-items: center;
padding-left: 0;
margin-bottom: 15px;
}
.feedback-form .form-group .form-check-label {
color: rgba(34, 34, 34, 0.50);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.24px;
margin: 0 !important;
}
.feedback-form .form-group .form-check-label a {
color: #1877f2;
font-weight: 400;
display: inline-block;
text-decoration-line: underline;
}
.form-check .form-check-input {
float: none;
margin-left: 0;
}
.form-check-input {
width: 18px;
border-radius: 4px;
height: 18px;
box-shadow: none;
border: 1px solid rgba(34, 34, 34, 0.10);
margin-right: 10px;
}
.form-check-input:focus {
outline: 0;
box-shadow: none;
border-color: #1877f2;
}
.form-check-input:checked {
background-color: #1877f2;
border-color: #1877f2;
}
.group-or {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-top: 27px;
}
.group-or span {
color: rgba(34, 34, 34, 0.30);
font-size: 16px;
font-weight: 400;
display: inline-flex;
align-items: center;
line-height: 160%;
padding: 0 32px;
background-color: #fff;
position: relative;
z-index: 10;
}
.group-or::after {
position: absolute;
content: "";
left: 0;
top: 50%;
transform: translate(0, -50%);
left: 0;
background: #222;
width: 100%;
height: 1px;
opacity: 0.05;
}
.google-btn {
border-radius: 12px;
border: 1px solid rgba(34, 34, 34, 0.06);
background: #FFF;
display: flex;
align-items: center;
height: 72px;
justify-content: center;
color: rgba(34, 34, 34, 0.50);
font-size: 16px;
font-weight: 700;
line-height: 1;
gap: 12px;
}
.account-btn p {
color: rgba(34, 34, 34, 0.30);
font-size: 16px;
font-weight: 500;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-top: 70px;
}
.account-btn p a {
display: flex;
align-items: center;
color: #1877f2;
justify-content: center;
gap: 10px;
}
.forget {
display: flex;
align-items: center;
justify-content: flex-end;
}
.forget a {
color: rgba(34, 34, 34, 0.50);
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 22px;
letter-spacing: 0.24px;
}
.feedback-form .form-group.account-btn {
margin: 0;
}
.login-modal-inner {
max-width: 487px;
width: 100%;
margin: 0 auto;
}
/***** CHANGE LOG ******/
.changlog-sec {
padding-bottom: 0;
padding-top: 102px;
}
.changlog-inner {
max-width: 800px;
width: 100%;
margin: 0 auto;
}
.changlog-titlle {
margin-bottom: 76px;
}
.changlog-titlle a {
display: flex;
align-items: center;
color: rgba(34, 34, 34, 0.50);
font-size: 16px;
font-weight: 500;
gap: 8px;
line-height: 160%;
}
.changlog-titlle h4 {
color: #222;
font-size: 32px;
font-weight: 700;
line-height: 1;
margin: 32px 0 10px 0;
}
.changlog-titlle h4 span {
color: #1877f2;
}
.changlog-titlle p {
color: rgba(34, 34, 34, 0.50);
font-size: 16px;
font-weight: 500;
line-height: 160%;
}
.changlog-box {
display: flex;
justify-content: space-between;
position: relative;
padding: 0 0 105px 36px;
position: relative;
}
.changlog-box::after {
position: absolute;
content: "";
left: 5px;
top: 16px;
background-color: rgba(34, 34, 34, 0.30);
height: 100%;
width: 2px;
}
.dot-img {
position: absolute;
top: 0;
left: 0;
}
.changlog-left {
max-width: 324px;
width: 100%;
}
.changlog-left span {
color: rgba(34, 34, 34, 0.50);
font-size: 14px;
font-weight: 500;
line-height: 1;
}
.changlog-left h4 {
color: #222;
font-size: 24px;
font-weight: 700;
line-height: 160%;
margin: 8px 0 14px;
}
.changlog-left a {
color: #222;
font-size: 14px;
font-weight: 500;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
border: 1px solid rgba(34, 34, 34, 0.10);
background: rgba(34, 34, 34, 0.10);
width: 60px;
height: 26px;
}
.changlog-right {
max-width: 600px;
width: 100%;
margin-left: auto;
}
.changlog-right .image-holder {
margin-bottom: 26px;
}
.changlog-right .image-holder img {
width: 100%;
}
.changlog-right .text-box p {
color: rgba(34, 34, 34, 0.50);
font-size: 16px;
font-weight: 500;
line-height: 160%;
margin-bottom: 26px;
}
.changlog-right .text-box a {
color: #222;
font-size: 14px;
font-weight: 500;
line-height: 1;
display: flex;
align-items: center;
gap: 14px;
}
#subscriptionModal .switchButton {
background-color: transparent !important;
border-color: rgba(0, 0, 0, 0.1) !important;
color: rgb(126, 126, 126);
font-weight: bold;
padding-left: 15px;
}
#subscriptionModal .switchButton:focus {
box-shadow: none !important;
}
#subscriptionModal .switchButton.active {
background-color: #efefef !important;
color: rgb(50, 50, 50) !important;
border-color: #1772E9 !important;
}
#subscriptionModal .siteMark{
padding: 0px 0px 50px;
}
#subscriptionModal .siteMark img {
width: 25px;
}
#subscriptionModal .modal-body .modalHeading {
text-align: center;
margin-top: 50px;
}
#subscriptionModal .modal-body .modalHeading h2 {
color: #222;
font-family: "SFProDisplay";
font-size: 26px;
font-style: normal;
font-weight: 800;
line-height: 160%;
position: relative;
display: inline-block;
}
#subscriptionModal .modal-body .modalHeading h2::after {
position: absolute;
content: "";
background: url(../img/doualStar.svg) no-repeat center;
background-size: contain;
width: 17px;
height: 17px;
left: -30px;
top: 0px;
}
#subscriptionModal .modal-body .modalHeading h2::before {
position: absolute;
content: "";
background: url(../img/star.svg) no-repeat center;
background-size: contain;
width: 17px;
height: 17px;
right: -30px;
top: 0px;
}
#subscriptionModal .modal-body .modalHeading h2 span {
color: #1877f2;
}
#subscriptionModal .modal-body .modalHeading p {
color: #22222280;
font-family: "SFProDisplay";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 160%;
margin-top: 20px;
}
#subscriptionModal .modal-body .modalHeading p.modalDescription {
margin: 0;
}
#subscriptionModal .modal-body .modalBoxes {
display: flex;
flex-direction: column;
gap: 24px;
margin-top: 25px;
}
#subscriptionModal .modal-body .modalBoxes .features {
border-radius: 12px;
border: 1px solid #2222220f;
padding: 24px 35px;
display: flex;
align-items: center;
justify-content: start;
gap: 35px;
}
#subscriptionModal .modal-body .modalBoxes .features h4 {
color: #222;
font-family: "SFProDisplay";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 100%;
}
#subscriptionModal .modal-body .modalBoxes .features p {
color: #22222280;
font-family: "SFProDisplay";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 160%;
margin-top: 15px;
}
#subscriptionModal .modaltabs {
margin-top: 40px;
}
#subscriptionModal .modaltabs .upgradeBtn {
display: block;
text-align: center;
padding: 28px;
border-radius: 12px;
border: 1px solid #2222220f;
background: #1877f2;
color: #fff;
font-family: "SFProDisplay";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 100%;
margin-top: 25px;
}
#subscriptionModal .modaltabs .upgradeBtn:hover {
background: #fc1e4a;
}
#subscriptionModal .nav-pills .nav-item .nav-link {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 8px;
border: 1px solid transparent;
color: #222;
font-family: "SFProDisplay";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 160%;
padding: 10px 25px;
display: flex;
align-items: center;
justify-content: center;
opacity: 50%;
}
#subscriptionModal .nav-pills .nav-item .nav-link.active {
opacity: 100%;
border: 1px solid #22222214;
background: #fbf8f8;
}
#subscriptionModal .tab-content .tab-pane.active {
display: flex;
align-items: center;
justify-content: start;
gap: 25px;
}
#subscriptionModal .tab-content .tab-pane .tabPaneBox {
border-radius: 12px;
border: 1px solid #2222220f;
background: #fff;
padding: 32px;
width: 100%;
position: relative;
}
#subscriptionModal .tab-content .tab-pane .tabPaneBox.active {
background: #fbf8f8;
}
#subscriptionModal .tab-content .tab-pane .tabPaneBox p {
color: #222222cc;
font-family: "SFProDisplay";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 160%;
}
#subscriptionModal .tab-content .tab-pane .tabPaneBox h4 {
color: #222;
font-family: "SFProDisplay";
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 160%;
margin-top: 12px;
}
#subscriptionModal .tab-content .tab-pane .tabPaneBox h4 span {
color: #22222280;
font-size: 16px;
font-style: normal;
}
#subscriptionModal .tab-content .tab-pane .tabPaneBox .getFree {
background-color: #1877f2;
width: 150px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px 0px 0px 6px;
color: #fff;
font-family: "SFProDisplay";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 160%;
position: absolute;
top: 32px;
right: 0;
}
#subscriptionModal .modal-body {
padding: 25px;
}
.dark-mood #subscriptionModal .switchButton {
background-color: rgb(145 145 145 / 13%) !important;
border-color: rgb(255 255 255 / 50%) !important;
color: rgb(135, 135, 135);
font-weight: bold;
padding-left: 15px;
}
.dark-mood #subscriptionModal .switchButton img {
filter: invert(64%) sepia(3%) saturate(0%) hue-rotate(176deg) brightness(90%) contrast(91%);
}
.dark-mood #subscriptionModal .switchButton.active img {
filter: none !important;
}
.dark-mood #subscriptionModal .switchButton:focus {
box-shadow: none !important;
}
.dark-mood #subscriptionModal .switchButton.active {
background-color: white !important;
color: rgb(50, 50, 50) !important;
}
.dark-mood #subscriptionModal .modal-body .modalHeading h2 {
color: #fff;
}
.dark-mood #subscriptionModal .modal-body .modalHeading p {
color: rgb(255 255 255 / 50%);
}
.dark-mood #subscriptionModal .modal-body .modalHeading p.siteMarkTitle {
color: white;
font-size: 18px;
}
.dark-mood #subscriptionModal .modal-body .modalHeading p.modalDescription {
margin: 0;
}
.dark-mood #subscriptionModal .nav-pills .nav-item .nav-link img {
filter: invert(1);
}
.dark-mood #subscriptionModal .nav-pills .nav-item .nav-link.active img {
filter: invert(0);
}
.dark-mood #subscriptionModal .nav-pills .nav-item .nav-link {
color: #fff;
}
.dark-mood #subscriptionModal .nav-pills .nav-item .nav-link.active {
color: #222;
}
.dark-mood #subscriptionModal .modal-body .modalBoxes .features img {
filter: invert(1);
}
.dark-mood #subscriptionModal .modal-body .modalBoxes .features h4 {
color: #fff;
}
.dark-mood #subscriptionModal .modal-body .modalBoxes .features p {
color: rgb(255 255 255 / 50%);
}
.dark-mood #subscriptionModal .modal-body .modalBoxes .features {
border: 1px solid #ffffff0f;
}
.dark-mood #subscriptionModal .tab-content .tab-pane .tabPaneBox {
border: 1px solid #ffffff0f;
background-color: transparent;
}
.dark-mood #subscriptionModal .tab-content .tab-pane .tabPaneBox.active {
background: #575757;
}
.dark-mood #subscriptionModal .tab-content .tab-pane .tabPaneBox p {
color: rgb(255 255 255 / 80%);
}
.dark-mood #subscriptionModal .tab-content .tab-pane .tabPaneBox h4 {
color: #fff;
}
.dark-mood #subscriptionModal .tab-content .tab-pane .tabPaneBox h4 span {
color: rgb(255 255 255 / 80%);
}
.nav-link, .nav-link:hover, .nav-link:active {
color: #212529;
}
.dark-mood .nav-link, .dark-mood .nav-link:hover, .dark-mood .nav-link:active {
color: #fff;
}
.dark-mood .modal-footer {
border-top:0px;
}
.secure-checkout {
display: inline-block;
padding: 10px 20px;
background-color: gold;
color: #333;
border: 1px solid gold;
border-radius: 5px;
}
.lock-icon {
margin-right: 5px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
background-color: #666;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
background-color: #666;
}
.nav-pills .nav-link {
color: #666;
}
.dark-mood .nav-pills .nav-link {
color: #fafafa;
}
.modal-md {
max-width: 650px; /* Adjust the width as needed */
}
#trigger-reset{
color: #666;
}
.dark-mood #trigger-reset{
color: #f0f0f0;
}
:root {
--bs-primary: #1877f2; /* Primary color */
--bs-primary-rgb: 23, 114, 233; /* RGB version of primary color */
--bs-primary-hover: #1877f2; /* Lighter pink shade for hover */
--bs-primary-active: #1772E9; /* Slightly darker pink shade for active */
--bs-primary-border: #1772E9; /* Border color for active */
--bs-primary-shadow: rgba(23, 114, 233, .5); /* Shadow color */
}
.btn-primary {
background-color: var(--bs-primary) !important; /* Ensuring override */
border-color: var(--bs-primary) !important; /* Ensuring override */
}
.btn-primary:hover {
background-color: var(--bs-primary-hover) !important;
border-color: var(--bs-primary-hover) !important;
}
.btn-primary:active,
.btn-primary.active,
.show>.btn-primary.dropdown-toggle {
background-color: var(--bs-primary-active) !important;
border-color: var(--bs-primary-border) !important;
}
.btn-primary:focus {
box-shadow: 0 0 0 .25rem var(--bs-primary-shadow) !important;
}
.pink-badge {
background-color: #1877f2; /* Pink background color */
color: white; /* White text for contrast */
padding: 5px 10px; /* Padding for the badge */
border-radius: 10px; /* Rounded corners */
font-size: 16px; /* Font size for the badge */
}
.typingIndicatorContainer {
display: flex;
flex: none;
align-items: flex-end;
margin: 12px 0;
}
.typingIndicatorBubble {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 40px;
margin: 0px 0px;
}
.typingIndicatorBubbleDot {
width: 4px;
height: 4px;
margin-right: 4px;
background-color: #57585a;
border-radius: 50%;
animation-name: bounce;
animation-duration: 1.3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.typingIndicatorBubbleDot:first-of-type {
margin: 0px 4px;
}
.typingIndicatorBubbleDot:nth-of-type(2) {
animation-delay: 0.15s;
}
.typingIndicatorBubbleDot:nth-of-type(3) {
animation-delay: 0.3s;
}
@keyframes bounce {
0%,
60%,
100% {
transform: translateY(0);
}
30% {
transform: translateY(-4px);
}
}
.bubble-content {
max-width: 90%;
/* margin-bottom: 10px;*/
position: relative;
/* padding: 16px;*/
/* border-radius: 14px;*/
word-wrap: break-word;
display: inline-flex; /* Make the bubble inline-flex for content fit */
}
.bubble-content p {
margin-top: 0;
margin-bottom: 0.5rem;
}
.user-bubble .bubble-content {
/* background-color: #007bff; */
/* color: white; */
align-self: flex-end; /* Aligns user bubbles to the right */
text-align: left;
border-bottom-right-radius: 6px;
word-break: break-all;
}
.user-bubble {
display: flex;
justify-content: end;
}
@media (max-width: 768px) {
.user-bubble {
justify-content: flex-start;
}
}
.btn-circle {
border-radius: 60px;
}
.system-bubble .bubble-content {
/* background-color: #e9eaf1; */
align-self: flex-start; /* Aligns system bubbles to the left */
text-align: left;
border-bottom-left-radius: 6px;
word-break: break-all;
overflow-x: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.bubble-content-text {
overflow-wrap: anywhere; /* Allow breaks anywhere within a long string to prevent overflow */
word-break: break-word; /* Backward compatibility */
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.image-holder {
display: contents;
}
.bubble-content-text:has(table) p {
padding-top: 20px; /* Adjust the padding as needed */
}
.bubble-content table {
width: max-content;
}
.table-container {
overflow-y: auto; /* Enables vertical scrolling */
margin-bottom: 10px; /* Optional: space below the table */
}
/* Enhanced styling for product chooser */
.product-chooser {
max-width: 100%;
}
.product-chooser-item {
display: flex;
align-items: center;
border-radius: 10px;
padding: 18px 20px 12px;
cursor: pointer;
position: relative;
margin-bottom: 12px;
margin-left: 10px;
margin-right: 10px;
color: #555;
border: 1px solid #e0e0e0;
transition: all 0.25s ease;
background-color: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
/* Hover effect for unselected items */
.product-chooser-item:not(.selected):hover {
background-color: #fafafa;
border-color: #d0d0d0;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
/* Selected item styling */
.product-chooser-item.selected {
border: 2px solid #1877f2;
background: rgba(255,56,96,0.03);
padding: 17px 19px 11px;
opacity: 1;
color: #333;
box-shadow: 0 4px 12px rgba(255,56,96,0.15);
}
/* Dark mode styling */
.dark-mood div.product-chooser div.product-chooser-item {
background-color: #2a2a2a;
border: 1px solid #3a3a3a;
color: #e0e0e0;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.dark-mood div.product-chooser div.product-chooser-item:not(.selected):hover {
background-color: #333;
border-color: #444;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.dark-mood div.product-chooser div.product-chooser-item.selected {
border: 2px solid #1877f2;
background-color: rgba(255,56,96,0.1);
color: #f0f0f0;
box-shadow: 0 4px 12px rgba(255,56,96,0.2);
}
/* Icon styling */
.product-chooser-item i {
color: #1877f2 !important;
margin-right: 15px;
font-size: 24px;
display: none;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}
.product-chooser-item.selected i {
display: inline-block !important;
}
/* Text styling - enhanced */
div.product-chooser div.product-chooser-item span.title {
display: block;
margin: 0 0 5px 0;
font-weight: 600;
font-size: 15px;
color: #777;
text-transform: uppercase;
letter-spacing: 0.5px;
}
div.product-chooser div.product-chooser-item.selected span.title {
color: #555;
}
div.product-chooser div.product-chooser-item span.description {
font-size: 20px;
font-weight: 700;
color: #333;
}
div.product-chooser div.product-chooser-item.selected span.description {
color: #1877f2;
}
div.product-chooser div.product-chooser-item span.description2 {
font-size: 15px;
color: #666;
font-weight: 400;
}
.dark-mood div.product-chooser div.product-chooser-item span.title {
color: #aaa;
}
.dark-mood div.product-chooser div.product-chooser-item span.description {
color: #e0e0e0;
}
.dark-mood div.product-chooser div.product-chooser-item.selected span.description {
color: #e0e0e0;
}
.dark-mood div.product-chooser div.product-chooser-item span.description2 {
color: #999;
}
div.product-chooser.disabled div.product-chooser-item {
opacity: 0.5;
cursor: default;
pointer-events: none;
}
#checkout-and-portal-button {
height: 36px;
background: #556cd6;
color: white;
width: 100%;
font-size: 14px;
border: 0;
font-weight: 500;
cursor: pointer;
letter-spacing: 0.6;
border-radius: 0 0 6px 6px;
transition: all 0.2s ease;
box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
}
#checkout-and-portal-button:hover {
opacity: 0.8;
}
.reply-container, .template-container {
display: none;
border: 2px solid #e9eaf1;
border-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
background-color: #f6f7f9;
/*border-bottom-width: 0;*/
margin-bottom: 10px;
}
.show-reply .reply-container {
display: flex;
}
.show-reply .input-group>:first-child {
border-top-left-radius: 0;
}
.show-reply .input-group>:last-child {
border-top-right-radius: 0;
}
#quiz_list .selected-thread {
background: #cde9ff;
}
#quiz_list .card {
cursor: pointer;
}
.input-group #stopBtn {
/*border-top-right-radius: 8px;*/
/*border-bottom-right-radius: 8px;*/
background-color: #F7F2F3;
}
#stopBtn {
/*border-top-right-radius: 8px;*/
/*border-bottom-right-radius: 8px;*/
background-color: #F7F2F3;
}
.topinfo {
float:right;
font-size: 14px; padding-top: 0px;
}
.next {
cursor: pointer;
}
.bubble.user-bubble .delete-message {
}
.bubble.system-bubble .delete-message {
}
.bubble.user-bubble .copy-message {
}
.bubble.system-bubble .copy-message {
}
/* START TOOLTIP STYLES */
[tooltip] {
position: relative; /* opinion 1 */
}
/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
text-transform: none; /* opinion 2 */
font-size: .9em; /* opinion 3 */
line-height: 1;
user-select: none;
pointer-events: none;
position: absolute;
display: none;
opacity: 0;
}
[tooltip]::before {
content: '';
border: 5px solid transparent; /* opinion 4 */
z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
content: attr(tooltip); /* magic! */
/* most of the rest of this is opinion */
font-family: Helvetica, sans-serif;
text-align: center;
/*
Let the content set the size of the tooltips
but this will also keep them from being obnoxious
*/
min-width: 3em;
max-width: 21em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 1ch 1.5ch;
border-radius: .3ch;
box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
background: #333;
color: #fff;
z-index: 1000; /* absurdity 2 */
}
/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
display: block;
}
/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
display: none !important;
}
/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
bottom: 100%;
border-bottom-width: 0;
border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
left: 50%;
transform: translate(-50%, -.5em);
}
/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
top: 100%;
border-top-width: 0;
border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
left: 50%;
transform: translate(-50%, .5em);
}
/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
top: 50%;
border-right-width: 0;
border-left-color: #333;
left: calc(0em - 5px);
transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
top: 50%;
right: calc(100% + 5px);
transform: translate(-.5em, -50%);
}
/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
top: 50%;
border-left-width: 0;
border-right-color: #333;
right: calc(0em - 5px);
transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
top: 50%;
left: calc(100% + 5px);
transform: translate(.5em, -50%);
}
/* KEYFRAMES */
@keyframes tooltips-vert {
to {
opacity: .9;
transform: translate(-50%, 0);
}
}
@keyframes tooltips-horz {
to {
opacity: .9;
transform: translate(0, -50%);
}
}
/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
animation: tooltips-vert 300ms ease-out forwards;
}
[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
animation: tooltips-horz 300ms ease-out forwards;
}
@media (max-width: 767px) {
.topinfo {
float:right; font-size: 14px; padding-top: 9px;
}
.chat-header,
.chat-footer {
min-height: 3rem;
}
}
.or-container {
align-items: center;
color: #ccc;
display: flex;
margin: 8px 0;
}
.line-separator {
background-color: #ccc;
flex-grow: 5;
height: 1px;
}
.or-label {
flex-grow: 1;
margin: 0 15px;
text-align: center;
}
.modal-content h3 {
font-weight:bold;
color: #555;
}
/* Custom styles for the nav-pills */
.nav-tabs .nav-link.active {
background-color: #343a40; /* dark gray, similar to Bootstrap's 'bg-dark' */
color: white;
}
.nav-tabs .nav-link:hover {
}
.tab-content2 {
display: none;
}
.tab-content2.active {
display: block;
}
.hidden { display:none; }
.custom-slider::-webkit-slider-thumb {
background-color: #1877f2;
border: 2px solid #1772E9;
border-radius: 50%;
width: 20px;
height: 20px;
cursor: pointer;
-webkit-appearance: none;
}
.custom-slider::-moz-range-thumb {
background-color: #1877f2;
border: 2px solid #1772E9;
border-radius: 50%;
width: 20px;
height: 20px;
cursor: pointer;
}
.custom-slider::-ms-thumb {
background-color: #1877f2;
border: 2px solid #1772E9;
border-radius: 50%;
width: 20px;
height: 20px;
cursor: pointer;
}
.custom-slider:active::-webkit-slider-thumb,
.custom-slider:focus::-webkit-slider-thumb,
.custom-slider:hover::-webkit-slider-thumb {
background-color: #1877f2;
}
.custom-slider:active::-moz-range-thumb,
.custom-slider:focus::-moz-range-thumb,
.custom-slider:hover::-moz-range-thumb {
background-color: #1877f2;
}
.custom-slider:active::-ms-thumb,
.custom-slider:focus::-ms-thumb,
.custom-slider:hover::-ms-thumb {
background-color: #1877f2;
}
.form-text {
font-size: 15px;
}
.form-label {
font-size: 16px;
font-weight:bold;
}
.modal-fullscreen {
max-width: unset;
}
.modalHeading-fullscreen {
margin-top: 50px;
text-align: center;
}
/* Bootstrap Panel */
.panel{
margin-bottom:20px;
border:1px solid transparent;
border-radius:4px !important;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);
box-shadow:0 1px 1px rgba(0,0,0,.05)
}
.panel-header {
padding: 20px 30px;
background-color: var(--bs-primary) !important;
border-radius: 10px 10px 0px 0px;
color: white;
font-size: 16px;
font-weight: bold;
}
@media(max-width:576px) {
.panel-header {
padding: 20px 10px 20px 30px !important;
}
#subscriptionModal .modal-body .modalHeading h2 {
font-size: 18px;
}
}
.panel-body {
padding: 20px 30px;
background-color: rgb(255 255 255 / 10%);
color: white;
}
#myTab {
display: none !important;
}
.modal-exit {
position: absolute;
top: 30px;
right: 50px;
}
.recom-section {
cursor: pointer;
}
.recom-section {
background-color: #f1ebec;
}
.recom-section:hover {
background-color: #aaaaaa10;
}
.recom-quiz {
padding: 15px 0px 0px;
text-align: center;
}
.recom-quiz i {
color : black;
}
.recom-title {
text-align: center;
padding: 20px 10px;
color: black;
}
.dark-mood .recom-title {
text-align: center;
padding: 20px 10px;
color: lightgray;
}
.dark-mood .recom-section {
background-color: #aaaaaa30;
}
.dark-mood .recom-section {
border: 1px solid #313131
}
.dark-mood .recom-section:hover {
background-color: #aaaaaa60;
}
.dark-mood .recom-quiz i {
color: lightgray;
}
.dark-mood .recom-quiz {
padding: 15px 0px 0px;
text-align: center;
color: white;
}
.bold {
font-weight: bold;
}
.center {
text-align: center;
}
.accordion-header, .accordion-item {
border: none !important;
background: none;
}
.accordion-button {
background-color: #8f8f8f1c;
padding: 30px;
border-radius: 15px !important;
}
.accordion-button:not(.collapsed) {
background-color: #8f8f8f1c !important;
box-shadow: unset;
}
.accordion-body {
color : #212529 !important;
}
.accordion-button:focus {
box-shadow: none;
color: #052c65 !important;
}
.dark-mood .accordion-body {
color : white !important;
}
.dark-mood .accordion-button:focus {
box-shadow: none;
color: white !important;
}
.dark-mood .accordion-button {
color: rgb(230, 230, 230) !important;
}
.dark-mood .faq-section-title {
color: white;
}
.accordion-item {
margin-bottom: 10px;
border: none;
}
.firstStar {
top: -20px;
position: relative;
}
.lastStar {
top: -15px;
position: relative;
}
#recom-row {
display: none;
margin-bottom: 20px;
}
@media(max-width:576px) {
.recom-title {
padding: 0px 5px !important;
}
.recom-quiz {
padding: 0px !important;
}
}
.term-content {
padding: 10px 30px;
color : #212529;
}
.dark-mood .term-content {
color : #9c8e8e;
}
.pink {
color : #1877f2;
}
.dark-mood .text-muted {
color : #9c8e8e !important;
}
.list-group-item {
background-color: #1877f20d;
border: 1px solid transparent;
}
.dark-mood .list-group-item {
background-color: #252525;
color: white;
}
.terms-page h3 {
padding-top: 30px;
}
#countdown {
color: white;
float: right;
}
#countdown span {
background-color: rgba(255, 255, 255, 0.178) !important;
padding: 3px 2px;
width: 45px !important;
}
.responsive_row {
display: flex;
overflow-x: auto;
}
/* Custom Scrollbar Styling */
.responsive_row::-webkit-scrollbar {
width: 2px;
height: 5px;
}
.responsive_row::-webkit-scrollbar-track {
background: #f1f1f1;
}
.responsive_row::-webkit-scrollbar-thumb {
background-color: #1877f2;
border-radius: 10px;
}
.responsive_row::-webkit-scrollbar-thumb:hover {
background-color: #1877f2;
}
.bg_img{
background-size: contain;
background-position: top;
background-repeat: no-repeat;
background-blend-mode: color;
overflow-x: hidden;
}
@media (max-width: 576px) {
.responsive_row {
display: flex;
}
.responsive_row > div {
width: 50% !important;
}
}
.form-link {
position: absolute;
left: 8px;
cursor: pointer;
}
.form-link#audioBtn {
left: initial;
right: 85px;
}
.image-checkbox {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.image-checkbox-label {
color: #000000;
font-size: 14px;
display: flex;
align-items: center;
gap: 5px;
}
.image-checkbox-label i {
font-size: 16px;
}
.image-checkbox:checked + .image-checkbox-label {
background-color: #ff3661 !important;
color: #fff;
border: 1px solid transparent;
}
/*.dark-mood .image-checkbox:checked + .image-checkbox-label > i {*/
/* filter: invert(1);*/
/*}*/
.dark-mood textarea,
.dark-mood input,
.dark-mood select {
/* border: 1px solid rgba(255, 255, 255, 0.1); */
background-color: #242424;
color: #ffffff;
outline: none; /* Removes default browser outline */
}
.dark-mood textarea:focus,
.dark-mood input:focus,
.dark-mood select:focus {
background-color: #242424;
color: #ffffff;
border-color: rgba(255, 255, 255, 0.2); /* Slightly brighter border on focus */
}
.dark-mood input[type="range" i] {
background: none;
border: none;
}
.form-link#imageGenerationBtn {
left: initial;
right: 170px;
}
@media (max-width: 768px) {
.form-link#audioBtn {
right: 100px;
}
.image-checkbox-label {
right: 130px;
}
.image-gen-btn span, .talk-ai-btn {
display: none !important;
}
}
@media (max-width: 576px) {
.form-link#audioBtn {
right: 70px;
}
.image-checkbox-label {
right: 120px;
}
}
.form-link i {
font-size: 22px;
}
/*@media(max-width:575px) {*/
/* .form-link {*/
/* position: absolute;*/
/* left: 32px;*/
/* }*/
/*}*/
#preview-container {
/* position: relative;
display: inline-block;
margin-top: 20px;
background-color: rgba(255,255,255,0.3);
padding: 3px;
border-radius: 12px;
margin-left: 35px; */
top: -40px;
position: relative;
display: block;
background-color: rgba(255, 255, 255, 0.3);
padding: 3px;
border-radius: 12px;
width: fit-content;
margin: auto;
}
#preview-image {
max-width: 100px;
max-height: 100px;
display: none;
border: 1px solid #0000006b;
border-radius: 5px;
}
#remove-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.438);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
width: 40px;
height: 40px;
display: none;
justify-content: center;
align-items: center;
text-align: center;
opacity: 0.6; /* Initially hidden */
transition: opacity 0.3s ease;
}
#preview-container:hover #remove-image {
display: flex;
opacity: 1; /* Show the button on hover */
}
/* Circular Progress Bar */
.progress-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
display: none;
justify-content: center;
align-items: center;
}
.progress-circle {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 5px solid transparent;
border-top-color: #555555;
animation: spin 1s linear infinite;
}
/* Spinning animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.bubble-content-img {
}
.bubble-content-img img {
border-radius: 12px;
max-width: 200px;
max-height: 200px;
border: 5px solid #79797928;
}
.preview-row {
position: fixed;
bottom: 13%;
margin: auto;
width: 100%;
padding: 0 50px 0px 0px;
}
html, body {
height: 100%;
}
/* Tooltip container */
.tooltip-container {
position: relative;
display: inline-block;
cursor: pointer;
}
/* Tooltip content */
.tooltip-content {
visibility: hidden;
width: 262px;
background-color: white;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 10px;
position: absolute;
z-index: 2;
bottom: 125%; /* Position above the button */
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
font-family: Arial, sans-serif;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.dark-mood .tooltip-content {
background: #242424;
}
/* Tooltip arrow */
.tooltip-content::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
/* @media (max-width: 768px) {
#free-daily-messages {
margin-top: 60px;
}
} */
.tooltip-content small {
color: #4e4e4e;
}
.dark-mood .tooltip-content small {
color: #ffffff8c;
}
.btn-reprompt {
background: #333;
}
.btn-reprompt:hover {
background: #333;
}
/* Show the tooltip */
.tooltip-container:hover .tooltip-content {
visibility: visible;
opacity: 1;
}
.bg-secondary-v1 {
background: white;
color: black !important;
}
.dark-mood .bg-secondary-v1 {
background: #1A1A1A;
color: white !important;
}
.dark-mood .warning-icon {
filter: unset;
}
.btn-dislike img {
filter: invert(1);
}
.dark-mood .btn-dislike img {
filter: unset;
}
.warning-icon {
filter: invert(1);
}
/* Dislike Button */
.btn-dislike {
background: none;
border: none;
cursor: pointer;
}
.btn-dislike img {
width: 16px;
height: 16px;
}
@media (min-width: 1400px) {}
@media (max-width:1600px) {}
@media (max-width:1400px) {}
@media (max-width:1300px) {}
@media(max-width:1199px) {
.chat-input-container {
margin: 0 50px !important;
}
.chat-input-container {
width: auto !important;
}
.changlog-sec {
padding-bottom: 0;
padding-top: 40px;
}
.changlog-inner {
padding: 0 20px;
}
}
@media(max-width:991px) {
.modal {
padding: 0;
overflow-y: auto;
}
.modal-dialog {
max-width: 94%;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 56px;
}
.modal-fullscreen {
width:100vw;
max-width: unset;
margin: unset;
}
.note-modal .modal-body {
padding: 32px 48px;
}
.modal-close {
right: 0;
top: -54px;
}
.changlog-left {
max-width: 230px;
width: 100%;
}
.changlog-left h4 {
font-size: 22px;
}
}
@media(max-width:767px) {
.sidebar {
max-width: 100%;
flex-direction: row;
height: 60px;
padding: 24px 32px;
}
.head-logo {
width: auto;
padding: 0;
}
.setting {
padding: 0;
width: auto;
flex-direction: row;
align-items: center;
img {
margin-bottom: 2px;
}
}
.setting-icon {
width: auto;
border: none;
height: auto;
background-color: transparent;
}
/* .setting-img {
display: none;
} */
.menu-nav-icon {
height: 20px;
display: block;
}
.chat-right {
padding-left: 24px;
padding-top: 122px;
padding-bottom: 107px;
padding-right: 24px;
}
.chat-top,
.chat-bottom-inner {
padding: 0 0;
}
.chat-bottom {
padding: 24px;
background: transparent !important;
}
.chat-bottom-inner form .form-control {
height: 59px;
}
/*.send-btn,*/
/*.stop-btn {*/
/* height: 59px;*/
/* width: 59px;*/
/*}*/
.chat-input-container {
margin: 0 !important;
}
.dropdown-menu {
position: fixed !important;
margin: 0px !important;
width: 100%;
top: 0;
border-radius: 0;
max-width: 250px;
z-index: 999999;
right: 0 !important;
left: auto !important;
height: 100vh;
padding: 32px 24px;
transform: translate3d(0px, 0px, 0px) !important;
}
.dropdown-menu .modal-close {
display: flex;
right: auto;
left: -58px;
top: 12px;
}
body.active {
overflow: hidden;
}
body.active .sidebar {
position: static;
}
body.active .chat-right {
padding-top: 10px;
}
.changlog-inner {
padding: 0;
}
.changlog-sec {
padding-bottom: 0;
}
.changlog-box {
padding: 0px 0 30px 30px;
position: relative;
flex-direction: column;
}
.changlog-right {
margin-top: 50px;
}
}
@media(max-width:575px) {
.modal-body {
padding: 24px;
}
.chat-bottom-inner form,
.chat-bottom-inner form ul {
gap: 6px;
}
.note-modal .modal-body {
padding: 22px;
}
.nots-box .image-holder {
width: 44px;
}
.nots-box {
gap: 12px;
margin-bottom: 26px;
}
.nots-box .text-box h4 {
font-size: 14px;
margin-bottom: 10px;
}
.nots-box .text-box p {
font-size: 14px;
line-height: 150%;
}
.auth-top .nav-pills .nav-item .nav-link {
font-size: 16px;
height: 46px;
}
.auth-top .nav-pills {
gap: 17px;
}
.login-modal .modal-dialog {
margin-top: 20px;
}
.login-title {
margin-bottom: 16px;
}
.login-title h3 {
font-size: 26px;
margin-bottom: 0px;
}
.login-title p {
font-size: 18px;
line-height: 160%;
}
.auth-top {
margin-bottom: 30px;
}
.account-btn p {
gap: 10px;
margin-top: 30px;
}
.changlog-titlle h4 {
font-size: 28px;
margin: 20px 0 10px 0;
}
.changlog-left h4 {
font-size: 24px;
}
}
.dark-mood pre {
background-color: #242424 !important;
}
@media(max-width:374px) {}
pre {
background-color: #f8f9fa;
padding: 1rem;
border-radius: 8px;
position: relative;
font-family: 'Courier New', Courier, monospace;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: auto;
}
.copy-btn {
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
}
.mic-container {
text-align: center;
}
.mic-icon {
font-size: 48px;
padding: 10px;
background-color: #f2f2f2;
border-radius: 50%;
cursor: pointer;
border: none;
}
.recording-ui {
display: none;
margin-top: 20px;
}
.wave-wrap {
margin-bottom: 20px;
}
.controls {
display: flex;
justify-content: center;
gap: 10px;
}
.recording-ui {
border-radius: 12px;
border: 1px solid rgba(34, 34, 34, 0.06);
background: #FFF;
padding-left: 10px;
color: rgba(34, 34, 34, 1);
font-size: 16px;
font-weight: 500;
box-shadow: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.dark-mood .recording-ui {
background: #242424;
}
#cancel-btn {
width: max-content;
}
.dark-mood #cancel-btn {
background: #202020;
border: 0;
}
.dark-mood #cancel-btn img{
filter: invert(1);
}
.dark-mood .recording-ui #duration {
color: white;
}
.recording-ui .wave-wrap {
height: 57px;
}
.recording-ui .controls {
display: flex;
gap: 10px;
}
.recording-ui #duration {
font-size: 16px;
}
.recording-ui button:disabled {
background-color: #888;
}
#duration {
font-size: 18px;
margin-right: 10px;
}
.player-container {
display: flex;
align-items: center;
background: #ffffff;
border-radius: 10px;
padding: 10px 20px;
box-shadow: 0 4px 8px rgb(0 0 0 / 6%);
max-width: 300px;
height: 60px;
margin-bottom: 15px;
}
.dark-mood .player-container {
background: #242424;
}
.waveform {
width: 100%;
margin: 0 15px;
}
.play-pause {
width: 40px;
height: 80px;
border: none;
border-radius: 50%;
background: transparent;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
}
@media (max-width: 768px) {
.play-pause {
width: 80px;
height: 80px;
}
}
.play-pause img {
width: max-content;
}
.play-pause:focus {
outline: none;
}
#feedback2 {
float: left;
position: fixed;
top: calc(50% - 47px);
right: 0;
}
#feedback2 a {
background: #ff3660;
border-radius: 5px 0 0 5px;
box-shadow: 0 0 1px rgba(0, 0, 0, .1);
border: 1px solid #ff3660;
border-right: 0;
display: block;
padding: 16px 12px;
transition: all .2s ease-in-out;
}
#feedback2 a:hover {
padding-right: 20px;
}
.gallery {
display: flex;
gap: 10px;
padding: 20px;
overflow-x: auto;
}
.gallery a {
flex: 0 0 auto;
cursor: pointer;
text-decoration: none;
}
.gallery a img {
width: 300px;
height: 200px;
object-fit: cover;
display: block;
}
.pswp__zoom-level-indicator {
background: #ff3661;
font-size: 16px;
line-height: 1;
font-weight: bold;
color: #fff;
height: auto;
align-self: center;
padding: 4px 6px 5px;
margin-right: 4px;
}
button.pswp__button--test-button {
background: #136912 !important;
font-size: 20px;
color: #fff;
}
.dark-mood .card {
background-color:transparent;
}
.dark-mood .form-control {
background-color: #2c2f33 !important;
border-color: #3a3f44 !important;
color: #e0e0e0 !important;
}
.dark-mood .form-control:focus {
background-color: #2c2f33 !important;
border-color: #75c3ff !important;
box-shadow: 0 0 0 0.2rem rgba(117, 195, 255, 0.25) !important;
}
.space-gradient {
background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
color: white;
padding: 1rem 0.75rem;
display: flex;
justify-content: center;
align-items: center;
}
.chat-input-container {
background: #fff;
padding: 12px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
max-width: 800px;
width: 100%;
margin: 0 auto;
}
.dark-mood .chat-input-container {
background: #242424;
}
.chat-input-wrapper {
display: flex;
align-items: center;
background: #f1f1f1;
padding: 10px;
border-radius: 8px;
}
.chat-input {
flex-grow: 1;
border: none;
background: transparent;
padding: 5px 10px;
outline: none;
}
.attach-btn, .mic-btn, .send-btn {
background: none;
border: none;
cursor: pointer;
font-size: 18px;
/*margin: 0 5px;*/
}
.send-btn {
/* background: #247ef2; */
color: white;
padding: 8px 12px;
border-radius: 6px;
}
.chat-actions {
display: flex;
gap: 10px;
}
.image-gen-btn, .talk-ai-btn {
/*margin-top: 10px;*/
border: 2px solid transparent;
padding: 2px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
}
.image-gen-btn {
display: flex;
align-items: center;
background: #f4f4f4;
}
.currency-selection-container {
max-width: 100%;
}
.currency-options {
display: flex;
flex-wrap: wrap;
}
.currency-option {
flex: 0 0 auto;
}
.currency-btn {
display: flex;
align-items: center;
background-color: transparent;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 12px 16px;
min-width: 120px;
transition: all 0.2s ease;
}
.currency-btn:hover {
background-color: #f8f9fa;
border-color: #ced4da;
transform: translateY(-2px);
box-shadow: 0 3px 6px rgba(0,0,0,0.08);
}
.btn-check:checked + .currency-btn {
background-color: rgba(255, 54, 96, 0.1);
border-color: #ff3660;
box-shadow: 0 2px 4px rgba(255, 54, 96, 0.2);
}
.currency-icon {
font-size: 1.5rem;
margin-right: 12px;
color: #ff3660;
}
.currency-info {
display: flex;
flex-direction: column;
}
.currency-name {
font-weight: 600;
font-size: 0.95rem;
}
.network-name {
color: #6c757d;
font-size: 0.8rem;
}
.image-gen-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
border-radius: 0.375rem;
background: transparent;
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.image-gen-btn:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.dark-mood .image-gen-btn img[src$="lgo.svg"] {
filter: invert(1);
}
.image-gen-btn {
display:none; }
#talkToAiBtn{
display:none;
}
#audioBtn{
display:none;
}
/* General layout */
.wrapper {
display: flex;
height: 100vh;
overflow: hidden;
}
.main-content {
display: flex;
width: 100%;
}
/* Sidebar styles */
.sidebar {
width: 260px; /* Adjusted width */
background-color: #f7f7f8; /* Light background */
border-right: 1px solid #e5e5e6; /* Light border */
transition: width 0.3s ease;
flex-shrink: 0;
display: flex;
flex-direction: column;
}
.sidebar.collapsed {
width: 70px; /* Width when collapsed */
}
.sidebar-header {
display: flex;
align-items: center;
padding: 1rem;
cursor: pointer; /* Indicate it's clickable */
/* justify-content: space-between; */ /* Adjust based on desired layout */
}
.sidebar.collapsed .sidebar-header {
justify-content: center; /* Center logo when collapsed */
}
.sidebar-header img {
width: 30px; /* Adjusted logo size */
height: 30px;
margin-right: 0.75rem; /* Space between logo and text */
transition: margin-right 0.3s ease;
}
.sidebar.collapsed .sidebar-header img {
margin-right: 0; /* Remove margin when collapsed */
}
.sidebar-title {
font-size: 1.1rem;
font-weight: bold;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity 0.3s ease;
}
.dark-mood .sidebar-title {
color: white;
}
.sidebar.collapsed .sidebar-title {
opacity: 0; /* Hide title text */
width: 0; /* Collapse text space */
visibility: hidden;
}
.sidebar-content {
flex-grow: 1;
width: 100%;
overflow-y: auto;
padding: 0 1rem 1rem 1rem; /* Padding for content below header */
display: flex;
flex-direction: column;
}
.sidebar.collapsed .sidebar-content {
padding: 0 0.5rem 1rem 0.5rem; /* Reduced padding when collapsed */
}
.new-chat-container {
margin-bottom: 1rem; /* Space below new chat button */
}
.new-chat-container .btn {
display: flex;
align-items: center;
justify-content: center; /* Center content */
width: 100%;
text-align: left;
padding: 0.75rem 1rem;
font-size: 1rem;
border-radius: 0.3rem;
color: #333; /* Dark text */
border: none;
transition: background-color 0.2s ease;
}
.new-chat-container .btn:hover {
background-color: #dee2e6; /* Darker hover */
}
.dark-mood .new-chat-container .btn:hover {
background-color: #ffffff1a; /* Darker hover */
}
.new-chat-container .btn i {
margin-right: 0.75rem;
transition: margin-right 0.3s ease;
}
.sidebar.collapsed .new-chat-container .btn i {
margin-right: 0; /* Remove margin */
}
.new-chat-container .btn span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity 0.3s ease;
}
.dark-mood .new-chat-container .btn span {
color: white;
}
.sidebar.collapsed .new-chat-container .btn span {
opacity: 0; /* Hide text */
width: 0; /* Collapse text space */
visibility: hidden;
}
.threads-container {
flex-grow: 1;
overflow-y: auto;
}
.thread-item {
border-radius: 0.3rem; /* Slightly less rounded */
margin-bottom: 0.5rem;
cursor: pointer;
transition: background-color 0.2s ease, padding 0.3s ease;
padding: 0.75rem 1rem; /* Increased padding */
display: flex;
align-items: center;
position: relative; /* Add this */
}
.delete-thread {
opacity: 0;
transition: opacity 0.2s ease;
padding: 0.25rem;
margin-left: auto;
color: #dc3545;
border: none;
background: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
min-width: 24px;
}
.delete-thread.loading {
opacity: 1;
cursor: not-allowed;
}
.delete-thread .spinner-border {
width: 1rem;
height: 1rem;
border-width: 0.15em;
}
.thread-item:hover .delete-thread {
opacity: 1;
}
.delete-thread:hover {
color: #bb2d3b;
}
.sidebar.collapsed .delete-thread {
display: none;
}
.sidebar.collapsed .thread-item {
padding: 0.75rem 0.5rem; /* Adjusted padding */
justify-content: center; /* Center content */
}
.thread-item:hover {
background-color: #dee2e6; /* Darker hover */
}
.thread-item.active {
background-color: #cce5ff; /* Light blue for active */
color: #004085; /* Dark blue text */
}
.dark-mood .thread-item:hover {
background-color: #ffffff1a; /* Darker hover */
}
.dark-mood .thread-item.active {
background-color: #ffffff1a; /* Light blue for active */
color: #004085; /* Dark blue text */
}
.thread-item i {
margin-right: 0.75rem; /* Space between icon and text */
transition: margin-right 0.3s ease;
}
.sidebar.collapsed .thread-item i {
margin-right: 0; /* Remove margin */
}
.thread-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
transition: opacity 0.3s ease;
color: inherit; /* Inherit color from parent (thread-item) */
text-decoration: none; /* Remove underline */
}
.dark-mood .thread-title {
color: white !important;
}
.sidebar.collapsed .thread-title {
opacity: 0; /* Hide title */
width: 0; /* Collapse text space */
visibility: hidden;
}
/* Chat area styles */
.chat-right {
flex-grow: 1;
display: flex;
flex-direction: column;
height: 100vh;
/* Remove transition here if main-content handles it */
}
.chat-top {
flex-grow: 1;
overflow-y: auto;
padding: 1rem;
}
.chat-bottom {
padding: 1rem;
border-top: 0;
flex-shrink: 0;
}
/* Adjust chat padding when sidebar is collapsed */
.main-content .sidebar.collapsed ~ .chat-right .chat-top,
.main-content .sidebar.collapsed ~ .chat-right .chat-bottom {
padding-left: 0.5rem; /* Reduced left padding */
padding-right: 0.5rem; /* Reduced right padding */
transition: padding 0.3s ease; /* Smooth transition for padding */
}
/* Adjust messages container width when sidebar is collapsed */
.main-content .sidebar.collapsed ~ .chat-right .chat-top #messages {
max-width: 1016px; /* Limit width */
margin-left: auto; /* Center the container */
margin-right: auto; /* Center the container */
transition: max-width 0.3s ease, margin 0.3s ease; /* Smooth transition */
}
/* Message styles (re-adding if lost) */
.message-row {
display: flex;
margin-bottom: 20px; /* Increased space between messages */
align-items: flex-start;
}
.message-row.user-message {
justify-content: flex-end;
}
.message-row.assistant-message {
justify-content: flex-start;
}
.message-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #fff;
flex-shrink: 0;
}
.user-message .message-icon {
background-color: #007bff; /* Example user icon background */
margin-left: 15px;
}
.assistant-message .message-icon {
background-color: #6c757d; /* Example assistant icon background */
margin-right: 15px;
}
.message-content {
max-width: 70%;
padding: 15px 20px;
border-radius: 18px;
word-wrap: break-word;
font-size: 15px;
line-height: 1.5;
}
.user-message .message-content {
background-color: #e9e9e980;
color: black;
border-bottom-right-radius: 2px;
}
.dark-mood
.user-message .message-content {
background-color: #323232d9;
color: white;
border-bottom-right-radius: 2px;
}
.assistant-message .message-content {
color: black;
border-bottom-left-radius: 2px;
}
.dark-mood .assistant-message .message-content {
color: white;
}
.dark-mood .loading-chat-history {
color: white;
}
.message-content pre {
background-color: #2d2d2d;
color: #f8f8f2;
padding: 10px;
border-radius: 8px;
overflow-x: auto;
}
.message-content code {
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
font-size: 14px;
}
.message-content p {
margin-bottom: 10px;
}
.message-content p:last-child {
margin-bottom: 0;
}
.chat-input-wrapper {
display: flex;
align-items: center;
padding: 10px;
border-top: 0;
background-color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
#message-input {
flex-grow: 1;
border: none;
padding: 10px 15px;
font-size: 16px;
resize: none;
border-radius: 25px;
overflow: hidden;
min-height: 40px; /* Ensure input is visible */
}
#message-input:focus {
outline: none;
box-shadow: none;
}
.send-btn {
background-color: #007bff;
color: #fff;
border: none;
/* border-radius: 50%; */
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
margin-left: 10px;
transition: background-color 0.3s ease;
}
.send-btn:hover {
background-color: #0056b3;
}
/* Typing indicator (re-adding if lost) */
.typing-indicator {
color: #6c757d;
font-style: italic;
padding: 1.5rem;
}
/* Markdown styles (re-adding if lost) */
.markdown-content ul, .markdown-content ol {
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.markdown-content li {
margin-bottom: 0.5rem;
}
.markdown-content table {
border-collapse: collapse;
margin-bottom: 1rem;
width: 100%;
}
.markdown-content th, .markdown-content td {
border: 1px solid #dee2e6;
padding: 0.75rem;
}
.markdown-content blockquote {
border-left: 4px solid #e9ecef;
margin: 1rem 0;
padding-left: 1rem;
color: #6c757d;
}
/* Add styles for loading threads */
.loading-threads {
padding: 1rem;
text-align: center;
color: #6c757d;
}
.loading-threads .spinner-border {
width: 1rem;
height: 1rem;
border-width: 0.15em;
}
.dropdown-menu .modal-close {
padding: 13px 0px;
}
.chat-right {
margin-left: 260px;
padding-bottom: 80px;
transition: margin-left 0.3s ease;
}
.main-content .sidebar.collapsed ~ .chat-right {
margin-left: 80px;
}
.chat-top {
padding: 27px 32px;
/* border-bottom: 1px solid rgba(34, 34, 34, 0.08); */
}
.chat-bottom {
padding: 24px 32px;
background-color: #fff;
border-top: 0;
position: relative;
z-index: 100;
}
.sidebar.collapsed .thread-title {
opacity: 0;
max-width: 0;
overflow: hidden;
}
.chat-right {
margin-left: 260px;
transition: margin-left 0.3s ease;
}
.chat-top {
position: sticky;
top: 0;
background-color: #f7f2f3;
z-index: 10;
}
.dark-mood .chat-top {
background-color: transparent;
}
.chat-bottom {
position: sticky;
bottom: 0;
background-color: #f7f2f3;
z-index: 10;
}
.main-content .sidebar.collapsed ~ .chat-right .chat-top,
.main-content .sidebar.collapsed ~ .chat-right .chat-bottom {
padding-left: 32px;
padding-right: 32px;
}
.main-content .sidebar.collapsed ~ .chat-right .chat-top #messages {
padding-left: 32px;
padding-right: 32px;
}
.message-row {
display: flex;
margin-bottom: 20px;
}
@media(max-width:767px) {
.sidebar {
left: -260px;
transition: left 0.3s ease;
}
.head-logo {
padding: 20px;
}
.setting {
padding: 20px 0;
}
.setting img {
width: 20px;
display: none;
}
.setting-icon {
width: 40px;
height: 40px;
}
.setting-img {
width: 20px;
}
.menu-nav-icon {
display: block;
position: fixed;
left: 20px;
top: 20px;
z-index: 101;
}
.chat-right {
margin-left: 0;
width: 100%;
padding-top: 0;
transition: margin-left 0.3s ease;
}
.chat-top,
.chat-bottom {
padding-left: 20px;
padding-right: 20px;
}
.chat-bottom-inner form .form-control {
padding: 10px 15px;
font-size: 14px;
}
.chat-input-container {
padding: 15px 20px;
}
.dropdown-menu {
padding: 15px;
}
.dropdown-menu li {
margin-bottom: 8px;
}
.dropdown-menu li:first-child {
margin-bottom: 0;
}
.dropdown-menu li:last-child {
margin-bottom: 0;
}
.dropdown-menu .modal-close {
padding: 10px 0;
}
body.active {
overflow: hidden;
}
body.active .sidebar {
left: 0;
}
body.active .chat-right {
margin-left: 260px;
}
.changlog-inner {
padding: 20px;
}
.changlog-sec {
padding: 20px;
}
.changlog-box {
padding: 15px;
}
.changlog-right {
margin-left: 0;
margin-top: 20px;
width: 100%;
}
}
/* Add these styles in the head section or your CSS file */
.mobile-menu-btn {
/* position: fixed; */
/* top: 15px; */
/* left: 15px; */
z-index: 1000;
background: transparent;
border: none;
font-size: 24px;
color: var(--text-color);
cursor: pointer;
display: none;
}
.close-sidebar {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: var(--text-color);
font-size: 20px;
cursor: pointer;
display: none;
}
@media (max-width: 767px) {
.mobile-menu-btn {
display: block;
}
.close-sidebar {
display: block;
}
.sidebar {
position: fixed;
background-color: white;
padding: 0;
left: -280px;
top: 0;
height: 100vh;
width: 280px;
z-index: 1001;
transition: left 0.3s ease;
/* background: var(--bg-color); */
}
.sidebar.active {
left: 0;
}
.overly {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.overly.active {
display: block;
}
.main-content {
margin-left: 0 !important;
}
}
/* Add these styles to your existing CSS */
.welcome-container {
max-width: 800px;
margin: 0 auto;
}
.avatar-container {
width: 80px;
height: 80px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--bs-primary-bg-subtle);
}
.dark-mood .avatar-container {
background-color: transparent !important;
}
.prompt-btn {
transition: all 0.2s ease;
border-color: var(--bs-border-color);
}
.prompt-btn:hover {
color: var(--bs-btn-hover-bg);
background-color: var(--bs-primary-bg-subtle);
border-color: var(--bs-primary);
transform: translateY(-1px);
}
.footer-note {
opacity: 0.8;
}
/* Dark mode support */
[data-bs-theme="dark"] .avatar-container {
background-color: var(--bs-dark);
}
.dark-mood .prompt-btn {
color: var(--bs-light);
border-color: var(--bs-border-color);
}
.dark-mood .prompt-btn:hover {
background-color: var(--bs-dark);
border-color: var(--bs-primary);
}
/* Thread dropdown menu styles */
.thread-actions {
position: relative;
display: none;
margin-left: auto;
}
.thread-item:hover .thread-actions {
display: block;
}
.thread-menu-btn {
padding: 4px;
background: none;
border: none;
color: #666;
cursor: pointer;
}
.thread-menu-btn:hover {
color: #333;
}
.thread-dropdown-menu {
position: absolute;
right: 0;
top: 100%;
background: white;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: none;
z-index: 1000;
min-width: 150px;
}
.thread-dropdown-menu.show {
display: block;
}
.thread-dropdown-menu .dropdown-item {
padding: 8px 16px;
display: flex;
align-items: center;
gap: 8px;
color: #333;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
}
.thread-dropdown-menu .dropdown-item:hover {
background-color: #f5f5f5;
}
.thread-dropdown-menu .dropdown-item.text-danger {
color: #dc3545;
}
.thread-dropdown-menu .dropdown-item.text-danger:hover {
background-color: #fff5f5;
}
.thread-title-input {
width: 100%;
padding: 4px 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: inherit;
background: white;
color: inherit;
}
.thread-title-input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
.dark-mood .thread-dropdown-menu {
background: #2B2B2B;
border-color: rgba(255, 255, 255, 0.1);
}
.dark-mood .thread-dropdown-menu .dropdown-item {
color: #fff;
}
.dark-mood .thread-dropdown-menu .dropdown-item:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.dark-mood .thread-title-input {
background: #2B2B2B;
border-color: rgba(255, 255, 255, 0.1);
color: #fff;
}
.dark-mood .thread-title-input:focus {
border-color: #0d6efd;
box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}
/* Mobile styles */
@media (max-width: 767px) {
.thread-dropdown-menu {
position: fixed;
right: 1rem;
left: 1rem;
width: auto;
}
}
/* Search container styles */
.search-container {
position: relative;
width: 100%;
}
.search-container .input-group {
background-color: var(--bs-body-bg);
border-radius: 8px;
overflow: hidden;
}
.search-container .form-control {
border: 1px solid var(--bs-border-color);
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
.search-container .form-control:focus {
border-color: var(--bs-primary);
box-shadow: none;
}
.search-container .btn-outline-secondary {
border-color: var(--bs-border-color);
color: var(--bs-body-color);
}
.search-container .btn-outline-secondary:hover {
background-color: var(--bs-gray-200);
border-color: var(--bs-gray-300);
color: var(--bs-body-color);
}
/* Loading indicator styles */
.loading-indicator {
padding: 1rem;
text-align: center;
}