.notification-area {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.notification-box {
    position: absolute;
    top: 100%; 
    right: 0;
    width: 300px;
    /* Adjust the RGBA values below as needed */
    background-color: rgba(255, 255, 255, 0.9); /* Slightly lighter than dark purple with transparency */
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    z-index: 100;
    display: none;
    padding: 10px;
    border-radius: 8px; 
    color: #fff; 
}



.notification-item {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    color: #333333; /* Dark gray for good contrast on white */
}

.notification-item:last-child {
    border-bottom: none;
}



.bell-icon {
    position: relative;
}

.notification-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 0 5px;
    font-size: 0.75em;
}

.bell-icon .material-icons {
    color: #9c27b0; 
    font-size: 30px;
    transition: color 0.3s ease;
}

.bell-icon:hover .material-icons {
    color: #7b1fa2; 
}

.yourself-err-btn, .innerTest-yourself-testBox .yourself-err-btn {
    padding: 8px 43px;
    background-color: #ffcccc; /* Light red background */
    color: #62218c; /* Keeping text color similar to your theme, adjust as needed */
    border: 1px solid #ff9999; /* Lighter red border for some distinction */
    border-radius: 5px; /* Optional: Rounds the corners for a softer look */
    transition: background-color .3s, color .3s; /* Smooth transition for hover effect */
}

.yourself-err-btn:hover, .innerTest-yourself-testBox .yourself-err-btn:hover {
    background-color: #ff9999; /* Slightly darker red on hover for interactivity */
    color: #ffffff; /* Optional: Change text color on hover for better visibility */
}



.tefl-template {
    width: 70%;
    margin: auto; /* Centers the template horizontally */
    display: flex;
    justify-content: center; /* Ensures content is centered within the container */
    align-items: flex-start; /* Align items at the start of the flex container */
    gap: 10px;
    padding: 0px 20px 20px; /* Adjusted to remove padding from the top */
    background-color: #ffffff;
    box-sizing: border-box; /* Ensures padding does not add to the width */
    border-radius: 20px; /* Adds rounded corners to the template */
    margin-top: -8%;
}

.tefl-content {
    flex: 0 1 35%; /* Adjusted to control width but allow shrinking */
    display: flex; /* Added for internal flex layout */
    flex-direction: column; /* Stack child elements vertically */
    align-items: center; /* Center-align children horizontally */
    gap: 10px; /* Space between children */
    /* Removed margin: auto; */
    position: relative;
}

.tefl-sidebar-container {
    flex: 0 1 65%; /* Adjusted for sidebar container width */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.image-container{
    flex: 1; /* Each sidebar takes half of the container */
    padding: 20px;
	max-width:1000px; 
	margin:auto; 
	overflow:hidden; 
	position:relative;
/*     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); */
/*     border-radius: 5px; */
}

.tefl-sidebar2{
    flex: 1;
    padding: 0px;
    width: 70%;
    margin-left: 0;
}

.tefl-sidebar {
    flex: 1; /* Each sidebar takes half of the container */
    padding: 20px;
    /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border-radius: 5px; */
}

/* Responsive styling for mobile devices */
@media (max-width: 768px) {
    .tefl-template {
        flex-direction: column;
    }
    
    .tefl-content,
    .tefl-sidebar,
    .tefl-sidebar2 {
        flex: 1 1 auto;
        width: 100%; /* Full width on small screens */
    }

    .tefl-sidebar-container {
        order: -1; /* Sidebar container will be placed above the content on small screens */
    }
}



/* Additional styles for form elements */
.form-group-eg label {
    display: block;
}

.form-group-eg input[type="text"],
.form-group-eg select,
.form-group-eg textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.btn-download {
    background-color: #FFA500;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}


.alert-message {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
}

/* Example of a success message */
.alert-message.success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

/* Example of an error message */
.alert-message.error {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}