:root {
    /* Define custom CSS variables */
    --main: #14a14a; /* Main color */
    --text: #fff; /* Text color */
    --submitBackgroundColor: #00a3e4; /* Background color for submit button */
    --loginColor: #eee; /* Color for login text */
    --loginBorderRadius: 0.25rem; /* Border radius for login inputs */
    --labelBackgroundColor: #363b41; /* Background color for labels */
    --inputBackgroundColor: #3b4148; /* Background color for inputs */
    --inputHoverBackgroundColor: #434a52; /* Background color for inputs on hover */
    --submitColor: #eee; /* Text color for submit button */
    --submitHoverBackgroundColor: #0192cc; /* Background color for submit button on hover */
    --formFieldMargin: 0.875rem; /* Margin for form fields */
}

/* User Styling */
.user-row {
    /* Styling for user rows */
    font-size: 1.15rem; /* Font size for user row */
    cursor: pointer; /* Cursor changes to pointer */
    color: var(--text); /* Text color using variable */
    padding: 0.7rem; /* Padding inside user row */
    border-bottom: 0.1rem solid var(--text); /* Bottom border with text color */
    user-select: none; /* Disable text selection */
}

.user-details {
     /* Styling for user details */
    background: var(--text); /* Background color using variable */
    padding: 0.7rem; /* Padding inside user details */
}

.user-details-animate {
    /* Animation for user details */
    animation: expand-details 0.3s; /* Animation for expanding details */
}

@keyframes expand-details {
    /* Keyframes for expanding user details */
    0% {
        max-height: 0; /* Start with height 0 */
    }
    100% {
        max-height: 50rem; /* End with maximum height */
    }
}

.login {
    padding: 1rem; /* Padding inside login section */
    font-size: 1.2em; /* Font size for login text */
    color: var(--loginColor); /* Color for login text using variable */
}

/* Form Styling */
.form {
    /* Styling for forms */
    padding: 1rem; /* Padding inside form */
    font-size: 1.2em; /* Font size for form text */
}

.form__field {
    /* Styling for form fields */
    display: flex; /* Flex display for form fields */
    margin: var(--formFieldMargin); /* Margin for form fields using variable */
}

.login label {
    background-color: var(--labelBackgroundColor); /* Background color for labels */
    border-bottom-right-radius: 0; /* No border radius for bottom right */
    border-top-right-radius: 0; /* No border radius for top right */
    padding-left: 1.25rem; /* Left padding for label */
    padding-right: 1.25rem; /* Right padding for label */
    border-radius: var(--loginBorderRadius); /* Border radius for labels using variable */
    padding: 1rem; /* Padding inside label */
}

.form__input, .login input[type='text'], .login input[type='email'], .login input[type='password'], .login input[type='submit'] {
    /* Styling for form inputs */
    background-color: var(--inputBackgroundColor); /* Background color for inputs */
    border-radius: var(--loginBorderRadius); /* Border radius for inputs */
    padding: 1rem; /* Padding inside inputs */
    color: var(--text); /* Text color for inputs using variable */
    width: 100%; /* Full width for inputs */
}

.form input[type='password'], .form input[type='text'], .form input[type='email'], .form select {
    background-color: var(--inputBackgroundColor); /* Background color for form inputs */
    border-radius: var(--loginBorderRadius); /* Border radius for form inputs */
    padding: 1rem; /* Padding inside form inputs */
    color: var(--text); /* Text color for form inputs using variable */
    width: 100%; /* Full width for form inputs */
}

.form input[type='submit'], .login input[type='submit'] {
    background-color: var(--submitBackgroundColor); /* Background color for submit button */
    color: var(--submitColor); /* Text color for submit button */
    font-weight: 700; /* Bold text for submit button */
    text-transform: uppercase; /* Uppercase text for submit button */
    width: 100%; /* Full width for submit button */
}

button[type='submit'], #new-document input[type='submit'], #upload-file input[type='submit'] {
    cursor: pointer; /* Pointer cursor for submit buttons */
    padding: 0.5rem; /* Padding inside submit buttons */
    font-size: 1.3rem; /* Font size for submit button text */
    background: var(--submitBackgroundColor); /* Background color for submit buttons */
    border: none; /* No border for submit buttons */
    color: #EEEEEE; /* Text color for submit buttons */
    flex: none; /* No flex grow for submit buttons */
    width: 100%; /* Full width for submit buttons */
    margin-top: 1.5rem; /* Top margin for submit buttons */
}

