/*------------------ MEMBERS STYLES.CSS --------------------*/
/*-------------AI CHAT-------------- */
.chat-container {
    width: 80%;
    max-width: 600px;
    height: 500px; /* -=-=-=-=--=- 500pxSetting a fixed height */
    margin: 50px auto;  /* -=-=-=-= 50px */
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Prevents internal elements from overflowing */
    position: relative; /* Essential for absolute positioning within */
}

.chat-box {
    height: calc(100% - 10px); /* -=-=-=-=- calc(100% - 10px);Take up all height minus the chat input's height */
    overflow-y: auto;
    padding: 10px;
}

/*---------Main return message box area for displaying resluts----*/
.chat-logs {
    height: 400px;   /*-=-=-=-=-=-=400px*/
    overflow-y: auto;
}

.chat-input {
    padding: 10px;
    position: absolute; 
    bottom: 0; 
    width: 100%; /* Takes up the full width of the container */
    background-color: #eee;
}

.chat-input input {
    width: calc(100%); /* Remaining space minus button width and padding */
    padding: 8px;
    margin-right: 10px;
    border: 1px solid #ccc;
}

.chat-input button {
    padding: 8px 5px; /*-- Vertical & Horisontal */
}

.ai-msg {                       /*--Bot answers in main chat window */
    margin: 10px;
    padding: 5px;
    border-radius: 5px;
    background-color: #f5f5f5; /* Light gray background */
    max-width: 100%;
    align-self: flex-start;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #006842;
}
.user-msg {                     /*--User Questions in main chat window */
    margin: 10px;
    padding: 5px;
    border-radius: 5px;
    background-color: #ffffff; /* Light gray background */
    max-width: 100%;
    align-self: flex-start;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #333;
}
.typing-indicator {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    /*display: none; * Initially hidden */
    margin: 10px;
    font-style: italic;
    color: #000;
}

.timestamp {
    font-size: 0.8em;
    margin-left: 10px;
    color: #aaa;
}

.user-msg, .ai-msg {
    display: flex;
    align-items: center;
}

.user-msg img, .ai-msg img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 50%;
}




/*-------------END AI CHAT-------------- */

/*---------------- ICONS For USER DASHBOARD ---------------*/
.icon-container {
    display: inline-block;
    border: 2px solid #4CAF50; /* Green border */
    border-radius: 10px; /* Rounded corners */
    margin: 5px;
    box-shadow: 5px 5px 8px rgba(50, 50, 50, 3.1); /* Slight shadow for depth */
    transition: transform 0.2s; /* Smooth hover effect */
    text-align: center; /* To center the label under the icon */
}

.icon-link {
    color: #333; /* Text color */
    text-decoration: none; /* Remove underline */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

.icon-container:hover {
    transform: scale(1.05); /* Slight grow effect on hover */
}

.icon-link img {
    width: 90px; /* Icon size */
    height: 90px;
    border-radius: 9%; /* Slight rounded corners for a modern look */
    box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    transition: box-shadow 0.3s ease; /* Smooth shadow transition on hover */
}

.icon-link:hover img {
    box-shadow: 8px 8px 3px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

.icon-link span {
    display: block; /* Make the label appear on a new line under the icon */
    margin-top: 5px; /* Space between icon and label */
    font-size: 12px; /* Label text size */
    font-weight: 600; /* Bold font for the label */
}
/*---------------- END ICONS For USER DASHBOARD ---------------*/

/*----------------Main Sponsor Image Box ---------------*/
.sponsor-frame {
    display: inline-block;
    border: 2px solid #4CAF50; /* Green border */
    padding: 10px;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 5px 5px 8px rgba(50, 50, 50, 3.1); /* Slight shadow for depth */
    transition: transform 0.2s; /* Smooth hover effect */
}

.sponsor-frame:hover {
    transform: scale(1.05); /* Slightly enlarge on hover for a subtle effect */
}

/*----------------END Main Sponsor Image Box ---------------*/
/*----------------Standard Button Styling ---------------*/

.button {
    display: inline-block;
    font-size: 16px;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: #fff;
    background-color: #3498db;
    border: none;
    border-radius: 4px;
    box-shadow: 0 4px #2980b9;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.button:hover {
    background-color: #2980b9;
}

.button:active {
    box-shadow: 0 2px #2980b9;
    transform: translateY(2px); /* Adds a small push down effect on click */
}

/*----------------END Standard Button Styling ---------------*/
/*----------------Panic Button Styling ---------------*/

.panicbutton {
    display: inline-block;
    font-size: 16px;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: #fff;
    background-color: #CE0000;
    border: none;
    border-radius: 25px;
    box-shadow: 0 4px #850000;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.panicbutton:hover {
    background-color: #850000;
}

.panicbutton:active {
    box-shadow: 0 2px #850000;
    transform: translateY(2px); /* Adds a small push down effect on click */
}

/*----------------END Standard Button Styling ---------------*/

/*----------------Standard Error Message ---------------*/
.error-message {
    color: red;
    font-weight: bold;
    margin: 10px 0;
}
/*----------------END Error Message ---------------*/


/*-------------Login Form-------------------------*/
body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 50%;
}

.login-form {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
}

.login-form input[type="text"],
.login-form input[type="password"] {
/*    width: 200px;
    padding: 10px; 
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 3px;*/
}

.login-form input[type="submit"] {
    padding: 10px 20px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.login-form input[type="submit"]:hover {
    background-color: #0056b3;
}

/*----------------Main Page---------------*/
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: #fff;
   /* padding: 20px 0; */
}

#logo {
    width: 300px;
    height: auto;
}

