/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body */
body {
    display: flex;
    font-family: 'Inter', sans-serif; /* Changed to Inter font for a closer match */
    color: #000000;
    background-color: #ffffff;
    height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 250px;
    background-color: #f7edee;
    display: flex;
    flex-direction: column;
    padding: 10px;
    transition: transform 0.3sease;
    border-right: 1px solid #9c8989;
    /* overflow-y: scroll; */
}

.sidebar nav {
    margin-top: auto;
    
}

.logo {
    font-size: 22px;
    font-weight: 600; /* Bold font for the logo */
    margin-top: 8px;
    /* margin-bottom: 20px; */
    display: flex;
    align-items: center; /* Aligns text and icon vertically */
    color: #000000; /* Logo text color */
}

.NetSim-logo {
    width: 30px; /* Adjust logo size */
    height: auto; /* Maintain aspect ratio */
    margin-right: 10px; /* Space between icon and text */
}




.section-title {
    font-size: 14px;
    color: #000000;
    margin: 15px 0 5px; /* Added spacing above and below */
    font-weight: 500; /* Slightly bolder section title */
}

.upgrade-section {
    margin-top: auto;
    text-align: center;
}

.upgrade-button {
    padding: 10px 16px; /* Adjusted padding */
    border: none;
    background-color: #ffffff;
    color: #000000;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.2s;
}

.upgrade-button:hover {
    background-color: #ffffff;
}

/* Chat Area */
.chat-area {
    flex: 1;
    transition: all 0.3s ease; 
    display: flex;
    flex-direction: column;
    width: calc(100% - 200px);
    background-color: #ffffff; /* Same background color as body */
}

.chat-area.shrink {
    width: calc(100% - 300px);
    flex: 1;
    padding-right: 300px;
}

.sidebar.hidden + .chat-area {
    width: 100%;
}

.chat-header {
    padding: 7px;
    background-color: #ffffff;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    border-bottom: 1px solid #ffffff;
    color: #000000; /* Lighter text color */
}

.chat-header sup {
    font-size: 0.5em; /* Smaller font size */
    vertical-align: super; /* Align the text to appear above */
}

.chat-content {
    flex: 1;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
}

.intro-text {
    margin-bottom: 20px;
    font-size: 22px;
    color: #000000;
    text-align: center;
}

.chat-messages {
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Spacing between messages */
    align-items: flex-start; /* Align messages to the left */
}

/* Centering message container */
.chat-content {
    justify-content: flex-start; /* Start aligning chat messages at the top */
    align-items: center; /* Center chat messages horizontally */
}

.message {
    /* background-color: #ff4c4c ; */
    padding: 10px;
    border-radius: 8px;
    color: rgb(0, 0, 0);
    width: 100%; /* Ensure messages take full width */
    max-width: 100%; /* Prevent overflowing */
    word-wrap: break-word; /* Ensure long messages wrap */
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.5); /* Added shadow for depth */
}

/* User message */
.message.user-message {
    background-color: #e6e5e5;/* White background for user messages */
    width: 80%; /* Ensure messages take full width */
    max-width: 100%; /* Prevent overflowing */
    padding: 10px; /* Optional: Padding for spacing */
    border-radius: 8px; /* Optional: Rounded corners for the message */
    color: #000000; /* Optional: Text color (black) */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    align-self: flex-end;
}

/* Script message */
.message.script-message {
    background-color: #ffffff; /* Red background for script messages */
}

.message.custom-class {
    background-color: #f5f1e3; /* Red background for script messages */
}

.input-section {
    padding: 20px;
    background-color: #ffffff00;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.input-container {
    position: relative;
    width: 80%;
    margin: auto;
    /* display: flex;
    justify-content: center;
    align-items: center; */
}
#user-input {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: rgb(0, 0, 0);
    width: 100%;
    border: none;
    
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    height: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    background-color: #f7edee;
    resize: none; /* Prevent resizing of textarea */
    overflow-y: auto;
    margin-right: auto;  
    margin-left: auto;  
    flex-grow: 1;
}
/* Focused state for user input */
#user-input:focus {
    outline: none; /* Remove outline on focus */
}

#user-input::placeholder {
    color: #000000;
}

button {
    background-color: #d1cbcc;
    color: rgb(0, 0, 0);
    border: chocolate;
    padding: 4px;
    cursor: pointer;
    border-radius: 10px;
}

