/**
* loader
* ------------- */
:root {
	--nav-link-active-bg : #742B8F !important;
}  

body {
    opacity: 0;
    transition: opacity 2s;
}

.loader-wrapper {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background-color: #00000082;
  display: flex;
  justify-content:center;
  align-items: center;
}


.svg-spinners--bars-scale {
  display: inline-block;
  width: 96px;
  height: 96px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='2.8' height='12' x='1' y='6' fill='%23742B8F'%3E%3Canimate id='svgSpinnersBarsScale0' attributeName='y' begin='0;svgSpinnersBarsScale1.end-0.085s' calcMode='spline' dur='0.51s' keySplines='.36,.61,.3,.98;.36,.61,.3,.98' values='6;1;6'/%3E%3Canimate attributeName='height' begin='0;svgSpinnersBarsScale1.end-0.085s' calcMode='spline' dur='0.51s' keySplines='.36,.61,.3,.98;.36,.61,.3,.98' values='12;22;12'/%3E%3C/rect%3E%3Crect width='2.8' height='12' x='5.8' y='6' fill='%23742B8F'%3E%3Canimate attributeName='y' begin='svgSpinnersBarsScale0.begin+0.085s' calcMode='spline' dur='0.51s' keySplines='.36,.61,.3,.98;.36,.61,.3,.98' values='6;1;6'/%3E%3Canimate attributeName='height' begin='svgSpinnersBarsScale0.begin+0.085s' calcMode='spline' dur='0.51s' keySplines='.36,.61,.3,.98;.36,.61,.3,.98' values='12;22;12'/%3E%3C/rect%3E%3Crect width='2.8' height='12' x='10.6' y='6' fill='%23742B8F'%3E%3Canimate attributeName='y' begin='svgSpinnersBarsScale0.begin+0.17s' calcMode='spline' dur='0.51s' keySplines='.36,.61,.3,.98;.36,.61,.3,.98' values='6;1;6'/%3E%3Canimate attributeName='height' begin='svgSpinnersBarsScale0.begin+0.17s' calcMode='spline' dur='0.51s' keySplines='.36,.61,.3,.98;.36,.61,.3,.98' values='12;22;12'/%3E%3C/rect%3E%3Crect width='2.8' height='12' x='15.4' y='6' fill='%23742B8F'%3E%3Canimate attributeName='y' begin='svgSpinnersBarsScale0.begin+0.255s' calcMode='spline' dur='0.51s' keySplines='.36,.61,.3,.98;.36,.61,.3,.98' values='6;1;6'/%3E%3Canimate attributeName='height' begin='svgSpinnersBarsScale0.begin+0.255s' calcMode='spline' dur='0.51s' keySplines='.36,.61,.3,.98;.36,.61,.3,.98' values='12;22;12'/%3E%3C/rect%3E%3Crect width='2.8' height='12' x='20.2' y='6' fill='%23742B8F'%3E%3Canimate id='svgSpinnersBarsScale1' attributeName='y' begin='svgSpinnersBarsScale0.begin+0.34s' calcMode='spline' dur='0.51s' keySplines='.36,.61,.3,.98;.36,.61,.3,.98' values='6;1;6'/%3E%3Canimate attributeName='height' begin='svgSpinnersBarsScale0.begin+0.34s' calcMode='spline' dur='0.51s' keySplines='.36,.61,.3,.98;.36,.61,.3,.98' values='12;22;12'/%3E%3C/rect%3E%3C/svg%3E");
}

.nav-group-sub .nav-link {
    padding-left: calc(var(--nav-link-padding-x)* 0.6 + var(--icon-font-size)) !important;
}
.nav-sidebar .nav-item:not(.nav-item-header):first-child {
    padding-top: 0 !important;
}
.nav-sidebar .nav-item:not(.nav-item-header):last-child {
    padding-bottom: 0 !important;
}

.nav-item:not(".nav-exam") > .nav-link:first-child:not(.nav-group-sub .nav-link) {
    padding: var(--nav-link-padding-y) 1rem !important;
}
.select2-results__option{
	cursor: pointer;
}


/*.nav-sidebar .nav-link.active {
    background-color: #873ba3 !important;
	color : #ffffff;
}*/
.min-h-88vh{
	min-height: 89vh;
}

/*.nav-sidebar .nav-link.active i {
	color:#FFFFFF;
}

.nav-sidebar .nav-link i {
	color:#742B8F;
}

.nav-sidebar .nav-link i.ph-sign-out {
	color:#b01212;
}*/

.welcome-heading{
	font-size: 36.3px;
	line-height: 50px;
	font-weight: 700;
}

