body,html{
	body { 
	 padding-top: 65px; 
 }
	 height: 100%;
	 margin: 0;
	 background: rgb(44, 47, 59);
	background: -webkit-linear-gradient(to right, rgb(40, 59, 34), rgb(54, 60, 70), rgb(32, 32, 43));
	 background: linear-gradient(to right, rgb(38, 51, 61), rgb(50, 55, 65), rgb(33, 33, 78));
 }
 .purchase-container table {
    color: #fff; /* Set text color to white */
}

.purchase-container table thead th {
    color: #fff; /* Ensure headers are also white */
}

.purchase-container table tbody td {
    color: #fff; /* Ensure body content is white */
}

.chatbot-credits {
    color: white;
}


 .btn-create-chatbot-team {
    position: absolute;
    top: 10px;
    right: unset; /* Remove the right position from .btn-create-chatbot */
    left: -10px; /* Position from the left */
    z-index: 10;
    background-color: #007bff; /* Bootstrap primary color */
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

 .header-with-button {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Adjust this as needed */
}

.pre-alpha-banner {
    background-color: #ffdd57; /* Example background color, adjust as needed */
    color: #000; /* Text color */
    text-align: center;
    font-weight: bold;
    font-size: 1.5em; /* Adjust size as needed */
    padding: 10px 0;
    border-bottom: 2px solid #000; /* Optional border */
}


.text-center.mb-4 {
    flex-grow: 1;
    text-align: left; /* Align to left */
}

/* ... existing styles ... */

/* Style for the credit cards on the left */
.credit-card {
    background: #1a1a1a; /* Dark background for the card */
    color: #ffffff; /* Light text for readability */
    margin-bottom: 20px; /* Space between cards */
    padding: 15px; /* Padding inside the card */
    border-radius: 8px; /* Rounded corners for the card */
}

.credit-card .btn {
    width: 100%; /* Full-width button */
    margin-top: 15px; /* Space above the button */
}

/* Ensure the transaction history text is readable */
.transaction-history table {
    color: #ffffff; /* Light text for readability */
}

.transaction-history th, 
.transaction-history td {
    border-color: #ffffff; /* Light borders for the table */
}

/* Adjust the background color of table rows for better readability */
.transaction-history tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.1); /* Slightly lighter for odd rows */
}

.transaction-history tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05); /* Slightly darker for even rows */
}
/* Style for the main heading of the credits and subscriptions section */
.credit-subscription-heading {
    color: #ffffff; /* Light text for readability */
    /* Add any other styles such as font size, weight, etc., as desired */
}

/* Style for the transaction history heading */
.transaction-history-heading {
    color: #ffffff; /* Light text for readability */
    /* Additional styling as needed */
}
/* ... any additional styles as needed ... */


 .agent-card .card-img-top {
    object-fit: cover;
    width: 100px; /* Set the width as needed */
    height: 100px; /* Set the height as needed */
    border-radius: 50%; /* This will make the image round */
    margin: auto; /* Center the image horizontally */
}

.btn-create-credits {
    background-color: #007bff; /* Bootstrap primary color */
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px; /* Adjust as needed */
    cursor: pointer;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.btn-create-credits:hover {
    background-color: #0056b3; /* Darker shade for hover effect */
}


/* Adjust the margin and padding as needed */
.agent-card {
    margin: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* You can adjust the width and the height according to your design */
.agent-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 50%; /* To make the image circular */
}



.agent-card-body {
    padding: 1rem;
}

.agent-card-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.agent-card-text {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.agent-card-actions {
    text-align: center;
}

.edit-btn,
.delete-btn {
    margin: 0 0.5rem;
}


 /* style.css */
/* Additional styles for the login card to match the chat page */
#loginCard {
    background-color: rgba(0,0,0,0.4) !important;
    border-radius: 15px;
    color: white;
}
label {
    color: white; /* Make the text color white for better contrast */
    margin-bottom: .5rem; /* Optional: add some space below the label */
    font-weight: bold; /* Optional: make the label text bold */
}

/* Add this to your style.css file */
.create-chatbot-heading {
    color: white; /* Make the text color white */
    text-align: center; /* Center the heading */
    margin-bottom: 1rem; /* Add some space below the heading */
    font-size: 2rem; /* Make the font size larger */
    font-weight: bold; /* Optional: make the heading text bold */
}

.avatar-selection-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.avatar-option {
    flex: 0 1 100px;
}

.avatar-radio {
    display: none;
}

.avatar-label {
    cursor: pointer;
    border: 2px solid transparent; /* Transparent border to prevent layout shift on selection */
    padding: 5px;
    border-radius: 50%;
    display: block; /* To make the entire area clickable */
}

.avatar-label:hover,
.avatar-label.selected {
    border-color: blue; /* Highlight color when hovered or selected */
    transform: scale(1.1); /* Optional: Scale up on hover/selection */
    transition: transform 0.3s; /* Smooth transition for scaling */
}

.avatar-img {
    display: block;
    max-width: 100%; /* Make image responsive within label */
    height: auto;
    border-radius: 50%; /* Circular images */
}


#loginCard .btn-primary {
    background-color: #007bff;
    border: none;
}

