/* Apply styles for screens larger than 768px (big screens) */
/* Center-align content */
.profile_view {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
margin-top: 20px;
width:100%;
}

/* Center-align tables on bigger screens */
.profile_table {
    margin: 0 auto;
width: 100%;
}

/* Increase padding for better spacing on bigger screens */
.profile_table th, .profile_table td {
    padding: 10px 16px;
}

/* Define the align-right class for right text alignment */
.align-right {
    text-align: right;
}

/* Increase margin between sections on bigger screens */
.profile_section {
    margin-bottom: 20px;
width: 100%;
}

/* Increase font size for section titles on bigger screens */
.profile_section h3 {
    font-size: 1.3em;
}

/* Center-align buttons */
.profile_section button {
    margin: 10px auto;
    display: block;
}

/* Increase padding for better spacing in buttons on bigger screens */
.profile_section button {
    padding: 8px 16px;
}

/* Style for the profile grid */
.profile_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Adjust the gap as needed */
width: 100%;
}

/* Style for each profile item */
.profile_item {
    border: 1px solid #ccc;
    padding: 10px;
    width: calc(33.33% - 20px); /* Adjust the width and margin as needed */
    margin: 10px;
    background-color: #f9f9f9;
}

/* Style for labels */
.profile_label {
    font-weight: bold;
    margin-bottom: 5px;
}

/* Style for content */
.profile_content {
    margin-bottom: 15px;
}

/* Style for options */
.profile_options {
    margin-top: 10px;
}

/* Style for links within options */
.profile_options a {
    text-decoration: none;
    color: #007bff; /* Adjust link color as needed */
    margin-right: 10px;
}

/* Apply responsive styles for screens up to 768px (small screens) */
@media (max-width: 768px) {
.profile_view {
width: 100%;
margin: 0 auto;
margin-top: 20px;
}
}
    /* Center-align tables on smaller screens */
    .profile_table {
        margin: 0 auto;
width: 80%;
    }

    /* Adjust padding for better spacing on smaller screens */
    .profile_table th, .profile_table td {
        padding: 6px 10px;
    }

    /* Reduce margin between sections on smaller screens */
    .profile_section {
        margin-bottom: 15px;
width: 100%;
    }

    /* Increase font size for section titles on smaller screens */
    .profile_section h3 {
        font-size: 1.1em;
    }

    /* Center-align buttons */
    .profile_section button {
        margin: 0 auto;
        display: block;
    }

    /* Adjust padding for better spacing in buttons on smaller screens */
    .profile_section button {
        padding: 6px 12px;
    }
}



/* Style the navigation container */
.profile-navigation {
  text-align: center;
  background-color: #f4f4f4;
  padding: 10px;
}

/* Style the list items */
.profile-navigation ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
}

.profile-navigation li {
  display: inline;
  margin: 0 10px;
}

/* Style the links */
.profile-navigation a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: 16px;
}

/* Change link color on hover */
.profile-navigation a:hover {
  color: #007bff;
}


.rating-container {
    text-align: center;
    font-size: 24px;
}

.rating-label {
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
    color: gray; /* Default color for unselected stars */
    position: relative; /* Add this to position stars properly */
    transition: color 0.2s; /* Smooth color transition */
}

.rating-label::before {
    content: "★"; /* Display the star character */
    font-size: 24px; /* Adjust the size as needed */
    position: absolute;
    top: 0;
    left: 0;
    color: transparent; /* Transparent star color */
    background-color: transparent; /* Transparent background */
}

.rating-radio  {
    position: absolute;
    top: -9999px;
}


.rating-label.selected {
    color: yellow; /* Yellow color for checked stars */
}

.rating-label.selected::before {
    color: yellow; /* Yellow color for checked stars */
}

/* Additional styles for accessibility */
.rating-label:hover::before,
.rating-label:focus::before {
    color: yellow; /* Yellow color for stars on hover and focus */
}

.rating-label.selected:hover::before,
.rating-label.selected:focus::before {
    color: yellow; /* Yellow color for checked stars on hover and focus */
}