/*  ======== GLOBAL ==================*/
body {
  /** font-family: 'Poppins', sans-serif; **/
  font-family: 'Roboto', sans-serif;

}

 html, body {
      height: 100%;
      margin: 0;
    }
    
    body {
      display: flex;
      flex-direction: column;
    }
    
    main {
      display: flex;
      flex-direction: column;
      flex: 1 0 auto;
    }
    
    .content-wrapper {
      display: flex;
      flex: 1;
    }
    
    .sidebar {
      height: 100%;
    }
    
    .content-area {
      display: flex;
      flex-direction: column;
      flex: 1;
    }


a {
  font-size:14px;
  font-weight:700
}
.form-control {
  outline:none !important;
  box-shadow: none !important;
}

ul.nav .nav-link.active {
	background-color: #f3e5f5;
}

ul.nav .nav-link {
	color: #9b59b6; /* Set the text color to purple */
}

ul.nav .nav-link:hover {
	color: #8e44ad; /* Darker purple on hover */
	font-weight: bold;
}

/*  ======== Login and Sign Up Buttons ==================*/
.login-custom-btn {
    background-color: #A9A9A9;  /* grey */
    color: #8126cf;           /* White text */
    border: none;
}

.login-custom-btn:hover {
    background-color: #808080; /* Darker grey on hover */
    color: #8126cf;             /* Light text color on hover */
    text-decoration: none;
}

.signup-custom-btn {
    background-color: #8126cf;  /* purple background */
    color: #ffffff;             /* White text */
    border: none;
}

.signup-custom-btn:hover {
    background-color:#663399; /* Darker purple on hover */
    color: #f1f1f1;             /* Light text color on hover */
    text-decoration: none;
}

/*  ======== Hero on Landing Page ==================*/
.hero {
  background-color: #8126cf;
  color: white;
  padding: 100px 0;
  text-align: center;
}

.hero h1 {
  font-size: 3rem;
  font-weight: 600;
}


/*  ======== Cards on Landing Page ==================*/

.card-quiz {
  height: 100%;
  min-height: 200px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.card-quiz:hover {
  transform: translateY(-10px);
}


/*  ======== Footer ==================*/
.footer {
  background-color: #333;
  color: white;
  padding: 50px 0;
  text-align: center;
}

.footer a {
  color: #a5b4fc;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/*  ======== Navbar ==================*/
.navbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}
.nav-link-custom {
font-weight: 600;
  color: white !important;
}

.nav-link-custom:hover {
  color: #d1d5db !important;
}
/* color for navbar in authenticated pages */
.bg-gradient-primary {
	background: linear-gradient(45deg, #9b59b6 10%, #8126CF 100%);
}

/*  ======== Feature Section ==================*/

.feature-icon {
  font-size: 3rem;
  color: #6a3b9e;
}

.feature-title {
  font-weight: 600;
  color: #333;
}

/*  ======== Pricing Section ==================*/

.pricing-section {
  background-color: #8126cf;
  color: black;
  padding: 80px 0;
}

.pricing-card {
  background-color: #fff;
  color: #333;
  border-radius: 12px;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
  padding: 40px;
  text-align: center;
  transition: all 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.2);
}

.pricing-header {
  font-size: 2rem;
  font-weight: 600;
  color: #6a3b9e;
}

.pricing-card .price {
  font-size: 2.5rem;
  font-weight: 700;
  color: #333;
  margin: 20px 0;
}

/*  ======== PopUp Alerts ==================*/
.alert-success {
	background-color: rgba(40, 167, 69, 0.9); /* Green with transparency */
	color: white;
}
.alert-danger {
	background-color: rgba(220, 53, 69, 0.9); /* Red with transparency */
	color: white;
}
.alert-info {
	background-color: rgba(23, 162, 184, 0.9); /* Blue with transparency */
	color: white;
}
.alert-warning {
	background-color: rgba(255, 193, 7, 0.9); /* Yellow with transparency */
	color: black;
}


/*  ============ Search Bar  ==================*/
.searchbarspan {
	background: #8126cf;
	border: #8126cf;
}

.searchbarinput {
	border: 2px solid #8126cf;
}
.searchbarinput:focus{
	border-color: #663399;
}


/*  ============ Quiz Card for Search NB: changed to fixed-cardv2.  ==================*/
.fixed-cardv2:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.fixed-cardv2:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.fixed-cardv2 {
    transition: transform .3s ease;
	width: 300px;   /* Set fixed width */
	height: 300px;  /* Set fixed height */
	overflow: hidden; /* Hide content that exceeds the card size */
	display: flex;
	flex-direction: column;
}

.fixed-cardv2 .card-body {
	flex: 1; /* Ensure content inside the card stretches to fill the available height */
	overflow-y: auto; /* Allow vertical scrolling if content exceeds height */
}

/*  ============ Global Cards CSS  ==================*/
.card-footer {
		border: none;
		display: flex;
		justify-content: space-between;
		background-color: white;
		margin-bottom: 5px;
}
.card-link {
	text-decoration: none;	
}


/*  ============ Sidebar ==================*/
 #sidebar {
		/* Add a clean right border with a subtle shadow effect */
		box-shadow: 4px 0 6px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
	}

.sidebar {
	min-height: 100vh;
	background-color: #ffffff;
	/* border-right: 1px solid #dee2e6; */
}

@media (max-width: 991.98px) {
		.sidebar {
			position: fixed;
			top: 56px;
			left: -100%;
			width: 250px;
			z-index: 1000;
			transition: 0.3s;
			height: calc(100vh - 56px);
		}
		.sidebar.show {
			left: 0;
		}
		.sidebar-backdrop {
			position: fixed;
			top: 56px;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.5);
			z-index: 999;
			display: none;
		}
		.sidebar-backdrop.show {
			display: block;
	}
}

