@font-face {
  font-family: 'Venzia Sans';
  src: url('../fonts/venziaSans/VenziaSans-BoldItalic.eot');
  src: url('../fonts/venziaSans/VenziaSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/venziaSans/VenziaSans-BoldItalic.woff2') format('woff2'),
      url('../fonts/venziaSans/VenziaSans-BoldItalic.woff') format('woff'),
      url('../fonts/venziaSans/VenziaSans-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Venzia Sans';
  src: url('../fonts/venziaSans/VenziaSans-Bold.eot');
  src: url('../fonts/venziaSans/VenziaSans-Bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/venziaSans/VenziaSans-Bold.woff2') format('woff2'),
      url('../fonts/venziaSans/VenziaSans-Bold.woff') format('woff'),
      url('../fonts/venziaSans/VenziaSans-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Venzia Sans';
  src: url('../fonts/venziaSans/VenziaSans-ExtraLight.eot');
  src: url('../fonts/venziaSans/VenziaSans-ExtraLight.eot?#iefix') format('embedded-opentype'),
      url('../fonts/venziaSans/VenziaSans-ExtraLight.woff2') format('woff2'),
      url('../fonts/venziaSans/VenziaSans-ExtraLight.woff') format('woff'),
      url('../fonts/venziaSans/VenziaSans-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Venzia Sans';
  src: url('../fonts/venziaSans/VenziaSans-ExtraLightItalic.eot');
  src: url('../fonts/venziaSans/VenziaSans-ExtraLightItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/venziaSans/VenziaSans-ExtraLightItalic.woff2') format('woff2'),
      url('../fonts/venziaSans/VenziaSans-ExtraLightItalic.woff') format('woff'),
      url('../fonts/venziaSans/VenziaSans-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Venzia Sans';
  src: url('../fonts/venziaSans/VenziaSans-Italic.eot');
  src: url('../fonts/venziaSans/VenziaSans-Italic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/venziaSans/VenziaSans-Italic.woff2') format('woff2'),
      url('../fonts/venziaSans/VenziaSans-Italic.woff') format('woff'),
      url('../fonts/venziaSans/VenziaSans-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Venzia Sans';
  src: url('../fonts/venziaSans/VenziaSans-Light.eot');
  src: url('../fonts/venziaSans/VenziaSans-Light.eot?#iefix') format('embedded-opentype'),
      url('../fonts/venziaSans/VenziaSans-Light.woff2') format('woff2'),
      url('../fonts/venziaSans/VenziaSans-Light.woff') format('woff'),
      url('../fonts/venziaSans/VenziaSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Venzia Sans';
  src: url('../fonts/venziaSans/VenziaSans-LightItalic.eot');
  src: url('../fonts/venziaSans/VenziaSans-LightItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/venziaSans/VenziaSans-LightItalic.woff2') format('woff2'),
      url('../fonts/venziaSans/VenziaSans-LightItalic.woff') format('woff'),
      url('../fonts/venziaSans/VenziaSans-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Venzia Sans';
  src: url('../fonts/venziaSans/VenziaSans-Medium.eot');
  src: url('../fonts/venziaSans/VenziaSans-Medium.eot?#iefix') format('embedded-opentype'),
      url('../fonts/venziaSans/VenziaSans-Medium.woff2') format('woff2'),
      url('../fonts/venziaSans/VenziaSans-Medium.woff') format('woff'),
      url('../fonts/venziaSans/VenziaSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Venzia Sans';
  src: url('../fonts/venziaSans/VenziaSans-MediumItalic.eot');
  src: url('../fonts/venziaSans/VenziaSans-MediumItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/venziaSans/VenziaSans-MediumItalic.woff2') format('woff2'),
      url('../fonts/venziaSans/VenziaSans-MediumItalic.woff') format('woff'),
      url('../fonts/venziaSans/VenziaSans-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Venzia Sans';
  src: url('../fonts/venziaSans/VenziaSans-SemiBold.eot');
  src: url('../fonts/venziaSans/VenziaSans-SemiBold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/venziaSans/VenziaSans-SemiBold.woff2') format('woff2'),
      url('../fonts/venziaSans/VenziaSans-SemiBold.woff') format('woff'),
      url('../fonts/venziaSans/VenziaSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Venzia Sans';
  src: url('../fonts/VenziaSans-Thin.eot');
  src: url('../fonts/VenziaSans-Thin.eot?#iefix') format('embedded-opentype'),
      url('../fonts/VenziaSans-Thin.woff2') format('woff2'),
      url('../fonts/VenziaSans-Thin.woff') format('woff'),
      url('../fonts/VenziaSans-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Venzia Sans';
  src: url('../fonts/venziaSans/VenziaSans-Regular.eot');
  src: url('../fonts/venziaSans/VenziaSans-Regular.eot?#iefix') format('embedded-opentype'),
      url('../fonts/venziaSans/VenziaSans-Regular.woff2') format('woff2'),
      url('../fonts/venziaSans/VenziaSans-Regular.woff') format('woff'),
      url('../fonts/venziaSans/VenziaSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Venzia Sans';
  src: url('../fonts/venziaSans/VenziaSans-SemiBoldItalic.eot');
  src: url('../fonts/venziaSans/VenziaSans-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
      url('..fonts/venziaSans/VenziaSans-SemiBoldItalic.woff2') format('woff2'),
      url('../fonts/venziaSans/VenziaSans-SemiBoldItalic.woff') format('woff'),
      url('../fonts/venziaSans/VenziaSans-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Venzia Sans';
  src: url('../fonts/venziaSans/VenziaSans-ThinItalic.eot');
  src: url('../fonts/venziaSans/VenziaSans-ThinItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/venziaSans/VenziaSans-ThinItalic.woff2') format('woff2'),
      url('../fonts/venziaSans/VenziaSans-ThinItalic.woff') format('woff'),
      url('../fonts/venziaSans/VenziaSans-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

/**********Armin Grotesk***********/
@font-face {
  font-family: 'Armin Grotesk';
  src: url('../fonts/armin-grotesk/ArminGrotesk-UltraBold.woff2') format('woff2'),
      url('../fonts/armin-grotesk/ArminGrotesk-UltraBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Armin Grotesk';
  src: url('../fonts/armin-grotesk/ArminGrotesk-UltraBold.woff2') format('woff2'),
      url('../fonts/armin-grotesk/ArminGrotesk-UltraBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Armin Grotesk';
  src: url('../fonts/armin-grotesk/ArminGrotesk-UltraBold.woff2') format('woff2'),
      url('../fonts/armin-grotesk/ArminGrotesk-UltraBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Armin Grotesk';
  src: url('../fonts/armin-grotesk/ArminGrotesk-UltraBoldItalic.woff2') format('woff2'),
      url('../fonts/armin-grotesk/ArminGrotesk-UltraBoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Armin Grotesk';
  src: url('../fonts/armin-grotesk/ArminGrotesk-UltraBoldItalic.woff2') format('woff2'),
      url('../fonts/armin-grotesk/ArminGrotesk-UltraBoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Armin Grotesk';
  src: url('../fonts/armin-grotesk/ArminGrotesk-UltraBoldItalic.woff2') format('woff2'),
      url('../fonts/armin-grotesk/ArminGrotesk-UltraBoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Armin Grotesk';
  src: url('../fonts/armin-grotesk/ArminGrotesk-UltraLight.woff2') format('woff2'),
      url('../fonts/armin-grotesk/ArminGrotesk-UltraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Armin Grotesk';
  src: url('../fonts/armin-grotesk/ArminGrotesk-UltraLight.woff2') format('woff2'),
      url('../fonts/armin-grotesk/ArminGrotesk-UltraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Armin Grotesk';
  src: url('../fonts/armin-grotesk/ArminGrotesk-UltraLightItalic.woff2') format('woff2'),
      url('../fonts/armin-grotesk/ArminGrotesk-UltraLightItalic.woff') format('woff');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Armin Grotesk';
  src: url('../fonts/armin-grotesk/ArminGrotesk-UltraLightItalic.woff2') format('woff2'),
      url('../fonts/armin-grotesk/ArminGrotesk-UltraLightItalic.woff') format('woff');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Armin Grotesk';
  src: url('../fonts/armin-grotesk/ArminGrotesk-UltraLightItalic.woff2') format('woff2'),
      url('../fonts/armin-grotesk/ArminGrotesk-UltraLightItalic.woff') format('woff');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Armin Grotesk';
  src: url('../fonts/armin-grotesk/ArminGrotesk-UltraLight.woff2') format('woff2'),
      url('../fonts/armin-grotesk/ArminGrotesk-UltraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}


/*===================== Common CSS =====================*/
html, body {
  font-family: 'Venzia Sans' !important;
  margin: 0;
  padding: 0;
  /* overflow-x: hidden; */
}
p, input, textarea{
  font-family: 'Armin Grotesk' !important;
}
a{
  text-decoration: none !important;
}
.page_inner_wrapper{
  /* height: 100vh; */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  max-width:600px;
  margin: 0 auto;
  text-align: center;
}
.search-mode-on .sidebar-outer .search-main{
  height: auto;
}
/***************Mobile Menu*****************/
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.mobile-navbar .menu-icon {
/* width: 30px;
height: 25px; */
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
position: relative;
/* z-index: 1200;
margin-right: 20px; */
}
.menu-icon>i{
  color: #9E9DA7;
  font-size: 30px;
}
/* .menu-icon span {
display: block;
height: 3px;
background: #fff;
border-radius: 2px;
transition: 0.4s;
} */
.menu-icon.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.menu-icon.active span:nth-child(2) {
opacity: 0;
}
.menu-icon.active span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}

.side-menu ul {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
.side-menu ul li {
padding: 15px 0;
margin: 5px;
border-radius: 8px;
transition: opacity 0.5s ease;
}
.side-menu ul li:hover{
background: #45434F;
}
.side-menu ul li:hover img{
filter: brightness(0) saturate(100%) invert(93%) sepia(4%) saturate(189%) hue-rotate(211deg) brightness(92%) contrast(92%);
}
/* .side-menu ul li a {
text-decoration: none;
color: #716E7D;
font-size: 25px;
}
.side-menu ul li:hover a{
color: #fff;
} */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease;
z-index: 1000;
}
.side-menu.active {
left: 0;
}
.overlay.active {
opacity: 1;
visibility: visible;
}
/* .mobile-menu-list li img{
width: 25px;
} */


#sidebar .common-list li a .text{
margin-left: 6px;
position: absolute;
white-space: nowrap;
opacity: 0;
max-width: 0;
transform: translateX(4px);
pointer-events: none;
transition: opacity .2s ease, max-width .2s ease, transform .2s ease;
}

#sidebar.expanded .common-list li a .text {
opacity: 1;
max-width: 100%;
pointer-events: auto;
transform: none;
}
/* #sidebar:not(.expanded) .common-list li a:hover .text {
left: calc(100% + 8px);
top: 50%;
transform: translateY(-50%);
background: #2c2b32;
color: #fff;
padding: 6px 10px;
border-radius: 6px;
box-shadow: 0 8px 18px rgba(0,0,0,.25);
opacity: 1;
max-width: none;
pointer-events: none;
z-index: 99999; 
} */

#sidebar:not(.expanded) .common-list li a:hover .text::after {
content: "";
position: absolute;
left: -6px; top: 50%;
transform: translateY(-50%);
border-width: 6px;
border-style: solid;
border-color: transparent #2c2b32 transparent transparent;
}

.mobile-navbar{
  display: none !important;
}
/*****************Mobile Menu End********************/

.guest-mode #top-nav{
display: none;
}
.guest-mode .wrap_outer{
display: flex;
justify-content: center;
align-items: center;
/* height: 100vh; */
width: 100%;
}
.right-side.guest-mode{
margin-left: 0;
}
.mobile-user-profile>ul{
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
/* .mobile-user-profile .user_edit_profile>a,
.header-list .user_edit_profile>a{
  color: #7466A2;
  border: 1px solid #7466A2;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  width: 35px;
  height: 35px;
} */
.mobile-user-profile>.user_edit_profile>a:hover{
color: #fff;
background-color: #7466A2;
}
.header-list .header-profile-img{
  display: flex;
  align-items: center;
}
.header-list .header-profile-img img,
.mobile-user-profile .header-profile-img img{
  max-width: 40px;
  max-height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #7466A2;
  padding: 1px;
  min-height: 40px;
}
.formstyle .Profile.Picture>img{
  max-width: 70px;
  max-height: 70px;
  object-fit: cover;
  margin-right: 10px;
}
/* .header-list .user_edit_profile img,
.mobile-user-profile .user_edit_profile img{
  width: 35px;
  height: 35px;
  object-fit:contain;
  padding: 5px;
} */
.sidebar .top-list .plus-sign,
.mobile-sidebar-content .top-list .plus-sign{
  color: #fff;
  background: #7466A2;
  width: 45px;
  height: 45px;
  text-decoration: none;
  border-radius: 100px;
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}
.sidebar.expanded .top-list .plus-sign,
.sidebar.expanded .common-list li,
.mobile-sidebar-content .top-list .plus-sign{
  width: auto;
  text-align: left;
}

.sidebar .common-list li,
.mobile-sidebar-content .common-list li{
  border-radius: 10px;
  margin: 10px 8px;
  cursor: pointer;
  padding: 13px 10px 10px;
  background-color: #26252C;
  width: 45px;
  height: 45px;
  text-decoration: none;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;

}
.common-list li>a{
  color: #DAD9DD;
  width: 100%;
  display: inline-block;
  font-size: 12px;
  transition: transform 0.3s ease, color 0.3s ease;
}
.common-list li:hover a{
  transform: scale(1.1);
}
.sidebar.expanded .common-list li:hover a,
.side-menu.active .common-list li:hover a{
  transform: none;
}
.common-list li.active,
.common-list li:hover{
  background-color: #45434F;
}
.sidebar{
  position: fixed;
  top: 0;
  width:62px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 100, 100, .6) transparent;
  height: 100vh;
  padding:20px 0;
  transition: width 0.3s ease;
  left: 0;
  z-index: 1;
}
/* .sidebar li .text {
display: none;
transition: opacity 0.3s ease;
color: #B7B5BD;
margin-left: 10px;
} */
.sidebar.expanded {
  width: 220px;
}
.sidebar.expanded li .text{
display: inline-block;
}
.toggle-btn {
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  color:#716E7D;
  position: fixed;
  bottom: 35px;
  line-height: 26px;
  font-size: 16px;
  padding: 8px 15px;
  border-radius: 50px;
  /* background: #E5E5E8; */
  margin: 10px 8px;
  display: flex;
  align-items: center;
  width: 40px;
  height: 40px;
  text-align: center;
  justify-content: center;
}
.toggle-btn:hover{
  background-color: #45434F;
  color: #DAD9DD;
}
.toggle-btn.rotate i {
transform: rotate(180deg);
}
.sidebar-logo{
  margin: 0px 8px 50px;
}
.chat-container .message-text-response .nav-tabs{
border-color: #201F25;
border-width: 2px;
}
.chat-container .message-text-response .nav-tabs .nav-link{
padding: 15px 0px;
background: transparent;
border: 0;
color:#716E7D;
margin-right: 30px;
font-weight: 500;
}
.chat-container .message-text-response .nav-tabs .nav-link.active{
border-bottom: 2px solid #7466A2;
color: #B7B5BD;
}
.dark-mode .chatbox-container .zyruh-response-search-results .zyruh-response-search-item{
background-color: #26252C;
border: 1px solid #201F25;
}
.light-mode .chatbox-container .zyruh-response-search-results .zyruh-response-search-item{
border-image-source: linear-gradient(180deg, #E0DEEB 0%, #8D82B5 100%); 
background-color: #F1F0F2;
border: 1px solid;
}
.chatbox-container .zyruh-response-search-results .zyruh-response-search-item{
padding:15px 0;
border-radius: 8px;
margin-bottom: 15px;
transition: all 250ms ease;
}
.chatbox-container .zyruh-response-search-results .zyruh-response-search-item:hover{
background-color: transparent;
}
.dark-mode .chatbox-container .zyruh-response-search-results .zyruh-response-search-item .zyruh_the_source_img{
border: 1px solid #716E7D;
}
.light-mode .chatbox-container .zyruh-response-search-results .zyruh-response-search-item .zyruh_the_source_img{
border: 1px solid #F9F9FA;
}
.chatbox-container .zyruh-response-search-results .zyruh-response-search-item .zyruh_the_source_img{
border-radius: 100px;
width: 65px;
object-fit: contain;
height: 65px;
margin: 0 15px;
}
.dark-mode .chatbox-container .zyruh-response-search-results .zyruh-response-search-item-inner .zyruh_the_source_domain{
color: #fff;
}
.light-mode .chatbox-container .zyruh-response-search-results .zyruh-response-search-item-inner .zyruh_the_source_domain{
color: #35343E;
}
.chatbox-container .zyruh-response-search-results .zyruh-response-search-item-inner .zyruh_the_source_domain{
display: inline;
font-size: 16px;
}
.chatbox-container .zyruh-response-search-results .zyruh-response-search-item-inner>a{
padding-bottom: 15px;
display: flex;
}
.chatbox-container .zyruh-response-search-results .zyruh_domain_date_main{
display: flex;
flex-direction: column;
justify-content: center;
}
.chatbox-container .zyruh-response-search-results .zyruh_domain_date_main .zyruh_the_source_date{
font-size: 12px;
font-weight: 700;
margin-top: 5px;
}
.dark-mode .chatbox-container .zyruh-response-search-results .zyruh_domain_date_main .zyruh_the_source_date{
color: #DAD9DD;
}
.light-mode .chatbox-container .zyruh-response-search-results .zyruh_domain_date_main .zyruh_the_source_date{
color: #7F7D8B;
}
.dark-mode .chatbox-container .zyruh-response-search-results .zyruh-response-search-item-inner>a{
border-bottom: 1px solid #45434F;
}
.light-mode .chatbox-container .zyruh-response-search-results .zyruh-response-search-item-inner>a{
border-bottom: 1px solid #E5E5E8;
}
.chatbox-container .zyruh-response-search-results .zyruh_the_source_meta{
padding: 15px 15px 0;
}
.dark-mode .chatbox-container .zyruh-response-search-results .zyruh_the_source_meta>a{
color: #fff;
}
.light-mode .chatbox-container .zyruh-response-search-results .zyruh_the_source_meta>a,
.light-mode .chatbox-container .zyruh-response-search-results .zyruh_the_source_meta>p{
color: #35343E;
}
.dark-mode .chatbox-container .zyruh-response-search-results .zyruh_the_source_meta>p{
color: #DAD9DD;
}
.zyruh-response-search-results .zyruh_the_source_meta>p{
font-size: 14px;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
margin-bottom: 0;
}
.dark-mode .chatbox-container .zyruh-response-search-results .zyruh_the_source_url{
background-color: #45434F;
color: #B7B5BD;
}
.light-mode .chatbox-container .zyruh-response-search-results .zyruh_the_source_url{
background-color: #F1F0F2;
color: #5F5C6C;
}
.chatbox-container .zyruh-response-search-results .zyruh_the_source_url{
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chatbox-container .zyruh-response-search-results .zyruh_the_source_url>i{
margin-right: 5px;
}
/* .search-mode-on .page_inner_wrapper{
display: flex;
flex-direction: column;
height: 100vh;
position: relative;
width: 100%;
} */
.search-mode-on .searchform{
  right: 0px;
  position: fixed !important;
  bottom: 0px;
  left: 0;
  width: 100%;
  margin: 0px auto;
  max-width:605px;
  background: linear-gradient(0deg, #1B1A1F 34.87%, rgba(27, 26, 31, 0) 100%);
  /* padding:10px 0 20px; */
  padding:10px 0 0px;
  border: 0;
  left: 0px;
}

.search-mode-on .searchform input[type="text"]{
  height: 130px;
}
/* .search-mode-on  .searchform button{
  bottom:70px;
} */
/* .dark-mode .chat-container .message-text-response .nav-tabs .nav-link::before{
content: '';
} */


/***************Citation Popup*********************/
#citation-popover{
  background: #F1F0F2;
  box-shadow: 0px 20px 45px 0px #6565651A;
  border-radius: 8px;
  padding: 10px 0;
  animation: fadeIn 0.2s ease-out;
  min-width: 370px;
  max-width: 370px;

}
#citation-popover .citation-popup-title{
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E8;
  padding: 0 10px 8px;
  font-size: 14px;
}
#citation-popover .citation-popup-title>h3{
  font-weight: 500;
  color: #35343E;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 0;
}
#citation-popover .citation-popup-content>h2,
#citation-popover .multi-citation-list-content>span{
  color: #35343E;
  font-size: 12px;
  line-height: 14px;
}
#citation-popover .citation-popup-content{
  padding: 12px 12px 0;
}
#citation-popover .citation-popup-title>img,
#citation-popover .multi-citation-list>img{
  width: 25px;
  height: 25px;
  border: 1px solid #F9F9FA;
  margin-right: 10px;
  border-radius: 50px;
  object-fit: contain;
}
#citation-popover .citation-popup-content>a,
#citation-popover .multi-citation-list-content>a{
  background: #F9F9FA;
  padding:1px 6px;
  border-radius: 8px;
  color: #5F5C6C;
  font-size: 12px;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 304px;
  display: inline-block;
}
#citation-popover .citation-popup-content span{
  font-weight: 500;
  margin-right: 10px;
}
#citation-popover .multi-citation-list{
  padding: 3px 12px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E8;
}
.citation-link.citation-group,
.citation-link {
  font-size: 11px;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  margin: 0 5px;
  top: 0px;
  line-height: 21px;
  background-color: #26252C;
  padding: 5px 5px 3px;
  border-radius: 4px;
}
.citation-link:hover,
.citation-link.citation-group:hover  {
  background-color: #45434F;
}














@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#citation-popover a:hover {
    text-decoration: underline;
}

/* Ensure popovers appear above other content */
#citation-popover {
    z-index: 10000 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #citation-popover {
        max-width: 90vw;
        font-size: 12px;
    }
    
    .citation-link {
        font-size: 0.7em;
    }
}

/* Citation list in Overview tab */
.zyruh-citations-list {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.citation-item {
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.citation-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    text-align: center;
    border-radius: 50%;
    background-color: #f0f0f0;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    flex-shrink: 0;
}

.citation-title {
    font-size: 13px;
    color: #1a73e8;
    text-decoration: none;
    line-height: 1.4;
}

.citation-item a {
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.citation-item a:hover .citation-title {
    text-decoration: underline;
}
/* ========== Citation Popup CSS End ===========  */

.zyruh-response-image-item img{
  /* border: 1px solid #201F25; */
  max-width: 100%;
  margin-bottom: 10px;
  /* padding: 6px;
  max-height: 150px;
  min-height: 150px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 10px;
  background-color: #26252C; */
}
.tooltip-plus .tooltip-inner {
  background-color: #F9F9FA;  
  color: #7466A2;
  font-weight: bold;
  padding:8px 12px;
  border-radius: 8px;
  font-size: 11px;
}

.tooltip-plus .tooltip-arrow::before {
  border-right-color: #F9F9FA !important;
}
.sidebar.expanded .tooltip-inner,
.side-menu.active .tooltip-inner{
  display: none !important;
}
.sidebar .sidebar-bottom-list,
.sidebar-outer .right-side .side-menu .sidebar-bottom-list{
  list-style: none;
  padding: 0;
  display: none;
  position: fixed;
  bottom: 0;
  margin: 10px 8px;
}
.sidebar.expanded .sidebar-bottom-list,
.sidebar-outer .right-side .side-menu.active .sidebar-bottom-list{
  display: flex;
}
.sidebar.expanded .sidebar-bottom-list>li,
.sidebar-outer .right-side .side-menu .sidebar-bottom-list li{
  border-radius: 4px;
  padding: 2px 6px;
  margin-right: 2px;
  transition: transform 0.3s ease;
}
.sidebar.expanded .sidebar-bottom-list>li:hover{
  background-color: #45434F;
}
.sidebar.expanded .sidebar-bottom-list>li>a,
.sidebar-outer .right-side .side-menu .sidebar-bottom-list li>a{
  color: #DAD9DD;
  font-size: 11px;
}
.side-menu .sidebar{
  display: none;
}
.suggestion-box{
  position: fixed;
  right: 0;
  bottom: 100px;
  background-color: #7466A2;
  width: 60px;
  height: 50px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s ease-in-out;
  overflow: hidden;
  white-space: nowrap;
}
.suggestion-box span{
  display: none;
}
.suggestion-box:hover span{
  display: block;
}
.suggestion-box:hover a{
  font-size: 14px;
}
.suggestion-box:hover {
  width: auto;     
}      
.suggestion-box>a{
  color: #fff;
  font-size: 20px;
  line-height: 30px;
  display: flex;
  align-items: center;
  padding: 10px 15px;
}
.suggestion-box>a>i{
  margin-right: 5px;
}
.header-list li>a,
.mobile-user-profile li.logout_user_btn>a{
  color: #e0deebc2;
  font-size: 16px;
  line-height: 26px;
  height: 40px;
  display: flex;
  align-items: center;
}
.header-list li>a:hover,
.mobile-user-profile li.logout_user_btn>a:hover{
  color: #7466A2;
}
.right-nav .header-list li,
.mobile-user-profile ul>li{
  margin-left: 20px;
}
/* ====== Popup Design ======*/
#suggestionModal .modal-content{
  background-color: #F1F0F2;
  color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
#suggestionModal .modal-content .modal-title{
  font-size: 20px;
  font-weight: 600;
  color: #35343E;
}
#suggestionModal .modal-content .btn-close{
  box-shadow: none;
}
#suggestionModal #suggestion-form button.btn{
  background: linear-gradient(0deg, #8D82B5, #8D82B5), linear-gradient(180deg, #7466A2 0%, #8D82B5 100%);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
  color: #EFEFEF;
  border: none;
}
#suggestionModal #suggestion-form label{
  color: #35343E;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 10px;
}
#suggestionModal #suggestion-form textarea{
  background-color:transparent;
  width: 100%;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid #ccc;
  font-size: 14px;
  box-shadow: none;
}
#suggestionModal #suggestion-form textarea:focus{
  border-color: #7466A2;
}
/* ======  End Popup Design ======= */














.side-menu .close-btn{
  display: none;
}
.body-logo{
  text-align: center;
}
.body-logo img{
  max-width: 150px;
}
.sidebar-outer .search-main{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.page-header .body-logo.mobile-screen-logo{
  display: none;
}
.wrap_outer .edit_profile_page{
  margin: 120px 0;
}
.formstyle .profile-image{
    display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
}
.formstyle .profile-image>img{
  width: 80px;
  height: 50px;
  object-fit: contain;
  margin-right: 10px;
  background: rgba(255, 255, 255, 0.1);
  padding: 10px;
  border-radius: 8px;
}






/****************************************Custom-CSS******************************************/


/* ====    Mobile Sidebar Desktop         ====*/

.sidebar-outer .right-side .side-menu{
  display: none;
}
.mobile-sidebar-content .common-list li{
  width: auto;
  text-align: left;
}
 .mobile-sidebar-content .common-list li{
  margin: 5px 0;
}
.mobile-sidebar-content .common-list li a .text {
  margin-left: 6px;
}
.mobile-sidebar-content>.sidebar-logo{
  margin: 0 0 40px;
}

/* ==== Mobile Sidebar Desktop End ====*/
















/* =====  Privaccy-Page (Content Pages) ====== */
.wrap_outer .page-inner-section{
  padding: 25px;
  margin: 60px 0;
  background: #8d82b51c;
  backdrop-filter: blur(10px);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 6%);
}
.page-inner-section h1.page-title{
  color: #fff;
  font-size: 32px;
  line-height: 40px;
  margin-bottom: 30px;
}
.page-inner-section .page-content>h3{
  color: #DAD9DD;
  font-size: 25px;
  line-height: 35px;

}
.page-inner-section .page-content>p,
.page-inner-section .page-content>ul>li{
  color: #DAD9DD;
  font-size: 16px;
  line-height: 26px;
}
.page-inner-section .page-content>ul>li{
  padding: 3px 0 3px 30px;
  position: relative;
  display: flex;
  align-items: center;
}
.page-inner-section .page-content>ul{
  padding-left: 0;
  list-style: none;
}
.page-inner-section .page-content>ul>li::before{
  content: "\f046";
  position: absolute;
  left: 0;
  color: #7466A2;
  font: normal normal normal 14px / 1 FontAwesome;
  font-size: 20px;
}
.page-inner-section .page-content a{
  color: #fff;
  font-weight: 500;
  padding: 0 4px;
}
.page-inner-section strong{
  color: #fff;
}

/* ===========  End Content Pages ==============  */



/* base.html css starts */
/* Sidebar styling */



.sidebar-section {
margin-bottom: 20px;
}

.sidebar-section h4 {
font-size: 14px;
color: #888;
margin-bottom: 10px;
text-transform: uppercase;
}

.sidebar-list {
list-style-type: none;
padding-left: 0;
margin: 0;
}

.sidebar-item {
font-size: 16px;
padding: 8px 0;
}

/* Styling for links inside sidebar items */
.sidebar-item a {
color: #333;
text-decoration: none;
display: block;
transition: color 0.3s;
}

.sidebar-item a:hover {
color: #007bff; /* Change color on hover */
}

/* Active link styling */
.sidebar-item a.active {
color: #007bff;
font-weight: bold;
}

/* Optional scrollbar styling for a nicer look */
.sidebar::-webkit-scrollbar {
width: 6px;
}

.sidebar::-webkit-scrollbar-track {
background: #f1f1f1;
}

.sidebar::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
background: #555;
}

.navbar-expand-lg .navbar-collapse {
justify-content: flex-end;
}

.logo {
  margin-bottom: 20px;
}
.logo img {
  max-width: 80px;
}
.main-chat{
  display: block;
}
.light-mode .left-side{
background-color: #E5E5E8;
}

.formstyle .card {
  max-width: 500px;
  width: 100%;
  box-shadow: 0 4px 16px rgb(0 0 0 / 6%);
  color: #fff;
  text-align: center;
  background:#8d82b51c;
  backdrop-filter: blur(10px);
  border-radius: 15px;
  border: 1px solid #8d82b54d;
  display: flex;
  justify-content: center;
  margin: 30px 0;
}
.formstyle .card-header {
color: #E0DEEB;
text-align: center;
padding: 15px;
font-size: 48px;
line-height: 58px;
font-weight: 400;
border-color: #2F2D36;
}
.formstyle .card-body {
padding: 30px;
}
.formstyle .form-group {
margin-bottom: 20px;
}
.formstyle label {
display: block;
margin-bottom: 6px;
font-size: 14px;
font-weight: 600;
color: #E0DEEB;
letter-spacing: 0.5px;
text-transform: capitalize;
transition: color 0.3s ease;
text-align: left;
}
.formstyle input[type=text], .formstyle input[type=password],
.formstyle input[type=email], .formstyle select,
.formstyle input[type=file]{
  width: 100%;
  padding: 12px 15px;
  margin: 10px 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #E0DEEB;
  font-size: 16px;
  outline: none;
  transition: all 0.3s ease;
}
.formstyle input[type=text]:focus, .formstyle input[type=password]:focus,
.formstyle input[type=email]:focus, .formstyle select:focus,
.formstyle input[type=file]:focus{
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 5px #a78bfa;
}
.formstyle button[type=submit] {
background: linear-gradient(0deg, #8D82B5, #8D82B5), linear-gradient(180deg, #7466A2 0%, #8D82B5 100%);
width: 100%;
padding: 12px 24px;
margin-top: 15px;
border: none;
border-radius: 16px;
color: #EFEFEF;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease;
}
.formstyle button[type=submit]:hover {
background: linear-gradient(0deg, #7A6FA8, #7A6FA8),
              linear-gradient(180deg, #63588F 0%, #7A6FA8 100%);
}
.formstyle .alert-danger {
background-color: #f8d7da;
color: #721c24;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #f5c6cb;
border-radius: 4px;
}
.loginform_ul{ 
list-style: none;
text-align: center;
margin-top: 15px;
}
/* .loginform_ul li{
margin-bottom: 5px;
display: inline-block;
font-size: 13px;
} */
/* .page_inner_wrapper{  
width: 100%;
} */
.logo-icon a {
color: #7466A2;
font-size: 20px;
font-weight: bold;
}

.bg-primary{
  background-color: #2b313f !important;
}
/* .container {
  display: flex;
  height: 100vh;
   max-width: 100%;

} */


/* Main chat area */
.main-chat {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 10px;
  /* background-color: #f8f9fa; */
  background-color: transparent;
}

.main-chat .chat-container {
  display: none;
}

.active-chatbox .main-chat .chat-container {
background: none;
display: block;
}

.chat-header {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background-color: #2b313f;
  padding: 15px;
  text-align: center;
  border-radius: 5px;
}

/* Messages box */
.messages-box {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  margin-bottom: 15px;
}

.messages-list {
  padding-left: 0;
  margin: 0;
  padding-bottom: 50px;
}

/* .message {
  margin-bottom: 15px;
  align-items: flex-start;
} */

/* Message bubble styling */
/* .message-text {
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 16px;
} */

.sent {
  margin-left: auto;
  align-self: flex-end;
  text-align: right;
}

.received {
  
  align-self: flex-start;
}

/* Chat input box */



.active-chatbox .messages-box li.message.sent {
background: none;
display: inline-block;
width: 100%;
margin-bottom: 20px;
}
.active-chatbox .messages-box li.message.sent .message-text {
display: inline;
float: right;
width: auto;
border: 1px solid rgba(50,50,50,.1);
border-radius: 30px;
padding: 14px 36px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
.active-chatbox .messages-box 
li.message.received {
  background-color: transparent;
}
.active-chatbox  ul.list-unstyled.messages-list {
/*overflow-x: auto;
max-height: 400px;*/
padding-bottom:80px;
}
.active-chatbox .container{ height:auto;}
.message-input {
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 10px 15px;
  font-size: 16px;
  margin-right: 10px;
}

/* .btn-send {
  padding: 0;
  background-color: #1689a3;
  color: white;
  border: none;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 50px;
  height: 50px;
  border-radius: 100% !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-send:hover {
  background-color: #0056b3;
} */
/* Additional Styles */
.message-sender {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.message-content {
  margin: 0;
  font-size: 16px;
}
.logo-container{

  display: block;
  width: 100%;
  justify-content: center;
  text-align: center;
  height: 100px;
  width: 100;
}
.logo-container img{

  height: 100px;
  width: 100px;

}
.active-chatbox .hero-heading {
  top: 110px;
  bottom: auto;
}
.hero-heading {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 140px;
  bottom: auto;
  height: 90px;
}

.hero-heading h1 {
  text-align: center;
  color: #1689a3;
  font-weight: 800;
  padding: 20px 0 10px;
}
form.message-form .input-group > img {
  width: 60px;
}
form.message-form .input-group input#message-input {
background: none;
height: 60px;
margin-right: 0;
border: 0;
box-shadow: none;
outline: none;
}
form.message-form .input-group input#message-input:focus{
background: none;
background-color: transparent;
outline: none;
}
form.message-form .input-group {
  align-items: center;
}

.coyright-section {
text-align: center;
position: fixed;
bottom: 20px;
left: 0;
right: 0;
top: auto;
}

/*body.scrolled .main-chat .message-form {
  top: 0;
}*/

/* .btn-send svg {
transform:rotate(90deg);
background: rgba(255, 255, 255, 0.2);
border-radius: 100%;
margin: auto;
} */

.active-chatbox .btn-send svg{
transform:rotate(0deg);
}


form.message-form .input-group .input-group-append button.btn.btn-primary.btn-send {
position: absolute;
right: 0;
top: 20px;
bottom: 0;
z-index: 9999;
}


li.message.sent .message-text {
  width: 100%;
  max-width: 100%;
}

li.message.sent .message-text .message-sender {
  width: auto;
  display: inline-block;
  margin-bottom: 0;
}
li.message.sent .message-text .message-content {
  color: #DAD9DD;
  font-size: 32px;
  line-height: 40px;
  text-align: left;
  margin-bottom: 30px;
}
li.message.received .message-sender {
  margin-bottom: 0;
}

li.message.received .message-sender img.icon_bot {
  top: -5px;
  position: relative;
}

.coyright-section p {
margin: 0;
}

.active-chatbox .messages-box li.message.received {
background-color: transparent;
}
.active-chatbox .messages-box li.message.received .message-sender {
display: flex;
}
.active-chatbox .messages-box li.message.received .message-sender .message-content {
font-weight: 400;
line-height: 27px;
}

.active-chatbox li.message.received .message-sender img.icon_bot {
top: 5px;
}
.active-chatbox  ul.list-unstyled.messages-list {
padding-bottom: 150px;
}


/* html body .main-chat ul.chatbot_suggestions {
position: absolute;
left: 0;
right: 0;
max-width: 790px;
margin: 140px auto auto;
top: 0;
bottom: 0;
transform: none;
outline-offset: 0;
flex-wrap: wrap;
padding: 0;
display: flex;
} */
/* .main-chat ul.chatbot_suggestions {
padding: 0;
}

.main-chat ul.chatbot_suggestions li a {
text-decoration: none;
color: #212529;
display: block;
padding: 10px 0;
font-size: 14px;
}
.main-chat ul.chatbot_suggestions li {
list-style: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.active-chatbox .main-chat .message-form {
position: fixed;
} */

/* dashboard nav starts */
#dashboardNav li a.active {
color: #fff;
background-color: #33a1b4;
}
#dashboardNav li a {
color: #33a1b4;
background-color: #fff;
border: 1px solid #33a1b4;
border-radius: .25rem;
margin: 0 5px;
transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
text-align: center;
}

#dashboardNav li a:hover {
color: #fff;
background-color: #33a1b4;
border: 1px solid #33a1b4;
border-radius:.25rem;
}

/* dashboard nav ends  */
.kumuyi_whatsapp_icon{
position: fixed;
bottom: 15px;
right: 15px;
z-index: 99999;
}
.kumuyi_whatsapp_icon img{
max-width: 150px;
}

/***************Media Start*******************/
/* @media(min-width:1500px){
  .search-mode-on .searchform{
    max-width: 56%;
  }
} */
@media(max-width:1025px){
  .search-mode-on .searchform{
    max-width: 60%;
  }
}
@media(max-width:980px){

/* ====  Mobile SideBar ==== */
.sidebar-outer .right-side .side-menu {
    display: block;
}
.sidebar-outer .side-menu.active{
  width:270px;
}
.sidebar-outer .close-btn {
  position: absolute;
  top: 20px;
  right: 15px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
  background-color: #E5E5E8;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #000;
}
.side-menu {
  position: fixed;
  top: 0;
  left: -150px;
  width: 150px;
  height: 100vh;
  background-color: #201F25;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4);
  transition: left 0.4s ease;
  z-index: 1100;
  padding: 20px 15px;
}
.page-header .body-logo.mobile-screen-logo{
  display: block;
}
.search-main .body-logo.web-screen-logo{
  display: none;
}
.sidebar-outer .search-main{
  height: auto;
}
/* ==== End Mobile SideBar ==== */

.wrap_outer .page-inner-section{
  margin-top: 100px;
}

  li.message.sent .message-text .message-content{
    margin-bottom: 15px;
  }
  .page_inner_wrapper{
    max-width: 100% !important;
    justify-content: space-between;
    height: 90vh;
  }
  .page_inner_wrapper .searchform{
    max-width: 87%;
    left: 0;
  }
  form.message-form .input-group input#message-input {
    max-width: 90%;
    padding: 0 0;
    text-indent: 10px;
  }
  .right-side {
    margin-left: 0 !important;
  }
  .left-side .sidebar{
    display: none;
  }
  .side-menu .sidebar{
    display: block;
    position: relative;
  }
  #top-nav{
    display: none;
  }
  .chatbox-sample-qa{
    display: none;
  }
}
@media(max-width:768px){
  .page_inner_wrapper .searchform{
    max-width: 92%;
  }
}


@media(min-width:767px){
.container.menu{
  max-height: 150px;
}
}
@media(max-width:767px){
.hero-heading h1 {
  font-size: 34px;
}

.main-chat,
.chat-container{
  padding-left: 0;
  padding-right: 0;
}
/* .container {
max-width: 100%;
} */
.chat-container .messages-box {
margin-top: 10px;
}
.chat-container .messages-box {
margin-top: 20px;
padding: 0;
}
body.active-chatbox .container {
padding: 0;
}
.active-chatbox .messages-box li.message.sent{
margin-bottom: 10px;
}
.active-chatbox .messages-box li.message.sent .message-text{
padding: 10px 16px;
}
.chat-container .messages-box{
padding: 0 15px;
}
form.message-form .input-group input#message-input {
max-width: 70%;
}
li.message.received .message-sender img.icon_bot {
width: 24px;
height: 26px;
object-fit: cover;
margin-right: 10px;
}
form.message-form .input-group > img {
width: 40px;
}
.navbar input.form-control {
  display: none;
}
.navbar-collapse{
background-color: #fff;
}
}

@media(max-width:500px){
  .sidebar-outer .right-side .side-menu .sidebar-bottom-list{
    position: absolute;
  }
  .wrap_outer .edit_profile_page{
    padding-top: 300px;
    margin-top: 150px;
  }
  .page-inner-section h1.page-title{
    margin-bottom: 15px;
  }
  .wrap_outer .page-inner-section{
    padding: 15px;
  }
  .page_inner_wrapper{
    max-width: 100% !important;
  }
  .searchform input[type="text"]{
    height: 100px;
  }
  .formstyle .card-body {
    padding: 15px;

  }
  .loginform_ul{
    font-size: 12px !important;  
  }
  .formstyle .card-header{
    font-size: 32px;
    line-height: 40px;
  }
  .page_inner_wrapper .searchform{
    max-width: 95%;
  }
  .suggestion-box{
    top: 65px;
    width: 45px;
    height: 45px;
  }
  .suggestion-box>a{
    font-size: 15px;
    line-height: 25px;
    padding: 10px;
  }
.chat-container .messages-box {
margin-top: 20px;
}

.hero-heading h1 {
font-size: 28px;
}
form.message-form .input-group input#message-input {
max-width: 66%;
}
.active-chatbox ul.list-unstyled.messages-list{
max-height: 50vh;
}
}
header ul.navbar-nav li a.active,.navbar-nav .nav-link.active {
color: #fff;
background-color: #33a1b4;
}
header ul.navbar-nav li a,.d-flex .btn-outline-light {
color: #33a1b4;
background-color: #fff;
border: 1px solid #33a1b4;
border-radius: .25rem;
margin: 0 5px;
transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
text-align: center;
}

header ul.navbar-nav li a:hover,.d-flex .btn-outline-light:hover {
color: #fff;
background-color: #33a1b4;
border: 1px solid #33a1b4;
border-radius:.25rem;
}
header{z-index: 999;}
.profile_my_plans_btn {
display: inline-block;
margin-top: 6px;
margin-right: 5px;
color: #1689a3;
}

.chat-header {
font-size: 20px;
font-weight: bold;
color: #fff;
background-color: #007bff;
padding: 10px;
text-align: center;
}

.messages-box {
flex-grow: 1;
overflow-y: auto;
margin-bottom: 10px;
padding: 10px;
}
.message-input {
flex: 1;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-right: 10px;
}
.sidebar-section {
margin-bottom: 20px;
}

.sidebar-section h4 {
font-size: 14px;
color: #888;
margin-bottom: 10px;
text-transform: uppercase;
}

.sidebar-list {
list-style-type: none;
padding-left: 0;
margin: 0;
}

.sidebar-item {
font-size: 16px;
padding: 8px 0;
}

/* Styling for links inside sidebar items */
.sidebar-item a {
color: #333;
text-decoration: none;
display: block;
transition: color 0.3s;
}

.sidebar-item a:hover {
color: #007bff; /* Change color on hover */
}

/* Active link styling */
.sidebar-item a.active {
color: #007bff;
font-weight: bold;
}

/* Optional scrollbar styling for a nicer look */
.sidebar::-webkit-scrollbar {
width: 6px;
}

.sidebar::-webkit-scrollbar-track {
background: #f1f1f1;
}

.sidebar::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
background: #555;
}



.formstyle{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}
.logo {
  margin-bottom: 20px;
}
.logo img {
  max-width: 80px;
}

/* General layout settings */
/* body, html {
  height: 100%;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
} */
.bg-primary{
  background-color: #2b313f !important;
}
/* .container {
  display: flex;
  height: 100vh;
   max-width: 100%; 

} */


/* Main chat area */
.main-chat {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 10px;
  /* background-color: #f8f9fa; */
  background-color: transparent;
}

.main-chat .chat-container {
  display: none;
}

.active-chatbox .main-chat .chat-container {
background: none;
display: block;
}

.chat-header {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background-color: #2b313f;
  padding: 15px;
  text-align: center;
  border-radius: 5px;
}

/* Messages box */
.messages-box {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  margin-bottom: 15px;
}


/* .message {
  margin-bottom: 15px;
  align-items: flex-start;
} */

/* Message bubble styling */
/* .message-text {
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 16px;
} */
/* 
.sent {
  margin-left: auto;
  align-self: flex-end;
} */

.received {
  
  align-self: flex-start;
}

/* Chat input box */

.active-chatbox .messages-box li.message.sent {
background: none;
display: inline-block;
width: 100%;
margin-bottom: 20px;
}
.active-chatbox .messages-box li.message.sent .message-text {
display: inline;
float: right;
width: auto;
border: 1px solid rgba(50,50,50,.1);
border-radius: 30px;
padding: 14px 36px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
.active-chatbox .messages-box 
li.message.received {
  background-color: transparent;
}
.active-chatbox ul.list-unstyled.messages-list {
/* overflow-x: auto;
max-height: 400px; */
}
.message-input {
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 10px 15px;
  font-size: 16px;
  margin-right: 10px;
}

/* .btn-send {
  padding: 0;
  background-color: #1689a3;
  color: white;
  border: none;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 50px;
  height: 50px;
  border-radius: 100% !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-send:hover {
  background-color: #0056b3;
} */
/* Additional Styles */
.message-sender {
  font-weight: bold;
  display: flex;
  margin-bottom: 5px;
}

.message-content {
  margin: 0;
  font-size: 16px;
}
.logo-container{

  display: block;
  width: 100%;
  justify-content: center;
  text-align: center;
  height: 100px;
  width: 100;
}
.logo-container img{

  height: 100px;
  width: 100px;

}
.active-chatbox .hero-heading {
  top: 30px;
  bottom: auto;
}
.hero-heading {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: -230px;
  bottom: 0;
  height: 90px;
}

.hero-heading h1 {
  text-align: center;
  color: #1689a3;
  font-weight: 800;
  padding: 20px 0 10px;
}
form.message-form .input-group > img {
  width: 60px;
}
form.message-form .input-group input#message-input {
background: none;
height: 60px;
margin-right: 0;
border: 0;
box-shadow: none;
outline: none;
}
form.message-form .input-group input#message-input:focus{
background: none;
background-color: transparent;
outline: none;
}
form.message-form .input-group {
  align-items: center;
}

.coyright-section {
  text-align: center;
}



/* 
.btn-send svg {
transform:rotate(90deg);
background: rgba(255, 255, 255, 0.2);
border-radius: 100%;
margin: auto;
} */

.active-chatbox .btn-send svg{
transform:rotate(0deg);
}


form.message-form .input-group .input-group-append button.btn.btn-primary.btn-send {
position: absolute;
right: 0;
top: 20px;
bottom: 0;
z-index: 9999;
}


li.message.sent .message-text {
  width: 100%;
  max-width: 100%;
}

li.message.sent .message-text .message-sender {
  width: auto;
  display: inline-block;
  margin-bottom: 0;
}
/* li.message.sent .message-text .message-content {
  width: auto;
  display: inline-block;
} */
li.message.received .message-sender {
  margin-bottom: 0;
}

li.message.received .message-text {
  width: 100%;
  max-width: 100%;
  margin-bottom: 60px;
}

li.message.received .message-sender img.icon_bot {
  top: -5px;
  position: relative;
}



.coyright-section p {
margin: 0;
}

.active-chatbox .messages-box li.message.received {
background-color: transparent;
}
.active-chatbox .messages-box li.message.received .message-sender {
display: flex;
}
.active-chatbox .messages-box li.message.received .message-sender .message-content {
font-weight: 400;
line-height: 27px;
}

.active-chatbox li.message.received .message-sender img.icon_bot {
top: 5px;
}



@media(max-width:980px){
  .navbar.mobile-navbar {
    padding: 10px 40px;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100%;
    z-index: 1;
    background: #1b1a1f;
    display: flex !important;
    align-items: center;
    border-bottom: 1px solid #45434F;

  }
  form.message-form .input-group input#message-input {
  max-width: 90%;
  padding: 0 0;
  text-indent: 10px;
  }
  .page_inner_wrapper {
    justify-content: center;
  }
  .search-mode-on .page_inner_wrapper {
    height: auto;
  }
  .search-mode-on{
     padding-top: 100px;
  }

}
@media(max-width:767px){
.hero-heading h1 {
  font-size: 34px;
}

.main-chat,
.chat-container{
  padding-left: 0;
  padding-right: 0;
}
.container {
max-width: 100%;
}
.chat-container .messages-box {
margin-top: 80px;
}
.chat-container .messages-box {
margin-top: 20px;
padding: 0;
}
body.active-chatbox .container {
padding: 0;
}
.active-chatbox .messages-box li.message.sent{
margin-bottom: 10px;
}
.active-chatbox .messages-box li.message.sent .message-text{
padding: 10px 16px;
}
.chat-container .messages-box{
padding: 0 15px;
}
form.message-form .input-group input#message-input {
max-width: 70%;
}
li.message.received .message-sender img.icon_bot {
width: 24px;
height: 26px;
object-fit: cover;
margin-right: 10px;
}
form.message-form .input-group > img {
width: 40px;
}
.main-chat ul.chatbot_suggestions li{
flex:0 0 0 100%;
max-width: 100%;
}

}

