/* importing google fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;400;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*font-family: 'Poppins', sans-serif;*/
}

#app {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: linear-gradient(135deg, #003c80 30%, #0056b3 70%);
    overflow: auto;
}

#quiz-title {
    font-size: 35px;
    font-weight: 600;
    color: darkblue;
}

.recaptcha-logo-container {
    position: fixed;
    bottom: 20px; /* Adjust this value as needed */
    left: 50%;
    transform: translateX(-50%);
}

/*body {
    background: linear-gradient(135deg, #003c80 30%, #0056b3 70%);*/
/* Fallback for older browsers */
/*background-color: #0056b3;*/
/*direction: rtl;*/
/*background: #007bff;*/
/*width: 100%;
}*/

html, body {
    direction: rtl;
    height: 100%;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #003c80 30%, #0056b3 70%);
    color: darkblue;
    font-family: Rubik, sans-serif;
}
/*body {
    background-image: url('images/download.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    margin: 0;
}*/
input {
    font-family: Rubik, sans-serif;
}
h1, button, textarea, span {
    font-family: Rubik, sans-serif;
}
.next_btn {
    background-color: #fdcb6e;
    padding: 5px;
    font-size: 15px;
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);*/
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.08);
    font-family: Rubik, sans-serif;
}

#quiz {
    display: flex;
    justify-content: center;
}

#start_btn {
    position: absolute;
    top: 50%;
    display: none;
    /*left: 50%;*/
    /*margin-top: -50px;
    margin-left: -50px;*/
    /*width: 100px;
    height: 100px;*/
}

::selection {
    color: #fff;
    background: #007bff;
}

/*.start_btn,*/
.info_box,
.quiz_box,
.result_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: 5px;
    max-width: 600px; /* Set a max width to prevent overflow */
    width: 90%; /* Slightly smaller width for better responsiveness */
    background: linear-gradient(135deg, #f5f5f5 30%, #e8e8e8 70%);
}

    .info_box.activeInfo,
    .quiz_box.activeQuiz,
    .result_box.activeResult {
        opacity: 1;
        z-index: 5;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1);
        max-width: 600px; /* Same max width for consistency */
        width: 90%;
        margin: 10px;
        background: linear-gradient(135deg, #f5f5f5 30%, #e8e8e8 70%);
    }

/* Add media queries for smaller screens */
@media screen and (max-width: 768px) {
    .info_box,
    .quiz_box,
    .result_box {
        width: 95%; /* Adjust width for smaller screens */
        margin: 5px;
    }

        .info_box.activeInfo,
        .quiz_box.activeQuiz,
        .result_box.activeResult {
            width: 95%; /* Adjust width for smaller screens */
        }
}

/*#btnrestart {
    margin: 0 5px;
    height: 40px;
    width: 120px;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    border: none;
    outline: none;
    border-radius: 5px;
    border: 1px solid;
    transition: all 0.3s ease;
    background-color: #007bff;
    color: white;
}*/

.start_btn button {
    font-size: 25px;
    font-weight: 500;
    color: #007bff;
    padding: 15px 30px;
    outline: none;
    border: none;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
}

#fullresultbtn {
    font-size: 25px;
    font-weight: 500;
    color: #007bff;
    padding: 15px 30px;
    outline: none;
    border: none;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
}