button:hover {
    background-color: #e7dedf;
}


button.more-button {
    margin-inline: 0;
    margin-left: auto;
    margin-right: 5px;
    border-radius: 5px;
    padding-left: 8px;
    padding-right: 8px;
}

button.menu-button {
    padding: 0px;
    display: block;
    margin-left: auto;
    background-color: #9a9688;
    padding-left: 10px;
    padding-right: 10px;
}




.action-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
}

.action-buttons button {
    padding: 10px;
    background-color: #dac7c7;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.action-buttons button:hover {
    background-color: #ffffff;
}
/* File upload icon styling */
.file-upload-label {
    cursor: pointer;
}

/* Hover effect for file upload icon */
.file-upload-label:hover {
    color: #FF5722;
}

/* Hide the actual file input */
.file-upload-input {
    display: none;
}


.bottom-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    background-color: #f7edee;
    /* position: absolute; */
    bottom: 1 px;
    width: 100%;
    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding-bottom: 15px;
    padding: 0px 15px;
    padding-bottom: 5px;
}

.file-upload-btn {
    /*pointer-events: none;  Disable pointer events to prevent interaction until image upload is activated from backend */
    cursor: pointer; /* Change cursor to indicate disabled state */
    padding: 10px;
    background-color: #f7edee;
    border-radius: 20px;
    display: flex;
    align-items: center;
    /* margin-right: auto; */

}

.file-upload-btn:hover{
    background-color: #f7edee;
}

.file-upload-btn i {
    font-size: 18px;
    color: #f7edee;
}
#image-upload {
    display: none;
}

.send-btn {
    background-color: #f7edee; 
    color: rgb(43, 39, 39);
    border: none;
    padding: 7px 7px;
    padding-left: 10px;
    margin-top: 5px;
    cursor: pointer;

    border-radius: 50%;
    font-size: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
}



.send-btn:hover {
    background-color: #d1bdbd;
}


/* Protocol input box styling */
#protocol-input {
    width: 100%;
    max-width: 200px;
    padding: 5px;
    /* font-weight: normal !important; */
    border: 1px solid #ccc;
    border-radius: 20px; /* Rounded corners for the select box */
    font-size: 16px;
    background-color: #e7d8da;
    color: #000000;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    margin-right: auto;  
    /* margin-left: auto;  */
    cursor : pointer ;
    display : none ;
}


/* Focused state for protocol input */
#protocol-input:focus {
    border-color:  #e4caca;
    outline: none;
}
/* Style for select dropdown options */
#protocol-input option {
    font-size: 16px;
    padding: 10px;
}

/* Style the optgroup label */
#protocol-input optgroup {
    font-family: Arial, sans-serif; /* Customize font family */
    font-size: 18px; /* Adjust the font size */
    font-weight: 20 ;
    
    cursor:pointer ;
}


optgroup[label] {
    color: rgb(61, 54, 52);
}
option {
    color: black; /* Ensure the options inside are not red */
}

/* Loading Message */
.loading-message {
    background-color: #ffffff;
    padding: 15px; /* Increased padding for a wider message */
    border-radius: 8px;
    color: rgb(0, 0, 0);
    width: 100%; /* Take up full width within its parent container */
    max-width: 800px; /* Set a wider max-width for the loading message */
    box-sizing: border-box; /* Ensure padding is included in the width */
    text-align: center; /* Center text for better visibility */
}
.sidebar-item {
    display: flex;                           /* Flexbox for alignment */
    align-items: center;                     /* Vertically center the content */
    color: #000000;                          /* Text color */
    font-size: 15px;                         /* Font size */
    padding: 10px 0;                         /* Vertical padding */
    text-decoration: none;                   /* Remove underline */
    transition: background-color 0.3s ease,   /* Smooth hover transition */
                color 0.3s ease;             /* Smooth hover transition */
    cursor: pointer;
    /* Additional Styling */
    margin: 5px 0;                           /* Margin between items */
    border-radius: 4px;                      /* Slight rounding of corners */
    font-weight: 500;                        /* Slightly bolder text for emphasis */
}

.sidebar-item:hover {
    background-color: #f0f0f0;              /* Light background on hover */
    color: #007bff;                         /* Change text color on hover */
}