@media(max-width:500px){
  .chat-container .messages-box {
    margin-top: 20px;
  }
  .navbar.mobile-navbar{
    padding: 10px;
  }

.hero-heading h1 {
font-size: 28px;
}
form.message-form .input-group input#message-input {
max-width: 66%;
}
.active-chatbox ul.list-unstyled.messages-list{
max-height: 50vh;
}
}
header ul.nav li a.active {
color: #fff;
background-color: #33a1b4;
}
header ul.nav li a,.text-end .btn-outline-light {
color: #33a1b4;
background-color: #fff;
border: 1px solid #33a1b4;
border-radius: .25rem;
margin: 0 5px;
transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

header ul.nav li a:hover,.text-end .btn-outline-light:hover {
color: #fff;
background-color: #33a1b4;
border: 1px solid #33a1b4;
border-radius:.25rem;
}

/* h2 {
padding-top: 70px;
} */

.sidebar-outer .right-side{

}
#top-nav {
  padding: 10px 40px;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 100%;
  z-index: 1;
  background: #1b1a1f;
  border-bottom: 1px solid #45434F;
}

.nav-brand {
color: #fff;
text-decoration: none;
font-size: 30px;
position: relative;
top: 3px;
}

.top-nav-right {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

#main-search {
padding: 5px;
border-radius: 3px;
border: none;
}

