/* Root Variables for Colors */
:root {
    --primary-color: blueviolet;
    --accent-color-1: hotpink;
    --accent-color-2: deeppink;
    --danger-color: #f00;
    --text-color: #343A40;
    --text-color-2: #fff;
    --background-color: #F7F9FC;
    --background-color-2: #FF6F91;
    --border-color: #C0C0C0;
	--gradient-color-1: linear-gradient(45deg, deeppink, blueviolet);
	--gradient-color-2: linear-gradient(45deg, hotpink, blueviolet);
	--gradient-color-3: linear-gradient(45deg, deeppink, hotpink);
}


/* General Styles */
*{margin:0;padding:0;box-sizing: border-box;}
html {
  scroll-behavior: smooth;
}
body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
    margin: 0;
    padding: 0;
    line-height: 1.6;
	display: flex;
    flex-direction: column;
	font-size:16px;
	min-height: 100vh;
	/* background-image: url(img/body-bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; */
	background-color: var(--text-color-2);
	/* transition: background-image 0.5s ease-in-out; */
}
a{text-decoration:none;outline: 0;}
button, input{outline: 0;}
button{font-size: 100%;}
input, textarea{width:100%;}
input, textarea, select{
			padding: 10px;
            border-radius: 4px;
            font-size: 100%;
            outline: none;
           border: 1px solid var(--border-color);
		   margin-bottom:10px;
		   max-width:100%;
}
input:focus, textarea:focus{border:1px solid;border-color:var(--primary-color);}
label{
	font-weight:bold;font-size: 15px;
}
table{border-collapse:collapse;}
td{padding:5px 10px;}
.main-container{
	flex:1;
	background-color: var(--background-color);
	    padding-bottom: 40px;
}
.section-container{
	width: 90%;
	margin:0 auto;
	display: flex;
    justify-content: center;
	gap:30px;
	padding:20px;
}
/* Navbar */
.navbar {
    background: var(--gradient-color-1);
    color: #fff;
	padding: 10px 0;
	z-index:99999;
}
.navbar .container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.navbar .logo {
    font-size: 160%;
    font-weight: bold;
    font-family: Ador Trikonomiti;
    letter-spacing: 2px;
}
.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
	flex-direction: row;
    flex-wrap: wrap;
}
.nav-links a {
    text-decoration: none;
    color: var(--text-color-2);
    font-weight: bold;
    transition: color 0.3s;
	padding:7px 10px;
}
.nav-links a:hover {
	background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
}

/* Hero Section */

.home-section {
    text-shadow: 2px 2px 2px #ffffff;
	background: var(--text-color-2);
 }

.hero {
    text-align: center;
    padding: 3rem 1rem;
    min-height: 550px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero .container{padding:4rem 2rem;}
.hero h2 {
    color: var(--primary-color);
	font-size:350%; margin:0;
}
.hero p {
    color: var(--text-color);
    margin-bottom: 1.5rem;font-size: 150%;
}
.hero a{font-size: 150%;text-shadow:0 0;}
.btn-primary {
    background-color: var(--primary-color);
    color: #fff;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;margin-top:20px;
	    font-family: 'SolaimanLipi', 'Kalpurush', sans-serif;
}
.btn-primary:hover {
    background-color: var(--accent-color-2);
}

/* Quiz Section */
.quiz-section {
      background-color: var(--background-color);
}
.quiz-section h2{ text-align:center;}

.quiz-section .container{
	
	display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;gap:20px;
	flex-wrap: wrap;}
.quiz-card {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 1rem;
    background-color: #ffffff;
    text-align: center;
    width: 28%;
    border-top: 5px solid var(--primary-color);
}
.quiz-card h3 {
    color: var(--text-color);
	    font-size: 140%;
}
.btn-secondary {
    background: var(--gradient-color-1);
    color: #fff;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    margin-top: 20px;
	    font-family: 'SolaimanLipi', 'Kalpurush', sans-serif;
}
.btn-secondary:hover {
    background-color: var(--primary-color);
}

/* Leaderboard Section */
.leaderboard-section {
    background-color: var(--background-color);
}
.leaderboard {
    width: 100%;
    border-collapse: collapse;
}
.leaderboard th,
.leaderboard td {
    border: 1px solid var(--text-color);
    padding: 0.8rem;
    text-align: center;
}
.leaderboard th {
    background-color: var(--primary-color);
    color: #fff;
}

  .section {padding: 50px 0;}
  .stats-section {background: var(--text-color-2);}
	  
	  .stats-container {
            display: flex;
            justify-content: center;
            gap: 30px;
            text-align: center;
            padding: 20px 0;
            flex-wrap: wrap;
         
        }
        .stat-box {
           /*  background: #fff; */
            padding: 20px;
            border-radius: 10px;
            /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
            width: 200px;
        }
        .stat-box h2 {
            font-size: 40px;
            color: var(--primary-color);
            margin: 10px 0;
        }
        .stat-box p {
            font-size: 140%;
    font-weight: bold;
        }

/* Footer */
.footer {
    background-color: var(--primary-color);
    color: #fff;
    text-align: center;
    padding: 1rem 0;    overflow: hidden;
}

.quiz-page {
    padding: 2rem 1rem;
    background-color: #fff;
}

.quiz-page h2 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
	font-size:200%;
}