/* Google Sign-In button styling to match the login button */
.btn-google {
    background: #4285F4;
    color: white;
    padding: 10px;
    border-radius: 2px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.google-icon {
    width: 20px; /* Adjust as needed */
    margin-right: 10px;
}

.btn-text {
    font-weight: bold;
    font-size: 16px;
}

/* Make sure the Google button is the same height as the login button */


/* Adjustments for consistent button width */
.btn-google, .btn-primary {
    width: 100%; /* Ensures both buttons take up the full width */
}


  
 .btn-scroll {
    background-color: #007bff; /* Primary blue color */
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.btn-scroll i {
    font-size: 16px;
}

.btn-scroll:hover {
    background-color: #0056b3; /* Darker blue for hover effect */
}

#leftScrollUp, #rightScrollUp {
    top: 0;
}

#leftScrollDown, #rightScrollDown {
    bottom: 0;
}


 .chatbot-icon {
    width: 40px; /* Adjust the size as needed */
    height: 40px; /* Adjust the size as needed */
    object-fit: cover;
}
 .btn-audio-toggle {
    background-color: #007bff; /* Bootstrap primary color */
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-audio-toggle img {
    width: 20px; /* Adjust as needed */
    height: auto;
}

.btn-audio-toggle:hover {
    background-color: #0056b3; /* Darker shade for hover effect */
}

 .btn-create-chatbot {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background-color: #007bff; /* Bootstrap primary color */
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.code-block {
    position: relative;
    background-color: #333;
    border-radius: 4px;
    margin: 0.5em 0;
    padding-top: 2em; /* Make room for the header */
}

.code-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.5em;
    background-color: rgba(0, 0, 0, 0.7); /* Slightly transparent black */
    color: #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.code-language {
    float: left;
}

.copy-code-btn {
    float: right;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}

pre code {
    display: block;
    padding: 0.5em;
    background-color: #333;
    color: #fff;
    margin: 0;
    white-space: pre-wrap; /* For code with new lines */
    word-break: break-all; /* To prevent horizontal scrolling */
}

/* Clear float */
.code-block::after {
    content: "";
    display: table;
    clear: both;
}



.btn-create-chatbot:hover {
    background-color: #0056b3; /* Darker shade for hover effect */
}

/* Font Awesome icon adjustment */
.btn-create-chatbot i {
    font-size: 16px;
}



 /* Chatbot card title and text */
.chatbot-card .card-title,
.chatbot-card .card-text {
    color: white; /* Change the color as needed */
}
/* Target text inside left-column-content */
.left-column-content {
    color: white; /* Set text color to white */
}

/* Target text inside left-column-content */
.right-column-content {
    color: white; /* Set text color to white */
}

 .container-fluid {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Viewport Height */
}
.row {
    display: flex;
    flex-grow: 1; /* Grow to fill the container */
}

.left-column-container, .right-column-container {
    position: relative;
    max-height: 500px; /* Adjust as needed */
}

.left-column-content, .right-column-content {
    overflow-y: auto;
    max-height: calc(100% - 40px); /* Adjust based on button height */
}

.btn-scroll {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    /* Additional button styling */
}

#leftScrollUp, #rightScrollUp {
    top: 0;
}

#leftScrollDown, #rightScrollDown {
    bottom: 0;
}

/* Hide the default scrollbar */
.left-column-content::-webkit-scrollbar, .right-column-content::-webkit-scrollbar {
    display: none;
}

.left-column-content, .right-column-content {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}



 .chatbot-card-container {
	padding: 10px;
}

.chatbot-card {
	margin-bottom: 10px;
	
}
 /* Add a maximum height to the chat container */