#example-prompt{
    width: 100%;
    max-width: 300px;
    padding: 10px;
    /* font-weight: normal !important; */
    border: 1px solid #ccc;
    border-radius: 20px; /* Rounded corners for the select box */
    font-size: 13px;
    background-color: #e7d8da;
    color: #000000;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    margin-right: auto;  
    /* margin-left: auto;  */
    cursor : pointer ;
}

/* Styling for <ul> */
ul {
    padding: 0;                             /* Remove default padding */
    list-style-type: none;                  /* Remove default bullet points */
}

/* Styling for <li> */
ul li {
    margin-bottom: 10px;                    /* Add space below each <li> */
    padding-left: 20px;                      /* Add space on the left side of <li> */
    font-size: 14px;                         /* Optional: Reduce font size for <li> */
}



.sidebar.hidden{
    width : 0% ;
}






.disclaimer-footer {
    text-align: center;
    font-size: 12px;
    color: #131111;
    padding: 5px 20px;
    border-top: 1px solid #ffffff;
    margin-top: 1px;
}

.textarea-container {
    position: relative;
    min-height: 100px;
    /* padding: 5px 5px; */
    max-height: 300px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow-y: auto;
    box-shadow: 0px 4px 8px rgb(16 16 16 / 30%);
    border-radius: 20px;
}


/* Style for the toggle button (icon) */
.toggle-btn {
    position: absolute;
    top: 20px;
    /* left: 150px; */
    left: 20px;
    background-color: transparent;
    padding: 0;
    border: none;
    color: rgb(0, 0, 0);
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
}

.toggle-btn:hover {
    background-color: transparent; /* Ensures no background color changes */
    color: rgb(0, 0, 0); /* Ensures the text color stays the same */
    box-shadow: none; /* Removes any box shadow (if there's any) */
}

.sidebar-icon {
    position: absolute;
    
    background-color: transparent;
    padding: 0;
    border: none;
    color: rgb(0, 0, 0);
    font-size: 20px; /* This is for the font size of icons, not needed for the image */
    cursor: pointer;
}

#sidebar-icon {
    width: 25px; /* Set this to match the size of the arrow */
    height: auto; /* Maintain the aspect ratio */
}


/* Sidebar hidden class */
.sidebar.hidden {
    transform: translateX(-100%);
}

.hidden {
    display: none;
}


/* .MathJax_Preview {
    margin-left: 200px; /* or margin-left: 20px; */
/* } */ 


/* code {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    padding: 5px;

  }

strong {
    margin-bottom: 10px;
} */ 


/* Style for the bouncing dots */
.bouncing-dots {
    display: inline-flex;
}

.bouncing-dots .dot {
    width: 5px;
    height: 5px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #3498db; /* Blue color */
    animation: bounce 1.4s infinite ease-in-out;
}

/* Create a delay for each dot to create the bouncing effect */
.bouncing-dots .dot:nth-child(1) {
    animation-delay: 0s;
}

.bouncing-dots .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.bouncing-dots .dot:nth-child(3) {
    animation-delay: 0.4s;
}

/* Bounce animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}


.button-container {
    display: flex;      /* Align child elements (buttons) horizontally */
    gap: 10px;          /* Optional: Adds space between the buttons */
    margin-left: 20px;
    margin-bottom: 30px;
}

/* CSS for loading wheel (spinner) */
.loading-wheel {
    border: 4px solid #e9c9cc; /* Light grey background */
    border-top: 4px solid #79b0d8; /* Blue color for the spinner */
    border-radius: 50%; /* Make it a circle */
    width: 15px; /* Size of the spinner */
    height: 15px; /* Size of the spinner */
    animation: spin 1s linear infinite; /* Animation for spinning effect */
    /* margin: 10px auto 0; */
    margin: 0px 0px 0px 5px; /* top right bottom left */
    display: inline-block ; 
}

/* Spin animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Specific styling for the accumulated text container */
.accumulated-text {
    text-align: justify;
}

.accumulated-text h1, .accumulated-text h2 {
    color: #0044cc;
    margin-bottom: 10px;
}

.accumulated-text p {
    line-height: 1.6;
    margin-bottom: 15px;
}

.accumulated-text h1 {
    /* text-align: center; */
    font-size:20px;
    margin-top: 30px;
}