#nav-toggle {
  box-sizing: content-box;
  cursor: pointer;
  width: 32px;
  height: 36px;
  position: relative;
  padding: 0;
  background: #EDEDED;
  border-radius: 9px;
}

.hamburger.open span:first-child::before, .hamburger.open span:first-child::after, .hamburger span:nth-child(3), .hamburger span:nth-child(2), .hamburger span:first-child {
  width: 14px;
  height: 2px;
  background: #25282B;
  border-radius: 2px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  transition: 0.3s;
}

.hamburger span:first-child::before, .hamburger span:first-child::after {
content: "";
width: 0px;
height: 0px;
transtion: 0.25s;
background: white;
}
.hamburger span:nth-child(1) {
  top: 12px;
}
.hamburger span:nth-child(2) {
  top: 18px;
}
.hamburger span:nth-child(3) {
  bottom: 10px;
}

.hamburger.open span:first-child {
  background: none;
width: 30px;
left: 30px;
top: 21px;
}
.hamburger.open span:first-child::before, .hamburger.open span:first-child::after {
  content: "";
  width: 17px;
  left: -193%;
  top: -2px;
}
.hamburger.open span:first-child::before {
transform: rotate(45deg);
}
.hamburger.open span:first-child::after {
transform: rotate(-45deg);
}
.hamburger.open span:nth-child(2) {
transform: scalex(0.5) translatex(30px);
}

