html {
    width: 100%;
}
body {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
	padding: 0;
	margin: 0;
	height: 100%;
	overflow-x: hidden;
	background-color: #F7F5FF;
}
h1,h2,h3,h4,h5,h6,ul,p { padding: 0; margin: 0;}
ul,ol { list-style: none; padding: 0; margin: 0;}
a { text-decoration: none;}
a:hover, a:focus { text-decoration: none; outline: none;}
.btn.focus, .btn:focus { box-shadow: none;}
a img { border: none;}
p a { color: #2daee4; text-decoration: underline;}
p a:hover { color: #1a8ebf; text-decoration: underline;}
strong { font-weight: bold;}
button:focus { outline: none;}
::-webkit-input-placeholder { opacity: 1;}
::-moz-placeholder { opacity: 1;}
:-ms-input-placeholder { opacity: 1;}
:-moz-placeholder { opacity: 1;}
.hide { display: none;}
button { cursor: pointer; border: 0;}
* { -webkit-transition: all .1s; -moz-transition: all .1s; -ms-transition: all .1s; -o-transition: all .1s; transition: all .1s;}
.hide { display: none !important;}
.img-fluid { max-width: 100%; height: auto;}


.btn { text-decoration: none;display: inline-block; background: #ccc; padding: 7px 20px; border-radius: 50px; font-size: 15px; font-weight: 700; color: #000;}
.btn i { font-size: 14px; margin: 0 3px;}

.btn-green { background: #20b94f; color: #fff;}
.btn-green:hover { background: #0cae3e; color: #fff;}
.btn-blue { background: #203fc4; color: #fff;}
.btn-blue:hover { background: #203fc4; color: #fff;}
.btn-white { background: #f6f6f6; color: #111;}
.btn-white:hover { background: #eee; color: #111;} 
.btn-white-trans { background: transparent; color: #fff;}
.btn-white-trans:hover { background: #fff; color: #111;}
.btn-grey { background: #f1f1f1; color: #111;}
.btn-grey:hover { background: #eee; color: #111;}
.btn-disabled { background: #ddd; color: #555;}
.btn-disabled-outline { background: #fff; border: 1px solid #aaa; color: #aaa;}
.btn-disabled-outline:hover { background: #fff; border: 1px solid #aaa; color: #aaa;}

.btn-green-outline { background: transparent; border: 1px solid #20b94f; color: #20b94f;}
.btn-green-outline:hover { background: #0cae3e; color: #fff;}
.btn-blue-outline { background: transparent; border: 1px solid #203fc4; color: #203fc4;}
.btn-blue-outline:hover { background: #203fc4; color: #fff;}
.btn-grey-outline { background: transparent; border: 1px solid #555; color: #555;}
.btn-grey-outline:hover { background: #555; color: #fff;}
.btn-purple-outline { background: transparent; border: 1px solid #c832ff; color: #c832ff;}
.btn-purple-outline:hover { background: #aa0de4; color: #fff;}
.btn-white-outline { background: transparent; border: 1px solid #fff; color: #fff;}
.btn-white-outline:hover { background: #fff; color: #111;}

.error-msg { display: block; background: #ffe2e2; padding: 10px 15px; border: 1px solid #ff0000; border-radius: 5px; font-size: 17px; color: #ff0000; margin: 10px 0;}
.success-msg { display: block; background: #d9ffe5; padding: 10px 15px; border: 1px solid #20b94f; border-radius: 5px; font-size: 17px; color: #20b94f; margin: 10px 0;}

.error-text { display: inline-block; font-size: 15px;  color: #ff0000; margin: 10px 0; padding: 10px;}
.success-text { display: inline-block; font-size: 15px; color: #093; margin: 10px 0; padding: 10px;}

.form-block { margin: 0 0 50px 0;}
label { margin: 0 0 5px 0;}
.form-control { font-size: 17px; padding: 5px 10px;}
.form-control:focus { box-shadow: none;}

header { background: #2E1656; padding: 25px 0; color: #fff; box-shadow: 0 2px 5px 1px rgba(0,0,0,0.05);}
.navbar { justify-content: space-between;}
.logo { float: left;}
.logo a { float: left; margin: 10px 0;}
.logo a img { float: left;}
.navbar { padding: 0;}
.navbar-brand { width: 360px; font-size: 30px; font-weight: 500; color: #fff; line-height: 20px; padding: 0;}
.navbar-nav .nav-item { margin: 0 15px 0 0;}
.navbar-nav .nav-item .nav-link { font-size: 15px; font-weight: 500; color: #333; border: 1px solid #ccc; padding: 5px 15px; border-radius: 35px;}
.navbar-nav .nav-item.active .nav-link { background: #ee2756; color: #fff; border-color: #ee2756;}

.intro { padding: 50px 0 30px;}
.intro .content { margin: 0 0 30px 0;}
.intro .content h1 { font-family: 'Titillium Web', sans-serif; font-size: 40px; font-weight: 700; color: #5B26B1;}
.intro .content p { font-size: 20px; color: #111;}
.intro .dropdowns { display: flex;}
.intro .dropdowns select { background: #fff; padding: 10px 20px; border-radius: 5px; font-size: 20px; font-weight: 600; margin: 0 30px 0 0; border: 0; box-shadow: 0 3px 5px -2px rgba(0,0,0,0.1); min-width: 250px}
.intro .dropdowns select#assignment { min-width: 310px;}
.intro .print-icon { font-size: 16px; color: #000;}
.intro .print-icon i { margin: 0 0 0 5px;}

.intro-center { text-align: center;}
.intro-center #dropdownsForm { margin: auto;}
.intro-center #dropdownsForm select { margin: auto;}

.table-sec { margin: 0 0 50px 0;}
.table-responsive { background: #fff; position: relative;}
.loader { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background: rgba(255, 255, 255, 0.9); display: none; justify-content: center; align-items: center;}
.loader.show { display: flex;}
.kaplan-logo { display: none;}
.table-responsive .table { margin: 0; background: #fff;}
.table th { font-size: 16px; font-weight: 700; text-align: center; padding: 10px 20px; vertical-align: middle; border-bottom: 2px solid #ccc;}
.table th:first-of-type, .table th:last-child { text-align: left;}
.table td { font-size: 16px; line-height: 24px; text-align: center; padding: 10px 20px; vertical-align: middle; border-bottom: 2px solid #ccc;}
.table td:first-of-type, .table td:last-child { text-align: left;}
.table td h3 { font-size: 22px; font-weight: 700;}
.table td .topic-marks { display: inline-block; background: #F7F5FF; max-width: 100px; padding: 5px 20px; font-size: 28px; font-weight: 700; color: #5B26B1; text-align: center; border-radius: 5px; border: none;}
.table td small { font-size: 10px;}
.table td .topic-marks.error { color: red !important;}
.table td .topic-marks[readonly] { cursor: default;}
.table td .marks { font-size: 28px; font-weight: 800; color: #5B26B1; letter-spacing: -2px;}
.table td small.percentage { font-size: 13px;}
.table td .number { display: flex; justify-content: center; align-items: center;}
.table td .number span { font-size: 30px; font-weight: bold; color: #5B26B1; width: 30px; text-align: center; cursor: pointer; user-select: none;}
.table td .number input { width: 80px;}
.table td .suggestions { font-size: 16px;}
.table td .suggestions ol { list-style-type: decimal; list-style-position: outside; padding: 0 0 0 20px;}
.table td .suggestions ul { list-style-type: disc; list-style-position: outside; padding: 0 0 0 20px;}
.table td .suggestions p {  display: inline;}
.table td .suggestions .after-part { margin: 10px 0 0 0;}
.table td .suggestions .after-part h4 { font-size: 16px; font-weight: 600; margin: 0 0 5px 0;}
.table td .suggestions .readmore { color: #5B26B1;}
.table tr:last-child td { border-bottom: none;}
#resultsForm .table { border: 1px solid #aaa;}
#resultsForm .table > :not(caption) > * > * { border-color: #aaa;}


.error input, .error select, .error textarea { border:1px solid red;}
.error span { font-size:15px; color:red;}

.guidance .content { border-radius: 10px; padding: 20px; text-align: center;}
.guidance .content.default { background: #f6f6f6; border: 1px solid #ddd;}
.guidance .content.default h2, .guidance .content.default h4, .guidance .content.default p { color: #000;}
.guidance .content.orange { background: #ffe8d9; border: 1px solid #FC7923;}
.guidance .content.orange, .guidance .content.orange h4, .guidance .content.orange p { color: #000;}
.guidance .content.yellow { background: #ffe9a3; border: 1px solid #f2ab00;}
.guidance .content.yellow, .guidance .content.yellow h4, .guidance .content.yellow p { color: #000;}
.guidance .content.green { background: #e5fbc7; border: 1px solid #86CB27;}
.guidance .content.green, .guidance .content.green h4, .guidance .content.green p { color: #000;}
.guidance .content h4 { font-size: 18px; font-weight: 500; margin: 0 0 20px 0;}
.guidance .content h4 strong { font-weight: 700; margin: 0 0 10px 0;}
.guidance .content h2 { font-size: 26px; font-weight: 600; margin: 0 0 10px 0;}
.guidance .content p { font-size: 16px; margin: 0 0 10px 0;}
.guidance .content p:last-child { margin: 0;}

.switch { position: relative; display: inline-block; width: 60px; height: 34px;}
.switch input { opacity: 0; width: 0; height: 0;}
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; transition: .4s; border-radius: 34px;}
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: #5B26B1; transition: .4s; border-radius: 50%;}
.switch input:checked + .slider { background-color: #5B26B1;}
.switch input:focus + .slider { box-shadow: 0 0 1px #fff; box-shadow: none; border: none;}
.switch input:checked + .slider:before { background: #fff; -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); border-radius: 50%;}

.continue-btn { margin: auto; display: table; font-size: 20px; font-weight: bold; padding: 12px 40px;}
.personalize-btn { margin: auto; display: inline-block; font-size: 20px; font-weight: bold; padding: 12px 40px;}
.personalize-btn:hover, .personalize-btn:focus { background: #0cae3e; color: #fff;}
.sendResults-btn { margin: auto; display: inline-block; font-size: 20px; font-weight: 700; padding: 12px 40px;}
.btns-row .btn { margin: 0 10px;}

#sendResultsModal .modal-footer { justify-content: flex-start;}
.results-sent { display: none;}
.results-sent .inner { display: flex; justify-content: center; flex-wrap: wrap;}
.results-sent img { width: 50px; margin: 0 0 20px 0;}
.results-sent h2 { width: 100%; text-align: center; font-size: 20px; font-weight: 700; color: #0CAE3E;}