:root {

	--primary: rgba(20, 74, 126, 1);
	--primary-light: rgba(20, 74, 126, .5);
	--primary-shade:rgba(20, 74, 126, .1);
	--primary-alt: rgba(255,255,255,1);

	--secondary: rgba(20, 74, 126, 1);
	--secondary-light: rgba(20, 74, 126,.5);
	--secondary-shade: rgba(20, 74, 126,.1);
	--secondary-alt: rgba(255,255,255,1);

	--tertiary: rgba(140, 193, 63, 1);
	--tertiary-light: rgba(140, 193, 63,.5);
	--tertiary-shade: rgba(140, 193, 63,.1);
	--tertiary-alt: rgba(255,255,255,1);


	--black: rgba(50,50,50,1);
	--black-light: rgba(0,0,0,.5);
	--black-shade: rgba(0,0,0,.2);
	--white: rgba(255,255,255,1);
	--white-light: rgba(255,255,255,.5);
	--white-shade: rgba(255,255,255,.1);
	--purple: rgba(9, 100, 132,1);
	--green: rgba(140, 193, 63, 1);
	--green-light: rgba(140, 193, 63, .5);
	--green-shade: rgba(140, 193, 63, .1);
	--yellow: rgba(249, 248, 113, 1);
	--yellow-light: rgba(249, 248, 113,.5);
	--yellow-shade: rgba(249, 248, 113,.1);
	--violet: rgba(30,9,68,1);
	--mainbackgrounds: rgba(234,230,242,1);
	--gray: rgba(200,200,200,1);
	--red: rgba(236, 30, 39, 1);
	--red-light: rgba(250, 0, 101, .5);
	--red-xlight : rgba(250, 0, 101, .35);
	--red-shade: rgba(250, 0, 101, .1);
	--blue: rgba(20, 74, 126, 1);
	--blue-light: rgba(20, 74, 126, .5);
	--blue-shade: rgba(20, 74, 126, .1);
	--orange: rgba(196, 151, 98, 1);
	--orange-light: rgba(196, 151, 98,.5);
	--orange-shade: rgba(196, 151, 98,.1);
	--pink: rgba(140, 193, 63, 1);
	--pink-light: rgba(140, 193, 63, .5);
	--pink-shade: rgba(140, 193, 63, .35);

}
*{font-family: "Barlow", serif !important;}
body{
	background-image: url('/img/loginbg.png');
}
h1{font-family: "Aleo", serif !important; padding: 30px 0px; position:relative; }

header{
	padding: 5px 0px 5px 15px;
	background-color: var(--primary);
	height: 60px;
	max-height: 60px;
	font-weight: bold;
	color: var(--white);
}
header .dropdown{padding-top: 0px; margin-top: 0px; position:relative; top: 5px;}
header .dropdown .btn{background-color: var(--primary); border: 0px; border-radius: 0px;}

header .nav-icon{ background-color: var(--white); border-radius: 50%; width: 10px; color: rgba(0,0,0,1); font-weight: bold; text-align: center; padding: 1px 7px; margin-right: 10px;}
header .header-name{ float:right; position:relative; padding-top: 15px; top: -5px; padding-right: 10px; height: 60px; border-right: 1px solid rgba(255,255,255,.2);}


#LoadingScreen{ position: absolute; top: 0px; left: 0px; width: 100%; height: 200vh; color: var(--white); background-color: var(--black-light); text-align: center; padding-top: 50vh; z-index:9999999;}
#LoadingScreen #spinner{ position:fixed; top: 500px;}


main{ position:relative; float:left; width: 100%; height: 100%; padding-top: 20px; min-height:  calc(100vh - 75px); background-color: rgba(225,225,225,1);   }

.welcome-header{ text-align: center; }
.welcome-header h1{}
.welcome-header h2{}

.sidebar{
	background-color: rgba(250,250,250,1);
}

.clickable:hover td{ cursor: pointer; border: 1px 0px solid var(--primary) !important; background-color: var(--primary-light) !important; }

.btn-success {
	--bs-btn-color: #fff !important;
	--bs-btn-bg: rgba(140,193,63,1) !important;
	--bs-btn-border-color: rgba(140,193,63,1) !important;
	--bs-btn-hover-color: #fff !important;
	--bs-btn-hover-bg: rgba(140,193,63,.5) !important;
	--bs-btn-hover-border-color: rgba(140,193,63,.5) !important;
	--bs-btn-focus-shadow-rgb: 60, 153, 110 !important;
	--bs-btn-active-color: #fff !important;
	--bs-btn-active-bg: rgba(140,193,63,1) !important;
	--bs-btn-active-border-color: #13653f !important;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;

}


.admin-sidebar{
	background-color: var(--white); width: 250px; height: calc(100vh - 40px); position:relative; float:left; top: -20px; padding-top:20px; margin-right: 20px; margin-bottom: -20px; padding-left: 20px;}

