/* Header styling */



/* Styling for the session category container (the box) */
.session-cat {
    background-color: #f5f5f5; /* Light gray background for the box */
    border: 1px solid #ddd; /* Subtle border for structure */
    border-radius: 6px; /* Rounded corners for a modern feel */
    padding: 5px; /* Space inside the box */
    margin: 15px 0; /* Space between categories */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Simple h3 styling inside the session-cat div */
.session-cat h3 {
    font-size: 14px; /* Smaller font size for modern look */
    font-weight: normal; /* Softer appearance */
    color: #555; /* Medium gray for subtle emphasis */
    margin: 0 0 10px; /* Space below the heading */
    text-transform: uppercase; /* Optional: Makes the heading uppercase */
}





/* Dropdown (select) styling */
.select-session-container select {
    width: 100%; /* Full width for alignment */
    padding: 6px 8px; /* Padding inside the dropdown */
    font-size: 14px; /* Match font size with text */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 4px; /* Rounded corners */
    background-color: #fff; /* White background */
    margin-bottom: 10px; /* Space below the dropdown */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle inset shadow */
    appearance: none; /* Remove default dropdown arrow for customization */
}

/* Buttons styling for input[type="button"] */
.select-session-container input[type="button"],
.select-session-container input[type="submit"] {
    display: block; /* Stack buttons vertically */
    width: 100%; /* Full width for alignment */
    padding: 8px 10px; /* Padding inside buttons */
    margin: 8px 0; /* Space between buttons */
    font-size: 14px; /* Match font size with text */
    color: #fff; /* White text for contrast */
    background-color: #007BFF; /* Blue background */
    border: 1px solid #0056b3; /* Slightly darker blue border */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    text-align: center; /* Center-align text */
    transition: background-color 0.3s ease; /* Smooth hover transition */
}

.select-session-container input[type="button"]:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Styling the name input field */
.select-session-container input[type="text"] {
    width: calc(100% - 16px); /* Adjust width to account for padding */
    padding: 8px; /* Add internal spacing */
    font-size: 14px; /* Match font size with other elements */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 4px; /* Rounded corners */
    background-color: #fff; /* White background */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle inset shadow */
    margin-bottom: 10px; /* Add spacing below */
    color: #333; /* Dark text color for readability */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth hover/focus transition */
    box-sizing: border-box; /* Ensure padding and border are included in the width */
}

/* Hover effect */
.select-session-container input[type="text"]:hover {
    border-color: #007BFF; /* Blue border on hover */
}

/* Focus effect */
.select-session-container input[type="text"]:focus {
    border-color: #007BFF; /* Blue border on focus */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Blue glow on focus */
    outline: none; /* Remove default outline */
}

/* Resolution and Raw/Para times section */
.select-session-container .radio-group {
    margin: 4px 0; /* Space around radio groups */
}

.select-session-container .radio-group label {
    display: block; /* Each label on a new line */
    margin: 4px 0; /* Space between radio buttons */
    font-size: 14px; /* Match font size */
    color: #444; /* Medium gray text */
    cursor: pointer; /* Pointer cursor for labels */
}

.select-session-container input[type="radio"] {
    margin-right: 8px; /* Space between radio button and label text */
}

/* Separator line */
.select-session-container hr {
    margin: 15px 0; /* Adjusted spacing around separator */
    border: none; /* Remove default styling */
    border-top: 1px solid #ddd; /* Clean solid line */
    opacity: 0.8; /* Subtle opacity */
}

/* Styling the container for the radio group */
.select-session-container .radio-group-horizontal {
    background-color: #f5f5f5; /* Light gray background for consistency with other boxes */
    border: 1px solid #ddd; /* Subtle border for structure */
    border-radius: 6px; /* Rounded corners for modern look */
    padding: 10px; /* Add padding inside the group */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    margin: 15px 0; /* Space between groups */
}

/* Header inside the radio group */
.radio-group-horizontal h3 {
    font-size: 14px; /* Smaller font size for modern look */
    font-weight: normal; /* Softer text appearance */
    color: #555; /* Medium gray for subtle emphasis */
    margin: 0 0 10px; /* Space below the heading */
    text-transform: uppercase; /* Optional: Makes the heading uppercase */
}

/* Individual radio button container */
.radio-group-horizontal .radio-item {
    text-align: center; /* Center-align text */
    flex: 1; /* Equal width for all radio items */
    margin: 0 5px; /* Space between radio buttons */
}

/* Radio button styling */
.radio-group-horizontal input[type="radio"] {
    margin-bottom: 5px; /* Space between button and label text */
    cursor: pointer; /* Pointer cursor on hover */
}

/* Label styling */
.radio-group-horizontal label {
    font-size: 14px; /* Consistent font size */
    color: #444; /* Medium gray for text */
    cursor: pointer; /* Pointer cursor for labels */
}

/* Hover effect for radio items */
.radio-group-horizontal .radio-item:hover {
    background-color: #eaf4ff; /* Light blue background on hover */
    border-radius: 4px; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth hover transition */
}

/* Active radio effect */
.radio-group-horizontal input[type="radio"]:checked + label {
    font-weight: bold; /* Highlight selected option */
    color: #007BFF; /* Blue color for active text */
}