:root { --bg-color: #FAFAFA; --font-color: #00649C; }
body { margin: 0; }
.page-container { margin-top: 4rem; }
.sidebar { margin: 0; margin-left: -20px; padding: 1em;	min-width: 280px; background-color: var(--bg-color); position: relative; z-index: 1; transition: 0.5s; height: 100%; overflow-x: hidden; border-radius: 8px; }
.sidebar a { position: relative; display: block; color: black; padding: 12px 0px; text-decoration: none; border-bottom: 0.5px solid #AFAFAF;		  /*width: 250px;*/ font-family: Poppins; font-style: normal; font-weight: 500; font-size: 14px; line-height: 21px; cursor: pointer; }

.all-categories,
.section-name,
.see-all { font-family: Poppins; font-style: normal; font-weight: 600; font-size: 18px; line-height: 24px; color: #00649C; }
.active { color: #00649C !important; }
div.card-section { background-color: var(--bg-color); height: auto; width: 100%; right: 0; border-radius: 8px; position: relative; box-sizing: border-box; display: flex; flex-flow: column wrap; justify-content: space-between; }
.quiz-header { background-color: var(--bg-color); display: flex; flex-direction: row; position: relative; height: 48px; z-index: 1; padding: 1.5rem; width: 100%; }
.quiz-body {overflow-x: hidden; padding: 1px 16px; overflow-wrap: break-word; position: relative; top: 10px; width: 100%; }

.card-header { min-height: 52px; }
.card-title { font-size: 16px; transition: 1s; margin-top: 0px !important; margin-bottom: 5px !important; font-family: Poppins; font-style: normal; font-weight: 500; line-height: 18px; cursor: pointer; color: #00649C; }
.card-info-section .fa { font-size: 15px; transition: 1s; color: #00649C; cursor: pointer; }
.text-muted { color: #6c757d !important; margin-top: 4px !important; font-family: Poppins; font-style: normal; font-weight: normal; }
.info-text { font-family: Poppins; font-size: 13px; font-style: normal; font-weight: 400; line-height: 15px; letter-spacing: 0em; text-align: left; }
.quiz-disc { font-family: Poppins; font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; color: #000000; text-align: left; padding: 5px 0; }
.list { padding-top: 1.5rem; }
.take-quiz { background: #00649C !important; font-family: Poppins; box-shadow: 0px 0px 3px #00649C !important; }
.hr-line { border: 1px solid #C4C4C4; margin-top: 11px !important; margin-bottom: 11px !important; }

.item-null { height: 60vh; display: flex; justify-content: center; align-items: center; }
#filter-form { display: flex; justify-content: flex-end; flex-direction: row; width: 30%; float: right; margin-bottom: 5px !important; }
.item-null span { font-size: 1.5rem; font-weight: 600; }
.card-footer-2 { display: flex; flex-direction: row; justify-content: center; left: 0; position: relative; bottom: 0; right: 0; padding-bottom: 20px; }
.eqWrap { display: flex; }
.eq { padding: 10px; transition: 0.5s; cursor: pointer; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0, 0, 0, .125); border-radius: 5px; padding: 1rem; }
.equalHW { flex: 1; }
.equalHMWrap { justify-content: space-between; }
.equalHM { width: 32%; }
.equalHMRWrap { justify-content: space-between; flex-wrap: wrap; }
.equalHMR { width: 32%; margin-bottom: 2%; }
.equalHMVWrap { flex-wrap: wrap; gap: 10px;}
.equalHMV { width: 32%; }
.equalHMV:nth-of-type(2n) { margin-right: 0; }
.equalHMV:nth-of-type(3n+1) { margin-left: 0; }
.card-footer { display: flex; flex-direction: row; margin-top: auto; }
.card-footer a { flex: 1; }
.reading-list { border: unset !important; background: unset !important; font-weight: 600; text-decoration: underline; padding-top: 5px; }
.reading-list:hover { color: #122b40; font-weight: 600; text-decoration: underline; }
#loader { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -moz-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); z-index: 99; color: #006699; }
#myOverlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
#myOverlay { background: black; backdrop-filter: blur(4px); opacity: .4; z-index: 1111 !important; display: none; }
.test-update-msg {font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 400; line-height: 16px; color: red; padding: 5px 0; }
@media screen and (max-width:1199px) and (min-width:992px) {
	.equalHMV { width: 48%; }
}
@media screen and (max-width:740px) and (min-width:540px) {
	.equalHMV { width: 48%; }
}

@media screen and (max-width:991px) {
	.quiz-body { height: 75%; }
	.sidenavToggle { z-index: 222; position: fixed; bottom: 6em; right: 2em; }
	.icon1 { border-radius: 50%; background: #306895 !important; color: #fefefe; width: 3em; height: 3em; z-index: 11111; }
	.sidenavToggle { display: block !important; }
	.fa-plus { margin-top: 30%; font-size: 18px !important; }
	.sidebar { 
		display: none;
		width: 100%;
        height: 92vh;
		margin-left: -14px;
		bottom: 0 !important;
		position: fixed;
        z-index: 1111;
	}
}
@media screen and (max-width:840px) and (min-width:801px) {
	.sidebar { height: 90vh; }
}
@media screen and (max-width:800px) and (min-width:767px) {
	.sidebar { height: 90vh; z-index: 1111; }
}
@media screen and (max-width:766px) {
	.page-container { margin-top: 5rem; }
	.div.card-section { height: 90%; }
	.sidebar { width: 100%;  z-index: 1111; }
	.section-name { font-size: 15px; }
}
@media screen and (max-width:539px) {
	.div.card-section { height: calc(100vh - 100px); }
	.quiz-body { height: 85%; }
	.equalHMV { width: 100%; }
	#filter-form { width: 60%; }
}
@media screen and (max-width:400px) {
	.sidebar a { float: none; }
}