/*
  You can add custom CSS rules or import files here.
*/


/* Import the Radzen CSS files */
@import './styles-generated.css';


/* ----------------------------------------CUSTOM CSS START------------------------------------------- */
.dashboard-metrics {
 height: 380px;
 overflow: scroll;
}

.landing-section-title {
 float: left;
 padding-top: 20px;
}

.tag-addon-custom {
 display: inline-block;
 padding: 0px 1rem;
 padding-top: 5px;
 padding-bottom: 5px;
 background-color: #368181;
 color: inherit;
 text-decoration: none;
 margin: 0 -0.5rem 0 2.5rem;
 text-align: center;
 min-width: 1.5rem;
 border-left: 1px solid rgb(81 163 163);
 color: white;
}

.tag-custom {
 background-color: #e0eeee;
 color: #424542;
 border: 1.3px solid #368181;
}


.chatbot {
 position: fixed;
 top: 25%;
 right: 1px;
 max-width: 520px;
 margin: 0 auto;
 padding: 5px 20px 20px 20px;
 background: rgba( 255, 255, 255, 0.75 );
 box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
 backdrop-filter: blur( 4.5px );
 -webkit-backdrop-filter: blur( 4.5px );
 border-radius: 10px;
 border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.chat-container {
 max-height: 350px;
 overflow-y: auto;
 border-radius: 5px;
}

.messages {
 margin: 5px 0;
 padding: 10px;
 border-radius: 5px;
}

.received {
 text-align: left;
 background: #358080 !important;
 color: #fff;
 word-wrap: break-word;
 width: 100%;
 /* cursor: pointer; */
}

.muted-text {
 display: flex;
 width: 90%;
 font-size: 10px;
 text-align: right;
 justify-content: end;
 color: #636363;
}

.prompts {
 text-align: left;
 border: 1px solid #358080 !important;
 color: #000;
 word-wrap: break-word;
 width: 90%;
}

 .prompts:hover {
  background-color: #358080;
  color: white;
 }

.userai {
 background-color: #d4d4d8;
 text-align: right;
 word-wrap: break-word;
}

.input-container {
 display: flex;
 margin-top: 10px;
}

.chatbot-container {
 position: fixed;
 bottom: 30px;
 right: 30px;
 z-index: 9999;
 background-color: #fff;
 border-radius: 5px;
 max-width: 400px;
 display: none;
 /* Initially hidden */
 box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
}


 .chatbot-container.show {
  display: block;
  /* Show when toggled */
 }

.vertical-button.hide {
 display: none;
 /* Hide the button when it has the hide class */
}

.icon-container {
 display: inline-block;
 margin-left: 10px;
}

.thumbs-icon {
 margin: 0 5px;
 cursor: pointer;
}

 .thumbs-icon.active {
  color: var(--primary-bg-color) !important;
  /* Change color when active */
 }

.chatbot-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 10px 0px;
 border-bottom: 1px solid #ccc;
}

.chatbot-title {
 font-weight: bold;
 margin: 0;
}

.chatbot-icons {
 display: flex;
 align-items: center;
}

.close-icon {
 cursor: pointer;
 margin-left: 10px;
}

.read-more-button {
 display: block;
 margin: 5px 0px 5px 0px;
 font-size: 12px;
 padding: 6px 8px;
 background-image: linear-gradient( to bottom right, #51a3a3 0%, #358080 100% );
 color: #fff;
 /* border: 1px solid #009da7; */
 border-radius: 5px;
 cursor: pointer;
}

 .read-more-button:hover {
  margin: 5px 0px 5px 0px;
  border: none;
  color: #fff;
  padding: 6px 8px;
 }

.center {
 display: flex;
 justify-content: center;
}

.bookmark-icon {
 display: none;
}

/* Show the bookmark icon on hover */
li.active:hover .bookmark-icon {
 display: inline-block;
}

.pill-container {
 display: flex;
 align-items: center;
}

.pill {
 font-size: 12px;
 margin-right: 10px;
 padding: 5px 10px;
 border: 1px solid #51a3a3;
 border-radius: 5px;
 cursor: pointer;
 transition: font-size 0.3s ease, margin-right 0.3s ease;
}

 .pill:hover {
  color: white;
  background-color: #51a3a3;
 }

/* Glassmorphism */
.glassmorphism {
 background: rgb(255 255 255 / 20%);
 box-shadow: 0 8px 32px 0 #3681815e;
 backdrop-filter: blur( 7.5px );
 -webkit-backdrop-filter: blur( 7.5px );
 border-radius: 10px;
 border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.insights {
 height: 280px;
 overflow: scroll;
}

::selection {
 background-color: #3367D1 !important;
 color: #ffff;
} 
/* ----------------------------------------CUSTOM CSS END------------------------------------------- */}