.quiz-primary-box{
	border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px #0000001f;
	padding: 10px 20px;
	margin-bottom:20px;
}

.user-quizzes-title {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    color: var(--accent-color-2);
    font-size: 200% !important;
}

.user-quizzes-box{
    border-left: 3px solid var(--accent-color-1);
	 border-right: 3px solid var(--accent-color-1);
	 display: flex;
    justify-content: space-between;
    align-items: center;
	    background: var(--text-color-2);
}

.score-box {
    text-align: center;
    font-weight: bold;
    color: var(--text-color-2);
    padding: 5px 20px;
    background: var(--gradient-color-1);
    border-radius: 10px;
}




.quiz-primary-box h2, .quiz-primary-box h2 a{text-align:left !important;    
       color: var(--primary-color);padding:5px 0px;}

.quiz-box{
	padding:10px;
}

.container-box {
    padding: 1rem;
    background-color: var(--background-color);
}
.container-box, .dashboard-sidebar{
	border: 1px solid;
    border-top: 5px solid;
    border-bottom: 5px solid;
    border-color: var(--primary-color);
	border-radius: 10px;
}




.profile-page {
    padding: 2rem 1rem;
    background-color: var(--background-color);
    text-align: center;
}

.profile-card {
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    padding: 1.5rem;
    max-width: 400px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.profile-pic {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.profile-card h3 {
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.quiz-history {
    margin-top: 2rem;
}

.quiz-history ul {
    list-style: none;
    padding: 0;
}

.quiz-history li {
    background-color: var(--accent-color-1);
    padding: 0.8rem;
    margin: 0.5rem 0;
    border-radius: 5px;
}

.quiz-detail-page {
    padding: 2rem 1rem;
    background-color: var(--background-color);
    
}

.quiz-detail-page h2 {
    color: var(--accent-color-2);
    margin-bottom: 1rem;
	text-align:center;
}

.quiz-info {
    background-color: var(--text-color-2);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    text-align: left;
    max-width: 600px;
    margin: 0 auto 2rem;
    border-top: 5px solid var(--accent-color-1);
    border-bottom: 5px solid var(--accent-color-1);
}

.quiz-info p {
    margin-bottom: 0.8rem;
        font-size: 100%;
}

.quiz-rules {
     background-color: var(--text-color-2);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    text-align: left;
    max-width: 600px;
    margin: 0 auto 2rem;
    border-top: 5px solid var(--primary-color);
    border-bottom: 5px solid var(--primary-color);
}

.quiz-rules h2 {
    margin-bottom: 1rem;
    color: var(--text-color);
	text-align:left;
}

.quiz-rules ol {
       padding-left: 30px;
}

.quiz-rules li {
    padding: 0.5rem 0;
    color: var(--text-color);
}

.quiz-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
	margin-top:20px;
}
.quiz-actions a{color:var(--text-color-2);}


/* Question Page Syles */
.textarea_label{    vertical-align: top;}	
.removeSingleOption, .remove-item{background-color: var(--danger-color) !important;padding: 3px 7px !important;}

.custom-confirm-btn {
    background: var(--primary-color);
}

.custom-cancel-btn{background:var(--accent-color-2);}

.bg-white{
	background-color:var(--text-color-2);
}
.countdown-container{
	display: flex;
    justify-content: space-between;
}
.countdown-circle {
/*   width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(#ff1493 0%, #8a2be2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin:20px auto; */
}

.countdown-text {
 /*  font-size: 18px;
  font-weight: bold;
  color: #000;
  z-index: 2; 
  text-align: center; */
}

.countdown-circle::after {
  /* content: '';
  width: 100px;
  height: 100px;
  background: #fff; 
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; */
}

/*Dashboard Styles */
.sidebar{
	width:25%;  
}
.dashboard-sidebar{
	background: #eee; border-top: 0 !important;    height: auto;
	
}
.dashboard-sidebar h2{
	display:block;
	text-align: center;
  background: var(--gradient-color-1);border-top-left-radius:10px;border-top-right-radius:10px;
   
}
.dashboard-sidebar a{
	    color: var(--text-color-2);
}
.dash-menu{ padding-top: 20px;    padding-left: 10px;    padding-bottom: 20px;}
.dash-menu > li{list-style-type:none;}
.dash-menu > li > a {
    color: var(--text-color);
    font-size: 120%;
    font-weight: bold;
    background: #ddd;
    border-left: 5px solid var(--primary-color);
    padding: 5px 10px;
    display: block;
}
.dash-submenu{      padding-bottom: 10px;
    padding-top: 5px;background: var(--background-color);
    }
.dash-submenu li{list-style-type: none;
    padding-left: 20px;}
.dash-submenu li a{    color: var(--text-color);
    font-size: 100%;}
.common-container{
	width:75%;
}

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

.page-title{
	font-size: 200%;
    margin-bottom: 15px;
	    color: var(--accent-color-2);
		padding:10px;
		 font-weight: bold;
}

.contentTable{
	border-collapse: collapse;
    border-color: #00c785;
	margin:0 auto;
}
.contentTable tr{}
.contentTable td, .contentTable td th{padding: 10px;
    text-align: center;}
	
	
 /* Style for the input field */

        /* Change border and shadow on focus */
        .container-box input:focus, .container-box textarea:focus {
			border: 1px solid var(--primary-color);
        }

        /* Add a button for context */
        .container-box button {
           /*  background-color: var(--primary-color); */
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            font-size: 100%;
            cursor: pointer;
            transition: background-color 0.3s;
        }
		
		.container-box button:focus{
			border:0;
		}
		
		#quizTitle{ }
	.selected-item input{width:70%}
	
	.correct { font-weight: bold; color: green; }
        .question { margin-bottom: 20px; }
		
	.pointBox{width: 10% !important;}

	
/*jQuer UI Style Replace */
#quiz-tabs, #leader-tabs{background:none;display:none;font-family:'SolaimanLipi', 'Kalpurush', sans-serif}


#quiz-tabs .ui-widget-header, .tabs-container .ui-widget-header{
		border:0 !important;
    background: none !important;
    display: flex;
    justify-content: center;
	    align-items: center;
}

#quiz-tabs .ui-widget-content {
  
}