/* Styling for submit buttons on focus and hover states in forms and login section */
.form input[type='submit']:focus, 
.form input[type='submit']:hover, 
.login input[type='submit']:focus, 
.login input[type='submit']:hover {
    background-color: var(--submitHoverBackgroundColor); /* Change background color on focus and hover */
}

/* Styling for anchor tags within the login section */
.login a {
    color: #0192cc !important; /* Blue color for login links, overriding any other styles */
}

/* Styling for tag input area */
.tagarea {
    width: 100%; /* Full width of the parent container */
    margin: auto; /* Center align */
    background-color: #f4f4f4; /* Light grey background color */
    border: solid 1px #cccccc; /* Light grey border */
    padding: 0.3125rem; /* Padding inside tag area */
}

/* Styling for inputs and submit buttons within the tag input area */
.tagarea input, .tagarea .submit {
    display: inline-block; /* Inline block display */
    margin-bottom: 0.3125rem; /* Bottom margin */
}

/* Specific styling for input fields within the tag input area */
.tagarea .input {
    border: 1px solid lightgray; /* Light grey border */
    color: var(--submitBackgroundColor); /* Text color using variable */
    width: 80%; /* 80% width of the parent container */
    font-family: "Open Sans", sans-serif; /* Font family for input text */
    padding-left: 0.125rem; /* Left padding inside input */
}

/* Specific styling for submit buttons within the tag input area */
.tagarea .submit {
    width: 20%; /* 20% width of the parent container */
    cursor: pointer; /* Pointer cursor on hover */
    background-color: #ededed; /* Light grey background color */
    border: 1px solid transparent; /* Transparent border */
    color: var(--submitBackgroundColor); /* Text color using variable */
    float: right; /* Float to the right */
    font-family: "Open Sans", sans-serif; /* Font family for button text */
}

/* Styling for task list container */
.task-list {
    overflow: scroll; /* Enable scrolling */
    max-height: 7.5rem; /* Maximum height */
    border-top: solid 1px #cccccc; /* Top border */
    padding: 0; /* No padding */
}

/* Styling for list items within the task list */
.task-list li {
    background-color: #ededed; /* Light grey background color */
    color: #303030; /* Dark grey text color */
    border-radius: 0.3125rem; /* Rounded corners */
    float: left; /* Float to the left */
    margin: 0.125rem 0.25rem; /* Margin around list items */
    padding: 0.0625rem 0.9375rem 0 0.625rem; /* Padding inside list items */
    position: relative; /* Relative positioning */
    border: solid 0.0625rem #cccccc; /* Light grey border */
    line-height: 1.5rem; /* Line height */
}

/* Styling for buttons within task list items */
.task-list button {
    padding: 0; /* No padding */
    background-color: white; /* White background color */
    border-radius: 0.3125rem; /* Rounded corners */
    width: 0.9375rem; /* Width */
    height: 0.9375rem; /* Height */
    font-size: 0.3125rem; /* Font size */
    border: solid 0.0625rem #cccccc; /* Light grey border */
    position: absolute; /* Absolute positioning */
    display: flex; /* Flex display */
    flex-direction: column; /* Column flex direction */
    justify-content: center; /* Center align vertically */
    align-items: center; /* Center align horizontally */
    top: -0.625rem; /* Position from the top */
    right: -0.625rem; /* Position from the right */
}

/* Styling for custom scrollbars in task list and plugin result containers */
.task-list::-webkit-scrollbar, #plugin-result::-webkit-scrollbar {
    width: 0.1875rem; /* Width of the scrollbar */
    background-color: #f4f4f4; /* Light grey background color */
}

/* Styling for the scrollbar thumb in task list and plugin result containers */
.task-list::-webkit-scrollbar-thumb, #plugin-result::-webkit-scrollbar-thumb {
    background-color: var(--submitBackgroundColor); /* Background color using variable */
}

/* Styling for the scrollbar corner in task list and plugin result containers */
.task-list::-webkit-scrollbar-corner, #plugin-result::-webkit-scrollbar-corner {
    background: transparent; /* Transparent background */
}

