:root {
	--primary-purple: #5B26B1;
	--primary-purple-hover: #3C0891;
	--primary-green: #017C07;
	--primary-green-hover: black;
}

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;}
.btn.focus, .btn:focus { box-shadow: none;}
a img { border: none;}
p a { color: var(--primary-purple); text-decoration: underline; font-weight: 600;}
p a:hover { color: var(--primary-purple-hover); outline: auto;}
p a:focus { color: #290268; outline: auto;}
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-purple { background: var(--primary-purple); color: #fff;}
.btn-purple:hover { background: vvar(--primary-purple);}
.btn-green{ background: var(--primary-green); color: white !important;}
.btn-green:focus { background: white !important; border: 2px solid var(--primary-green-hover) !important; color: var(--primary-green-hover) !important;}
.btn-green:hover { background: var(--primary-green-hover) !important; color: white !important;}
.btn-green:active { background: var(--primary-green-hover) !important; color: white !important;}
.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: 2px solid #aaa; color: #aaa;}
.btn-disabled-outline:hover { background: #fff; border: 2px solid #aaa; color: #aaa;}

.btn-green-outline { background: transparent; border: 2px solid var(--primary-green-hover); color: var(--primary-green-hover) !important;}
.btn-green-outline:hover { background: var(--primary-green-hover); color: white !important;}
.btn-green-outline:focus { background: var(--primary-green-hover); color: white !important;}
.btn-green-outline:active { background: var(--primary-green-hover) !important; color: white !important;}
.btn-blue-outline { background: transparent; border: 2px solid #203fc4; color: #203fc4;}
.btn-blue-outline:hover { background: #203fc4; color: #fff;}
.btn-grey-outline { background: transparent; border: 2px solid #555; color: #555;}
.btn-grey-outline:hover { background: #555; color: #fff;}
.btn-purple-outline { background: transparent; border: 2px solid #c832ff; color: #c832ff;}
.btn-purple-outline:hover { background: #aa0de4; color: #fff;}
.btn-white-outline { background: transparent; border: 2px 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: 20px; font-weight: bold; color: #B00000; margin: 10px 0; padding: 10px;}
.success-text { display: inline-block; font-size: 20px; font-weight: bold; color: var(--primary-green); 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 { padding: 0; justify-content: space-between;}
.navbar-brand { width: 450px; font-size: 30px; font-weight: 500; color: #fff; line-height: 20px; padding: 0;}
.navbar-brand:focus { outline: 2px solid #c832ff; outline-offset: 3px;}
.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: 45px; font-weight: 700; color: var(--primary-purple); margin: 0 0 10px 0;}
.intro .content p { font-size: 22px; color: #111; line-height: 40px;}
.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: 18px; font-weight: 600; color: #000; background: transparent; padding: 5px 15px; border-radius: 10px;}
.intro .print-icon i { margin: 0 0 0 5px;}
.intro .print-icon:hover { border: 2px solid var(--primary-purple); color: var(--primary-purple-hover);}
.intro .print-icon:focus { background: var(--primary-purple); color: white;}


.intro-center { text-align: center;}
.intro-center #dropdownsForm { margin: auto;}
.intro-center #dropdownsForm select { margin: auto;}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


.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; justify-content: center; background: white; padding: 20px 0 0;}
.kaplan-logo.show { display: flex;}
.table-responsive .table { margin: 0; background: #fff;}
.table-responsive.enter-score { margin: 0 0 100px 0;}
.table-responsive.enter-score .error-text { margin: auto; display: table;}
.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 tbody th:first-child { font-size: 20px; font-weight: 700;}
.table td .form-control { display: inline-block; background: #F7F5FF; max-width: 100px; padding: 5px 20px; font-size: 25px; font-weight: 700; color: var(--primary-purple); text-align: center; border-radius: 5px; border: none;}
.table td small { font-size: 11px;}
.table td .form-control.error { color: red !important;}
.table td .form-control[readonly] { cursor: default;}
.table td .marks { font-size: 25px; font-weight: 800; color: var(--primary-purple); 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: var(--primary-purple); width: 30px; text-align: center; cursor: pointer; user-select: none;}
.table td .number input { width: 90px; padding: 5px 10px;}
.formal-logic td { padding: 20px 20px;}
.formal-logic select { display: inline-block; background: #F7F5FF; padding: 5px 20px; font-size: 20px; font-weight: 700; color: var(--primary-purple); text-align: center; border-radius: 5px; border: none;}
.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: var(--primary-purple);}
#resultsForm .table { border: 1px solid #aaa;}
#resultsForm .table > :not(caption) > * > * { border-color: #aaa;}
.table caption { caption-side: top; font-size: 28px; font-weight: bold; color: var(--primary-purple); text-align: center; padding: 20px 0;}

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

.guidance .content { border-radius: 10px; padding: 20px;}
.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 var(--primary-green);}
.guidance .content.green, .guidance .content.green h4, .guidance .content.green p { color: #000;}
.guidance .content h2 { font-size: 26px; font-weight: 600; margin: 0 0 10px 0;}
.guidance .content h3 { font-size: 22px; font-weight: 500; margin: 0 0 20px 0;}
.guidance .content h3 strong { font-weight: 700; margin: 0 0 10px 0;}
.guidance .content p { font-size: 18px;}

.switch { position: relative; display: inline-block; width: 60px; height: 34px;}
.switch input { opacity: 0; width: 0; height: 0;}
/* Add visible focus border */
.switch input:focus + .slider {
  outline: 3px solid #c832ff; /* visible border */
  outline-offset: 3px;     /* little space between border and element */
}
.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: var(--primary-purple); transition: .4s; border-radius: 50%;}
.switch input:checked + .slider { background-color: var(--primary-purple);}
.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: var(--primary-green)}
.sendResults-btn { margin: auto; display: inline-block; font-size: 20px; font-weight: 700; padding: 12px 40px;}
.btns-row { display: flex; justify-content: center; padding: 20px 0; border-top: 2px solid #ccc; border-bottom: 2px solid #ccc;}
.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: var(--primary-green)}

strong[style*="color"] {
  color: var(--primary-green-hover) !important;
}