#quiz-tabs .ui-tabs .ui-tabs-panel, #leader-tabs .ui-tabs .ui-tabs-panel {
    border: 1px solid var(--border-color) !important;
}

#quiz-tabs .ui-tabs-nav .ui-tabs-active, #leader-tabs .ui-tabs-nav .ui-tabs-active {
    border: 0;
    background: var(--gradient-color-1) !important;
    font-weight: bold;
    color: var(--background-color);
}
#quiz-tabs .ui-tabs-nav .ui-tabs-active a, #leader-tabs .ui-tabs-nav .ui-tabs-active a{color: #fff !important;}

#quiz-tabs,  .tabs-container, #leader-tabs,  .tabs-container {
    border: 0 !important;
}

#quiz-tabs .ui-tabs-anchor, #leader-tabs .ui-tabs-anchor{font-weight:bold;       font-size: 110%;outline: 0; color: #555;    display: block;}
#quiz-tabs .ui-widget-content a, #leader-tabs .ui-widget-content a {
    color: var(--background-color);    padding: 0.5rem 1.2rem;
}


#quiz-tabs .ui-tabs-nav li, #leader-tabs .ui-tabs-nav li {
    border: 1px solid #9623e033 ;
    background: #9623e033 !important;
    color: #fff !important;
	margin: 10px 20px;
	border-radius: 30px;
}