.info_box {
    /*width: 540px;*/
    /*background: #fff;*/
    border-radius: 5px;
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

    .info_box .info-title {
        height: 30px;
        width: 100%;
        border-bottom: 1px solid lightgrey;
        display: flex;
        align-items: center;
        padding: 0 30px;
        border-radius: 5px 5px 0 0;
        font-size: 20px;
        font-weight: 400;
    }

    .info_box .info-list {
        padding: 15px;
        /*text-align: right;*/
    }

        .info_box .info-list .info {
            margin: 5px;
            font-size: 14px;
            
        }

            .info_box .info-list .info span {
                font-weight: 600;
                color: #007bff;
            }

    .info_box .buttons {
        text-align:center;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 10px;
        border-top: 1px solid lightgrey;
    }

        .info_box .buttons button {
            margin: 0 5px;
            height: 30px;
            width: 80px;
            font-size: 13px;
            font-weight: 400;
            cursor: pointer;
            border: none;
            outline: none;
            border-radius: 5px;
            border: 1px solid #007bff;
            transition: all 0.3s ease;
        }

.quiz_box {
    /*width: 550px;*/
    /*background: #fff;*/
    background-color: yellow;
    border-radius: 5px;
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

    .quiz_box header {
        position: relative;
        z-index: 2;
        /*height: 40px;*/
        /*padding: 0 30px;*/
        /*background: #fff;*/
        border-radius: 5px 5px 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.1);
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 10px;
        padding-right: 10px;
    }

        .quiz_box header .title {
            font-size: 25px;
            font-weight: 600;
        }

        .quiz_box header .timer {
            color: #004085;
            background: #cce5ff;
            border: 1px solid #b8daff;
            height: 35px;
            padding: 5px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px;
            /*width: 145px;*/
        }

            .quiz_box header .timer .time_left_txt {
                font-weight: 400;
                font-size: 15px;
                user-select: none;
                padding: 5px;
            }

            .quiz_box header .timer .timer_sec {
                font-size: 16px;
                font-weight: 500;
                height: 30px;
                width: 45px;
                color: #fff;
                border-radius: 5px;
                line-height: 30px;
                text-align: center;
                background: #343a40;
                border: 1px solid #343a40;
                user-select: none;
                margin-right: 5px;
            }

        .quiz_box header .time_line {
            position: absolute;
            bottom: 0px;
            left: 0px;
            height: 3px;
            background: #007bff;
        }

section {
    padding: 25px 30px 20px 30px;
    background: #fff;
}

    section .que_text {
        font-size: 20px;
        font-weight: 500;
        text-align: right;
    }

    section .option_list {
        padding: 20px 0px;
        display: block;
    }

        section .option_list .option {
            /*background: aliceblue;*/
            background-color: #F5FBFF;
            border: 1px solid #84c5fe;
            border-radius: 5px;
            padding: 8px 15px;
            font-size: 15px;
            margin-bottom: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex; /* Keep this for flex layout */
            align-items: center; /* Center items vertically */
            justify-content: flex-start; /* Keep this for normal content flow */
            text-align: right; /* Ensure text is aligned to the right */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.08);
        }

            section .option_list .option:last-child {
                margin-bottom: 0px;
            }

            section .option_list .option:hover {
                color: #004085;
                background: #cce5ff;
                border: 1px solid #b8daff;
            }

            section .option_list .option.correct {
                color: #155724;
                /*background: #d4edda;#86d3eb*/
                /*border: 1px solid #c3e6cb;#3963fa*/
                background: #86d3eb;
                border: 1px solid #3963fa;
            }

            section .option_list .option.incorrect {
                color: #721c24;
                /*background: #f8d7da;
                border: 1px solid #f5c6cb;*/
                background: #86d3eb;
                border: 1px solid #3963fa;
            }

            section .option_list .option.disabled {
                pointer-events: none;
            }

            section .option_list .option .icon {
                height: 26px;
                width: 26px;
                border: 2px solid transparent;
                border-radius: 50%;
                text-align: center;
                font-size: 13px;
                pointer-events: none;
                transition: all 0.3s ease;
                line-height: 24px;
            }

.option_list .option .icon.tick {
    color: #23903c;
    border-color: #23903c;
    background: #d4edda;
}

.option_list .option .icon.cross {
    color: #a42834;
    background: #f8d7da;
    border-color: #a42834;
}

footer {
    height: 60px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid lightgrey;
}

    footer .total_que span {
        display: flex;
        user-select: none;
    }

        footer .total_que span p {
            font-weight: 500;
            padding: 0 5px;
        }

            footer .total_que span p:first-child {
                padding-left: 0px;
            }

    footer button {
        background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
        font-size: 20px;
        font-weight: 600;
        color: darkblue;
        outline: none;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        direction: rtl;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
        opacity: 0;
        pointer-events: none;
        transform: scale(0.95);
        transition: all 0.3s ease;
        /*height: 40px;
        padding: 0 13px;
        font-size: 18px;
        font-weight: 400;
        cursor: pointer;
        border: none;
        outline: none;
        color: #fff;
        border-radius: 5px;
        background: #007bff;
        border: 1px solid #007bff;
        line-height: 10px;
        opacity: 0;
        pointer-events: none;
        transform: scale(0.95);
        transition: all 0.3s ease;*/
    }

        footer button:hover {
            background: #0263ca;
        }

        footer button.show {
            opacity: 1;
            pointer-events: auto;
            transform: scale(1);
        }

