/* General Body Styles */
body {
    margin: 0; /* Remove default body margin */
    font-family: 'Roboto', sans-serif; /* Set a more modern font family */
    background-color: rgba(8, 8, 9, 0.9); /* Dark background for the whole page */
    color: #747881; /* Light text color */
    line-height: 1.6; /* Improve readability */
}

/* Header Styles */
header {
    width: 98%; /* Full width */
    color: #e1e5ea; /* Light text color */
    padding: 15px 0; /* Padding for header */
    text-align: center; /* Center text in header */
}

/* Header Title Styles */
.header-title {
    font-size: 2.5rem; /* Font size */
    margin-bottom: 0; /* No bottom margin */
    color: #007bff; /* Blue color for text */
    text-align: center; /* Center alignment */
    font-weight: 700; /* Bold font weight */
    letter-spacing: 2px; /* Space between letters */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}

/* Avatar Styles */
.my-avatar {
    border-radius: 50%; /* Makes the image circular */
    border: 1px solid #007bff; /* Blue border around the avatar */
    margin: 20px; /* Space around the avatar */
    width: 150px; /* Set a specific width */
    height: 150px; /* Set a specific height */
}

/* Footer Styles */
footer {
    background-color: #222d32; /* Dark background for footer */
    color: #d4dbe1; /* Light footer text */
    padding: 20px;
    text-align: center; /* Center text in footer */
}

/* Main Content Container */
.container {
    max-width: 1000px; /* Maximum width for main content */
    margin: 0 auto; /* Center the container */
    padding: 20px; /* Padding for aesthetics */
}

/* Example of styling for headings within the main content */
.container h1,
.container h2,
.container h3 {
    color: #0c5ad3; /* Cream/yellow for headings */
    text-align: center; /* Center headings in main content */
}

/* List Group Styles */
.list-group-item {
    background-color: rgba(5, 5, 5, 0.66); /* Dark background for list items */
    color: #f8f9fa; /* Light text */
    border-style: solid; /* Solid borders */
    border-radius: 8px; /* Rounded corners for list items */
    transition: background-color 0.3s; /* Smooth transition on hover */
}

.list-group-item:hover {
    background-color: rgba(8, 188, 237, 0.2); /* Lighter dark background on hover */
}

/* Navigation Styles */
.navbar-nav {
    display: flex;
    justify-content: flex-end;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

/* Nav item styles */
.nav-item {
    margin-left: 1rem;
    color: #0c5ad3;
}

/* Nav link styles */
.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: #007bff;
    text-decoration: none;
    transition: color 0.2s;
}

.nav-link:hover {
    color: #0056b3;
}

.nav-link.active {
    font-weight: bold;
    color: #0056b3;
}

/* Sidebar Styles */
.sidebar {
    background-color: #1b1d20; /* Dark gray for sidebar */
    color: #f8f9fa; /* Light text */
    border-right: 1px solid #333639; /* Light border on the right */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2); /* Shadow for depth */
    position: sticky;
    top: 0;
    padding-top: 20px; /* Optional: Adds some padding to the top if needed */
    margin-top: 20px; /* Optional: Adds some margin from the top */
}

/* Sidebar Navigation Links */
.sidebar .nav-link {
    color: #f8f9fa; /* Creamy text color for sidebar links */
    transition: color 0.3s; /* Smooth color transition */
}

.sidebar .nav-link:hover {
    color: #ffc107; /* Yellow color on hover */
}

/* Content Styles */
.text-center h1,
.text-center h2 {
    color: #0a61e6; /* Cream/yellow for main headings */
    margin: 20px 0; /* Add margin for spacing */
    text-underline-offset: max(1px);
    text-underline-color: #9C1A1C;
}

/* Audio Player Styles */
.audio-player {
    background-color: #383d42; /* Dark gray for audio player */
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    width: calc(100% - 20px); /* Stretch to the full width */
    max-width: none; /* Remove any max-width constraints */
    margin: 10px 0; /* Add margin for spacing above and below */
}