.quiz_not_found{
	padding: 50px 0;
    font-size: 160%;
    color: var(--text-color);
}

.quiz-primary-box ol li{ list-style-position: inside;  }

.correct-box, .incorrect-box, .partially-correct-box{border-left: 5px solid;}
.correct-box{
    background-color: #e0f7e0;
    border-color: green;}

.incorrect-box, .partially-correct-box{
	border-color: red;
    background-color: #ffe0e0;
}

/* All Question Page Styles */
 .all-questions-container {
        margin: 20px;
    }
    .question {
        margin-bottom: 10px;
        
        border: 1px solid var(--border-color);
        border-radius: 5px;
        background: var(--text-color-2);
    }
    .option {
       
        padding: 5px;
		list-style-position: inside;
    }
    .correct {
		 margin: 5px 0;
        background-color: #e0f7e0;
        font-weight: bold;
		position:relative;
		border-left:5px solid green;
    }
	.correct::after {
        content: "✔";
    color: green;
    position: absolute;
    right: 30px;
    font-size: 27px;
    top: 0;
    }
    .view-correct-btn {
        margin-top: 10px;
        padding: 8px 15px;
        border: none;
        border-radius: 5px;
       background: var(--gradient-color-1);
    color: var(--text-color-2);
        cursor: pointer;font-size: 70%;
    }
    .view-correct-btn:hover {
		background-color: var(--accent-color-2);
    }
	
	.disabled_button{
		 background-color: var(--border-color);
		 color: var(--text-color);
		
	}
	.disabled_button:hover{
		 background-color: var(--border-color);
	}
	
.register-page{
	flex:1;
	background-color:var(--background-color);
	padding:40px 0;
}	
 /* Login Box */
 .login-container{
	 display:flex;
	 justify-content:center;
	 align-items:center;
 }
        .login-box {
				background:var(--text-color-2);
				width: 100%;
				max-width: 400px;
				padding: 30px;
				border-radius: 10px;
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
				    margin: 2rem 1rem;
			}

        .login-box input {
            width: 100%;
            
        }

        .login-box a {
            color: var(--text-color);
            text-decoration: none;
            font-size: 14px;
			padding-top: 10px;
    display: inline-block;
        }

        .login-box a:hover {
            text-decoration: underline;
        }	
		
	.message-box{
		text-align: center;
	}
	.message-box i{
		font-size: 400%;
		 display: block;
		  color: var(--primary-color);
	}
	
	.message-box p{
		    font-size: 160%;
	}
.section_description {
    text-align: center;
    margin: 0 auto;
    padding: 20px 0;
}
	.section_description h2 {
    font-size: 250%;
    color: var(--text-color);
}
	.leaderboard-container{
		margin:0 auto;
	}
.leader {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    flex-direction: row;
    margin-bottom: 15px;
    align-items: center;
    background: var(--text-color-2);
    border-radius: 30px;
    color: var(--text-color);
	font-weight:bold;
}

.leader-info{width:25%;}	
.leader-avatar img {
    width: 50px;
    height: 50px;
    padding: 2px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #ddd;
}
.leader-score, .leader-rank{}
	.leader-name {}
	.leader-score{}
	.leader-rank{
    }
	
.question-table	{
	
}
.question-table	td{
	width:100%;
}
#allEntries td{
	width:100%;
}
.table-common{
	
}