.result_box {
    /*background: #fff;
    border-radius: 5px;*/
    display: flex;
    padding: 25px 30px;
    width: 450px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

    .result_box .icon {
        font-size: 100px;
        color: #007bff;
        margin-bottom: 10px;
    }

    .result_box .complete_text {
        font-size: 25px;
        font-weight: 600;
        border-bottom: 2px solid;
        border-bottom-color: #f6d365;
        text-align: center;
    }
/*#f6d365  #fda085*/
.complete_text2 {
    font-size: 15px;
    font-weight: 200;
}

.displayme {
    display: true;
}

.result_box .score_text span {
    display: flex;
    margin: 5px 0;
    font-size: 18px;
    font-weight: 500;    
}

    .result_box .score_text span p {
        padding: 0 4px;
        font-weight: 600;
    }

.result_box .buttons {
    display: flex;
    margin: 20px 0;
}

    .result_box .buttons button {
        margin: 0 10px;
        height: 50px;
        padding: 0 20px;
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
        border: none;
        outline: none;
        border-radius: 5px;
        border: 1px solid #007bff;
        transition: all 0.3s ease;
    }

.buttons button.restart {
    /*background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);*/
    background-color: #fdcb6e;
    font-size: 20px;
    font-weight: 600;
    color: darkblue;
    /*padding: 10px 20px;*/ /* Adjusted padding */
    outline: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /*margin: 10px;*/ /* Adjusted margin */
    /*transition: all 0.3s ease;*/
    direction: rtl;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

    .buttons button.restart:hover {
        background: #0263ca;
    }


.resultbtn1 {
    width: 70%;
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    font-size: 15px;
    font-weight: 600;
    color: darkblue;
    padding: 5px 15px; /* Adjusted padding */
    outline: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /*margin: 10px;*/ /* Adjusted margin */
    /*transition: all 0.3s ease;*/
    direction: rtl;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.resultbtn2 {
    width: 70%;
    background: linear-gradient(135deg, #65a9f6 0%, #85cdfd 100%);
    font-size: 15px;
    font-weight: 600;
    color: darkblue;
    padding: 5px 15px; /* Adjusted padding */
    outline: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /*margin: 10px;*/ /* Adjusted margin */
    /*transition: all 0.3s ease;*/
    direction: rtl;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.allresultstable {
    margin-top: 5px;
}

.resultbtn3 {
    width: 50%;
    background: linear-gradient(135deg, #65a9f6 0%, #85cdfd 100%);
    font-size: 15px;
    font-weight: 600;
    color: darkblue;
    padding: 5px 15px; /* Adjusted padding */
    outline: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /*margin: 10px;*/ /* Adjusted margin */
    /*transition: all 0.3s ease;*/
    direction: rtl;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 5px;
}


.buttons button.quit {
    /*color: #007bff;
    background: #fff;*/
    background: #fff;
    font-size: 20px;
    font-weight: 600;
    color: darkblue;
    /*padding: 10px 20px;*/ /* Adjusted padding */
    outline: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /*margin: 10px;*/ /* Adjusted margin */
    /*transition: all 0.3s ease;*/
    direction: rtl;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

    .buttons button.quit:hover {
        color: #fff;
        background: #007bff;
    }


/*movie*/
.moviecontainer {
    margin: 15px;
    width: 90%;
    height: 450px;
    outline: 1px solid #fff;
    /* Setup */
    position: relative;
    padding: 10px;
}

.moviechild {
    /*width: 50px;
    height: 50px;*/
    /*background-color: red;*/
    /* Center vertically and horizontally */
    /* top: 50%;
    left: 50%;*/
    width: 100%;
    height: 100%;
}
/*end movie*/

/*welcome start*/
.emptyinput {
    border-color: red;
}

.welcomebox {
    text-align: center;
    /*background-color: #fff;*/
    background: linear-gradient(135deg, #f5f5f5 30%, #e8e8e8 70%);
    margin-right: 20px;
    margin-left: 20px;
    margin-top: 20px;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    max-width: 100%;
}

.welcometitle {
    font-size: 20px;
    font-weight: 600;
    padding: 5px;
    font-family: Rubik, sans-serif;
}

.welcometitle2 {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    padding: 3px;
    padding-bottom: 1px;
    border-bottom: 2px solid;
    border-bottom-color: #fda085;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 7px;
    font-family: Rubik, sans-serif;
}

.resulttitle {
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    padding: 3px;
    padding-bottom: 1px;
    border-bottom: 2px solid;
    border-bottom-color: #fda085;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 7px;
}

.welcomeunderline {
    border-bottom: 2px solid;
    border-bottom-color: #fda085;
}
/*fda085 #f6d365*/
.welcometext {
    font-size: 17px;
    font-weight: 450;
    padding: 1px;
}

.margindiv {
    margin-bottom: 7px;
}

.newbuttondiv {
    margin-top: 20px;
    /*position: relative;
    width: 90%;*/
    text-align: center;
}

.newbuttons3 {
    background-color: #e8e8e8;
    font-size: 25px;
    font-weight: 600;
    color: darkblue;
    padding: 10px 20px;
    outline: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 20px;
    margin-left: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    font-family: Rubik, sans-serif;
}

.newbuttons {
    /*background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);*/
    background-color: #fdcb6e;
    font-size: 25px;
    font-weight: 600;
    color: darkblue;
    padding: 10px 20px;
    outline: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 20px;
    margin-left: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    font-family: Rubik, sans-serif;
}

    .newbuttons:hover {
        background: linear-gradient(135deg, #fda085 0%, #f6d365 100%);
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

    .newbuttons:active {
        background: linear-gradient(135deg, #fda085 0%, #f6d365 100%);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
        transform: translateY(0);
    }



.newbuttons2 {
    background-color: lightblue;
    font-size: 18px;
    font-weight: 500;
    color: darkblue;
    padding: 10px 20px;
    outline: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 20px;
    margin-left: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    font-family: 'Rubik', sans-serif;

}

    .newbuttons2:hover {
        background: linear-gradient(135deg, #fda085 0%, #f6d365 100%);
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

    .newbuttons2:active {
        background: linear-gradient(135deg, #fda085 0%, #f6d365 100%);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
        transform: translateY(0);
    }




input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select {
    background: linear-gradient(135deg, #ffffff, #f5f5f5);
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    font-size: 15px;
    color: darkblue;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.08);
    /*transition: all 0.3s ease;*/
    width: 70%;
    box-sizing: border-box;
    margin-bottom: 10px;
}

    input [type="text"]:focus, input[type="email"]:focus, input[type="password"], input[type="number"] :focus, select:focus {
        background: linear-gradient(135deg, #e6e6e6, #ffffff);
        border-color: #007bff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
        outline: none;
        transform: translateY(-2px);
    }

        input[type="text"]:active, input[type="email"]:active, input[type="number"], input[type="password"]:active, select:active {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.08);
            transform: translateY(0);
        }

textarea {
    background: linear-gradient(135deg, #ffffff, #f5f5f5);
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    font-size: 15px;
    color: darkblue;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.08);
    /*transition: all 0.3s ease;*/
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}

    textarea:focus {
        background: linear-gradient(135deg, #e6e6e6, #ffffff);
        border-color: #007bff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
        outline: none;
        transform: translateY(-2px);
    }

    textarea:active {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.08);
        transform: translateY(0);
    }


/*TABLE*/

.table-container {
    width: 90%;
    height: 90%;
    margin: 50px auto;
    background: linear-gradient(135deg, #f5f5f5 30%, #e8e8e8 70%);
    /*padding: 20px;*/
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: scroll;
    text-align: center;
}

.table-wrapper {
    overflow: auto;
    /*height: calc(100% - 40px);*/ /* Adjust based on padding and other elements */
    width: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    /*min-width: 800px;*/ /* Ensure minimum width for better readability */
}

th, td {
    padding: 2px 3px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

th {
    background: linear-gradient(135deg, #65a9f6 0%, #85cdfd 100%);
    color: white;
    font-weight: 600;
}

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

tr:hover {
    background: #cce5ff;
    color: #004085;
}

tr:nth-child(odd) {
    background: #fff;
}

/*TOGGLLE*/
.toggle-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.toggle-button2 {
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    background-color: #d0d0d0;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    font-family: 'Rubik', sans-serif;
}

    .toggle-button2.active {
        background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    }

.table-container {
    text-align: center;
}


/* GRID */
.statistics-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.statistics-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    margin: 5px;
    background-color: #d0e7f9; /* Light blue background */
    border-radius: 5px;
    min-width: 80px; /* Allow to expand if name is too long */
    border: 1px solid darkblue;
    white-space: nowrap; /* Prevent breaking */
}

.statistics-class {
    font-weight: bold;
}

.statistics-count {
    font-size: 1.2em;
}

.grade-statistics {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.grade-statistics-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    margin: 5px;
    background-color: #FFD580;
    border-radius: 5px;
    border: 1px solid darkorange;
    min-width: 80px; /* Allow to expand if name is too long */
    white-space: nowrap; /* Prevent breaking */
}

.grade {
    font-weight: bold;
}

.grade-count {
    font-size: 1.2em;
}



/*LOGO*/

#welcomeboxtest {
    height: 50px;
    width: 80px;
    border: 1px solid #000; /* Optional: for visualization */
}

.logocontainer {
    overflow: hidden; /* Ensure no overflow */
    display: flex;
    justify-content: center;
    align-items: center;
}

    .logocontainer img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* or 'cover' depending on the desired effect */
    }


/*NEW CSS*/

#tabs {
    display: flex;
    justify-content: center;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.tab {
    cursor: pointer;
    padding: 10px 20px;
    margin: 0 5px; /* Added horizontal margin between tabs */
    display: inline-block;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    font-weight: bold;
    color: #333;
    transition: background-color 0.3s, color 0.3s;
}

    .tab:hover {
        background-color: #e0e0e0;
    }

    .tab.active1 {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
        font-weight: bold;
    }

.hidden1 {
    display: none;
}


/*.tab {
    cursor: pointer;
    padding: 10px 20px;
    margin: 0 10px;
    display: inline-block;
    background-color: #f1f1f1;
    border-radius: 5px;
}

    .tab.active1 {
        background-color: #007bff;
        color: white;
    }

.hidden1 {
    display: none;
}*/

.specialbutton {
    background-color: #0056b3;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    /*transform: translate(-50%, -50%);*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    font-family: 'Rubik', sans-serif;
}

.button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    /*transform: translate(-50%, -50%);*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    font-family: 'Rubik', sans-serif;
}

    .button:hover {
        background-color: #0056b3;
    }

.error {
    color: red;
    display: none;
}

#authContainer {
    max-width: 300px;
    margin: auto;
    width: 80%;
    height: 70%;
}

#formContainer form div {
    margin-bottom: 15px;
}


/*LOADING*/
#loadingOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

#spinner {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    text-align: center;
}

.ball {
    width: 20px;
    height: 20px;
    background-color: yellow;
    border-radius: 50%;
    display: inline-block;
    animation: jump 0.5s infinite alternate;
}

.ball1 {
    animation-delay: 0s;
}

.ball2 {
    animation-delay: 0.1s;
}

.ball3 {
    animation-delay: 0.2s;
}

.ball4 {
    animation-delay: 0.3s;
}

.ball5 {
    animation-delay: 0.4s;
}

@keyframes jump {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-30px);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#loadingText {
    color: white;
    font-size: 20px;
    margin-top: 10px;
    font-family: Rubik, sans-serif;
}

/*TABS*/
/* Add basic styling for tabs */
.tab2 {
    display: none;
}

    .tab2.active2 {
        display: block;
        border-radius: 5px 5px 5px 5px;
        /*background: #343a40;*/
    }

/* Updated styling for tabs */
.tabs2 {
    cursor: pointer;
    padding: 10px;
    border: 1px solid #ddd;
    
    border-bottom: none;
    display: inline-block;
    background: white;
    border-radius: 5px 5px 0 0;
    margin-right: 5px;
}

    .tabs2.active2 {
        /*background: grey;*/
        border: 2px solid orange;
        border-bottom: 1px solid transparent;
        background-color: lightsalmon;
        /*background: #343a40;*/
        border-radius: 5px 5px 0 0;
    }

.tab-content {
    /*border: 1px solid #ddd;*/
    padding: 20px;
    /*background-color: lightgray;*/
}

#l5 {
    display: flex;
    align-items: flex-start; /* Aligns checkbox and label to the top */
    flex-direction: column;
}

#termsCheckbox {
    margin-right: 10px; /* Space between checkbox and label */
}

#termsCheckboxLabel {
    white-space: normal; /* Allows the text to wrap */
    line-height: 1.4; /* Adjust for readability */
}
/*#termsError{
margin-top: 5px;
}
.checkbox-container{
display:flex;
alighn-items:flex-start;
}*/
#allowmarkettingdiv {
    max-width: 100%; /* Ensure the div doesn't exceed parent width */
}

    #allowmarkettingdiv label {
        display: inline-block; /* Keep the label inline */
        line-height: 1.5; /* Set a reasonable line height */
    }

#allowMarketingCheckbox {
    margin-right: 10px; /* Space between checkbox and text */
    vertical-align: top; /* Align checkbox to the top */
}

.marketing-text {
    display: inline; /* Allow the text to wrap normally */
    white-space: normal; /* Allow text to wrap */
    overflow-wrap: break-word; /* Break long words if necessary */
}

/*settings container*/
#settings-container {
    direction: rtl;
    /*max-width: 800px;*/
    /*margin: 0 auto;*/
}

#settings-columns {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align items to the top */
}

.settings-column {
    flex: 1;
    padding: 10px;
    text-align: right; /* Align text to the right */
}

.settings-divider {
    width: 3px;
    background-color: #ccc;
    margin: 0 5px;
}


/* Dropdown Container */
/* Dropdown Styles */
.dropdown {
    position: relative;
    display: inline-block;
    margin: 20px;
}

    /* Dropdown Button */
    .dropdown button {
        padding: 10px;
        font-size: 16px;
        cursor: pointer;
        width: 200px;
        text-align: right; /* Align text to the right for RTL */
        font-family: 'Rubik', sans-serif;
    }

/* Dropdown Content */
/* Dropdown Styles */
/*.dropdown {
    position: relative;
    display: inline-block;
    margin: 20px;
}*/

    /* Dropdown Button */
    /*.dropdown button {
        padding: 10px;
        font-size: 16px;
        cursor: pointer;
        width: 200px;
        text-align: right;*/ /* Align button text to the right for RTL */
    /*}*/

/* Dropdown Content */
/*.dropdown-content {
    display: none;*/ /* Hidden by default */
    /*position: absolute;
    right: 0;*/ /* Aligns with the right edge of the dropdown button */
    /*left: auto;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;*/ /* Ensures it appears above other elements */
    /*min-width: 220px;*/ /* Set minimum width for dropdown items */
/*}*/

    /* Dropdown Item Styling */
    /*.dropdown-content a {
        color: black;
        padding: 10px;
        text-decoration: none;
        display: flex;*/ /* Use flexbox to align items */
        /*justify-content: flex-start;*/ /* Align items to the left */
        /*align-items: center;*/ /* Center items vertically */
        /*white-space: nowrap;*/ /* Prevents text from wrapping */
    /*}*/

        /* Hover effect on items */
        /*.dropdown-content a:hover {
            background-color: #ddd;
        }*/

/* Show Dropdown on Hover */
/*.dropdown:hover .dropdown-content {
    display: block;
}*/

/* Color Box */
/*.color-box {
    width: 25px;
    height: 25px;
    display: inline-block;
    border: 1px solid black;
    margin-right: 10px;*/ /* Add space between the color box and text */
/*}*/
.dropdown {
    position: relative;
    display: inline-block;
    margin: 20px;
}

    .dropdown button {
        padding: 10px;
        font-size: 16px;
        cursor: pointer;
        width: 200px;
    }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 200px;
    max-height: 300px; /* Make the dropdown scrollable */
    overflow-y: auto; /* Allow vertical scrolling */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    right: 0;
}

    .dropdown-content a {
        padding: 12px 16px;
        text-decoration: none;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

        .dropdown-content a:hover {
            background-color: #ddd;
        }

.color-box {
    width: 20px;
    height: 20px;
    margin-left: 15px; /* Increased space between color square and name */
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown button {
    text-align: right; /* Align the button text to the right */
}
#colorpickbtn {
    border-radius: 5px;
    background: linear-gradient(135deg, #ffffff, #f5f5f5);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/*TITLE*/
/*#quiztitle {
    margin-top: 20px;*/ /* Adds some spacing from the top */
    /*padding: 20px;*/
    /*border: 2px solid #ccc;*/
    /*background-color: #f9f9f9;*/
    /*width: 100%;*/ /* Ensures it takes the full width */
    /*box-sizing: border-box;*/ /* Ensures padding is included in the width */
/*}*/

#quiztitle {
    font-size: 2.0em; /* Adjust the size for the title */
    font-weight: bold;
}

.settings-header {
    display: flex;
    /*align-items: center;*/ /* Vertically center the title and button */
    /*justify-content: space-between;*/ /* Spread them across the available space */
    /*margin-bottom: 20px;*/ /* Add space between header and settings columns */
}

#saveSettingsBtn {
    margin-left: 10px; /* Small margin between title and button */
    right: 10px;
}

#quiztitlediv {
    /*max-width: 100%;*/ /* Ensure it doesn't exceed the container */
    overflow: hidden; /* Prevent any content from overflowing */
}

#quiztitle {
    font-size: 24px; /* Default font size */
    font-weight: bold;
    line-height: 1.2; /* Set a comfortable line height */
    text-align: center;
    white-space: normal; /* Allow text to wrap */
    overflow: hidden; /* Prevent overflow */
    text-overflow: ellipsis; /* Optional: Add ellipsis when content is too long */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit the title to 2 lines */
    -webkit-box-orient: vertical; /* Required for line-clamp to work */
    word-wrap: break-word; /* Break words if necessary */
    box-sizing: border-box; /* Prevent the box from growing beyond its container */
    max-width: 100%; /* Ensure the title does not exceed the container */
}


/* For shrinking text when it exceeds two lines */
#quiztitle {
    font-size: calc(16px + 1vw); /* Make the font size responsive based on the screen width */
    max-width: 90%; /* Ensure the text doesn't overflow the container */
}

/* Adjust font size further for very small screens */
@media screen and (max-width: 600px) {
    #quiztitle {
        font-size: calc(12px + 2vw); /* Adjust size based on smaller screens */
    }
}