.accumulated-text h2 {
    margin-top: 25px;
    font-size:18px;
    color: #1e2a7f;
}

.accumulated-text h3 {
    font-size:17px;
}


.accumulated-text p, .accumulated-text ul {
    font-size: 16px;
    margin-left: 20px;
    margin-right: 20px;
}

.accumulated-text ul {
    list-style-type: square;
    margin-left: 40px;
}

.accumulated-text li {
    margin-bottom: 10px;
}

.accumulated-text strong {
    font-weight: bold;
    color: #007acc;
}

.accumulated-text .citation {
    font-style: italic;
    font-size: 14px;
    color: #555;
    margin-left: 20px;
}

.accumulated-text a {
    color: #065082;
}

.accumulated-text a:hover {
    text-decoration: underline;
}

.accumulated-text pre {
    background-color: #e5e5e5;
    border: 1px solid #ccc;
    padding: 15px;
    font-family: 'Courier New', Courier, monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 20px 0;
    border-radius: 10px;
}


/* Table Styling */
.accumulated-text table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.accumulated-text table, .accumulated-text th, .accumulated-text td {
    border: 1px solid #ddd;
}

.accumulated-text th, .accumulated-text td {
    padding: 10px;
    text-align: left;
}

.accumulated-text th {
    background-color: #f4f4f4;
    color: #333;
}

.accumulated-text tr:nth-child(even) {
    background-color: #f9f9f9;
}

.accumulated-text tr:hover {
    background-color: #eaeaea;
}

/* References Section */
.accumulated-text ol {
    margin-left: 40px;
    margin-bottom: 20px;
}

.accumulated-text ol li {
    margin-bottom: 10px;
    font-size: 16px;
}


/* Code block specific styles
.accumulated-text code {
    background-color: #383535;
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 17px;
    /* font-family: 'Courier New', Courier, monospace; */
    /* color: rgb(51, 108, 214);
}

.accumulated-text pre code {
    background-color: #dad3d3;
    color: #161613;
    padding: 15px;
    border-radius: 5px;
    font-size: 16px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
} */ 



.login-logo {
    font-size: 40px;
    font-weight: 1000;
    margin-top: 5px;
    margin-left: 50px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    color: #000000;
}
.NetSim-login-logo {
    width: 42px;
    height: auto;
    margin-right: 10px;
}

/* Login Wrapper: Use absolute positioning for centering */
.login-wrapper {
    position: fixed; /* Fixed position ensures it stays on top */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
    z-index: 1000; /* Makes sure it’s above all content */
}

/* Login Container Styles */
.login-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 20px;
    background-color: #c7c1c1;
    border-radius: 20px;
    height: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Login Title */
.login-container h2 {
    font-size: 24px;
    font-weight: 600;
    /* margin-bottom: 20px; */
    margin-top: 100px;
    color: #333;
    display: flex;
    margin-left: 85px;
}
/* Google Button Styles */
.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e2d4d4;
    color: #fff;
    /* padding: 12px 20px; */
    border-radius: 20px;
    /* font-size: 16px; */
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: 1px solid #1f2328;
    max-width: 300px;
    margin-top: 10px;
    margin-left: 30px;
}


.google-btn img {
    width: 40px;
    height: 40px;
    margin-right: 5px;
}

.google-btn span {
    font-weight: 500;
}

@media (max-width: 480px) {
    .login-container {
        width: 90%;
    }

    .input-container {
        width: 100%;
    }  
}


/* person . png */
/* Hide the dropdown content by default */
.dropdown-content {
    display: none;
    position: absolute;
    border-radius: 20px;
    background-color: #f7edee;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    top: 50px;
    /* left: 20px; */
    right: 15px;
}

/* Show dropdown content when hovering over the icon */
/* .dropdown:active .dropdown-content {
    display: block;
} */

.profile-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
    /* left: auto; */
    /* margin-right: 20p; */
    /* padding-right: -20px; */
}

/* Optional styling for the dropdown content */
.dropdown-content p, .dropdown-content a {
    margin: 10px 10px 10px 10px;
    font-size: 16px;
    color: #000000;
}

/* Show the logout button when email is visible */
#logout-button {
    /* display: block; */
    /* margin: 10px 10px 10px 10px; */
    margin-top: 15px;
    margin-left: 5px;
    font-size: 16px;
    color: #000000;
    border-radius: 10px;
    display: flex;
    cursor: pointer;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    text-decoration: none;
}