.form-row {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.quiz-page-title {
	text-align: center;
    font-size: 200%;
}
.quiz-form{
	    padding: 30px 20px;
}
.quiz-question{}

.options{
	
} 


.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Custom Checkbox */
.quiz-checkbox {
    position: relative;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    padding-left: 35px; /* Space for the checkbox */
    user-select: none; /* Prevent text selection on click */
    line-height: 24px;
}

.quiz-checkbox input[type="checkbox"] {
    display: none; /* Hide the default checkbox */
}

/* Checkmark style */
.quiz-checkbox .checkmark {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 25px;
    width: 25px;
    background-color: var(--text-color-2);
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    transition: background-color 0.2s, border-color 0.2s;
}

/* When the checkbox is checked */
.quiz-checkbox input[type="checkbox"]:checked + .checkmark {
   background-color: var(--primary-color);
    border-color: var(--primary-color);

}

/* Checkmark appearance */
.quiz-checkbox .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 0px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Show the checkmark when checked */
.quiz-checkbox input[type="checkbox"]:checked + .checkmark::after {
    display: block;
}

/* Hover effect */
.quiz-checkbox:hover .checkmark {
    border-color: var(--primary-color);
}

/* Focus effect */
.quiz-checkbox input[type="checkbox"]:focus + .checkmark {
    outline: 2px solid #4caf50;
    outline-offset: 2px;
}

.raffle-container {
    margin-top: 100px;
}

.raffle-display {
    font-size: 2rem;
    margin: 20px 0;
    border: 2px solid #4caf50;
    padding: 20px;
    border-radius: 10px;
}

.raffle-button {
    padding: 10px 20px;
    font-size: 1.2rem;
    background-color: #4caf50;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.raffle-button:hover {
    background-color: #45a049;
}


.leaderboard-container {
    width: 90%;
    max-width: 700px;
    padding: 20px;
    text-align: center;
}


.top-three {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.position {
    background: #4b6584;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    width: 30%;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
	color: var(--text-color-2);
}

.position:hover {
    transform: scale(1.1);
}

.position .avatar {
    font-size: 4em;
    margin-bottom: 10px;
}

.position .name {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 5px;
}

.position .score {
    font-size: 1em;
}

#first{transform: scale(1.2);}

.remaining-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.remaining-list li {
   background: var(--gradient-color-2);
    border-radius: 5px;
    margin: 10px 0;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
	    color: var(--text-color-2);
}

.remaining-list li span {
    font-size: 1em;
}

.remaining-list li .rank {
    font-weight: bold;
    margin-right: 10px;
       color: var(--text-color-2);
}

.question_search{position:relative;}

.results {
    position: absolute;
    width: 100%;
    background-color: white;
    max-height: 150px;
    overflow-y: auto;
    border-radius: 0 0 5px 5px;
    z-index: 1000;
}


.no-results {
    padding: 10px;
    color: #999;
    text-align: center;
}


.result-item{padding:3px 5px;}
.result-item:hover {
    background-color: var(--primary-color);
	color:var(--text-color-2);
	cursor:pointer;
}

.form-field-group{
	display:flex;
	justify-content:start;
	gap:30px;
	flex-wrap:wrap;
	margin-bottom:20px;
}
.form-field{
	
}

.question_title{
	    display: flex;
    justify-content: space-between;
	    align-items: center;
}

.question_title span{
	    padding: 10px;
    font-weight: bold;
}

.question-box{
	   background: var(--text-color-2);
}
.question-box h2{
	    color: var(--primary-color) !important;
		    font-size: 160%;
}

.question-box ol li{
	        font-weight: bold;
			
}

.dashboard-counter {
    display: flex;
    justify-content: start;
    text-align: center;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 20px;
	background: var(--text-color-2);
}

.counter-box {
    width: 30%;
    padding: 20px;
    background: #f9f9f9;
	border-radius: 5px;
}

.counter-box h2{
	color:var(--text-color);
}
.counter-box p{
	color:var(--primary-color);
	font-size: 200%;
    font-weight: bold;
}


/* Pagination Styles */
 .pagination { margin-top: 20px;     text-align: center;}
  .pagination a { padding: 8px 12px; margin: 4px; background: var(--primary-color); color: white; text-decoration: none; border-radius: 4px; }
  .pagination a.active { background: var(--gradient-color-1); }
  .pagination a:hover { background: var(--gradient-color-1); }

.table-container{
	display: flex;
    justify-content: center;
    flex-direction: column;
	overflow-x: scroll;
}

.common-table{
	
}
.common-table thead{
	    background: var(--primary-color);
    color: var(--text-color-2);
}
.common-table tr:nth-child(even){
	background:#fff;
}
.common-table th, .common-table td{
	    padding: 10px;
		border: 1px solid #ddd;
}
.common-table td{
	    
}

.dashboard{}
     /* Alert Bar Styles */
       #announcement-bar {
    text-align: center;
    padding: 15px;
    display: flex;
    transition: display 0.3s ease-in-out;
    justify-content: space-around; gap: 20px;
}
#announcement-bar span{    display: flex
;
    justify-content: center;
    gap: 10px;}
        .close-btn {
            background: none;
            border: none;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            float: right;
            margin-right: 15px;
        }
		