/*TOGGLE LOGIN*/
.toggle-container {
    display: flex;
    justify-content: center;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.toggle-button {
    padding: 10px 20px;
    margin: 0 5px; /* Horizontal margin between buttons */
    border: 1px solid #ccc;
    border-bottom: none; /* Remove bottom border to mimic tabs */
    background-color: #f9f9f9;
    cursor: pointer;
    outline: none;
    font-size: 16px;
    border-radius: 5px 5px 0 0; /* Round top corners */
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: bold;
    outline: none;
    color: #333;
    font-family: Rubik, sans-serif;
}

    .toggle-button.active {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
        font-weight: bold;
        outline: none;
    }

    .toggle-button:hover {
        background-color: #e7e7e7;
    }

    .toggle-button:not(.active) {
        border-bottom: 1px solid #ccc; /* Add a bottom border for inactive buttons */
    }


    /*LANGUAGE*/
/* Language Dropdown */
.lng-dropdown {
    display: inline-block;
    position: relative;
    /*font-family: Arial, sans-serif;*/
}

.lng-dropdown-button {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
}

    .lng-dropdown-button img {
        width: 20px;
        height: 15px;
        margin-right: 10px;
    }

.lng-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    min-width: 150px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
}

    .lng-dropdown-menu.lng-open {
        display: block;
    }