.header-left {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    /* text-align: center; */
    
  }
  
  /* .header-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  } */

i#Beta-icon {
    text-align: center;
}

/* .dropdown {
    /* position: relative; */
    /* top: 20px; */
    /* left: 650px; */
    /* right: 20px; */
/* } */ 

.Continue_with_google {
    background-color: #e2d4d4;
    font-size: 20px;
    padding: 20px;
    /* padding-right: 0px; */
    border-radius: 20px;
}

.Continue_with_google:hover{
    background-color: #e2d4d4;
}

.sidebar .nav-Recent {
    margin-top: 10px;
    margin-right: -10px;
    overflow-y: scroll;
    min-height: 400px;
}

.sidebar-item-Recent {
    display: flex;
    align-items: center;
    color: #000000;
    font-size: 18px;
    padding: 20px 0;
    padding-bottom: 0px;
    text-decoration: none;
    margin: 5px 0;
    border-radius: 4px;
    font-weight: 500;
}

.history-item {
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    margin: 5px 0;
    background: #f7edee;
    transition: background 0.3s;
    font-size: 12px;
    display: flex;
}

.history-item:hover {
    background: #dddbdb;
}

/* ul#history-list {
    overflow-y: scroll;
    height: 200px;
} */

.centered-footer{
    /* position: absolute; */
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 75%;
    padding-top: 90px;
    position: relative;
   
}

* {
    scrollbar-color: #f7edee transparent;
}







.protocol-upload-btn {
    display: flex; /*chnages*/
    align-items: center; /*changes*/
    justify-content: center; /*changes*/
    cursor: pointer;
    border-radius: 20px;
    padding: 5px;
    border: 1px solid black;
    margin-right: 10px;
    padding-top:3px;
    padding-bottom:3px;
}

.protocol-upload-btn:hover{
    background-color: #e8d4d6;
}

.protocol-upload-btn img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.prompt-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none ;
}



.prompt-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    padding: 20px;
    padding-right: 0px;
    background-color: #ffffff;
    border-radius: 20px;
    height: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* text-align: center; */
    /* overflow-y: scroll; */
}

.option-box {
    display: flex
;
    margin-bottom: 15px;
    background-color: #dddbdb;
    /* padding: 10px; */
    border-radius: 20px;
    /* width: 100%; */
    justify-content: center;
    align-items: center;
}


.prompt-option {
    margin-bottom: 10px;
    margin-right: auto;
    font-size: 14px;
    padding: 5px;
    padding-left: 15px;
    padding-top: 15px;
    background-color: #dddbdb;
    /* border: 1px solid #ddd; */
    /* width: 89%; */
    word-wrap: break-word;
    white-space: normal;
    border-radius: 20px;
}

.use-btn {
    background-color: #eeb7ac;;
    color: rgb(0, 0, 0);
    border: none;
    /* padding: 8px 16px; */
    font-size: 14px;
    /* padding: 10px; */
    cursor: pointer;
    /* width: 10%; */
    /* padding-right: 10px; */
    margin-right: 5px;
    height: 30px;
    /* border-radius: 20px; */
    /* text-align: center; */
    /* justify-content: center; */
}

.use-btn:hover {
    background-color: #aacdd8;
}

.prompt-header{
    margin-bottom: 20px;
    font-size: 22px;
    color: #000000;
    text-align: center;
}

button.close-btn1 {
    position: absolute;
    /* top: 10px; */
    right: 20px;
    background: transparent;
    border: none;
    font-size: 20px;
    color: #000000;/* You can change this to any color you prefer */
    cursor: pointer;
    font-weight: bold;
    z-index: 10; /* Ensures the button is always on top */
}

button.close-btn1:hover {
    color: red; /* Optional: changes color on hover */
}



.protocol-upload-btn-protocol {
    border-radius: 20px;
    display: flex; /*chnages*/
    align-items: center; /*changes*/
    justify-content: center; /*changes*/
    cursor: pointer;
    margin-right: auto ;
    padding: 7px 7px ;
    border: 1px solid black;
    padding-top:5px;
    padding-bottom:5px;
}

.protocol-upload-btn-protocol:hover {
    background-color: #e8d4d6;
}


