ul,
    li {
        margin: 0;
        padding: 0;
    }

    .abc {
        margin: 8px;
        color: #fff;
    }

    .abc1 {
        width: 130px;
        margin: 5px;
        font-size: small;
    }

    #timerDisplay {
        /* font-size: 24px; */
        /* font-weight: bold; */
        color: #fff;
        background-color: #ff789c;
        margin-top: -550px;
        border-radius: 6px;
        width: 56%;
        height: 35px;
        padding: 0px 10px;
        text-align: center;
        align-items: center;
        display: flex;
        margin-left: 180px;
    }

    /* Initially hide all sections except the About section */
    .section-content {
        display: none;
    }

    #about {
        display: block;
    }

    .disabled-link {
        pointer-events: none;
        color: gray;
    }

    /* Global Styles */
    .cke_notifications_area {
        display: none !important;
    }

    .wrs_modal_dialogContainer {
        position: fixed !important;
        bottom: 0 !important;
        right: 10px !important;
        height: 495px !important;
        width: 580px !important;
    }

    .marks-section {
        text-align: right;
    }


    .options-list li {
        display: flex;
        align-items: center;
        /*margin-bottom: 10px;*/
    }

    .options-list li strong {
        margin-right: 10px;
        margin-top: -24px;
    }

    .options-list li label strong {
        margin-right: 10px;
        margin-top: 7px;
    }

    .options-list li label {
        margin-bottom: 0rem;
    }

    input {
        margin-right: 7px;
    }

    .marks-section {
        margin-left: auto;
    }

    /* Specific Section Styles */
    .section h2 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .section p {
        margin: 5px 0;
        font-size: 16px;
    }

    .section h6 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .single-line-text {
        margin-top: 10px;
        display: flex;
        align-items: center;
    }

    .single-line-text strong {
        margin-right: 10px;
    }

    /* Image and Video Styling */
    .section img,
    .section video {
        max-width: 100%;
        margin-top: 10px;
        border-radius: 5px;
    }

    .marks-section {
        font-weight: bold;
        margin-top: 10px;
    }

    /* Adjustments for Small Screens */
    @media (max-width: 768px) {
        .category-nav {
            flex-direction: column;
            gap: 10px;
        }

        .container-fluid {
            width: 100%;
        }
    }

    .test {
        display: flex;
    }

    .test-content-container {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }

    .right-side {
        width: 45%;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }

    .left-side {
        width: 50%;
        max-height: 100vh;
        overflow-y: auto;
        padding-right: 20px;
    }

    ul.options-list {
        list-style-type: none;
        padding-left: 0;
    }

    .marks-section {
        margin-bottom: 10px;
    }

    .test input[type="radio"] {
        margin-right: 10px;
    }

    /* Add custom scrollbar styles if needed */
    .left-side::-webkit-scrollbar,
    .right-side::-webkit-scrollbar {
        width: 8px;
    }

    .left-side::-webkit-scrollbar-thumb,
    .right-side::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

    .left-side::-webkit-scrollbar-thumb:hover,
    .right-side::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    .writing-test-item {
        margin-bottom: 20px;
    }

    .writing-test-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .writing-left {
        width: 34%;
        /* Optional: adjust width as per your layout requirements */
    }

    .writing-right {
        width: 60%;
        /* Optional: adjust width as per your layout requirements */
    }

    textarea {
        width: 100%;
        height: 200px;
        /* Adjust height as needed */
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical;
        /* Allow vertical resizing */
    }

    .marks-section {
        margin-bottom: 10px;
    }

    ul {
        padding-left: 0;
        list-style-type: none;
    }

    ul li {
        margin-bottom: 20px;
    }

    /* Custom scrollbar styles for the textarea */
    textarea::-webkit-scrollbar {
        width: 8px;
    }

    textarea::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

    textarea::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    .speaking-test-item {
        margin-bottom: 20px;
    }

    .speaking-test-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .speaking-left {
        width: 48%;
        /* Optional: you can adjust the width as needed */
    }

    .speaking-right {
        width: 48%;
        margin-top: 0;
        /* Optional: you can adjust the width as needed */
    }

    video {
        margin-bottom: 10px;
    }

    .video-recorder {
        margin-top: 10px;
    }

    ul {
        padding-left: 0;
        list-style-type: none;
    }

    ul li {
        margin-bottom: 0;
    }

    .marks-section {
        margin-bottom: 10px;
    }

    /* Custom scrollbar styles for the textarea if needed */
    video::-webkit-scrollbar {
        width: 8px;
    }

    video::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

    video::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    .about-lr {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        /* Allows stacking on smaller screens */
        gap: 20px;
        /* Space between sections */
    }
 
    /* Right and Left side styling */
    .about-right-side {
        flex: 1 1 45%;
        /* Adjust width to 45% and allow responsiveness */
        max-width: 550px;
        /* Ensure the sections don't exceed the video width */
        
        /* Center align the sections in the parent container */
    }

    .about-right-side {
        text-align: center;
        /* Center text and video for the right side */
    }

    .about-left-side {
        text-align: left;
        
        /* Align text to the left for the left side */
    }

    /* Paragraph styling for document-like text */
    .about-left-side p {
        font-size: 1rem;
        /* Adjust font size for readability */
        line-height: 1.6;
        /* Add line spacing for better readability */
        color: #333;
        /* Dark text color for better contrast */
        
        /* Add vertical spacing between paragraphs */
        text-align: justify;
        /* Justify the text for a document-like appearance */
        padding: 10px;
        /* Add padding to create a better layout */
        background-color: #f9f9f9;
        /* Optional: light background for distinction */
        border-radius: 4px;
        /* Optional: rounded corners for aesthetic */
    }
    
    .bsb{
            margin-top: 37px;
    }

    /* Heading styling */
    .about-right-side h3,
    .about-left-side h3 {
        font-size: 1.5rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
        text-align: center;
        /* Center align headings */
    }

    /* iFrame styling */
    iframe {
        width: 100%;
        /* Make iframe take full width of its container */
        /*height: auto; */
        border: none;
        /* Remove default border */
        border-radius: 8px;
        /* Optional: Rounded corners */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        /* Add a slight shadow */
    }

    /* Responsive adjustments for smaller screens */
    @media (max-width: 768px) {
        .about-lr {
            flex-direction: column;
            /* Stack the sections vertically */
            align-items: center;
        }

        .about-right-side,
        .about-left-side {
            flex: 1 1 100%;
            /* Take full width on smaller screens */
        }

        .about-left-side p {
            text-align: left;
            /* Maintain left alignment for paragraphs */
        }
    }

    /* Flex container for each question's content */
    .listening-test-content {
        display: flex;
        /* Aligns the left and right sections side by side */
        justify-content: space-between;
        /* Space between left and right */
        align-items: flex-start;
        /* Align the items at the top */
        gap: 20px;
        /* Add space between the left and right sections */
        margin-bottom: 20px;
        /* Add space between each question */
    }

    /* Styling for left side */
    .listening-left {
        flex: 1;
        /* Allow the left section to take available space */
        padding-right: 10px;
        /* Space between left and right section */
    }

    /* Styling for right side */
    .listening-right {
        flex: 1;
        /* Allow the right section to take available space */
    }

    /* Styling for audio recorder buttons */
    .audio-recorder button {
        margin: 5px;
        /* Space between buttons */
    }

    /* Styling for marks section */
    .marks-section {
        margin-bottom: 10px;
    }

    /* Optional: To make it responsive for smaller screens */
    @media (max-width: 768px) {
        .listening-test-content {
            flex-direction: column;
            /* Stack left and right sections vertically on small screens */
            align-items: flex-start;
        }

        .listening-left,
        .listening-right {
            flex: 1 1 100%;
            /* Take full width on small screens */
            margin-bottom: 10px;
        }
    }
    
    
    
    /* General button styles */