.lng-dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
}

    .lng-dropdown-item img {
        width: 20px;
        height: 15px;
        margin-right: 10px;
    }

    .lng-dropdown-item:hover {
        background-color: #f0f0f0;
    }
#confirmButton {
    margin: 10px;
    padding: 5px;
    outline: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /*margin: 10px;*/ /* Adjusted margin */
    /*transition: all 0.3s ease;*/
    direction: rtl;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid;
    border-color: lightgray;
    background-color: #fdcb6e;
    color: darkblue;
}
#updateButton {
    border: 1px solid;
    border-color: lightgray;
    transition: all 0.3s ease;
    margin: 10px;
    padding: 5px;
    outline: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /*margin: 10px;*/ /* Adjusted margin */
    /*transition: all 0.3s ease;*/
    direction: rtl;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    color: darkblue;
}
.data-container {
    /*background-color: lightgray;*/
    border: 1px solid;
    padding: 5px;
    border-radius: 5px;
    border-color:darkgray;
    margin-left:10px;
    margin-right:10px;
}


/*REGISTRATION SCRIPT
*/
#registersection > div {
    align-items: center;
    justify-content: start;
}

.score_text1 {
    display: flex;
    flex-direction: column; /* Stack the elements vertically */
    align-items: center; /* Center the content horizontally */
    text-align: center; /* Center the text within each line */
    gap: 10px; /* Add spacing between lines */
    margin: 20px 0; /* Optional, for spacing around the div */
    font-size: 18px; /* Optional, for consistent text size */
}

    .score_text1 .bold-number {
        font-weight: bold; /* Make the numbers bold */
        font-size: 20px; /* Slightly larger size for emphasis */
    }