.btn-group-primary .btn:hover{
	color: var(--primary);
}

.w-40 {
    width: 40% !important;
}


.ticket-overview-panel{
	background-color: #F9F9FC;
}

.ticket-overview-panel button:hover{
	background-color: var(--gray-200);
}

.course-card{
	min-width:24em;
	max-width:24em;
}
.survey-period{
	font-weight: 300;
	font-size: 16px;
}

.inline .flatpickr-months .flatpickr-prev-month svg, 
.inline .flatpickr-months .flatpickr-next-month svg {
    width: 35px !important;
    height: 22px !important;
    margin-top: 10px !important;
}

.inline  .flatpickr-months {
	padding: 7px 0 !important;
}

.inline .flatpickr-innerContainer{
	padding: 10px 0 !important;
}

.flatpickr-calendar.inline{
	margin-left:auto !important;
}


/**
**
*/
.page-content{
	overflow: auto;
	height: 93vh;
}

.divider{
	width: 90%;
	display: block;
	margin: 5px auto;
}


.course-icon {
  display: inline-block;
  height: 18px;
  width: 18px;
  background-image: url('./icon/course.svg');
  background-repeat: no-repeat;
  background-position: -18px 0px;
}

.form-check *{
	cursor: pointer;
}
small[data-fv-validator]{
	display: block;
}


.select2-selection--multiple .select2-selection__clear{
	    font-size: 20px;
	    cursor: pointer;
	    top: 6px;
	    display: inline-flex;
	    width: 1em;
	    height: 26px;
	    align-items: center;
	    justify-content: center;
	    margin-top: 4px;
}


.sidebar.take-exam-sidebar:not(.sidebar-main-resized){
	width:50em !important;
}

.answer-choices-body .form-check input:checked  ~ label ,
.markForReview input:checked ~ label,
.form-group .form-check input:checked  ~ label {
	color : green;
	font-weight: 500;
}


/* */
.form-wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
}

.mt-25{
	margin-top: 25px;
}

/*.mypass-reactive-sidebar .nav-item .nav-link,
.mypass-reactive-sidebar .nav-item .nav-link i{
	align-items:center !important;
	color: #FFFFFF !important;
}*/

/*.mypass-reactive-sidebar  .nav-link:focus, .nav-sidebar .nav-link:hover,
.mypass-reactive-sidebar  .nav-item-open>.nav-link:not(.disabled):not(:active), .nav-sidebar>.nav-item-expanded>.nav-link:not(:active)  {
    background-color: #873ba3;
}*/

.mypass-loader{
	position: absolute; 
	top: 0; 
	right: 0; 
	bottom: 0; 
	left: 0;
	background: #0000002e; 
	z-index: 9999;
	display: block;
}

