/* General Styles */
body {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, darkslateblue 150%) fixed;
    color: black; /* Default text color */
}

/* Header Styles */
.tomas-custom-bg {
    background-color: darkslateblue;
}

.navbar-brand, .nav-link {
    color: black; /* Ensures legibility */
}

.navbar-brand:hover, .nav-link:hover {
    color: white; /* Enhanced visibility on hover */
    text-decoration: none; /* Removes underline effect */
}

/* Main Content and Footer Styles */
.footer-small, .footer-large {
    background-color: darkslateblue;
}

/* Interactive Elements */
a, i, .btn {
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Smooth transition for hover effects */
}

/* Hover effect for links and buttons to have white text with a black outline */
a:hover, .nav-link:hover, .btn:hover , i:hover {
    color: white !important; /* Text color */
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000; /* Simulates a black outline */
}


/* Footer Icons */
.footer-small a, .footer-large a {
    color: black; /* Consistent with the overall text color */
}

.footer-small a:hover, .footer-large a:hover {
    color: white; /* Maintains consistency with hover effects */
}

/* Change icon color */
i.fas, .fas {
    color: black !important; /* Change to your desired color */
}

/* Change icon color on hover for elements containing icons */
a:hover i.fas, button:hover i.fas {
    color: white !important; /* Change to your desired color for hover state */
}

/* General styles for scrollable sections */
  .scrollable-section {
    height: 100vh; /* Adjust height as needed */
    overflow-y: scroll;
  }

  /* Hide scrollbar for IE, Edge, and Firefox */
  .scrollable-section {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  /* Hide scrollbar for Chrome, Safari, and Opera */
  .scrollable-section::-webkit-scrollbar {
    display: none;
  }

  .modal-body-post-details {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 80vh; /* Adjust based on your needs */
        }

        .modal-img-post-details {
            max-height: 75vh; /* Adjust based on your preference */
            max-width: 100%; /* Ensures image does not overflow the modal */
        }

.message-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 5px; /* Space between messages */
}

.message-text {
    flex-grow: 1; /* Allows the text to expand and fill space */
    white-space: normal; /* Ensures text wraps */
    overflow-wrap: break-word; /* Allows long words to break and wrap onto the next line */
}

.message-time {
    flex-shrink: 0; /* Prevents the time from shrinking */
    padding: 2px 10px;
    border-radius: 5px;
    background-color: #eee; /* Background for visibility */
    margin-left: 10px; /* Space between text and time */
}

.sent .message-time {
    background-color: #ccffcc; /* Light green for sent messages */
}

.received .message-time {
    background-color: #ccccff; /* Light blue for received messages */
}