.hamburger.open span:nth-child(3),
.hamburger.open span:nth-child(2){
  display: none;
}

#main-nav-items {
position: fixed;
padding: 0;
width: 50%;
max-width: 336px;
height: calc(100vh - 60px);
min-height: 300px;
top: 0;
background: #F2FAFC;
left: 0vw;
transform: translatex(-100vw);
margin: 0;
list-style-type: none;
flex-wrap: wrap;
font-size: 25px;
z-index: 5;
transition: transform 0.5s;
}
#main-nav-items li {
transform: rotate(-90deg);
transition: transform 0.5s;
}
#main-nav-items a {
  color: #025F74;
  padding: 15px 20px;
  text-decoration: none;
  display: inline-block;
  position: relative;
  transition: 0.25s;
  font-size: 14px;
  display: block;
}
#main-nav-items a:hover::before {
width: 4px;
}
#main-nav-items a:hover::after {
height: 4px;
}

#main-nav-items.nav-items-shown {
transform: translatex(0vw);
}
#main-nav-items.nav-items-shown li {
transform: rotate(0deg);
}

#main-content {
  position: relative;
  transition: 0.5s;
  left: 0;
  display: flex;
  justify-content: center;
}


#top-nav.top-nav-moved{
  transform: translatex(336px);
}
#main-content.main-content-moved {
  transform: translatex(336px);
}
.hide {
display: none;
}


