html {
    height: 100%;
    margin: 0;
}

body {
    height: 100%;
    margin: 0;
    background-color: #778899;
}

.molecule-viewer-container {
    position: relative;
    width: 800px; /* Assuming this is your desired width */
    margin: auto;
}

.legend {
    position: absolute;
    bottom: 10px; /* Adjust as needed */
    left: 10px; /* Adjust as needed */
    background-color: rgba(255, 255, 255, 0.0); /* Semi-transparent white */
    border: 1px solid #FF7F50;
    border-radius: 20px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    color: white;
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 10px;
}

.canvas-container {
    position: relative;
    display: block;
    width: 800px;
    margin: auto;
    align-items: center;
    margin-top: 20px; /* Add some space for the notification */

}

.canvas-container canvas {
    border-radius: 20px;

}
.input-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
}

.input-container input {
    border: 2px solid #ddd; /* Light grey border */
    border-radius: 20px; /* Rounded corners */
    padding: 10px 20px; /* Padding inside the input */
    outline: none; /* Removes the default focus outline */
    transition: all 0.3s ease; /* Smooth transition for interactions */
    font-size: 16px; /* Larger, readable text */
    margin-right: 10px; /* Spacing between input and button */
}

.input-container input:focus {
    border-color: #FF7F50; /* Highlight color when focused */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.2); /* Subtle shadow on focus */
}

.input-container button {
    border: none;
    background-color: #FF7F50; /* Button background color */
    color: white; /* Text color */
    padding: 10px 20px;
    border-radius: 20px; /* Match input field's border radius */
    cursor: pointer; /* Cursor changes to pointer to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth background color transition */
    font-size: 16px;
}

.input-container button:hover {
    background-color: #0056b3; /* Darker shade on hover */
}
.notification {
    display: none;
    position: absolute;
    top: 2%; /* Position just below the input container */
    left: 0;
    right: 0;
    margin-left: 20px;
    margin-right: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    color: black;
    padding: 10px;
    text-align: center;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    opacity: 0; /*initially invisible*/
    transition: opacity 0.5s ease-in-out; /* Smooth transition for opacity */1

}

.notification.info {
    background-color: lightblue;
    color: darkblue;
}

.notification.error {
    background-color: pink;
    color: darkred;
}

.molecule-viewer-container {
    position: relative;
    /* Other styles... */
}

.molecule-name-container {
    position: absolute;
    top: 10px; /* Adjust as needed */
    left: 10px; /* Adjust as needed */
    background-color: rgba(255, 255, 255, 0.05); /* Semi-transparent white */
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 20px;
}

/* Style for the text inside the container */
.molecule-name-container span {
    color: #353535; /* Or any color you prefer */
    font-weight: bold;
    font-family: sans-serif;
    /* Additional text styles as needed */
}

.version-container {
    font-size: 7pt;
    color: white;
    text-align: right;
    margin-top: 5px;
    padding-right: 20px;
}