/* Background styling */
.background {
    background-image: url(../shared/imgs/stk_bg_1.webp); /* Set background image */
    width: 100%; /* Full width of the container */
    background-repeat: repeat-y; /* Repeat background vertically */
    background-size: contain; /* Scale background image to fit container */
    background-attachment: scroll; /* Background scrolls with the page */
}

/* Container for circles */
.circles-container {
    width: 100%; /* Full width of the container */
    height: 100%; /* Full height of the container */
}

/* Styling for individual circles */
.circle {
    position: relative; /* Relative positioning */
    left: 50%; /* Center horizontally */
    top: 0%; /* Align to top */
    border-radius: 100%; /* Fully rounded corners */
    border: 2px solid var(--main); /* Solid border with main color */
    background: var(--main); /* Background color using variable */
    height: 8rem; /* Fixed height */
    width: 8rem; /* Fixed width */
    filter: drop-shadow(0 0 0.75rem crimson); /* Drop shadow effect */
    transition: width 1s, height 1s, transform 1s, filter 1s, background 1s; /* Transition effects */
}

/* Hover effect for circles */
.circle:hover {
    filter: drop-shadow(30px 10px 4px #4444dd); /* Change shadow on hover */
    background: var(--main); /* Maintain background color */
    width: 25rem; /* Increase width */
    height: 25rem; /* Increase height */
    z-index: 10; /* Bring to front */
}

/* General styling for interactive text elements */
.main-ita, .recorder-ita, .datamanager-ita, .businessrule-ita, .smartregression-ita {
    position: relative; /* Relative positioning */
    cursor: pointer; /* Pointer cursor */
    font-weight: bold; /* Bold text */
    font-size: 2rem; /* Larger font size */
    color: black; /* Black text color */
    width: 200%; /* Double width */
    text-align: center; /* Centered text */
    transition: transform 0.3s ease; /* Smooth transition on transform */
}

/* Styling for pseudo-elements that display additional content */
.main-ita::after, .recorder-ita::after, .datamanager-ita::after, .businessrule-ita::before, .smartregression-ita::before {
    content: attr(data-content); /* Display content from data-content attribute */
    position: absolute; /* Absolute positioning */
    top: 20%; /* Position from the top */
    left: 110%; /* Position from the left */
    z-index: 999; /* High z-index to overlay other elements */
}

/* Hover effect for interactive text elements */
.main-ita:hover, .recorder-ita:hover, .datamanager-ita:hover, .businessrule-ita:hover, .smartregression-ita:hover {
    transform: translate(-50%, -5%); /* Move slightly on hover */
}

/* Styling for delete user links */
.delete-user a {
    color: #0192cc; /* Blue color for links */
}

/* Styling for project buttons */
.project button {
    cursor: pointer; /* Pointer cursor */
    padding: 0.5rem; /* Padding inside button */
    font-size: 1.3rem; /* Larger font size */
    background: var(--submitBackgroundColor); /* Background color using variable */
    border: none; /* No border */
    color: #EEEEEE; /* Light grey text color */
}

/* Styling for project cards */
.project-card {
    padding: 0.4rem; /* Padding inside card */
    width: 300px; /* Fixed width */
    height: 12rem; /* Fixed height */
    margin: 1rem; /* Margin around card */
    display: inline-grid; /* Grid display */
    box-shadow: 0px 0px 25px var(--submitBackgroundColor); /* Box shadow with color */
    background: #EEEEEE; /* Light grey background color */
    transition: box-shadow 0.5s; /* Smooth transition for box shadow */
}

/* Styling for headers in project cards */
.project-card h1 {
    white-space: nowrap; /* Prevent line breaks */
    text-overflow: ellipsis; /* Ellipsis for overflowed text */
    overflow: hidden; /* Hide overflowed text */
    height: 2rem; /* Fixed height */
}

/* Hover effect for project cards */
.project-card:hover {
    box-shadow: 0px 0px 25px var(--tableHeaderBackground); /* Change shadow on hover */
    transition: box-shadow 0.5s; /* Smooth transition for box shadow */
}

/* Styling for project card descriptions */
.project-card-description {
    padding: 10px 40px; /* Padding inside description */
    overflow: hidden; /* Hide overflowed content */
    height: 7rem; /* Fixed height */
}

/* Styling for paragraphs in project card descriptions */
.project-card-description p {
    color: var(--bodyColor); /* Text color using variable */
    display: -webkit-box; /* Display as webkit box */
    -webkit-line-clamp: 4; /* Limit to 4 lines */
    -webkit-box-orient: vertical; /* Vertical box orientation */
    text-overflow: ellipsis; /* Ellipsis for overflowed text */
}

/* Styling for project card menu */
.project-card-menu {
    text-align: right; /* Align text to the right */
    font-size: 1.15rem; /* Font size */
    height: 1.2rem; /* Fixed height */
}

/* Styling for menu items in project card menu */
.project-card-menu span {
    cursor: pointer; /* Pointer cursor */
    padding: 0.1rem; /* Padding inside menu item */
    margin-left: 0.1rem; /* Left margin */
}

/* Styling for document cards */
.document-card {
    width: 20rem; /* Fixed width */
    height: 18rem; /* Fixed height */
    padding: 0 0.75rem; /* Padding inside card */
    background: white; /* White background color */
    margin-right: 1rem; /* Right margin */
    margin-bottom: 1rem; /* Bottom margin */
    position: relative; /* Relative positioning */
    float: left; /* Float to the left */
}

/* Styling for details section in document cards */
.document-card .details {
    position: absolute; /* Absolute positioning */
    padding: 0 0.75rem 0.5rem 0; /* Padding inside details section */
    right: 0; /* Align to the right */
    bottom: 0; /* Align to the bottom */
    text-align: end; /* Right align text */
    color: lightslategray; /* Light grey text color */
}

/* Styling for the last document card */
.document-card:last-child {
    margin: 0; /* No margin */
}

/* Styling for delete icons in cards */
.card-delete-icon {
    color: lightgray; /* Light grey color */
    cursor: pointer; /* Pointer cursor */
}

/* Styling for collapsed document descriptions */
.collapse-document-description {
    overflow: hidden; /* Hide overflowed content */
    text-overflow: ellipsis; /* Ellipsis for overflowed text */
    display: -webkit-box; /* Display as webkit box */
    -webkit-line-clamp: 6; /* Limit to 6 lines */
    -webkit-box-orient: vertical; /* Vertical box orientation */
}

/* Styling for file manager button */
.file-manager {
    position: fixed; /* Fixed positioning */
    bottom: 2rem; /* Position from bottom */
    right: 2rem; /* Position from right */
    font-size: 1.5rem; /* Larger font size */
    color: white; /* White text color */
    cursor: pointer; /* Pointer cursor */
    padding: 0.5rem; /* Padding inside button */
    background: #424242; /* Dark grey background color */
}

/* Styling for file preview container */
.file-preview {
    position: relative; /* Relative positioning */
    width: 10rem; /* Fixed width */
    height: 7rem; /* Fixed height */
    padding: 0.3rem; /* Padding inside container */
    border: 1px solid gray; /* Gray border */
    border-radius: 2px; /* Slightly rounded corners */
    float: left; /* Float to the left */
    margin: 0.3rem; /* Margin around the container */
    box-shadow: 0px 0px 0.5rem 0 gray; /* Subtle shadow */
    overflow: hidden; /* Hide overflow content */
    text-overflow: ellipsis; /* Ellipsis for overflowed text */
    cursor: default; /* Default cursor */
}

/* Hover effect for file preview */
.file-preview:hover section {
    display: flex; /* Flexbox layout */
    align-items: center; /* Center items vertically */
    vertical-align: middle; /* Vertically align middle */
    width: 100%; /* Full width */
    flex-direction: column; /* Column direction for flex items */
    justify-content: center; /* Center items horizontally */
}

/* Hidden section inside file preview */
.file-preview section {
    display: none; /* Initially hidden */
    position: absolute; /* Absolute positioning */
    left: 0; /* Align to left */
    top: 0; /* Align to top */
    background: black; /* Black background */
    opacity: 0.95; /* Slight transparency */
    color: white; /* White text color */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
}

/* Styling for file preview heading */
.file-preview h4 {
    cursor: pointer; /* Pointer cursor */
    margin-top: 0.3rem; /* Top margin */
    margin-bottom: 0.3rem; /* Bottom margin */
}

/* Styling for images in file preview */
.file-preview img {
    height: 65%; /* Fixed height */
    width: 100%; /* Full width */
    object-fit: contain; /* Contain within bounds */
}

/* Styling for file manager container */
.file-manager-container {
    position: fixed; /* Fixed positioning */
    right: 2rem; /* Position from right */
    bottom: 5rem; /* Position from bottom */
    width: calc(100% - 4rem); /* Calculate width */
    height: 80vh; /* 80% of viewport height */
    opacity: 0; /* Initially transparent */
    display: none; /* Initially hidden */
    border-radius: 2px; /* Slightly rounded corners */
    border: 0.1rem solid; /* Solid border */
    background: white; /* White background */
}

/* Styling for close button in file manager */
.close-btn {
    position: absolute; /* Absolute positioning */
    right: 1.3rem; /* Position from right */
    top: -0.5rem; /* Position from top */
    cursor: pointer; /* Pointer cursor */
    color: darkred; /* Dark red color */
    font-weight: bold; /* Bold text */
    font-size: 2rem; /* Larger font size */
}

/* Styling for file wrapper inside file manager */
.file-manager-container .file-wrapper {
    position: relative; /* Relative positioning */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    padding: 0rem 1rem 5rem 1rem; /* Padding inside wrapper */
    overflow: auto; /* Scrollable content */
}

/* Styling for form inside file manager */
.file-manager-container form {
    position: absolute; /* Absolute positioning */
    width: 100%; /* Full width */
    bottom: 0; /* Align to bottom */
    left: 0; /* Align to left */
    padding: 0.5rem; /* Padding inside form */
}

/* Styling for file input inside form */
.file-manager-container form input[type=file] {
    width: 100%; /* Full width */
    cursor: pointer; /* Pointer cursor */
}

/* Styling for visible file manager */
.visible-file-manager {
    display: block; /* Display as block */
    animation-name: fadeIn; /* Animation name */
    animation-duration: 0.5s; /* Animation duration */
    animation-fill-mode: forwards; /* Keep final state */
}

/* Styling for hidden file manager */
.hidden-file-manager {
    display: none; /* Display as none */
    animation-name: fadeOut; /* Animation name */
    animation-duration: 0.5s; /* Animation duration */
    animation-fill-mode: forwards; /* Keep final state */
}

/* Keyframes for fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0; /* Start with no opacity */
    } to {
        opacity: 1; /* End with full opacity */
    }
}