.logo-section .logo-icon {
  display: flex;
  align-items: center;
}
.logo-section .logo-icon h4 {
  margin: 0;
  height: auto;
  line-height: inherit;
  margin-left: 10px;
  font-weight: 400;
  font-size: 16px;
}
.logo-section {
  border: 1px solid #ECECEC;
  border-radius: 7px;
  padding: 5px;
  margin-left: 10px;
}
.logo-section select {
  background: #EDEDED;
  border: 0;
  width: 80px;
  height: 29px;
  margin-left: 10px;
  outline: none;
}
.d-flex {
  display: flex;
}
.align-item-center{ align-items: center;}

#top-nav .donate-sec {
  background: #FFC107;
  padding: 5px 6px 5px 16px;
  border-radius: 18px;
}


#top-nav .donate-sec p {
  padding: 0;
  margin: 0;
  font-size: 12px;
  color: #000;
}
#top-nav .donate-sec a {
  background: #000;
  color: #fff;
  text-decoration: none;
  padding: 7px 14px;
  font-weight: 700;
  font-size: 12px;
  border-radius: 18px;
  line-height: 14px;
  margin-left: 12px;
}
/* .right-nav a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  padding: 10px 14px;
  border-radius: 20px;
  margin-left: 10px;
} */
.right-nav a.how-to-ask {
  background: #EDEDED;
  color: #1C1E1E;
  border: 1px solid #EDEDED;
  display: flex;
  align-items: center;
}
.right-nav a.how-to-ask img {
  margin-right: 10px;
}
.right-nav a.login{
  background: transparent;
  color: #7466A2;
  border: 1px solid #7466A2;
}
.right-nav a.sign-up{
  background: #7466A2;
  color: #fff;
  border: 1px solid #7466A2;
}
.right-nav a.sign-up:hover{
  background: #7466A2;
}