.admin-body{ width: calc(100vw - 300px); margin: 0px auto; position:relative; float: left;}

.admin-sidebar .navlink{ }
.admin-sidebar a.navlink{ text-decoration: none; position:relative; float:left;  padding: 15px 10px; width: 100%;
	color: rgba(33,33,33,1); font-weight: bold;}

.admin-sidebar a.navlink .icon{ margin-right: 15px; color: rgba(175,175,175,1) !important;}
.admin-sidebar a.navlink:hover{background-color: var(--primary); color: rgba(255,255,255,1); }

label{ color: var(--secondary); font-weight: bold;  font-family: "Aleo", serif;  font-size: 1.1em;}



.bg-primary, .btn-primary{ background-color: var(--primary) !important; color: var(--white) !important;}
.bg-info, .btn-info{ background-color: var(--secondary) !important; color: var(--white) !important;}
.bg-success, .btn-success{ background-color: var(--green) !important; color: var(--white) !important;}
.bg-secondary, .btn-secondary{ background-color: var(--tertiary) !important; color: var(--white) !important;}
.bg-danger, .btn-danger{ background-color: var(--red) !important; color: var(--white) !important;}

.widescreen{}
.widescreen .modal-dialog{ width: 90%; max-width: 90%; height: 90vh;}
.widescreen .modal-content{ width: 100%; max-width: 100%;  min-height: 90vh;}

.printscreen{}
.printscreen .modal-dialog{ width: 11in; max-width: 11in; height: 8.5in;}
.printscreen .modal-content{ width: 100%; max-width: 100%;  min-height: 8.5in;}

.highlight-detail{ font-weight: bolder; font-size: 2em; font-family: "Aleo", serif; text-align: center; color: var(--tertiary);}
.text-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.header-title {
	padding: 0.75rem 1.25rem !important;
}

.cardcourse{
height: auto;
background-color: #fff !important;
}

.cardcourse .card-header {
	height: auto !important;
	padding: 0 !important;
}
 .cardtitle {
	font-size: 1.125rem;
	font-weight: 600;
	font-family: "Barlow", sans-serif;
	letter-spacing: 0;
}
.cardcourse .card-body{
padding: 0px !important
}

 .courseimg img{ max-width: 100%; max-height: 100%; position: relative; float: left;}

 .coursebutton{
	position: relative; float: left; width: 100%
 }
.coursebutton .btn{
	position: relative;
	float: left;
	width: 100%;
	border-radius: 0px;

}
.list-group-item a{color: rgba(0,0,0,1) !important;}
.list-group-item{ 	cursor:pointer; }

.QuizExpand{ position:relative; float: right; font-size: .8em; color: rgba(0,0,0,.2);}
.AnswerCorrect{ background-color: rgba(0,255,0,.1) !important; border: 1px solid rgba(0,255,0,1) !important; }
.AnswerWrong{ background-color: rgba(255,0,0,.1) !important; border: 1px solid rgba(255,0,0,1) !important;}

.QuestIcon{ position:relative; float: right; font-size: 24px; top: -5px; margin-bottom: -10px;}

.AnswerCorrect .QuestIcon { color:rgba(0,255,0,1) !important;  }
.AnswerWrong .QuestIcon{  color:rgba(255,0,0,1) !important;   }

.questioncard{}
.questioncard .card-header{ font-weight: bold !important; font-size: 20px !important;}

input:required ,
textarea:required ,
select:required {
	border: 1px solid rgba(200,0,0,.6); /* Red border */
}

input::placeholder {

	font-style: italic;
	font-size: 10px;
}
input:hover,
select:hover {
	border-color: #888 !important;
}

/* Add focus effect (optional) */
textarea:focus,
input:focus:not([type="checkbox"]),
select:focus {
	background-color: rgba(255,255,255,1) !important;
	border-color: #0078D7; /* Highlight on focus */
	box-shadow: 0 0 5px rgba(0, 120, 215, 0.5);
}

.modal{ color: black;}

.form-check-input[type=radio]:focus{
	border: 1px solid rgba(50,50,50,.6);
}

.form-check-input[type=radio]{
	border: 1px solid rgba(50,50,50,.6);
}

.description{ position:relative; float:left; width: 100%; font-size: .9rem; color: var(--secondary-light); margin: 5px 0 10px;}
/* ADS */
.ad-thumbnail{ position: relative; float: left; width: 250px; height: 250px; }
.ad-thumbnail-lg{ position: relative; float: left; max-width: 900px; max-width: 900px; }

.ad-thumbnail-lg img,
.ad-thumbnail img{ max-width: 100%; max-height: 100%; position: relative; float: left;}

.ad-thumbnail-meta{ background-color: var(--tertiary-light); padding: 15px; border-radius: 5px;}