/* Keyframes for fade-out animation */
@keyframes fadeOut {
    from {
        opacity: 1; /* Start with full opacity */
    } to {
        opacity: 0; /* End with no opacity */
    }
}

/* Styling for search input in project section */
.project input[type=search] {
    background: transparent; /* Transparent background */
    padding: 0.5rem; /* Padding inside input */
    font-size: 1rem; /* Font size */
    width: -webkit-fill-available; /* Full available width */
    border: 1px solid; /* Solid border */
}

/* Styling for text input in new document section */
#new-document input[type=text] {
    background: transparent; /* Transparent background */
    padding: 0.5rem; /* Padding inside input */
    font-size: 1rem; /* Font size */
    width: -webkit-fill-available; /* Full available width */
    border-bottom: 1px solid; /* Bottom border */
}

/* Styling for editor */
.editor {
    width: 100%; /* Full width */
    background: transparent; /* Transparent background */
    color: white; /* White text color */
    outline: unset; /* No outline */
    overflow: auto; /* Scrollable content */
    height: 15rem; /* Fixed height */
    resize: none; /* No resize handle */
    font-size: 1rem; /* Font size */
    font-family: 'Consolas', sans-serif; /* Font family */
    padding-top: 1rem; /* Top padding */
    border: none; /* No border */
    border-bottom: 1px solid; /* Bottom border */
}