#main-content .chatbox {
  display: flex;
  align-items: center;
  max-width: 744px;
  width: 90%;
  margin: 0 auto;
  justify-content: center;
}
.chatbox-inner h2 {
  padding: 0;
  color: #025F74;
  font-size: 36px;
  font-weight: 400;
  margin: 0 auto;
  text-align: center;
}
.chatbox-inner h2 span {
  font-weight: 700;
  font-style: italic;
}
.chatbox-inner h1 {
  padding: 0;
  color: #025F74;
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  margin: 0 auto;
}
.chatbox-content p {
  text-align: center;
  font-size: 14px;
  color: #000;
}
.chatbox-content .chatbox-logo img {
  margin: 0 auto;
  display: block;
}
#main-content .chatbox .chatbox-inner {
  width: 100%;
  height: 450px;
}
#main-content .chatbox .chatbox-message textarea {
  width: 90%;
  max-width: 90%;
  border: 0;
  resize: none;
  outline: none;
  background: none;
  letter-spacing: 0;
  color: #636060;
  font-size: 14px;
}
.chatbox-message {
  border: 1px solid #025F74;
  padding: 13px;
  background: #F9FEFF;
  border-radius: 20px;
  margin-top: 40px;
}
.chatbox-message .chatbox-message-icon {
  display: flex;
  align-items: center;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
/* .chatbox-sample-qa p {
text-align: center;
font-style: italic;
margin-top: 15px;
font-weight: 500;
} */
/* .chatbox-sample-qa ul {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
} */
.chatbox-sample-qa ul li {
  list-style: none;
}
.chatbox-sample-qa ul li a {
  text-decoration: none;
  background: #EDEDED;
  padding: 5px 10px;
  color: #1C1E1E;
  margin: 5px;
  display: block;
  border-radius: 12px;
  font-size: 14px;
}

.whatsapp-icon a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px;
  background: #D7F8DD;
  border-radius: 6px;
  text-decoration: none;
}
.whatsapp-icon a  img {
  margin-left: 4px;
}
.whatsapp-icon span {
  margin: 0;
  color: #02350C;
  font-size: 10px;
}