.btn {
    display: inline-flex; /* Makes button a flex container */
    align-items: center; /* Align icon and text */
    padding: 10px 20px; /* Padding around the text and icon */
    font-size: 16px; /* Font size for text */
    border-radius: 5px; /* Rounded corners */
    transition: all 0.3s ease; /* Smooth transition on hover */
}

/* Icon styles */
.btn i {
    margin-right: 8px; /* Space between icon and text */
    font-size: 18px; /* Adjust icon size */
}

/* Primary button (Start) */
.start-btn,
.start-btn1{
    background-color: #007bff; /* Blue color */
    color: #fff;
    border: none;
}

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

/* Secondary button (Stop) */
.stop-btn,
..stop-btn1{
    background-color: #6c757d; /* Gray color */
    color: #fff;
    border: none;
}

.stop-btn,
.stop-btn1:hover {
    background-color: #5a6268; /* Darker gray on hover */
}

/* Danger button (Delete) */
.delete-btn,
.delete-btn1{
    background-color: #dc3545; /* Red color */
    color: #fff;
    border: none;
}

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

/* Disabled buttons */
.btn[disabled] {
    opacity: 0.6; /* Reduced opacity for disabled buttons */
    cursor: not-allowed; /* Change cursor to indicate it's disabled */
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .btn {
        font-size: 14px; /* Adjust font size on small screens */
        padding: 8px 16px; /* Adjust padding on small screens */
    }

    .btn i {
        font-size: 16px; /* Adjust icon size on small screens */
    }
}
.ck.ck-editor__main > .ck-editor__editable {
    height: 180px;
    overflow-y: auto; /* Allow vertical scrolling */
}



 .report-container {
            max-width: 800px;
            margin: 0 auto;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .report-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            background: #140342;
        }

        .report-header img {
            height: 50px;
        }

        .report-title {
            text-align: center;
            font-weight: 300;
            margin-bottom: 10px;
        }

        .result-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .result-col {
            flex: 1;
            margin: 2px 5px;
            padding: 2px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
            border-radius: 5px;
        }

        .result-col.label {
            font-weight: bold;
            background-color: #e8e8e8;
        }

        .result-photo {
            width: 100px;
            height: 120px;
            border: 1px solid #ccc;
            border-radius: 5px;
            object-fit: cover;
        }

        .test-results {
            margin-top: 20px;
                display: flex
;
    justify-content: space-between;
        }

        .score-row {
            width: 50%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .score-row1 {
            width: 27%;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .score-box {
            width: 160px;
            padding: 10px;
            text-align: center;
            border: 1px solid #ccc;
            background-color: #f8f8f8;
            border-radius: 5px;
            font-weight: bold;
            margin: 10px;
        }

        .footer {
            margin-top: 20px;
            text-align: center;
            font-size: 0.9rem;
            color: #666;
        }