.chat .card {
    max-height: calc(100vh - 120px); /* Adjust this value as needed */
    overflow-y: auto; /* Enable vertical scroll inside the chat container */
}
/* Adjust chat area */
.chat {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Grow to use available space */
    max-height: calc(100vh - 120px); /* Adjust this value as needed */
}
.card{
	
	flex-grow: 1; /* Grow to fill the chat area */
    overflow-y: auto; /* Enable scrolling for overflow content */
    margin-bottom: 0; /* Remove default margin */
	background-color: rgba(0,0,0,0.4) !important;
 }
/* Ensure the card body takes up the remaining space and scrolls internally */
.card-body {
    overflow-y: auto;
    flex-grow: 1; /* Grow to fill the available space */
    padding: 10px; /* Adjust padding as needed */
}
 .right-column-content {
	
	 background-color: rgba(0,0,0,0.4) !important;
	 border-radius: 10px;
	 padding: 20px;
	 /* Add more styling as needed */
 }
 .left-column-content {
	 background-color: rgba(0,0,0,0.4) !important;
	 border-radius: 10px;
	 padding: 20px;
	 /* Add more styling as needed */
 }
 .contacts_body{
	 padding:  0.75rem 0 !important;
	 overflow-y: auto;
	 white-space: nowrap;
 }
/* Additional styling for the message container */
.msg_card_body {
    overflow-y: auto; /* Enable scroll */
    flex-grow: 1; /* Allow it to take up available space */
}
 .card-header{
	flex-shrink: 0; /* Prevent shrinking */
	 border-radius: 15px 15px 0 0 !important;
	 border-bottom: 0 !important;
 }
 .card-footer{
	flex-shrink: 0; /* Prevent shrinking */
 border-radius: 0 0 15px 15px !important;
	 border-top: 0 !important;
 }
 .container{
	 align-content: center;
 }
 .search{
	 border-radius: 15px 0 0 15px !important;
	 background-color: rgba(0,0,0,0.3) !important;
	 border:0 !important;
	 color:white !important;
 }
 .search:focus{
	  box-shadow:none !important;
	outline:0px !important;
 }
 .type_msg{
	 background-color: rgba(0,0,0,0.3) !important;
	 border:0 !important;
	 color:white !important;
	 height: 60px !important;
	 overflow-y: auto;
 }
	 .type_msg:focus{
	  box-shadow:none !important;
	outline:0px !important;
 }
 .attach_btn{
	 border-radius: 15px 0 0 15px !important;
	 background-color: rgba(0,0,0,0.3) !important;
	 border:0 !important;
	 color: white !important;
	 cursor: pointer;
 }
 .send_btn{
	 border-radius: 0 15px 15px 0 !important;
	 background-color: rgba(0,0,0,0.3) !important;
	 border:0 !important;
	 color: white !important;
	 cursor: pointer;
 }
 .search_btn{
	 border-radius: 0 15px 15px 0 !important;
	 background-color: rgba(0,0,0,0.3) !important;
	 border:0 !important;
	 color: white !important;
	 cursor: pointer;
 }
 .contacts{
	 list-style: none;
	 padding: 0;
 }
 .contacts li{
	 width: 100% !important;
	 padding: 5px 10px;
	 margin-bottom: 15px !important;
 }
 .active{
	 background-color: rgba(0,0,0,0.3);
 }
 .user_img{
	 height: 70px;
	 width: 70px;
	 border:1.5px solid #f5f6fa;
 
 }
 .user_img_msg{
	 height: 40px;
	 width: 40px;
	 border:1.5px solid #f5f6fa;
 
 }
 .img_cont{
	 position: relative;
	 height: 70px;
	 width: 70px;
 }
 .img_cont_msg{
	 height: 40px;
	 width: 40px;
 }
 .online_icon{
	 position: absolute;
	 height: 15px;
	 width:15px;
	 background-color: #4cd137;
	 border-radius: 50%;
	 bottom: 0.2em;
	 right: 0.4em;
	 border:1.5px solid white;
 }
 .offline{
	 background-color: #c23616 !important;
 }
 .credits-container span {
	color: white;
	font-size: 12px;
	text-align: left;
	margin-top: 10px;
	display: block;

 }
 .credits-container p {
	color: white;
	font-size: 12px;
	text-align: center;
	margin-top: 10px;
	display: block;

 }
 .user_info{
	 margin-top: auto;
	 margin-bottom: auto;
	 margin-left: 15px;
 }
 .user_info span{
	 font-size: 20px;
	 color: white;
 }
 .user_info p{
	 font-size: 10px;
	 color: rgba(255,255,255,0.6);
 }
 .video_cam{
	 margin-left: 50px;
	 margin-top: 5px;
 }
 .video_cam span{
	 color: white;
	 font-size: 20px;
	 cursor: pointer;
	 margin-right: 20px;
 }
 .msg_cotainer{
	 margin-top: auto;
	 margin-bottom: auto;
	 margin-left: 10px;
	 border-radius: 25px;
	 background-color: rgb(82, 172, 255);
	 padding: 10px;
	 position: relative;
 }
 .msg_cotainer_send{
	 margin-top: auto;
	 margin-bottom: auto;
	 margin-right: 10px;
	 border-radius: 25px;
	 background-color: #58cc71;
	 padding: 10px;
	 position: relative;
 }
 .msg_time{
	 position: absolute;
	 left: 0;
	 bottom: -15px;
	 color: rgba(255,255,255,0.5);
	 font-size: 10px;
 }
 .msg_time_send{
	 position: absolute;
	 right:0;
	 bottom: -15px;
	 color: rgba(255,255,255,0.5);
	 font-size: 10px;
 }
 .msg_head{
	 position: relative;
 }
 #action_menu_btn{
	 position: absolute;
	 right: 10px;
	 top: 10px;
	 color: white;
	 cursor: pointer;
	 font-size: 20px;
 }
 .action_menu{
	 z-index: 1;
	 position: absolute;
	 padding: 15px 0;
	 background-color: rgba(0,0,0,0.5);
	 color: white;
	 border-radius: 15px;
	 top: 30px;
	 right: 15px;
	 display: none;
 }
 .action_menu ul{
	 list-style: none;
	 padding: 0;
	 margin: 0;
 }
 .action_menu ul li{
	 width: 100%;
	 padding: 10px 15px;
	 margin-bottom: 5px;
 }
 .action_menu ul li i{
	 padding-right: 10px;
 }
 .action_menu ul li:hover{
	 cursor: pointer;
	 background-color: rgba(0,0,0,0.2);
 }
 @media(max-width: 576px){
	 .contacts_card{
	 margin-bottom: 15px !important;
 }
 }
 /* Style for chatbot team cards in the right column */