/* Class for margin-bottom of 5 units (3rem) */
.mb-5 {
    padding-bottom: 3rem; /* Add padding to the bottom with 3 rem units */
}

/* Class for applying flexbox layout */
.flex {
    display: flex; /* Set display to flex for flexible box layout */
}

/* Styling for submit input fields */
input[type=submit] {
    width: 100%; /* Set the width to 100% to make the submit button full width */
}

/* Code for Secure Download Part */

/* Styling for columns in wrapper */
.wrapper__column {
    display: flex; /* Flex display */
    flex-direction: column; /* Column layout */
    align-items: center; /* Center align items */
    width: 100%; /* Full width */
}

/* Styling for flex containers */
.flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.flex-row {
    display: flex;
    flex-direction: row;
    width: 100%;
}

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

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

/* Styling for drop area */
.wrapper__column {
    padding: 43px;
    border: 2px solid #fff;
    border-radius: 15px;
}

.upload-image {
    text-align: center;
    width: 100px;
    height: 100px;
    position: relative;
    left: 35%;
}

.remove-file {
    text-align: right;
    width: 20px;
    height: 20px;
    position: relative;
    top: 10px;
}

.remove-file:hover{
    cursor: pointer;
}

#drop-area {
    border: 2px dashed #ccc; /* Dashed border */
    padding: 20px; /* Padding */
    width: 90%; /* 90% width */
    display: flex; /* Flex display */
    flex-direction: column; /* Column layout */
    align-items: center; /* Center align items */
    justify-content: center; /* Center justify content */
    border: 2px dashed #ccc;
    padding: 20px;
    display: flex;
    width: 400px;
    flex-direction: column;
    justify-content: center;
}