audio {
    width: 100%; /* Adjust audio element width */
}

/* Button Styles */
.btn-primary {
    background-color: #007bff; /* Bootstrap primary color */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners for buttons */
    padding: 10px 15px; /* Spacing for buttons */
    transition: background-color 0.3s; /* Smooth transition on hover */
    width: 10%; /* Full width button for better usability */
    font-size: 16px; /* Increase font size for readability */
}

.btn-primary:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.btn-danger {
    background-color: #dc3545; /* Bootstrap danger color */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners for buttons */
}

.btn-danger:hover {
    background-color: #c82333; /* Darker red on hover */
}

.btn-secondary {
    background-color: #146fbf;
    border-color: #03172b;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.btn-secondary:hover {
    background-color: #217bbd;
    border-color: #246fba;
}

/* Modified Progress Bar Styles */
.progress {
    background-color: rgba(255, 255, 255, 0.1); /* Light translucent background */
}

.progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px; /* Slight increase for thumb size */
    height: 12px; /* Slight increase for thumb size */
    border-radius: 50%; /* Rounded thumb */
    background: #ffc107; /* Cream/yellow color for thumb */
}

/* Hide Elements */
.hidden {
    display: none; /* Class to hide elements */
}

/* Responsive Adjustments */
@media (max-width: 767px) {
    .waveform-container {
        height: 60px; /* Adjust based on your needs */
    }

    .controls {
        flex-direction: column;
        align-items: stretch;
    }

    .controls button,
    .controls .time {
        width: 100%;
        margin-bottom: 5px;
        text-align: center;
    }

    .header-title {
        font-size: 1.2rem; /* Smaller font size for smaller screens */
        margin-left: 5px; /* Reduce left margin */
    }

    .my-avatar {
        width: 50px; /* Smaller avatar size */
        height: auto;
    }

    .navbar {
        padding: 0.3rem; /* Less padding */
    }

    .navbar-nav .nav-link {
        padding: 3px 8px; /* Smaller padding for nav links */
    }

    .navbar-collapse {
        background-color: #343a40;
        margin: 0;
        padding: 20px;
    }
    .navbar-nav {
        flex-direction: column;
    }

    .sidebar {
        display: none; /* Hide sidebar on smaller screens */
    }
}

@media only screen and (max-device-width: 480px) {
    div#wrapper {
        width: 400px;
    }

    div#header {
        background-image: url(media-queries-phone.jpg);
        height: 93px;
        position: relative;
    }

    div#header h1 {
        font-size: 140%;
    }

    #content {
        float: none;
        width: 100%;
    }

    #navigation {
        float: none;
        width: auto;
    }
}

/* Additional Styles */
.description {
    background-color: rgb(43, 43, 46);
    padding-bottom: 30px;
    padding-left: 5px;
    border-style: solid;
    border-color: #3a3f44;
    border-width: 1px;
}

.profile-container {
    display: flex;
    width: 100%; /* Use flexbox layout */
    flex-direction: column;
    justify-content: center; /* Center items vertically */
    margin: 20px auto; /* Center the container */
    max-width: 1700px; /* Max width for larger screens */
}

.mt-4 {
    text-align: center;
    color: goldenrod;
    padding-right: 30px;
    font-size: 16px;
}

.comment-toggle {
    color: #e7ebef; /* Bootstrap primary color */
    font-size: 1em;
    display: inline-flex;
    align-items: center;
}

.comment-toggle .fas {
    margin-right: 5px;
    margin-bottom: 15px;
}

.comment-toggle:hover {
    text-decoration: none;
}

.song-title {
    font-size: 27px;
    color: #007bff;
}

.post_content {
    color: #9C1A1C;
}

.message-container {
    max-width: 600px; /* Maximum width for the message form */
    margin: 20px auto; /* Centering the container with auto margins */
    padding: 20px; /* Padding around the content */
    background-color: #0f1215; /* Light background color for contrast */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    margin-top: 15px; /* Space above the message area */
}