.chatbot-team-card {
    background: rgba(0,0,0,0.4); /* Semi-transparent background */
    color: white; /* Text color */
    border-radius: 15px; /* Rounded corners */
    margin-bottom: 15px; /* Space between team cards */
    padding: 10px; /* Padding inside the team card */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Style for the header of the team card */
.chatbot-team-card .card-header {
    background: rgba(255,255,255,0.1); /* Lighter background for the header */
    border-bottom: 1px solid rgba(255,255,255,0.2); /* Light border for separation */
    font-weight: bold; /* Bold font for the team name */
    text-align: center; /* Center the team name */
}

/* Style for the list of chatbots within the team card */
.chatbot-team-card .list-group-item {
    background: transparent; /* Transparent background for each list item */
    border: none; /* Remove borders */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Align items vertically */
    padding: 10px; /* Padding inside each list item */
}

/* Style for the chatbot icon within the team card */
.chatbot-team-card .chatbot-icon {
    margin-right: 10px; /* Space between icon and text */
    width: 40px; /* Size of the icon */
    height: 40px; /* Size of the icon */
    border-radius: 50%; /* Make the icon round */
}

/* Style for the chatbot info within the team card */
.chatbot-team-card .chatbot-info strong {
    font-weight: bold; /* Bold font for the chatbot role */
}

/* Style for the "Talk to Team" button in the team card footer */
.chatbot-team-card .chatbot-team-talk-btn {
    width: 100%; /* Full width of the footer */
    background-color: #007bff; /* Primary button color */
    color: white; /* Button text color */
    border-radius: 15px; /* Rounded corners for the button */
    margin-top: 10px; /* Space above the button */
    padding: 10px; /* Padding inside the button */
    border: none; /* Remove default border */
}

/* Add hover effect for the "Talk to Team" button */
.chatbot-team-card .chatbot-team-talk-btn:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

/* Add a create button for chatbot teams in the right column */
.btn-create-chatbot-team {
    background-color: #28a745; /* Success green color */
    /* Rest of the styles are similar to .btn-create-chatbot */
}


/* When implementing the functionality, ensure that the create button has an onclick event to handle team creation */