/* Styling for active drop area */
#drop-area.active {
    border-color: var(--submitBackgroundColor); /* Border color using variable */
    background-color: rgba(0, 163, 228, 0.1); /* Background color */
}

/* Styling for first span child in drop area */
#drop-area span:nth-child(1) {
    font-weight: bold; /* Bold font weight */
}

/* Styling for forms */
.file-form {
    margin-bottom: 10px; /* Margin bottom */
}

.form__file {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.form__group {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
}

.form__group label {
    display: block;
    margin: 10px auto;
    font-size: 18px;
    color: #ddd;
    width: 104px;
}

.color-white {
    color: #fff;
}

.form__file input,select{
    padding: 10px;
    border: 1px solid #00aaff;
    border-radius: 4px;
    background-color: #555;
    color: #fff;
    width: calc(100% - 100px); /* full width with padding */
    box-sizing: border-box;
}

/* Styling for buttons */
button {
    border-radius: var(--loginBorderRadus); /* Border radius using variable */
    padding: 0.6rem; /* Padding */
    background-color: var(--submitBackgroundColor); /* Background color using variable */
    color: var(--submitColor); /* Text color using variable */
    font-weight: 700; /* Bold font weight */
    text-transform: uppercase; /* Uppercase text */
    border: none; /* No border */
    margin-top: 0.5em; /* Top margin */
    cursor: pointer; /* Pointer cursor */
}

/* Styling for file div */
.div__file {
    display: flex; /* Flex display */
    flex-direction: row; /* Row layout */
    max-width: 400px;
    justify-content: space-between;
}

/* Styling for file div paragraphs */
.div__file p {
    margin-block-start: 1em; /* Top margin */
    margin-block-end: 0; /* Bottom margin */
    font-size: 12px; /* Font size */
    padding: 0 0.4em 0 0.4em; /* Padding */
    max-width: 330px;
    word-wrap: break-word;
    color: #fff;
}

/* Styling for file div buttons */

.div__file__button {
    text-decoration: underline; /* Underline text */
    cursor: pointer; /* Pointer cursor */
    padding: 0 0.4em;
}

/* Hover effect for file div buttons */
.div__file__button:hover {
    color: #ea5959; /* Red color on hover */
}

/* Styling for file form */
.form__file {
    display: flex; /* Flex display */
    flex-direction: column; /* Column layout */
}
.required-asterisk {
    color: red;
    margin-left: 4px;
}

/* Styling for form group */
.form__group {
    display: flex; /* Flex display */
    flex-direction: row; /* Row layout */
    width: 100%; /* Full width */
}

button[disabled] {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Styling for form group labels */
.form__group label {
    font-size: 11px; /* Font size */
}
.success-message {
    color: green;
    margin-top: 10px;
    text-align: center;
}

.error-message {
    color: red;
    margin-top: 10px;
    text-align: center;
    max-width: 400px;
    word-wrap: break-word;
}