/*    create referal from results  */
.button-container {
    
    display: flex;
    justify-content: center; /* Centers buttons horizontally */
    gap: 10px; /* Space between the buttons */
    margin-top: 10px; /* Adds some spacing from the content above */
    margin-left:5px;
    margin-right:5px;
}

/*ICONS*/
.fa-star {
    color: gold; /* Dark yellow #B8860B */
    margin-right: 5px;
}

.fa-link {
    color: darkorange;
    margin-right: 5px;
}
#header1 {
    /*background-color: #f8f9fa;*/ /* Light background for header */
    display: flex;
    justify-content: center;
    padding: 20px 0;
    background-color: #EFEFEF;
    border-radius: 5px;
    padding: 10px;
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0);*/ /* Add a subtle shadow */
}

#logo1 {
    margin-top:5px;
    max-width: 300px; /* Adjust logo size */
    width: auto;
    height: auto;
}

/*DROPDOWN*/

#searchable-dropdown-container {
    display: flex;
    align-items: flex-start; /* Align items to the top for better control */
    gap: 10px; /* Spacing between input section and button */
}

#input-container {
    flex: 1; /* Allows the input section to take up remaining space */
    position: relative; /* To position dropdown options correctly */
}

#quiz-dropdown-search {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.dropdown-options {
    position: absolute;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
    background-color: white;
    display: none; /* Hidden initially */
    z-index: 1000;
    border-radius: 5px;
}

    .dropdown-options div {
        padding: 8px;
        cursor: pointer;
    }

        .dropdown-options div:hover {
            background-color: #f0f0f0;
        }

    .dropdown-options .hidden {
        display: none;
    }