/*  ============ Quiz Card ==================*/
/* container for quiz cards */
.quiz-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 3rem;
}

.quiz-card {
	transition: transform .3s ease;
	border-radius: .375rem;
	height: 290px; /* Set a fixed height for the cards */
	overflow: hidden;
}
.quiz-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.quiz-card img {
	border-radius: .375rem .375rem 0 0;
	width: 100%;
	height: 180px;
	object-fit: cover;
}
/* Disabled Link for Quiz Card */
.disabled-link {
    color: gray; 
    text-decoration: none; 
    pointer-events: none;
    cursor: not-allowed;
}
/* Title heading for quiz card */
.dash-heading {
	color: #808080;
	font-weight: bold;
}
/* quiz card title */
.card-title {
    white-space: nowrap;      /* Prevents text from wrapping */
    overflow: hidden;         /* Hides overflow content */
    text-overflow: ellipsis;  /* Adds ellipsis when text overflows */
}
/* text in quiz card */
.small-font{
	/* font-size: small;*/
	color: purple;
}
/*  ============ Dashboard Statistics Card ==================*/

.stat-card .card-body {
	padding: 2rem;
}
.stat-card {
		border-left: 4px solid;
	}
/*  ============ Global table css ==================*/
.table th, .table td {
	vertical-align: middle;
}

/*  ============ Disable Radio Buttons for questions ==================*/
.custom-disabled {
  appearance: none;
  width: 20px; /* Adjust the width of the radio button */
  height: 20px; /* Adjust the height of the radio button */
  border-radius: 50%; /* Make it circular */
  border: 2px solid #ccc; /* Border color */
  cursor: pointer; /* Change cursor on hover */
}
/*  ============ Remove text decoration and get cursor  ==================*/
.link-style{
	cursor: pointer;
	text-decoration: none;
}

/*============  MODAL DIALOG and Animation  ==================*/
#modal {
	/* Underlay covers entire screen. */
	position: fixed;
	top:0px;
	bottom: 0px;
	left:0px;
	right:0px;
	background-color:rgba(0,0,0,0.5);
	z-index:2000;

	/* Flexbox centers the .modal-content vertically and horizontally */
	display:flex;
	flex-direction:column;
	align-items:center;
	/*justify-content: center;*/

	/* Animate when opening */
	animation-name: fadeIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal > .modal-underlay {
	/* underlay takes up the entire viewport. This is only
	required if you want to click to dismiss the popup */
	position: absolute;
	z-index: -1;
	top:0px;
	bottom:0px;
	left: 0px;
	right: 0px;
}

#modal > .modal-content {
	/* Position visible dialog near the top of the window */
	margin-top:10vh;

	overflow-y: auto;
	/* Sizing for visible dialog */
	width:80%;
	max-width:600px;

	/* Display properties for visible dialog*/
	border:solid 1px #999;
	border-radius:8px;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
	background-color:white;
	padding:20px;

	/* Animate when opening */
	animation-name:zoomIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal.closing {
	/* Animate when closing */
	animation-name: fadeOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal.closing > .modal-content {
	/* Animate when closing */
	animation-name: zoomOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes zoomIn {
	0% {transform: scale(0.9);}
	100% {transform: scale(1);}
}

@keyframes zoomOut {
	0% {transform: scale(1);}
	100% {transform: scale(0.9);}
}

/* char count in modal */
#char-count {
	font-size: 14px;
	color: #555;
}
/*============  Buttons to Launch Modal Pop Up ==================*/
/* modal add button*/
.btn-custom-height {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
/*============  Quiz and Question Border animation  ==================*/
.border-edit {
  border: 5px solid #ccc;  /* Default border thickness and color */
  padding: 20px;
}

@keyframes highlight-border {
  0% {
    border-color: #ccc;  /* Starting color */
  }
  50% {
    border-color: #8126cf; /* Highlighted color */
  }
  100% {
    border-color: #ccc;  /* Reverting to original color */
  }
}

.highlight-border {
  animation: highlight-border 2s ease-in-out;
}

.border-edit-quiz {
  border: 1px solid #ccc;  /* Default border thickness and color */
}


@keyframes highlight-border-quiz {
  0% {
    /*border-color: #ccc;*/  /* Starting color */
    border: 1px solid #ccc;  /* Default border thickness and color */
  }
  50% {
    /*border-color: #8126cf;*/ /* Highlighted color */
    border: 1px solid #8126cf;  /* Default border thickness and color */
  }
  100% {
    /*border-color: #ccc;*/  /* Reverting to original color */
    border: 1px solid #ccc;  /* Default border thickness and color */
  }
}

/* Class that applies the animation */
.highlight-border-quiz {
  animation: highlight-border-quiz 2s ease-in-out;
}
/*============ alpine.js   ==================*/
/* x-cloak is used to hide elements from the user's view until Alpine.js has initialized and loaded, preventing any "flickering" of the page's content.
 */
[x-cloak] { display: none !important; }

/*============ next button for quiz   ==================*/
.btn-next {
  background-color: #007bff;
  color: white;
  font-size: 16px;
  border-radius: 30px;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

.btn-next:hover {
  background-color: #0056b3;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-next i {
  margin-left: 8px;
}

/*============ Correct and incorrect Coloring  ==================*/

.correct {
  background-color: #28a745; /* Green */
  color: white;
}

.incorrect {
  background-color: #dc3545; /* Red */
  color: white;
}