.latest-quiz{
	margin-top:20px;
}
.latest-quiz ul{    padding: 0 30px;}
.latest-quiz ul li{list-style-type:square;}
.latest-quiz ul li a {
    padding: 8px;
    display: block;
    color: var(--primary-color);
}

/* Profile page styles */
.profile-header {
            display: flex;
            align-items: center;
            padding: 15px;
            border-radius: 10px;
            background: #e8f0ef;
        }
        .profile-header img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-right: 15px;
			background: #fff;
			border: 1px solid #ddd;
			padding: 3px;
        }
        .profile-header h2 {
            margin: 0;
			position:relative;
        }
		.profile_rank{
			    background: var(--gradient-color-1);
				color: var(--text-color-2);
				padding: 5px 8px;
				border-radius: 30px;
				font-size: 50%;
				position: absolute;
				top: 0;
				margin-left: 5px;
		}
        .info-section {
            margin-top: 20px;
            background: #f9f9f9;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        .info-section h3 {
            margin-top: 0;
            border-bottom: 2px solid #ddd;
            padding-bottom: 5px;
        }
        .info-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        .info-item {
            background: #f9f9f9;
            padding: 10px;
            border-radius: 5px;
        }

		
.edit-btn {
    background: var(--text-color);
    padding: 5px 7px !important;
    font-size: 70% !important;
}
		
		.verified-text{
			font-size: 100%;
		}
		
		.password-container{position:relative;}
		.eye-icon{
			position: absolute;
			right: 20px;
			bottom: 28px;
			cursor: pointer;
		}

.access-denied-container{
	
	 text-align: center;
            padding: 40px;
}
 .lock-icon {
            font-size: 4em;  /* Increased lock icon size */
            color: #ddd;    /* Light gray lock icon */
            margin-bottom: 20px;
        }

        .home-link {
            display: inline-block;
            padding: 10px 20px;
            background: var(--gradient-color-1); /* button */
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s; /* Smooth transition on hover */
			margin-top:20px;
        }

        .home-link:hover {
            background-color: #45a049; /* Darker green on hover */
        }
		
 #uploadModal {
            display: none; /* Hide modal initially */
        }


    /* Custom Modal Styling */
        .ui-dialog {
            border-radius: 10px !important;
            background: #f8f9fa !important;
            box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
            padding: 10px;
        }
        .ui-dialog-titlebar {
            background: var(--gradient-color-1) !important;
            color: white !important;
            border: none;
            border-radius: 10px 10px 0 0;
        }
        .ui-dialog-titlebar-close {
            color: white !important;
        }
        .ui-dialog-content {
            padding: 20px;
            text-align: center;
        }

        /* File Input Styling */
        #profile_image {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 15px;
        }

        /* Custom Button Styling */
        .custom-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s ease;
        }
        .custom-btn:hover {
            background: #0056b3;
        }
		
	.error {
            color: #dc3545;
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }	
		
	  input.error-field {
            border-color: #e74c3c;
        }

        input.success-field {
            border-color: #2ecc71;
        }

        .error-message {
            display: none;
            color: #e74c3c;
            font-size: 14px;
            margin-top: 5px;
            padding-left: 4px;
        }

        button:disabled {
            background-color: #bdc3c7;
            cursor: not-allowed;
        }

        .form-message {
            text-align: center;
            padding: 10px;
            margin-top: 20px;
            border-radius: 4px;
            display: none;
        }

        .form-message.success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .form-message.error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        #password-strength {
            margin-top: 5px;
            font-weight: bold;
        }
        .weak { color: #dc3545; } /* Red for weak */
        .medium { color: #ffc107; } /* Yellow for medium */
        .strong { color: #28a745; } /* Green for strong */
		
		#announcementForm .trumbowyg-editor{
			background: var(--text-color-2);
		}
		
		.dashboard .profile-header{
			justify-content: center;
			background: #f9f9f9;
			margin-bottom: 20px;
		}
		.sidebar-toggle{
			display:none;
		}
		#dashmenu-toggle-button{
			padding: 10px 15px;
			background: var(--gradient-color-1);
			color: var(--text-color-2);
			font-size: 20px;
			font-weight: bold;
			position: fixed;
			width: 100%;
			bottom: 0;
			z-index: 9999;
		}
/* 	#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
} */