body {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
}
/* Nav */
    .navbar {
        border-bottom: 1px solid #ddd;
    }

    .search-bar {
        width: 350px;
    }

    .search-bar .search-icon {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        color: #888;
        font-size: 1rem;
    }

    #settingsDropdown,
    #notifDropdown,
    #userDropdown {
        color: #454444ad;
    }

    .navbar-nav .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1050;
    }

    .notif-count {
        font-size: 0.7rem;
        top: 0;
        color: #fd0505e0;
        background-color: #ff00001f;
        left: -5px;
        /*  Because of  RTL */
    }

    .username {
        color: black;
    }

    /* Exam Title */
    .exam-title {
        margin-left: 7rem;
    }

    .exam-buttons button {
        min-width: 100px;
        font-weight: 600;
        gap: 6px;
        /* space between icon and text */
        transition: background-color 0.3s ease;
    }

    .exam-buttons button:hover {
        cursor: pointer;
        background-color: #ebebef;
    }

    .custom-btn1 {
        background-color: #ebebef;
        color: #000000b0;
    }

    .custom-btn2 {
        background-color: #039c8e;
        color: white;
    }

    /* Success Message */
    .success-section img {
        width: 50px;
    }

    .success-section>div:first-child {
        background-color: #ecf7f2;
    }

    .success-message p {
        margin: 0;
    }

    .success-message img {
        display: inline-block;
    }

    .custom-btn3 {
        background-color: #f9f9fb;
        border-radius: 10px;
        padding: 0 5px;
    }

    .success-section>div:first-child,
    .custom-btn3 {
        border: solid 1px #bee9d3;
        box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.25);
    }

    .success-btn span {
        font-weight: bold;
    }

    .success-btn .label {
        margin-right: -5px;
        margin-left: 20px;
    }

    .success-btn .points {
        color: #3baf89;
    }

    .points-charging {
        background-color: #fff4db;
        color: #bd8608;
        font-weight: bold;
    }

    .points-charging a {
        color: #bd8608;

    }


    /* Paper Size */
    .custom-header {
        background-color: #ebebef;
    }

    #displayText {
        display: none;
        color: #0c8343;
        background-color: white;
        border-radius: 20px;
        padding: 2px 15px;
        border: solid 1px #34d77f;
    }

    .paper-size-btn {
        min-width: 140px;
        font-weight: 600;
        position: relative;
        justify-content: center;
    }

    #smallSizeBtn,
    #largeSizeBtn,
    #recovery {
        color: black;
        background-color: white;
    }

    .paper-size-btn .fa-check {
        color: white;
        position: absolute;
        right: 8px;
        font-size: 1.2rem;
    }

    .paper-size-btn.active,
    #save,
    .modify {
        background-color: #039c8e !important;
        color: white !important;
        border-color: #039c8e !important;
    }

    .paper-size-btn.active .fa-check {
        display: inline-block !important;
    }

    /* Q1 */
    table {
        border-collapse: collapse;
        width: 100%;
    }

    td {
        border: 2px solid black;
        padding: 8px;
        text-align: center;
    }

    .question-cell {
        text-align: right;
    }

    tr:nth-child(even) {
        background-color: #f5f5f5;
    }

    /* Q2 */
    .qu-header {
        border: solid 2px;
        padding: 1rem;
    }

    .q2 p,
    .copy-qu {
        border: solid 2px;
        margin-top: -10px;
        padding: 1rem;
    }

    .q2-table table td:nth-child(1) {
        width: 20px;
    }

    .q2-table table td:nth-child(2) {
        width: 900px;
        text-align: right;
    }

    /* Q3 */

    .q3-table tr:nth-child(1) td {
        text-align: right;
        font-weight: bold;
    }

    .q3-table tr:nth-child(2) td:nth-child(3) {
        width: 700px;
    }

    /* Q4 */
    .copy-qu {
        text-align: center;
    }

    /* Q5 */
    .fa-xmark {
        color: red
    }

    table .fa-check {
        color: green;
    }

    /* Q8 */
    .q8 img {
        width: 100px;
    }

    .q8 table tr {
        position: relative;
    }

    .q8 table .fa-pen {
        position: absolute;
        bottom: 10px;
        padding: 0.8rem;
        border-radius: 10px;
        color: white;
        background: #039c8e;
        margin-right: 5px;
    }

    .q8 table .fa-pen:hover {
        cursor: pointer;
    }

    /* Media Query For Small Screens */
    @media (max-width: 768px) {

        /* Nav */
        img {
            width: 100px;
            height: 50px;
        }

        .search-bar {
            width: 50%;
        }

        .search-bar input {
            font-size: 11px;
        }

        .navbar-nav {
            flex-direction: row;
        }

        .navbar-nav span {
            display: none;
        }

        /* Exam Title */
        .exam-header {
            flex-direction: column !important;
            align-items: flex-start !important;
        }

        .exam-buttons {
            width: 100%;
            justify-content: flex-start;
        }

        .exam-buttons button {
            flex: 1;
        }

        /* Success Message */
        .success-section>div:first-child {
            flex-direction: column;
            gap: 1rem;
        }

        .success-text {
            justify-content: center;
        }

        /* Paper Size */
        .paper-size-section {
            width: 95%;
            flex-direction: column;
        }

        /* Q1 */
        .qu-title {
            font-size: 18px;
        }

        .custom-header {
            margin: 0.5rem;
        }

        table {
            font-size: 12px;
        }

        td {
            padding: 2px;
        }

        /* Q2 */
        .q2-table table td:nth-child(2) {
            width: 210px;
        }

        /* Q3 */
        .q3-table tr:nth-child(2) td:nth-child(3) {
            width: 70px;
        }

        /* Q4 */

        .qu-header {
            font-size: 15px;
        }

        .copy-qu {
            font-size: 18px;
        }

        /* Q8 */
        .q8 img {
            width: 45px;
        }

        .q8 table .fa-pen {
            bottom: 4px !important;
            padding: 6px;
            border-radius: 6px;
            margin-right: -25px !important;
        }

    }