.chatbox-container {
  display: flex;
  margin-top: 20px;
}
.chatbox-sample-qa button.view-more {
text-decoration: none;

  padding: 5px 10px;
  color: #1C1E1E;
  margin: 5px;
  display: block;
  border-radius: 12px;
  font-size: 14px;
  background: rgba(237, 237, 237, 1);
  border: 1px solid rgba(120, 120, 120, 1)
}
.chatbox-sample-qa button.view-more img {
  margin-left: 10px;
}

.chatbox-container .chatbox-frame {
  border: 0.5px solid;
  border-image-source: linear-gradient(90deg, #EAFCFF 0%, #CFF6FF 51%, #FFF6D2 100%);
  box-shadow: 0px 4px 14.9px 0px rgba(0, 0, 0, 0.08);
  background: linear-gradient(272.37deg, #FFFCF3 0.24%, #F9FEFF 47.45%, #F9FEFF 98.58%);
  padding: 20px;
  font-size: 14px;
  line-height: 19px;
  max-height: 32vh;
  overflow-y: auto;
  font-weight:400;
}

/* home css starts */
/* Styles for the fixed position of the message input section */
 
 
 /* Push down chat messages to make space for the fixed input section */
 .chat-container {
  margin-top: 20px; /* Adjust based on the height of the message input section */
}

/* Other styling adjustments */
.card-header {
  text-align: right;
}
/* button.btn-send{
  background-color: transparent;
  border: none;
  cursor: pointer;
}
button.btn-send:hover{
  background-color: transparent;
  border: none;
} */
.message-sender {
  width: 100%;
  margin-right: 20px;
}
.btn-mic {
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.btn-mic:focus {
  outline: none;
}

img.icon_dots_loader {
 max-width: 50px;
 margin: 0;
 position: relative;
 top: -11px;
}
form.message-form .input-group {
 padding-right: 0px;
}
form.message-form .input-group textarea#message-input {
 border: 0;
 resize: none;
 box-shadow: none;
}
.chatform_btns{
margin-top: -56px;
}

/* .chatbot_suggestions.chatbot_suggestions_hide{display: none !important;} */
button#mic-button {
background: none;
border: none;
width: 40px;
padding:0px;
}
/* home css ends */
.the_chat_actions{
text-indent: 65px;
}
.the_chat_actions .copied-message {
  position: absolute;
  right: -100px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  visibility: hidden;
  border-image-source: linear-gradient(180deg, #E0DEEB 0%, #8D82B5 100%);
  background: #F9F9FA;
  color: #5F5C6C;
      top: -2px;
}

.the_chat_actions a.copied .copied-message {
  visibility: visible;
  transform: translateX(0);
  z-index: 999;
}
.the_chat_actions a {
  position: relative;
  margin-right: 10px;
  color: #716E7D;
  font-size: 16px;
}

.the_chat_actions .action_btns img {
    max-width: 15px;
}

p.disclaimer-wrapper {
 font-style: italic;
 font-size: 14px;
}
.disclaimer-wrapper .disclaimer-text{
font-weight: bold;
}

.chatbox-sample-qa ul li a.view-more {
background: rgba(237, 237, 237, 1);
border: 1px solid rgba(120, 120, 120, 1)
}
.chatbox-sample-qa ul li a.view-more img {
margin-left: 10px;
}

.chatbox-container .chatbox-frame {
border: 0.5px solid;
border-image-source: linear-gradient(90deg, #EAFCFF 0%, #CFF6FF 51%, #FFF6D2 100%);
box-shadow: 0px 4px 14.9px 0px rgba(0, 0, 0, 0.08);
background: linear-gradient(272.37deg, #FFFCF3 0.24%, #F9FEFF 47.45%, #F9FEFF 98.58%);
padding: 20px;
font-size: 14px;
line-height: 19px;
max-height: 32vh;
overflow-y: auto;
}
.coyright-section p {
  font-size: 14px;
}


/*zyra css starts*/

:root {
    --bg-color: #1e1e2f;
    --card-color: #2a2a40;
    --accent-color: #7466A2;
    --text-color: #f4f4f4;
  }

  * {
    box-sizing: border-box;
  }

  /* body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    height: 100vh;
    display: flex;
    flex-direction: column;
  } */

 
  /* .page-header {
    padding: 1.5rem;
    text-align: center;
   margin-top: 15%;
  } */

/*****************Dark-Mode-Colors*************************/
.dark-mode .page-header h1{
  color: #E0DEEB;
}
.dark-mode .page-header p,
.dark-mode .verified-text p{
 color: #fff;
}




.verified-text p{
  text-align: left;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.verified-text i{
  margin-top: 5px;
  margin-right: 5px;
}
.page-header h1 {
  font-size: 32px;
  line-height: 42px;
}
.page-header p{
font-size: 14px;
padding-top: 10px;
line-height: 24px;
}
  main {
    flex: 1;
   
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* .message {
    background-color: #2f2f48;
    padding: 1rem;
    border-radius: 12px;
    max-width: 90%;
    margin-bottom: 1rem;
    line-height: 1.5;
  } */

  .user {
    align-self: flex-end;
    background-color: #444;
  }

  .assistant {
    align-self: flex-start;
    background-color: #333;
  }

  /* .searchform {
    display: flex;
    padding: 1rem;
    
    position: sticky;
    bottom: 0;
    z-index: 100;
  } */
.page_inner_wrapper .chatbox-container{
  width: 100%;
  padding-bottom: 50px;
}
.dark-mode .searchform input[type="text"],
.dark-mode .searchform textarea{
  border-color: #45434F;
  background: #312F38;
  color: #E0DEEB;
}
.light-mode .searchform input[type="text"],
.light-mode .searchform textarea{
  background: #D7D7DB;
  border-color: #D7D7DB;
  color: #43414D;
}
.searchform input[type="text"]{
  height: 150px;
  border-radius: 24px;
  width: 100%;
  outline: none;
  font-size: 20px;
  border: 1px solid;
}
.searchform textarea {
  border-radius:10px;
  width: 100%;
  outline: none;
  font-size: 20px;
  border: 1px solid;
  padding: 15px;
}
.dark-mode .searchform textarea::placeholder,
.dark-mode .searchform input[type="text"]::placeholder{
  color: #716E7D;
}
.page_inner_wrapper .searchform{
  position: relative;
  width: 100%;

}
.searchform button {
  color: #DAD9DD;
  cursor: pointer;
  font-size: 12px;
  position: absolute;
  /* bottom: 58px; */ /*for input box*/
  bottom:66px;
  left: 15px;
  background-color: #26252C;
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid #26252C;
  opacity: 0.8;
  transition: transform 0.3s ease, color 0.3s ease;
}
.searchform button.voice-btn-2{
  left: auto;
  background-color: #7466A2;
  right: 15px;
} 
.searchform button.voice-btn-2:hover,
.searchform button:hover{
  opacity: 1;
} 
/* .searchform button.voice-btn{
left: auto;
right: 80px;
}*/




  /* button:hover {
    background-color: #7466A2;
  } */

  .footer-note {
    text-align: center;
    padding: 0.5rem;
    font-size: 0.85rem;
    color: #888;
  }
/*zyra css end*/





/*===========Base File CSS===========*/

 .search-mode-on .page-header{
            display: none;
        }
        .chat-box { max-width: 700px; margin: 0 auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
        .bubble { padding: 12px 20px; margin: 10px 0; border-radius: 20px; max-width: 80%; white-space: pre-wrap; }
        .user { background: #d1ecf1; text-align: right; margin-left: auto; }
        .ai { background: #f1f1f1; text-align: left; margin-right: auto; }
        
        .bubble.assistant { background: #f1f1f1; }
        .messages-list .message{color: #000;}
        
        /* .messages-list .message.sent{background-color: #efefef !important;} */
        /* .messages-list .message.received{background-color: #ebebeb !important;} */
        /* .messages-list .message-content {
            display: table-cell;
            vertical-align: top;
        } */
        .messages-list .message .chatbox-logo img {
            max-width: 35px;
            margin-right: 15px;
        }
        .messages-list .message .chatbox-logo {
            display: table-cell;
        }
        .messages-list .message .message-sender{
            margin-right: 10px;
        }
        .hero-heading{ position: static; }
.pricing-box {
    padding: 30px;
    border: 1px solid #ddd;
    width: 100%;
    border-radius: 5px;
    margin: 10px 0px;
}
.pricing-box ul {
    padding: 0;
}
.pricing-box li {
    list-style: none;
}
.pricing-box a.start_now {
    background: #33a1b4;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    display: inline-block;
    margin-bottom: 20px;
    border-radius: 10px;
}
.pricing-box .text-h6-mobile {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}
.pricing-box .gap-4xs span.text-h6 {
    font-weight: 600;
    font-size: 18px;
}
.start_now_sec a.limit-apply {
color: #343a40;
text-decoration: none;
margin-left: 10px;
}

.start_now_sec {
margin: 30px auto 10px;
}
.pricing-box li {
list-style: none;
display: flex;
align-items: flex-start;
padding: 4px 0;
}
.pricing-box li svg {
margin-right: 10px;
}
.pricing-title {
margin: 60px auto;
}
.coyright-section{
display: none;
}

.price-table {
display: flex;
}
.price-table .price-col .price-col-head {
height: 80px;
border-bottom: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}

.price-table .price-col .price-col-reg {
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.price-table .price-col {
max-width: 20%;
flex: 0 0 20%;
border-width: 1px 0 1px 1px;
border-color: #333;
border-style: solid;
}
.price-table .price-col:last-child {
border-right-width: 1px;
}
.price-table .price-col h5 {
margin: 0;
}
.price-table .price-features.price-col h5 {
margin: 0;
text-align: center;
}
.price-table .price-features.price-col  .price-col-head h5 {
font-weight: 400;
font-size: 16px;
}
.price-table .price-features.price-col .price-col-reg {
border-bottom: 1px solid #333;
}
.price-table .price-features.price-col .price-col-reg h5 {
font-size: 16px;
font-weight: 600;
padding: 0 30px;
}
.price-table .price-features.price-col .price-col-reg {
border-bottom: 1px solid #333;
}


.price-table .price-church.price-col .price-col-head h5,
.price-table .price-premium.price-col .price-col-head h5,
.price-table .price-basic.price-col .price-col-head h5,
.price-table .price-start.price-col .price-col-head h5 {
color: #fff;
font-size: 18px;
padding: 0;
text-align: center;
line-height: 26px;
}
.price-table .pricing-item-single .price-col-reg{
border-bottom: 1px solid #333;
justify-content: flex-start;
}

.price-table .price-church.price-col .price-col-content {

background: #bfe4ff;

}
.price-table .price-col .price-col-reg.xxrow {
height: 170px;
align-items: flex-start;
}
.price-table .price-features.price-col .price-col-reg.xxrow {
align-items: center;
}

.price-table .price-col .price-col-reg.xrow {
height: 130px;
align-items: flex-start;
}
.price-table .price-features.price-col .price-col-reg.xrow {
align-items: center;
}
.price-table .price-col ul { padding-top: 20px; }
.price-table-complex-mobile{ display: none;}

.price-table .price-col .price-col-reg .start-btn {
display: flex;
justify-content: center;
width: 100%;
}
.price-table .price-col .price-col-reg .start-btn a {
text-decoration: none;
padding: 14px 40px;
color: #fff;
font-weight: 600;
}
.user_active_plan_btn{
cursor: not-allowed;
}
@media(max-width:767px){
.price-table-complex-desktop{ display: none;}
.price-table-complex-mobile{ display: block;}
.price-table-complex-mobile .price-table .price-col {
    max-width: 50%;
    flex: 0 0 50%;
    margin: 20px auto;
}
.price-table .price-col .price-col-reg.xxrow{ height: 230px;}
.price-table .price-col .price-col-reg.xrow{ height: 180px;}
.price-table .price-col .price-col-reg{ height: 110px;}
}


.nav-tabs .nav-link { cursor: pointer; }
  .zyruh-response-image-item img { max-width: 100%; height: auto; display: block; }
  .zyruh-response-search-item { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
  .citation-item { margin-right: 8px; display: inline-block; color: #0d6efd; }
  .message.loading .message-text { opacity: 0.85; }
  .typing-indicator { display: inline-flex; align-items: center; }
  .typing-dot { width: 6px; height: 6px; border-radius: 50%; background-color: #888; margin: 0 2px; animation: typing-animation 1.4s infinite ease-in-out; }
  .typing-dot:nth-child(1) { animation-delay: 0s; }
  .typing-dot:nth-child(2) { animation-delay: 0.2s; }
  .typing-dot:nth-child(3) { animation-delay: 0.4s; }
  @keyframes typing-animation { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
  .citation-loader { display: inline-block; width: 12px; height: 12px; border: 2px solid #f3f3f3; border-top: 2px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 2px; vertical-align: middle; }
  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

  /* Popover tweaks */
  #citation-popover { max-width: 360px; pointer-events: auto; }