main {
    padding: 20px 0;
}

footer {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}


/*----------------END Main Page---------------*/

/*----------------Registration Form Page---------------*/
/* Universal Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif; /* You can use any preferred font family */
}

body {
    background-color: #f5f5f5; /* A light grey background color */
}

/* Main Registration Form Styling */
.registration-form-container {
    display: flex; /*    */
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Full viewport height */
    padding: 20px;
}

.registration-form {
    background-color: #ffffff; /* White background */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow around the form */
    width: 100%;
    max-width: 500px; /* Maximum width, but it will be smaller on mobiles */
}

.registration-form h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.registration-form input[type="text"],
.registration-form input[type="email"],
.registration-form input[type="password"],
.registration-form select {
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    outline: none;
}

.registration-form input[type="submit"] {
    width: 30%;
    padding: 10px 15px;
    background-color: #007BFF; /* Blue background color */
    color: #ffffff; /* White text color */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.registration-form input[type="submit"]:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* For responsiveness */
@media screen and (max-width: 520px) {
    .registration-form {
        padding: 20px;
    }
}
/*----------------END Registration Form Page---------------*/

/*----------------Dashboard ---------------------------*/

.dashboard-container {
    font-family: 'Arial', sans-serif;
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    background-color: #f5f5f5;
}

.dashboard-container h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
}

.user-details {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
}

.user-details div {
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
}

.user-details div:last-child {
    border-bottom: none; /* Removes the border from the last item */
}


/*----------------END Dashboard ---------------------------*/

/*----------------Footer Container---------------*/
.footer-container {
    width: 100%;               /* Full width */
    padding: 20px 0;           /* 20px vertical padding, 0 horizontal */
    background-color: #2c3e50; /* Dark background color for contrast */
    color: #ecf0f1;            /* Light text color for contrast */
    text-align: center;        /* Center content */
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1); /* Slight shadow on top */
    font-size: 14px;
}

/* If you have links in your footer, style them for better appearance */
.footer-container a {
    color: #ecf0f1;              /* Light color for links */
    text-decoration: none;       /* Remove underlines */
    margin: 0 10px;              /* Space out links if you have multiple side by side */
    transition: color 0.3s;      /* Smooth color transition for hover state */
}

.footer-container a:hover {
    color: #3498db;              /* A different color for hovering on links */
}

/*------ Center the Table------*/
.center {
  margin-left: auto;
  margin-right: auto;
}


/*----------------END Footer Container---------------*/
/* ---------- Member Profile ---------- */

.profile-container {
    font-family: 'Arial', sans-serif;
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    background-color: #f5f5f5;
}

.profile-container h2 {
    text-align: left;
    color: #333;
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
}

.profile-container label {
    display: block;
    text-align: left;
    margin-top: 10px;
    font-weight: bold;
}

.profile-container input {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.profile-container button {
    display: block;
    margin-top: 20px;
    padding: 10px 15px;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.profile-container button:hover {
    background-color: #2980b9;
}
/* ----------END Member Profile ---------- */

/* ----------Save Member Profile Page ---------- */

.success-message {
    font-size: 18px;
    color: green;
    text-align: center;
    margin-top: 20px;
    border: 1px solid green;
    padding: 10px;
    border-radius: 5px;
}
/* ----------END Save Member Profile Page ---------- */



/*----------------Debugging Only---------------*/
/*
* {
    border: 1px solid red;
} */