.mypass-loader span{
  color: #FFF;
  font-size: 11px;
  background: #FFF;
  animation: escaleY 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
  margin:auto;
  animation-delay: -0.16s;
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.mypass-loader span:before,
.mypass-loader span:after {
  content: '';
  position: absolute;
  top: 0;
  left: 2em;
  background: #FFF;
  width: 1em;
  height: 4em;
  animation: escaleY 1s infinite ease-in-out;
}
.mypass-loader span:before {
  left: -2em;
  animation-delay: -0.32s;
}

@keyframes escaleY {
  0%, 80%, 100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

/*.mypass-reactive-sidebar .nav-link.active{
	margin-right: .3125rem !important;
	margin-left: .3125rem !important;	
} */

.blockMsg,
.blockMsg h5{
	border : none !important;
	margin : 0  !important;
}

.theme-mode{
	color:white;
}

.theme-mode:hover{
	color:black;
}



/*#region ==========================================================================
     purple
========================================================================== */
   

.pointer{
	cursor: pointer;
}


/*#endregion*/
.dataTables_paginate ul {
	justify-content: center !important;	
}



@media (max-width: 768px) {
    .offcanvas.offcanvas-end {
        width: 100% !important;
    }
}

.bg-image {
  /* The image used */
  background-image: url("/mypass/bgImage");
	  
  /* Add the blur effect 
  filter: blur(8px);
  -webkit-filter: blur(8px);
  */
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.card.info {
	--card-bg: var(--info);
	color: white;
}

.card.secondary{
	--card-bg:var(--secondary);
	color: white;
}

.card.indigo{
	--card-bg:var(--indigo);
	color: white;
}


/**************************************************************************************/
.card.kp-card {
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	padding: 1rem 1.25rem;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.card.kp-card .card-header {
	font-size: 1rem;
	font-weight: 600;
	color: #374151;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #e5e7eb;
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
}

.card.kp-card .card-header i {
	cursor: pointer;
	color: #9ca3af;
	margin-left: 0.5rem;
	font-size: 1rem;
}

.card.kp-card .card-body {
	flex: 1;
	font-size: 0.875rem;
	color: #4b5563;
}

/* List styling inside Quick Settings */
.quick-settings-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.quick-settings-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0;
	border-bottom: 1px solid #f3f4f6;
	font-size: 0.875rem;
}

.quick-settings-list li i {
	margin-right: 0.5rem;
	color: #6b7280;
}

/* App version bar styles */
.app-version-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.4rem;
}

.version-bar {
	flex: 1;
	height: 10px;
	background: #e5e7eb;
	border-radius: 5px;
	margin: 0 1rem;
	overflow: hidden;
}

.version-bar-fill {
	height: 100%;
	background-color: #10b981;
	border-radius: 5px;
}

/* Device Usage legend */
.device-legend {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.device-legend-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.875rem;
}

.device-legend-color {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-right: 0.5rem;
}


.dashboard-summary-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	border-bottom: 1px solid #e5e7eb;
	padding-bottom: 1rem;
}

.dashboard-summary-box {
	flex: 1 1 auto;
	min-width: 160px;
	padding: 0 1rem;
	text-align: center;
	border-right: 1px solid #e5e7eb;
}

.dashboard-summary-box:last-child {
	border-right: none;
}

.dashboard-summary-title {
	font-size: 0.9rem;
	color: #6b7280;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	margin-bottom: 0.25rem;
}

.dashboard-summary-value {
	font-size: 2rem;
	font-weight: 700;
	color: #738791;
}


.dashboard-summary-change {
	font-size: 0.8rem;
	font-weight: 500;
	color: #10b981; /* green default */
	margin-top: 0.2rem;
}

.dashboard-summary-change.negative {
	color: #ef4444;
}

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

.card-header h3 {
	font-size: 16px;
	font-weight: bold;
}

.card-header a {
	font-size: 12px;
	color: #ddd;
	text-decoration: none;
}

.card-header a:hover {
	text-decoration: underline;
}

.profile {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	margin-left: 10px;
}

.profile img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid white;
}

.score {
	font-size: 32px;
	font-weight: bold;
	margin-top: 10px;
}

.sub-text {
	font-size: 14px;
	opacity: 0.8;
}

.lesson-score {
	background: rgba(255, 255, 255, 0.1);
	padding: 15px;
	border-radius: 10px;
	margin-top: 15px;
}

.lesson-score span {
	font-size: 24px;
	font-weight: bold;
}

.slider {
	display: flex;
	justify-content: center;
	gap: 5px;
	margin-top: 10px;
}

.slider div {
	width: 20px;
	height: 4px;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 2px;
}

.slider div.active {
	background: white;
	width: 30px;
}

.arrow {
	font-size: 18px;
	cursor: pointer;
	opacity: 0.8;
}

.arrow:hover {
	opacity: 1;
}

.version-bar {
  flex: 1;
  height: 18px;
  background: #e5e7eb;
  margin: 0 1rem;
  overflow: hidden;
  position: relative;
  border-radius: 0; /* removed roundness */
}

.version-bar-fill {
  height: 100%;
  background-color: #10b981;
  width: 0%;
  transition: width 0.6s ease;
  position: relative;
  border-radius: 0; /* removed roundness */
}

.version-bar-fill::after {
  content: attr(data-percent) '%';
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: white;
  font-weight: bold;
}

.device-legend {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.875rem;
}

.device-legend-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 140px;
}

.device-legend-color {
	width: 12px;
	height: 12px;
	border-radius: 2px;
	display: inline-block;
	margin-right: 0.5rem;
}
.campaign-row {
  margin-bottom: 1rem;
}

.campaign-bar {
  height: 8px;
  background-color: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.campaign-bar-fill {
  height: 100%;
  background-color: #10b981;
  border-radius: 2px;
}
/************************************** Progress Bars used in manage pages ************************************************************/
  .progress-container {
    display: inline-block;
    position: relative;
    width: 160px;
    height: 18px;
    background: #e0e0e0;
    border-radius: 4px;
    vertical-align: middle;
  }
  .progress-fill {
    height: 100%;
    border-radius: 6px 0 0 6px;
  }
  .progress-label {
    font-size: 11px;
    color: white;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    line-height: 12px;
    pointer-events: none;
  }
  .progress-cell {
    white-space: nowrap;
  }
  .progress-count {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    vertical-align: middle;
  }
  .progress-started {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 0;       /* no rounding in the middle */
}