.message-container h3 {
    text-align: center; /* Center the heading text */
    margin-bottom: 20px; /* Space between heading and form */
}

.message {
    margin-bottom: 10px; /* Space between individual messages */
    padding: 10px; /* Padding for each message */
    border: 1px solid #007bff; /* Optional: Border for individual messages */
    border-radius: 5px; /* Optional: Rounded corners */
    background-color: #191616; /* Background color for messages */
}

.message.sender {
    background-color: #d1ecf1; /* Light blue background */
}

.message.recipient {
    background-color: #e2e3e5; /* Gray background */
}

/* Modal Styles */
.modal-content {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.modal-header {
    border-bottom: 1px solid #313539;
    background-color: #3c7fc3;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.modal-title {
    font-size: 1.5rem;
}

.close {
    font-size: 1.4rem;
    color: #0b80e8;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    opacity: 0.75;
}

.form-group {
    margin-bottom: 1.5rem; /* Space between form inputs */
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 0.25rem;
    border: 1px solid #ced4da;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 5px rgba(128, 189, 255, 0.25);
}

.modal-footer {
    border-top: 1px solid #e9ecef;
    background-color: #f5f6f7;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

label {
    font-weight: bold;
    color: #0c5ad3;
}

option {
    padding: 0.5rem;
}

a.nav-link {
    color: #bfc8d5;
}

.navbar-nav {
    color: #dee2e6;
}

.btn-not-disabled {
    cursor: pointer;
    margin-bottom: 30px;
}

.col-md-2 {
    padding-top: 30px;
    margin-top: 50px;
    border-style: solid;
    border-color: rgba(75, 77, 80, 0.25);
    height: fit-content;
}

.footer-container {
    background-color: #333e47;
    width: 100%;
    padding: 15px 0;
}

.p1 {
    text-align: center;
}

.btn2, #showAvatarButton, #showUploadButton, .btn3 {
    width: 100%;
}

.btnSelect {
    width: 14px;
}

/* Main Container Styles */
.main {
    display: flex; /* Use flexbox for layout */
    background-color: #212529; /* Same as body background for consistency */
    flex-wrap: wrap;
    flex-direction: column-reverse;
    margin: 20px auto;
    max-width: 1447px;
}

/* Content Styles */
.content {
    flex-grow: 1; /* Allow the content area to take the remaining space */
    padding: 20px; /* Add padding for aesthetics */
}

.main-content {
    flex: 0 0 70%; /* Main content takes 60% of the width */
    padding: 20px; /* Add padding for aesthetics */
}

.message-section {
    flex: 0 0 25%; /* Message section takes 25% of the width */
    padding: 20px; /* Add padding for aesthetics */
    background-color: #121417; /* Optional: Light background for distinction */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: slight shadow */
}

/* Progress Slider Styles */
input[type="range"] {
    -webkit-appearance: none; /* Remove default styling in WebKit */
    appearance: none; /* Remove default styling */
    width: 100%; /* Full width */
    background-color: rgba(255, 255, 255, 0.2); /* Background color of the track */
    height: 5px; /* Height of the track */
    border-radius: 5px; /* Rounded edges */
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Remove default slider styling */
    appearance: none; /* Remove default styling */
    width: 15px; /* Width of the thumb */
    height: 15px; /* Height of the thumb */
    border: 2px solid #007bff; /* Blue border around the thumb */
    border-radius: 50%; /* Make it circular */
    background: #ffc107; /* Cream/yellow color for thumb */
    cursor: pointer; /* Show pointer on hover */
}

.form-control-dl, .form-control-ol, .form-control-ul {
    margin-top: 0;
    margin-bottom: 1rem;
    list-style: square;
    padding-right: 5px;
}

.mr-2, .mx-2 {
    margin-right: 0.5rem !important;
    margin-bottom: 40px;
}

b,
strong {
    font-weight: bolder;
    color: darkgoldenrod;
}