/*TERMS AND CONDITIONS*/
.terms-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

/* Popup Background */
.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}

/* Popup Box */
.popup-content {
    position: fixed;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    direction: rtl; /* Right-to-left alignment */
    text-align: right; /* Align text to the right */
}

/* Popup Header */
.popup-header {
    background-color: #f1f1f1;
    padding: 10px;
    text-align: right;
}

    .popup-header .close-popup {
        font-size: 20px;
        color: #333;
        cursor: pointer;
    }

/* Popup Body */
.popup-body {
    padding: 20px;
    height: calc(100% - 50px);
    overflow-y: auto;
    text-align: right;
}


/*AI*/
.question-block {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.answer {
    margin-left: 20px;
}

textarea {
    width: 90%;
    resize: none;
}
.controls {
    margin-bottom: 10px;
}
.block-checkbox{
    margin-left:10px;
}

fieldset > div {
    margin-bottom: 8px;    
}
fieldset {
    padding: 5px;
    border-radius: 5px;
    background-color: #f5f5f5;
}
#saveSettingsBtn{
    margin-top:10px;
    margin-bottom:10px;
}
.info-message {
    color: red;
}

.info-icon {
    font-size: 18px;
    color: #007bff; /* Blue color for icon */
    cursor: pointer;
    margin-left: 5px;
}

/*Dynamic Parameters*/
.Dynamiccontainer {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}



.field-list {
    margin-top: 20px;
}

.field-item {
    padding: 10px;
    border: 1px solid #ddd;
    margin-bottom: 5px;
    cursor: grab;
    background-color: #f9f9f9;
}

    .field-item.dragging {
        opacity: 0.5;
    }

#settings-columns2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align items to the top */
}
.hidden {
    display: none;
}