.protocol-upload-btn-protocol img{
    width: 25px;
    height: 25px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.protocol-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none ;
}

.protocol-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    padding: 20px;
    padding-right: 0.0px;
    background-color: #ffffff;
    border-radius: 20px;
    height: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* text-align: center; */
    /* overflow-y: scroll; */
}

.option-box-protocol {
    display: flex;
    margin-bottom: 15px;
    background-color: #dddbdb;
    /* padding: 10px; */
    border-radius: 20px;
    /* width: 100%; */
    justify-content: center;
    align-items: center;
}


.protocol-option {
    margin-bottom: 10px;
    margin-right: auto;
    font-size: 14px;
    padding: 5px;
    padding-left: 15px;
    padding-top: 15px;
    background-color: #dddbdb;
    /* border: 1px solid #ddd; */
    /* width: 89%; */
    word-wrap: break-word;
    white-space: normal;
    border-radius: 20px;
}

.use-btn-protocol {
    background-color: #eeb7ac;;
    color: rgb(0, 0, 0);
    border: none;
    /* padding: 8px 16px; */
    font-size: 14px;
    /* padding: 10px; */
    cursor: pointer;
    /* width: 10%; */
    /* padding-right: 10px; */
    margin-right: 5px;
    height: 30px;
    /* border-radius: 20px; */
    /* text-align: center; */
    /* justify-content: center; */
}

.use-btn-protocol:hover {
    background-color: #aacdd8;
}

.protocol-header{
    margin-bottom: 20px;
    font-size: 22px;
    color: #000000;
    text-align: center;
}

.protocol-header-h1{
    margin-bottom: 10px;
    font-size: 16px;
    color: #2e1b1b;
    /* text-align: center; */
}

button.close-btn1-protocol {
    position: absolute;
    /* top: 10px; */
    right: 20px;
    background: transparent;
    border: none;
    font-size: 20px;
    color: #000000;/* You can change this to any color you prefer */
    cursor: pointer;
    font-weight: bold;
    z-index: 10; /* Ensures the button is always on top */
}

button.close-btn1-protocol:hover {
    color: red; /* Optional: changes color on hover */
}


.protocol-header-h2{
    margin-bottom: 10px;
    font-size: 15px;
    color: #2e1b1b;
    /* text-align: center; */
}

.protocol-header-h12{
    margin-bottom: 0px;
    font-size: 16px;
    color: #2e1b1b;
    /* text-align: center; */
}

.logout-email {
    /* background-color: #f7edee; */
    font-size: 16px;
    /* width: 49px; */
    /* height: 5px; */
    margin-top: 2px;
}

#logout-button:hover {
    background: #dddbdb;
    /* padding: 5px; */
}

.overlapp-y-scroll{
    overflow-y: scroll;
    height: 300px;
}

.New_Chat_logo {
    font-size: 17px;
    font-weight: 500;
    margin-top: 24px;
    /* margin-bottom: 20px; */
    display: flex
;
    align-items: center;
    color: #000000;
    /* height: 10px; */
    background-color: #dccccca8;
    padding: 5px;
    border-radius: 5px;
    margin-left: -4px;
    cursor: pointer;
    width: 157px;
    /* padding-left: 2px; */
}

.New_Chat_logo:hover {
   
    background-color: #b9aeaea8;
    
}

.New_Chat_NetSim_logo {
    width: 24px; /* Adjust logo size */
    height: 24px; /* Maintain aspect ratio */
    margin-right: 10px; /* Space between icon and text */
}

.configue-upload-btn {
    display: inline-block;
    cursor: pointer;
    border-radius: 20px;
    
    /* margin-top: 5px;  */


}

.configue-upload-btn:hover{
    background-color: #d1bdbd;
    
}

.configue-upload-btn img {
    width: 35px;
    height: 35px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    padding: 7px 7px;
}



label.deep-research-btn {
    display: flex; /*changes*/
    align-items: center; /*changes*/
    justify-content: center;
    cursor: pointer;
    padding-top: 5px;
    border-radius: 20px;
    padding: 7px 7px;
    border: 1px solid black;
    margin-right: 10px;
        
}

label.deep-research-btn:hover {
    background-color: #e8d4d6;
}

label.deep-research-btn.selected {
    background-color: #d1bdbd;
}