* { box-sizing: border-box; }
html { font-family: "Helvetica"; }
a, a:visited, .statsecthead, .statlinkstyle1, .statlinkstyle2 {
	color: #0C15A4; 
	text-decoration: none;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #0C15A4; 
	font-size: 16px;
	text-align: center;
}
.sidebarhead, .sidebarresultshead, .dropdownphone, .dropdownphone2, .dropdowntablet, .dropdownpc, .tooltip .tooltiptext { position: relative; }
body, .row, .headerrow, .dropbtn, .login, .register, .forgotpass, .profile, .editprofile, .makepayment, .index, .bodydiv, .modal-content, .modalexample-content, .push, .addgroup { background-color: white; }
.login, .register, .addgroup, .forgotpass, .profile, .editprofile, .makepayment, .index, .titlebox, .probtypeheader, .profdataheader, .profdata, .footertext, .sidebar, .sidebarlinkdiv, .statsectcolhead2, .statsectcoldata2, .probtypeintro, .modehead, .testselect, .testbuttons, .testcompletehead, .testcompletedata, .testcompletebuttons, .testcompletediv, .diagramdisplay, .modal-content, .modalexample-content, .tooltip .tooltiptext, .stattab1, .stattab2, .entercard, .paymentapproved, .mathtopicsheader { text-align: center; }
.profsubjectheader, .profsubject, .questiondisplay, .optiondisplay, .showsolution, .sidebarresultssub, .dropdown-content, .dropdown-content-extra, .statsecthead, .statsectcolhead1, .statsectcoldata1, .inputcontainer, .logininput, .edituser, .registerinput { text-align: left; }
.practicebutton, .sidebarresultsdata, .pricecol, .quickexamples { text-align: right; }
.login, .register, .addgroup, .forgotpass, .profile, .editprofile, .makepayment, .index, .body, .titletext, .selectprobtypewidth, .sidebarlinkdiv, .footer, .statsecthead, .diagramdisplay, .modal, .modalexample { width: 100%; }
.login, .register, .addgroup, .forgotpass, .profile, .editprofile, .makepayment, .index, .statsecthead, .statsectcolhead1, .statsectcolhead2, .statsectcoldata1, .statsectcoldata2 { border-style: none; }
.sidebarresultshead, .sidebardata1, .substatsdiv1, .datestatsdiv1 { display: block; }
.modal, .modalexample, .sidebardata2, .substatsdiv2, .datestatsdiv2, .dropbtn2, .dropdownphone2, .dropdowntablet, .dropdownpc, .dropdown-content, .dropdown-content-extra, .quickexamples { display: none; }
.profsubjectheader, .profdataheader, .profsubject, .profdata, .sidebarhead, .sidebarresultsdiv, .sidebarresultssub, .sidebarresultsdata, .sidebarlinkdiv, .statheadtitle, .reviewheadtitle, .dropdownphone, .testcompletesubdata, .practicebutton, .stattab1, .stattab2 { display: inline-block; }
.titletext, .probtypeheader, .profsubjectheader, .profdataheader, .profdata, .footertext, .questiondisplay, .optiondisplay, .showsolution, .sidebar, .sidebarlinkdiv, .statheadtitle, .reviewheadtitle, .statsecthead, .statsectcolhead1, .statsectcolhead2, .statsectcoldata1, .statsectcoldata2, .probtypeintro, .modehead, .testcompletehead, .testcompletedata, .testcompletesubhead, .testcompletesubdata, .loginhead, .loginfieldhead, .forgotpasshead, .modal-content, .examplecatname, .makepayhead, .makepayhead1, .makepayhead2, .stattab1, .stattab2, .editusercol1, .cchead, .mathtopicsheader { font-weight: bold; }
.footertext { font-size: 10px; }
.showsolution, .tooltip .tooltiptext, .passmessage { font-size: 11px; }
.questiondisplay, .optiondisplay, .statheadtitle, .reviewheadtitle, .statsectcoldata1, .statsectcoldata2, .stattab1, .stattab2 { font-size: 12px; }
.notregisterhead, .sidebardata, .sidebardata1, .sidebardata2, .sidebarresultssub, .sidebarresultsdata, .sidebarlinkdiv, .statsectcolhead1, .statsectcolhead2, .dropbtn, .statlinkstyle1, .regfailed { font-size: 13px; }
.probtypecategory, .sidebarhead, .sidebarresultshead, .examplecatname, .statlinkstyle2, .quickexamples { font-size: 14px; }
.probtypeheader, .modehead, .profrow, .statsecthead, .ordertable, .editusercol1, .editusercol2 { font-size: 15px; }
.probtypeintro, .loginfieldhead, .forgotpasshead { font-size: 16px; }
.probtypesubject, .testcompletedata, .modal-content, .loginfailed { font-size: 18px; }
.titletext, .testcompletehead, .homewelcome, .loginhead, .sidebarsub { font-size: 20px; }
.mathtopicsheader { font-size: 28px; }
.titletext, .sidebardata, .sidebardata1, .sidebardata2, .sidebarresultssub, .sidebarresultsdata { color: black; }
.testcompletedata, .testcompletesubhead, .homewelcome, .sidebarhead, .sidebarresultshead, .messagestyle2, .quickexamples { color: blue; }
.loginfailed, .notregisterhead, .sidebarsub, .messagestyle, .passmessage, .regfailed { color: red; }
.selectprobtypewidth, .testcompletesubhead, .body, .footer, .sidebardatadiv, .inputcontainer, .logininput, .loginbox, .registerbox, .registerinput { margin-left: auto; }
.selectprobtypewidth, .testcompletesubhead, .body, .footer, .sidebardatadiv, .inputcontainer, .logininput, .loginbox, .registerbox, .registerinput { margin-right: auto; }
.footerlinkstyle, .footerlinkstyle:visited, .titletext { text-decoration: none; }
.modehead, .statheadtitle { text-decoration: underline; }
.dropdownphone, .dropdownphone2, .dropdowntablet, .dropdownpc { z-index: 998; }
.sitelogo {
    max-width: 100%;
	width: 150;
    height: 45;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
.headerrow { height: 70px; }
[class*="col-"] {
    width: 100%;
    float: left;
}
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }
input:focus, textarea:focus { outline: none; }
input[type="text"],
input[type="password"] {
    padding: 8px 0 0px 0;
    line-height: 1.2;
}input[type="submit"] {
	background-color: blue;
	color: white;
	border: none;
	font-size: 14px;
	padding: 6px;
	border-radius: 8px;
}
input[type="submit"]:enabled {
	cursor: pointer;
	opacity: 1;
}
input[type="submit"]:disabled {
	cursor: default;
	opacity: .4;
}
.StripeElement {
	background-color: white;
	height: 40px;
	padding: 10px 12px;
	border-radius: 4px;
	border: 1px solid transparent;
	box-shadow: 0 1px 3px 0 #e6ebf1;
	-webkit-transition: box-shadow 150ms ease;
	transition: box-shadow 150ms ease;
}
.StripeElement--focus {
	box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
	border-color: #fa755a;
}
.StripeElement--webkit-autofill {
	background-color: #fefde5 !important;
}
.inputcontainer {
	width: 60%;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-color: lightgrey;
    padding: 8px 0px 2px 20px;
}
.logininput, .registerinput {
	width: 60%;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-color: lightgrey;
    padding: 8px 0px 2px 20px;
}
.registerinput { width: 70%; }
.inputfield {
    width: 85%;
	border: none;
	font-size: 16px;
}
.edituser, .pricecol { padding: 1px 5px 1px; }
.viewstats {
	border-top: none;
	border-right: none;
	border-bottom: 2px solid blue;
	border-left: 2px solid blue;
}
.stattabborder {
	width: 100%;
	height: 40px;
	border-bottom: 2px solid blue;
}
.stattab1 { width: 35%; }
.quickexamples { width: 30%; }
.stattab2 { width: 47%; }
.stattab1, .stattab2 {
	height: 28px;
	padding: 12px 0px 0px 0px;
	border-top: 2px solid blue;
	border-right: 2px solid blue;
}
.stattab1:hover { background-color: #ddd; }
.stattab2:hover { background-color: #ddd; }
.selectprobheader { padding: 12px 0px; }
.probtypeheader, .probtypeintro, .modehead { padding: 8px 0px; }
.probtypeintro, .modehead { color: rgb(130,15,99); }
.profrow { padding: 0px 0px 5px 0px; }
.profsubjectdiv { padding: 0px 0px 10px 0px; }
.subject, .category, .reviewheadtitle, .statheadtitle, .tooltip .tooltiptext { padding: 5px 0px; }
.categories { padding: 0px 0px 0px 20px; }
.testbuttons { padding: 8px 0px 0px 0px; }
.practicebutton { width: 50%; }
.passmessage { padding: 5px; }
.passmessage { padding: 5px; }
.testcompletediv { padding: 5px; }
.testcompletebuttons {
	background-color: blue;
	color: white;
	border: none;
	font-size: 14px;
	padding: 6px;
	border-radius: 8px;
	cursor: pointer;
}
.testcompletehead { padding: 20px 0px 0px 0px; }
.testcompletesubhead {
	width: 80%;
	padding: 0px 0px 0px 10px;
}
.makepayhead, .makepaybody {
	width: 100%;
	padding: 5px 10px;
	text-align: center;
}
.makepayhead1, .makepaybody1 {
	width: 50%;
	padding: 0px 0px 0px 300px;
}
.makepayhead2, .makepaybody2 {
	width: 50%;
	padding: 0px 300px 0px 0px;
}
body {
	margin: 0;
	background-image: url("./images/TileFade60percent.jpg");
}
.body { border: 5px solid blue; }
.bodydiv { padding: 5px; }
.loginfailed, .regfailed { padding: 10px; }
.profsubjectheader, .profsubject { width: 60%; }
.profdataheader, .profdata { width: 40%; }
.modal, .modalexample {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.modal-content, .modalexample-content {
	width: 80%;
	border-radius: 10px;
	box-shadow:  0px 1px 1px 0px rgba(20, 20, 20, 0.4),
		 0px 2px 1px 1px rgba(40, 40, 40, 0.4),
		 0px 3px 1px 1px rgba(60, 60, 60, 0.4),
		 0px 4px 1px 2px rgba(80, 80, 80, 0.4);
}
.modal-content {
    margin: 40% auto;
	height: 200px; 
}
.modalexample-content {
    margin: 10% auto;
	height: auto; 
	padding: 10px;
}
.homewelcome, .forgotpasshead { padding: 20px; }
.login, .register, .addgroup, .questiondisplay { padding: 20px 0px; }
.loginfieldhead, .forgotpasshead, .loginhead, .cchead { color: rgb(28,93,220); }
.optiondisplay, .showsolution { padding: 0px 5px 10px 10px; }
.sidebar { padding: 10px 0px; }
.sidebarhead {
	padding: 2px 12px 0px 0px; 
	width: 25%;
}
.sidebarresultsdiv { width: 85%; }
.sidebarresultssub { width: 60%; }
.sidebarresultsdata { width: 25%; }
.sidebarlinkdiv { padding: 0px 5px 10px 5px; }
.sidebardatadiv { width: 80%; }
.diagram300x300 {
	width: 200px;
	height: 200px;
}
.statheadtitle { color: #0C1575; }
.statsecthead { padding: 5px 5px 5px 0px; }
.footerlinkstyle, .footerlinkstyle:visited { color: white; }
.wrapper {
	border: 5px solid blue;
	min-height: 100%;
	margin: 0 auto -132px;
}
.push { height: 132px; }
.footer {
	height: 60px;
	background-color: blue;
	color: white;
}
.dropbtn {
	height: 28px;
    color: #747474;
	font-family: 'PT Sans';
	border: 3px solid white;
    cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
    color: blue;
	border-style: solid;
    border-color: blue white white;
	border-width: 3px;
}
.dropbtn2:hover, .dropbtn2:focus { background-image: linear-gradient( to top, #5a29b5, #5a29b5 ); }
.dropdownphone, .dropdownphone2 { padding: 2px 7px 0px 0px; }
.dropdowntablet, .dropdownpc { padding: 2px 15px 0px 0px; }
.dropdown-content, .dropdown-content-extra {
    position: absolute;
	min-width: 140px;
    background-color: #edecec;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	top: 30px;
}
.dropdown-content-extra { right: 1px; }
.dropdown-content a, .dropdown-content-extra a {
    color: #747474;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
	font-size: 12px;
}
.dropdown-content a:hover, .dropdown-content-extra a:hover {background-color: #f9f9f9}
.show {
	display: block;
	border-style: solid;
    border-color: blue #edecec #edecec;
	border-width: 3px;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 170px;
    background-color: #f9f9f9;
    color: #333333;
    border-radius: 6px;
    border-width: 2px;
    border-style: solid;
    border-color: #e3e2e3;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
 
    /* Position the tooltip text */
    z-index: 1;
    top: 50%;
    left: 40%; 
    margin-left: 0px;
    opacity: 0;
    transition: opacity 1s;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
textarea {
	width: 240px;
	height: 100px;
}
.loginbox, .registerbox {
	width: 100%;
	border: 5px solid lightgrey; 
	padding: 10px 0px;
}
.ordertable {
	width: 100%;
	border: 2px solid blue;
	padding: 10px;
}
@media screen and (max-width: 349px) and (min-width: 280px) {
	.makepayhead1, .makepaybody1 { padding: 0px 0px 0px 0px; }
	.makepayhead2, .makepaybody2 { padding: 0px 0px 0px 0px; }
}
@media screen and (max-width: 369px) and (min-width: 350px) {
	.practicebutton { width: 30%; }
}
@media screen and (max-width: 474px) and (min-width: 350px) {
	.makepayhead1, .makepaybody1 { padding: 0px 0px 0px 10px; }
	.makepayhead2, .makepaybody2 { padding: 0px 10px 0px 0px; }
}
@media only screen and (min-width: 360px) {
	.stattab1 { width: 30%; }
	.stattab2 { width: 40%; }
}
@media only screen and (min-width: 370px) {
	.practicebutton { width: 35%; }
	.notregisterhead {font-size: 14px; }
}
@media only screen and (min-width: 400px) {
	.practicebutton { width: 40%; }
	.stattab1 { width: 25%; }
	.stattab2 { width: 35%; }
}
@media only screen and (min-width: 420px) {
	.dropdownphone { display: none; }
	.dropdownphone2 { display: inline-block; }
	.probtypecategory, .statsecthead { font-size: 16px; }
	.statsectcoldata1, .statsectcoldata2, .statheadtitle, .reviewheadtitle { font-size: 13px; }
	.notregisterhead, .examplecatname {font-size: 15px; }
	.questiondisplay, .optiondisplay { font-size: 13px; }
	textarea { width: 300px; }
	.loginbox { width: 90%; }
	.logininput { width: 50%; }
}
@media screen and (max-width: 449px) and (min-width: 420px) {
	.bodydiv { padding: 10px; }
	.dropbtn {
		font-size: 14px; 
		height: 32px;
	}
	.dropdown-content, .dropdown-content-extra {
		top: 35px;
		min-width: 145px;
	}
	.profrow { font-size: 16px; }
}
@media screen and (max-width: 474px) and (min-width: 450px) {
	.bodydiv { padding: 12px; }
	.dropbtn {
		font-size: 15px; 
		height: 35px;
	}
	.dropdown-content, .dropdown-content-extra {
		top: 38px;
		min-width: 148px;
	}
	.sitelogo {
		width: 160;
		height: 48;
	}
	.profrow { font-size: 17px; }
	.probtypecategory { font-size: 15px; }
}
@media screen and (max-width: 509px) and (min-width: 475px) {
	.bodydiv { padding: 12px; }
	.dropbtn {
		font-size: 16px; 
		height: 40px;
	}
	.dropdown-content, .dropdown-content-extra {
		top: 42px;
		min-width: 152px;
	}
	.sitelogo {
		width: 170;
		height: 51;
	}
	.selectprobtypewidth { width: 95%; }
	.profrow, .probtypesubject { font-size: 18px; }
}
@media screen and (max-width: 674px) and (min-width: 475px) {
	.makepayhead1, .makepaybody1 { padding: 0px 0px 0px 50px; }
	.makepayhead2, .makepaybody2 { padding: 0px 50px 0px 0px; }
}
@media screen and (max-width: 649px) and (min-width: 500px) {
	.examplecatname {font-size: 16px; }
	.questiondisplay, .optiondisplay { font-size: 14px; }
	.questiondisplay { padding: 20px 6px 12px 12px; }
	.optiondisplay, .showsolution { padding: 0px 0px 10px 22px; }
}
@media only screen and (min-width: 510px) {
	.substatsdiv1, .datestatsdiv1 { display: none; }
	.substatsdiv2, .datestatsdiv2 { display: block; }
	.headerrow { height: 80px; }
	.profrow, .probtypesubject { font-size: 19px; }
	.probtypecategory, .statsecthead { font-size: 17px; }
	.diagram300x300 {
		width: 225px;
		height: 225px;
	}
	.notregisterhead {font-size: 16px; }
	.sidebarhead { font-size: 15px; }
	.sidebardata, .sidebardata1, .sidebardata2 { font-size: 14px; }
	textarea { width: 350px; }
	.loginbox { width: 100%; }
}
@media screen and (max-width: 549px) and (min-width: 510px) {
	.bodydiv { padding: 18px; }
	.dropbtn {
		font-size: 17px; 
		height: 43px;
	}
	.dropdown-content, .dropdown-content-extra {
		top: 45px;
		min-width: 155px;
	}
	.sitelogo {
		width: 180;
		height: 54;
	}
	.selectprobtypewidth { width: 90%; }
}
@media screen and (max-width: 584px) and (min-width: 550px) {
	.bodydiv { padding: 20px; }
	.dropbtn {
		font-size: 18px; 
		height: 46px;
	}
	.dropdown-content, .dropdown-content-extra {
		top: 48px;
		min-width: 158px;
	}
	.sitelogo {
		width: 190;
		height: 57;
	}
	.selectprobtypewidth { width: 86%; }
}
@media screen and (max-width: 729px) and (min-width: 550px) {
	.probtypeintro { font-size: 17px; }
	.modehead, .probtypeheader { font-size: 16px; }
}
@media only screen and (min-width: 585px) {
	.bodydiv { padding: 25px; }
	.dropbtn {
		font-size: 18px; 
		height: 50px;
	}
	.dropdown-content, .dropdown-content-extra {
		top: 52px;
		min-width: 162px;
	}
	.sitelogo {
		width: 200;
		height: 60;
	}
}
@media screen and (max-width: 749px) and (min-width: 585px) {
	.selectprobtypewidth { width: 83%; }
}
@media only screen and (min-width: 600px) {
	.profrow, .probtypesubject { font-size: 20px; }
	.probtypecategory { font-size: 18px; }
	.headerrow { height: 100px; }
	textarea { width: 400px; }
	.stattab1 { width: 23%; }
	.stattab2 { width: 30%; }
	.quickexamples { width: 32%; }
}
@media only screen and (min-width: 650px) {
	.probtypeheader, .probtypeintro, .modehead {
		padding: 12px 0px; 
		text-align: left;
	}
	.statsectcoldata1, .statsectcoldata2, .statheadtitle, .reviewheadtitle { font-size: 14px; }
	.diagram300x300 {
		width: 250px;
		height: 250px;
	}
	.stattab1 { width: 20%; }
	.stattab2 { width: 27%; }
}
@media screen and (max-width: 799px) and (min-width: 650px) {
	.examplecatname { font-size: 17px; }
	.questiondisplay, .optiondisplay { font-size: 15px; }
	.questiondisplay { padding: 20px 7px 14px 20px; }
	.optiondisplay, .showsolution { padding: 0px 0px 10px 34px; }
}
@media screen and (max-width: 949px) and (min-width: 675px) {
	.makepayhead1, .makepaybody1 { padding: 0px 0px 0px 100px; }
	.makepayhead2, .makepaybody2 { padding: 0px 100px 0px 0px; }
}
@media only screen and (min-width: 700px) {
	.stattab1 { width: 18%; }
	.stattab2 { width: 25%; }
	.loginbox, .registerbox { width: 70%; }
}
@media screen and (max-width: 969px) and (min-width: 730px) {
	.probtypeintro { font-size: 18px; }
	.modehead, .probtypeheader { font-size: 17px; }
}
@media screen and (max-width: 899px) and (min-width: 750px) {
	.selectprobtypewidth { width: 74%; }
}
@media only screen and (min-width: 760px) {
	.dropdown-content-extra { right: auto; }
	.sidebarhead { font-size: 16px; }
	.sidebardata, .sidebardata1, .sidebardata2 { font-size: 15px; }
	textarea { width: 500px; }
	.stattab1 { width: 16%; }
	.stattab2 { width: 22%; }
}
@media only screen and (min-width: 770px) {
	.dropdownphone, .dropdownphone2 { display: none; }
	.dropdowntablet, .testselect, .testbuttons { display: inline-block; }
	.dropdown-content, .dropdown-content-extra { min-width: 200px; }
}
@media screen and (max-width: 949px) and (min-width: 800px) {
	.examplecatname {font-size: 18px; }
	.questiondisplay, .optiondisplay { font-size: 16px; }
	.questiondisplay { padding: 20px 8px 15px 28px; }
	.optiondisplay, .showsolution { padding: 0px 0px 11px 46px; }
}
@media only screen and (min-width: 810px) {
	.stattab1 { width: 20%; }
	.stattab2 { width: 25%; }
	.stattab1, .stattab2 { font-size: 13px; } 
	.loginbox, .registerbox { width: 60%; }
	.quickexamples { width: 35%; }
}
@media only screen and (min-width: 900px) {
	.stattab1 { width: 17%; }
	.stattab2 { width: 23%; }
	.stattab1, .stattab2 { font-size: 14px; } 
}
@media screen and (max-width: 1099px) and (min-width: 900px) {
	.selectprobtypewidth { width: 65%; }
}
@media screen and (max-width: 1099px) and (min-width: 950px) {
	.examplecatname {font-size: 19px; }
	.questiondisplay, .optiondisplay { font-size: 17px; }
	.questiondisplay { padding: 20px 9px 16px 35px; }
	.optiondisplay, .showsolution { padding: 0px 0px 11px 58px; }
}
@media screen and (max-width: 1149px) and (min-width: 950px) {
	.makepayhead1, .makepaybody1 { padding: 0px 0px 0px 200px; }
	.makepayhead2, .makepaybody2 { padding: 0px 200px 0px 0px; }
}
@media screen and (min-width: 1030px) {
    .col-1 { width: 8.33%; }
    .col-2 { width: 16.66%; }
    .col-3 { width: 25%; }
    .col-4 { width: 33.33%; }
    .col-5 { width: 41.66%; }
    .col-6 { width: 50%; }
    .col-7 { width: 58.33%; }
    .col-8 { width: 66.66%; }
    .col-9 { width: 75%; }
    .col-10 { width: 83.33%; }
    .col-11 { width: 91.66%; }
    .col-12 { width: 100%; }
	.probtypeintro { font-size: 19px; }
	.probtypeheader, .modehead { font-size: 18px; }
	.sidebardata1 { display: none; }
	.sidebardata2 { display: block; }
	.sidebarsub {
		font-size: 30px;
		padding: 0px 0px 10px 0px;
	}
	.sidebarresultshead { font-size: 16px; }
	.sidebarresultsdiv { width: 60%; }
	.sidebarhead {
		display: block;
		width: 100%;
		font-size: 17px; 
	}
	.sidebardata, .sidebardata1, .sidebardata2 { font-size: 16px; }
	.headerrow { height: 70px; }
	.statheadtitle, .reviewheadtitle { font-size: 15px; }
	.diagram300x300 {
		width: 275px;
		height: 275px;
	}
	.stattab1 { width: 15%; }
	.stattab2 { width: 20%; }
	.stattab1, .stattab2 { font-size: 14px; }
	.loginbox { width: 40%; }
}
@media only screen and (min-width: 1100px) {
	.selectprobtypewidth { width: 60%; }
	.stattab1 { width: 13%; }
	.stattab2 { width: 18%; }
	.registerbox { width: 50%; }
}
@media screen and (max-width: 1229px) and (min-width: 1100px) {
	.examplecatname { font-size: 20px; }
	.questiondisplay, .optiondisplay { font-size: 18px; }
	.questiondisplay { padding: 20px 10px 18px 42px; }
	.optiondisplay, .showsolution { padding: 0px 0px 12px 70px; }
}
@media screen and (min-width: 1150px) {
	.stattab1 { width: 12%; }
	.stattab2 { width: 17%; }
}
@media only screen and (min-width: 1350px) {
	.bodydiv { padding: 25px; }
	.body { width: 80%; }
	.dropdownphone, .dropdownphone2, .dropdowntablet { display: none; }
	.dropdownpc { display: inline-block; }
	.dropbtn2 {
		display: block;
		background: #003bff;
		background: -webkit-linear-gradient(#003bff,#5a29b5);
		background: -o-linear-gradient(#003bff,#5a29b5);
		background: -moz-linear-gradient(#003bff,#5a29b5);
		background: linear-gradient(#003bff,#5a29b5);
		color: #edecec;
		font-family: 'Helvetica';
		font-size: 14px;
		font-weight: 700;
		padding: 12px 16px;
		border: none;
		cursor: pointer;
	}
	.dropbtn { height: 88px; }
	.dropdown-content, .dropdown-content-extra { top: 90px; }
	.modal-content {
		margin: 15% auto;
		width: 30%;
		height: 100px;
	}
	.titlebox { text-align: left; }
	.titletext {
		padding: 5px;
		font-size: 30px;
	}
	.footertext { font-size: 12px; }
	.examplecatname {font-size: 24px; }
	.questiondisplay, .optiondisplay, probtypeintro { font-size: 20px; }
	.questiondisplay { padding: 20px 10px 20px 50px; }
	.optiondisplay, .showsolution { padding: 0px 0px 12px 80px; }
	.sidebarhead { font-size: 18px; }
	.sidebardata, .sidebardata1, .sidebardata2 { font-size: 17px; }
	.selectprobheader { padding: 0px; }
	.category, .subject { padding: 8px 0px; }
	.profsubjectheader, .profdataheader, .profsubject, .profdata { width: 50%; }
	.profrow { padding: 0px 0px 10px 0px; }
	.testcompletesubhead {
		width: 20%;
		padding: 0px 0px 0px 20px;
	}
	.statheadtitle, .reviewheadtitle { padding: 0px 0px 15px 0px; }
	.statsecthead {
		font-size: 18px;
		padding: 5px 5px 5px 0px;
	}
	.statsectcolhead1, .statsectcolhead2, .statheadtitle, .reviewheadtitle { font-size: 16px; }
	.diagram300x300 {
		width: 300px;
		height: 300px;
	}
}

/* Professional header and login page refresh */
:root {
	--site-primary: #1743b7;
	--site-primary-dark: #102f82;
	--site-accent: #6438c7;
	--site-text: #17213a;
	--site-muted: #66718a;
	--site-line: #e3e8f1;
	--site-surface: #ffffff;
	--site-background: #f2f5fa;
}

html {
	font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background: var(--site-background);
}

body {
	min-height: 100vh;
	color: var(--site-text);
	background-color: var(--site-background);
	background-image:
		linear-gradient(rgba(245, 247, 252, .88), rgba(245, 247, 252, .88)),
		url("./images/TileFade60percent.jpg");
}

.body {
	display: flex;
	flex-direction: column;
	width: calc(100% - 48px);
	max-width: 1440px;
	min-height: calc(100vh - 48px);
	margin: 24px auto;
	border: 0;
	border-top: 4px solid var(--site-primary);
	border-radius: 14px;
	background: var(--site-surface);
	box-shadow: 0 18px 55px rgba(24, 39, 75, .13);
}

.headerrow {
	position: relative;
	z-index: 50;
	display: flex;
	align-items: center;
	width: 100%;
	height: auto !important;
	min-height: 92px;
	padding: 12px clamp(22px, 3vw, 44px);
	border-bottom: 1px solid var(--site-line);
	border-radius: 10px 10px 0 0;
	background: rgba(255, 255, 255, .98);
}

.brand-column {
	display: flex;
	flex: 0 0 300px;
	align-items: center;
}

.titlebox {
	width: 100%;
	text-align: left;
}

.titlebox a {
	display: inline-flex;
	align-items: center;
}

.sitelogo {
	display: block;
	width: 260px;
	height: auto;
	max-width: 100%;
	max-height: 64px;
	object-fit: contain;
}

.nav-column {
	min-width: 0;
	flex: 1 1 auto;
}

.site-nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}

.dropdownphone,
.dropdownphone2,
.dropdowntablet,
.dropdownpc {
	position: relative;
	z-index: auto;
	padding: 0 3px;
	vertical-align: middle;
}

.dropbtn,
a.dropbtn,
.dropbtn2 {
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: auto !important;
	min-height: 42px;
	margin: 0;
	padding: 10px 13px;
	border: 1px solid transparent !important;
	border-radius: 9px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.dropbtn,
a.dropbtn {
	display: flex;
	color: #3f4b64;
	background: transparent !important;
}

.dropbtn:hover,
.dropbtn:focus,
a.dropbtn:hover,
a.dropbtn:focus {
	color: var(--site-primary);
	border-color: #dbe4fb !important;
	background: #f4f7ff !important;
	outline: none;
}

.dropbtn2 {
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), var(--site-accent)) !important;
	box-shadow: 0 7px 18px rgba(50, 54, 177, .22);
}

.dropbtn2:hover,
.dropbtn2:focus {
	background: linear-gradient(135deg, #123897, #542ab5) !important;
	box-shadow: 0 9px 22px rgba(50, 54, 177, .3);
	transform: translateY(-1px);
	outline: none;
}

.menuarrow {
	font-size: 13px;
	transition: transform .18s ease;
}

button[aria-expanded="true"] .menuarrow {
	transform: rotate(180deg);
}

.dropdown-content,
.dropdown-content-extra {
	position: absolute;
	top: calc(100% - 1px) !important;
	left: 50%;
	min-width: 220px;
	padding: 8px;
	border: 1px solid var(--site-line);
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 16px 38px rgba(22, 34, 68, .16);
	transform: translateX(-50%);
}

.dropdown-content-extra,
.account-menu .dropdown-content {
	right: 0;
	left: auto;
	transform: none;
}

.dropdown-content a,
.dropdown-content-extra a {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	color: #39445d;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
}

.dropdown-content a:hover,
.dropdown-content a:focus,
.dropdown-content-extra a:hover,
.dropdown-content-extra a:focus {
	color: var(--site-primary);
	background: #f2f5fc;
	outline: none;
}

.dropdown-content.show,
.dropdown-content-extra.show {
	display: block;
	border: 1px solid var(--site-line);
}

.tooltip {
	display: block;
	position: relative;
	height: auto !important;
}

.tooltip .tooltiptext {
	display: none !important;
}

.bodydiv {
	flex: 1 0 auto;
	padding: clamp(24px, 2.5vw, 36px);
	background: #fbfcfe;
}

.page-login .bodydiv {
	display: flex;
	align-items: center;
	padding: clamp(32px, 4vw, 60px);
	background:
		radial-gradient(circle at 12% 18%, rgba(60, 104, 221, .1), transparent 30%),
		radial-gradient(circle at 88% 82%, rgba(111, 58, 199, .09), transparent 32%),
		#f8faff;
}

.page-login .bodydiv > .row,
.page-login .bodydiv > .row > .col-12,
.page-login .login {
	width: 100%;
	background: transparent;
}

.page-login .login {
	padding: 0;
}

.login-page {
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
}

.login-panel {
	display: grid;
	grid-template-columns: .92fr 1.08fr;
	min-height: 500px;
	overflow: hidden;
	border: 1px solid rgba(216, 223, 236, .9);
	border-radius: 22px;
	background: #ffffff;
	box-shadow: 0 22px 50px rgba(28, 43, 82, .14);
}

.login-welcome {
	position: relative;
	display: flex;
	align-items: center;
	color: #ffffff;
	background:
		radial-gradient(circle at 14% 18%, rgba(255, 255, 255, .18) 0 2px, transparent 3px) 0 0 / 28px 28px,
		linear-gradient(145deg, #133caa 0%, #3153c8 48%, #6338bf 100%);
}

.login-welcome::after {
	position: absolute;
	right: -100px;
	bottom: -130px;
	width: 300px;
	height: 300px;
	border: 50px solid rgba(255, 255, 255, .07);
	border-radius: 50%;
	content: "";
}

.login-welcome-content {
	position: relative;
	z-index: 1;
	padding: 50px clamp(34px, 4vw, 54px);
	text-align: left;
}

.login-eyebrow {
	display: inline-block;
	margin-bottom: 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.login-welcome .login-eyebrow {
	color: #dfe7ff;
}

.login-welcome h1 {
	margin: 0 0 20px;
	font-size: clamp(30px, 3vw, 42px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.025em;
}

.login-welcome p {
	max-width: 390px;
	margin: 0;
	color: rgba(255, 255, 255, .86);
	font-size: 16px;
	line-height: 1.65;
}

.login-benefits {
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.login-benefits li {
	position: relative;
	margin: 14px 0;
	padding-left: 30px;
	font-size: 14px;
	font-weight: 600;
}

.login-benefits li::before {
	position: absolute;
	top: -1px;
	left: 0;
	display: grid;
	width: 20px;
	height: 20px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	content: "\2713";
	font-size: 11px;
}

.login-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px clamp(38px, 5vw, 68px);
	text-align: left;
}

.login-card-header .login-eyebrow {
	margin-bottom: 9px;
	color: var(--site-primary);
}

.login-card-header h2 {
	margin: 0 0 9px;
	color: var(--site-text);
	font-size: clamp(26px, 2.4vw, 34px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
}

.login-card-header p {
	margin: 0;
	color: var(--site-muted);
	font-size: 14px;
}

.login-message {
	min-height: 38px;
	margin: 22px 0 18px;
	padding: 10px 12px;
	border: 1px solid #dbe5fb;
	border-radius: 9px;
	color: #315293;
	background: #f4f7fe;
	font-size: 13px;
	line-height: 1.3;
	text-align: left;
}

.login-message-error {
	border-color: #f1c8ce;
	color: #a72f40;
	background: #fff5f6;
}

.login-form-group {
	margin-bottom: 19px;
}

.login-form-group label,
.login-label-row label {
	display: block;
	margin-bottom: 8px;
	color: #2b3650;
	font-size: 13px;
	font-weight: 700;
}

.login-label-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.login-label-row a,
.login-recovery-link {
	color: var(--site-primary);
	font-size: 12px;
	font-weight: 600;
}

.login-control {
	display: flex;
	align-items: center;
	width: 100%;
	height: 50px;
	padding: 0 13px;
	border: 1px solid #ccd4e2;
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(22, 34, 68, .03);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.login-control:focus-within {
	border-color: #6c83d5;
	box-shadow: 0 0 0 4px rgba(23, 67, 183, .1);
}

.login-control-icon {
	width: 18px;
	color: #8a95aa;
	font-size: 14px;
	text-align: center;
}

.login-control input[type="text"],
.login-control input[type="password"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0 10px;
	border: 0;
	color: var(--site-text);
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	line-height: normal;
	outline: none;
}

.password-toggle {
	display: inline-grid;
	width: 34px;
	height: 34px;
	padding: 0;
	place-items: center;
	border: 0;
	border-radius: 7px;
	color: #79859d;
	background: transparent;
	cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus {
	color: var(--site-primary);
	background: #eef3ff;
	outline: none;
}

.login-submit {
	width: 100%;
	min-height: 48px;
	margin-top: 3px;
	padding: 12px 18px;
	border: 0;
	border-radius: 10px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), #3755c9);
	box-shadow: 0 9px 20px rgba(23, 67, 183, .22);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.login-submit:hover,
.login-submit:focus {
	background: linear-gradient(135deg, #123791, #2d48ae);
	box-shadow: 0 11px 24px rgba(23, 67, 183, .28);
	transform: translateY(-1px);
	outline: none;
}

.login-register {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin-top: 23px;
	padding-top: 20px;
	border-top: 1px solid var(--site-line);
	color: var(--site-muted);
	font-size: 13px;
}

.login-register a {
	color: var(--site-primary);
	font-weight: 700;
}

.login-recovery-link {
	display: block;
	margin-top: 12px;
	text-align: center;
}

.login-form a:hover,
.login-register a:hover,
.login-recovery-link:hover {
	text-decoration: underline;
}

.footer {
	width: 100%;
	height: auto;
	min-height: 78px;
	margin: 0;
	padding: 20px clamp(20px, 4vw, 54px);
	border-radius: 0 0 14px 14px;
	color: rgba(255, 255, 255, .78);
	background: #102b72;
}

.footer-inner {
	font-size: 11px;
	line-height: 1.7;
	text-align: center;
}

.footer a,
.footer a:visited {
	color: #ffffff;
	font-weight: 600;
}

@media only screen and (min-width: 770px) and (max-width: 1349px) {
	.dropdowntablet {
		display: inline-flex;
	}
}

@media only screen and (min-width: 1350px) {
	.body {
		width: calc(100% - 48px);
	}
	.dropdownpc {
		display: inline-flex;
	}
	.dropbtn2 {
		display: flex;
	}
}

@media only screen and (max-width: 1029px) {
	.headerrow {
		flex-direction: column;
		gap: 8px;
		padding-top: 15px;
		padding-bottom: 12px;
	}
	.brand-column {
		flex-basis: auto;
		justify-content: center;
		width: 100%;
	}
	.titlebox {
		text-align: center;
	}
	.sitelogo {
		width: 240px;
	}
	.nav-column,
	.site-nav {
		width: 100%;
	}
	.site-nav {
		justify-content: center;
	}
	.bodydiv {
		padding: 36px 28px;
	}
}

@media only screen and (max-width: 769px) {
	.site-nav {
		flex-wrap: wrap;
		row-gap: 4px;
	}
	.login-panel {
		grid-template-columns: 1fr;
		max-width: 560px;
		margin: 0 auto;
	}
	.login-welcome-content {
		width: 100%;
		padding: 36px 34px;
	}
	.login-welcome h1 {
		font-size: 31px;
	}
	.login-benefits {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 16px;
		margin-top: 23px;
	}
	.login-card {
		padding: 38px 34px 42px;
	}
	.dropdown-content,
	.dropdown-content-extra,
	.account-menu .dropdown-content {
		right: auto;
		left: 0;
		transform: none;
	}
}

@media only screen and (min-width: 770px) and (max-height: 820px) {
	.body {
		min-height: calc(100vh - 24px);
		margin-top: 12px;
		margin-bottom: 12px;
	}
	.headerrow {
		min-height: 80px;
		padding-top: 8px;
		padding-bottom: 8px;
	}
	.page-login .bodydiv {
		padding-top: 24px;
		padding-bottom: 24px;
	}
	.login-panel {
		min-height: 450px;
	}
	.login-welcome-content,
	.login-card {
		padding-top: 34px;
		padding-bottom: 34px;
	}
	.footer {
		min-height: 64px;
		padding-top: 13px;
		padding-bottom: 13px;
	}
}

@media only screen and (max-width: 640px) {
	.body {
		width: 100%;
		min-height: 100vh;
		margin: 0;
		border-radius: 0;
	}
	.headerrow {
		border-radius: 0;
	}
	.bodydiv {
		padding: 26px 18px;
	}
	.footer {
		border-radius: 0;
	}
}

@media only screen and (max-width: 519px) {
	.headerrow {
		gap: 5px;
		padding-right: 10px;
		padding-left: 10px;
	}
	.sitelogo {
		width: 218px;
	}
	.dropdownphone,
	.dropdownphone2,
	.dropdowntablet,
	.dropdownpc {
		padding: 0 1px;
	}
	.dropbtn,
	a.dropbtn,
	.dropbtn2 {
		min-height: 38px;
		padding: 8px 7px;
		font-size: 12px;
	}
	.menuarrow {
		font-size: 11px;
	}
	.login-welcome-content {
		padding: 31px 24px;
	}
	.login-welcome h1 {
		font-size: 28px;
	}
	.login-welcome p {
		font-size: 14px;
	}
	.login-benefits {
		display: block;
	}
	.login-card {
		padding: 34px 24px 38px;
	}
	.login-register {
		flex-direction: column;
	}
}

/* Password recovery page */
.page-forgotpass .bodydiv {
	display: flex;
	align-items: center;
	padding: clamp(38px, 5vw, 72px);
	background:
		radial-gradient(circle at 13% 20%, rgba(60, 104, 221, .09), transparent 30%),
		radial-gradient(circle at 87% 80%, rgba(111, 58, 199, .08), transparent 32%),
		#f8faff;
}

.page-forgotpass .bodydiv > .row,
.page-forgotpass .bodydiv > .row > .col-12,
.page-forgotpass .forgotpass {
	width: 100%;
	background: transparent;
}

.recovery-page {
	width: 100%;
	max-width: 590px;
	margin: 0 auto;
}

.recovery-card {
	padding: clamp(38px, 5vw, 58px);
	border: 1px solid rgba(216, 223, 236, .95);
	border-radius: 22px;
	background: #ffffff;
	box-shadow: 0 22px 50px rgba(28, 43, 82, .14);
	text-align: left;
}

.recovery-icon {
	display: grid;
	width: 58px;
	height: 58px;
	margin-bottom: 24px;
	place-items: center;
	border-radius: 17px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
	box-shadow: 0 10px 24px rgba(50, 54, 177, .24);
	font-size: 23px;
}

.recovery-icon-success {
	background: linear-gradient(135deg, #16845f, #25a872);
	box-shadow: 0 10px 24px rgba(22, 132, 95, .22);
}

.recovery-eyebrow {
	display: block;
	margin-bottom: 9px;
	color: var(--site-primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.recovery-card h1 {
	margin: 0 0 12px;
	color: var(--site-text);
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.025em;
}

.recovery-intro,
.recovery-help {
	margin: 0;
	color: var(--site-muted);
	font-size: 15px;
	line-height: 1.65;
}

.recovery-form {
	margin-top: 30px;
}

.recovery-form-group {
	margin-bottom: 20px;
}

.recovery-form-group label {
	display: block;
	margin-bottom: 8px;
	color: #2b3650;
	font-size: 13px;
	font-weight: 700;
}

.recovery-control {
	display: flex;
	align-items: center;
	width: 100%;
	height: 52px;
	padding: 0 14px;
	border: 1px solid #ccd4e2;
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(22, 34, 68, .03);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.recovery-control:focus-within {
	border-color: #6c83d5;
	box-shadow: 0 0 0 4px rgba(23, 67, 183, .1);
}

.recovery-control-icon {
	width: 18px;
	color: #8a95aa;
	font-size: 14px;
	text-align: center;
}

.recovery-control input[type="email"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0 10px;
	border: 0;
	color: var(--site-text);
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	line-height: normal;
	outline: none;
}

.recovery-submit,
.recovery-return {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 50px;
	padding: 12px 18px;
	border: 0;
	border-radius: 10px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), #3755c9);
	box-shadow: 0 9px 20px rgba(23, 67, 183, .22);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.recovery-submit:hover,
.recovery-submit:focus,
.recovery-return:hover,
.recovery-return:focus {
	color: #ffffff;
	background: linear-gradient(135deg, #123791, #2d48ae);
	box-shadow: 0 11px 24px rgba(23, 67, 183, .28);
	transform: translateY(-1px);
	outline: none;
}

.recovery-footer-link {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid var(--site-line);
	color: var(--site-muted);
	font-size: 13px;
	text-align: center;
}

.recovery-footer-link a {
	color: var(--site-primary);
	font-weight: 700;
}

.recovery-footer-link a:hover {
	text-decoration: underline;
}

.recovery-message {
	margin: 24px 0;
	padding: 13px 14px;
	border: 1px solid;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.5;
}

.recovery-message-error {
	border-color: #f1c8ce;
	color: #a72f40;
	background: #fff5f6;
}

.recovery-message-success {
	border-color: #bfe4d5;
	color: #176f52;
	background: #f0faf6;
}

.recovery-message .messagestyle,
.recovery-message .messagestyle2 {
	color: inherit;
}

.recovery-help {
	margin-bottom: 25px;
	font-size: 13px;
}

@media only screen and (min-width: 770px) and (max-height: 820px) {
	.page-forgotpass .bodydiv {
		padding-top: 28px;
		padding-bottom: 28px;
	}
	.recovery-card {
		padding-top: 38px;
		padding-bottom: 38px;
	}
}

@media only screen and (max-width: 640px) {
	.page-forgotpass .bodydiv {
		padding: 28px 18px;
	}
	.recovery-card {
		padding: 34px 24px 38px;
		border-radius: 18px;
	}
	.recovery-icon {
		width: 52px;
		height: 52px;
		margin-bottom: 21px;
		font-size: 20px;
	}
	.recovery-card h1 {
		font-size: 28px;
	}
}

/* Registration page */
.page-register .bodydiv {
	padding: clamp(38px, 5vw, 72px);
	background:
		radial-gradient(circle at 12% 15%, rgba(60, 104, 221, .09), transparent 28%),
		radial-gradient(circle at 88% 86%, rgba(111, 58, 199, .08), transparent 30%),
		#f8faff;
}

.page-register .bodydiv > .row,
.page-register .bodydiv > .row > .col-12,
.page-register .register {
	width: 100%;
	background: transparent;
}

.registration-page {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}

.registration-recommendation {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	padding: 13px 16px;
	border: 1px solid #cddaf8;
	border-radius: 11px;
	color: #315293;
	background: #f1f5fe;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
}

.registration-card {
	overflow: hidden;
	border: 1px solid rgba(216, 223, 236, .95);
	border-radius: 22px;
	background: #ffffff;
	box-shadow: 0 22px 50px rgba(28, 43, 82, .14);
	text-align: left;
}

.registration-header {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: clamp(34px, 5vw, 52px) clamp(30px, 6vw, 64px);
	color: #ffffff;
	background:
		radial-gradient(circle at 90% 20%, rgba(255, 255, 255, .14) 0 2px, transparent 3px) 0 0 / 28px 28px,
		linear-gradient(135deg, #133caa 0%, #3153c8 55%, #6338bf 100%);
}

.registration-icon {
	display: grid;
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 18px;
	color: #ffffff;
	background: rgba(255, 255, 255, .13);
	box-shadow: 0 10px 24px rgba(16, 37, 113, .2);
	font-size: 25px;
}

.registration-eyebrow {
	display: block;
	margin-bottom: 8px;
	color: #dfe7ff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.registration-header h1,
.registration-unavailable h1 {
	margin: 0 0 9px;
	font-size: clamp(30px, 3.4vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.025em;
}

.registration-header p {
	margin: 0;
	color: rgba(255, 255, 255, .84);
	font-size: 15px;
	line-height: 1.55;
}

.registration-form {
	padding: 0 clamp(30px, 6vw, 64px) clamp(40px, 5vw, 58px);
}

.registration-section {
	padding: 38px 0;
	border-bottom: 1px solid var(--site-line);
}

.registration-section-heading {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 25px;
}

.registration-step {
	display: grid;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	place-items: center;
	border-radius: 9px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
	box-shadow: 0 5px 12px rgba(50, 54, 177, .2);
	font-size: 13px;
	font-weight: 700;
}

.registration-section-heading h2 {
	margin: 1px 0 4px;
	color: var(--site-text);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.registration-section-heading p {
	margin: 0;
	color: var(--site-muted);
	font-size: 13px;
	line-height: 1.5;
}

.registration-required {
	color: #c6364b;
}

.registration-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 24px;
}

.registration-field-full {
	grid-column: 1 / -1;
}

.registration-field label {
	display: block;
	margin-bottom: 8px;
	color: #2b3650;
	font-size: 13px;
	font-weight: 700;
}

.registration-optional {
	margin-left: 5px;
	color: #8993a7;
	font-size: 11px;
	font-weight: 500;
}

.registration-control {
	display: flex;
	align-items: center;
	width: 100%;
	height: 52px;
	padding: 0 13px;
	border: 1px solid #ccd4e2;
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(22, 34, 68, .03);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.registration-control:focus-within {
	border-color: #6c83d5;
	box-shadow: 0 0 0 4px rgba(23, 67, 183, .1);
}

.registration-control-icon {
	width: 18px;
	color: #8a95aa;
	font-size: 14px;
	text-align: center;
}

.registration-control input[type="text"],
.registration-control input[type="email"],
.registration-control input[type="password"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0 10px;
	border: 0;
	color: var(--site-text);
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	line-height: normal;
	outline: none;
}

.registration-password-toggle {
	display: inline-grid;
	width: 34px;
	height: 34px;
	padding: 0;
	place-items: center;
	border: 0;
	border-radius: 7px;
	color: #79859d;
	background: transparent;
	cursor: pointer;
}

.registration-password-toggle:hover,
.registration-password-toggle:focus {
	color: var(--site-primary);
	background: #eef3ff;
	outline: none;
}

.registration-feedback {
	margin-top: 7px;
	font-size: 11px;
	line-height: 1.45;
}

.registration-feedback:empty {
	display: none;
}

.registration-feedback-error {
	color: #b22f43;
}

.registration-feedback .messagestyle,
.registration-feedback .messagestyle2,
.registration-password-help .messagestyle {
	color: inherit;
}

.registration-password-help:not(.registration-feedback-error) {
	color: #6f7a90;
}

.registration-plan-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
	gap: 14px;
}

.registration-plan-option {
	position: relative;
	display: block;
	cursor: pointer;
}

.registration-plan-option > input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.registration-plan-content {
	position: relative;
	display: flex;
	min-height: 118px;
	padding: 20px 18px;
	flex-direction: column;
	justify-content: center;
	border: 1px solid #d8deea;
	border-radius: 13px;
	background: #ffffff;
	box-shadow: 0 3px 10px rgba(22, 34, 68, .04);
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.registration-plan-check {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	width: 22px;
	height: 22px;
	place-items: center;
	border: 1px solid #cfd6e4;
	border-radius: 50%;
	color: transparent;
	background: #ffffff;
	font-size: 10px;
}

.registration-plan-name {
	padding-right: 28px;
	color: #323d56;
	font-size: 14px;
	font-weight: 700;
}

.registration-plan-price {
	margin-top: 10px;
	color: var(--site-primary);
	font-size: 24px;
	font-weight: 700;
}

.registration-plan-option:hover .registration-plan-content {
	border-color: #aebde3;
	box-shadow: 0 7px 18px rgba(22, 34, 68, .08);
	transform: translateY(-1px);
}

.registration-plan-option > input:checked + .registration-plan-content {
	border-color: var(--site-primary);
	background: #f4f7ff;
	box-shadow: 0 0 0 3px rgba(23, 67, 183, .09);
}

.registration-plan-option > input:checked + .registration-plan-content .registration-plan-check {
	border-color: var(--site-primary);
	color: #ffffff;
	background: var(--site-primary);
}

.registration-plan-option > input:focus + .registration-plan-content {
	box-shadow: 0 0 0 4px rgba(23, 67, 183, .12);
}

.registration-group-section .registration-field {
	max-width: 480px;
}

.registration-agreement {
	padding: 30px 0 25px;
}

.registration-terms {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: #4e5a72;
	font-size: 13px;
	line-height: 1.6;
	cursor: pointer;
}

.registration-terms > input {
	position: absolute;
	opacity: 0;
}

.registration-checkbox {
	display: grid;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	place-items: center;
	border: 1px solid #bcc6d8;
	border-radius: 6px;
	color: transparent;
	background: #ffffff;
	font-size: 11px;
	transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}

.registration-terms > input:checked + .registration-checkbox {
	border-color: var(--site-primary);
	color: #ffffff;
	background: var(--site-primary);
}

.registration-terms > input:focus + .registration-checkbox {
	box-shadow: 0 0 0 4px rgba(23, 67, 183, .12);
}

.registration-terms a,
.registration-not-now-note a,
.registration-signin a {
	color: var(--site-primary);
	font-weight: 700;
}

.registration-terms a:hover,
.registration-not-now-note a:hover,
.registration-signin a:hover {
	text-decoration: underline;
}

.registration-actions {
	display: flex;
	gap: 12px;
}

.registration-submit,
.registration-secondary,
.registration-return {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 50px;
	padding: 12px 22px;
	border-radius: 10px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.registration-submit,
.registration-return {
	flex: 1 1 auto;
	border: 0;
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), #3755c9);
	box-shadow: 0 9px 20px rgba(23, 67, 183, .22);
}

.registration-submit:hover:not(:disabled),
.registration-submit:focus:not(:disabled),
.registration-return:hover,
.registration-return:focus {
	color: #ffffff;
	background: linear-gradient(135deg, #123791, #2d48ae);
	box-shadow: 0 11px 24px rgba(23, 67, 183, .28);
	transform: translateY(-1px);
	outline: none;
}

.registration-submit:disabled {
	box-shadow: none;
	cursor: not-allowed;
	opacity: .45;
}

.registration-secondary {
	flex: 0 0 auto;
	border: 1px solid #ccd4e2;
	color: #44516a;
	background: #ffffff;
}

.registration-secondary:hover,
.registration-secondary:focus {
	border-color: #aeb9cc;
	background: #f5f7fb;
	outline: none;
}

.registration-not-now-note {
	margin: 14px 0 0;
	color: #788399;
	font-size: 11px;
	line-height: 1.5;
	text-align: center;
}

.registration-signin {
	padding: 22px 30px;
	border-top: 1px solid var(--site-line);
	color: var(--site-muted);
	background: #fafbfe;
	font-size: 13px;
	text-align: center;
}

.registration-unavailable {
	max-width: 590px;
	margin: 0 auto;
	padding: clamp(38px, 5vw, 58px);
}

.registration-unavailable .registration-icon {
	margin-bottom: 24px;
	background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
}

.registration-unavailable .registration-eyebrow {
	color: var(--site-primary);
}

.registration-unavailable h1 {
	color: var(--site-text);
}

.registration-unavailable p {
	margin: 0 0 24px;
	color: var(--site-muted);
}

.registration-return {
	width: 100%;
}

@media only screen and (max-width: 760px) {
	.page-register .bodydiv {
		padding: 30px 20px;
	}
	.registration-header {
		align-items: flex-start;
		padding: 34px 28px;
	}
	.registration-form {
		padding-right: 28px;
		padding-left: 28px;
	}
	.registration-grid {
		grid-template-columns: 1fr;
	}
	.registration-field-full {
		grid-column: auto;
	}
}

@media only screen and (max-width: 520px) {
	.page-register .bodydiv {
		padding: 24px 14px;
	}
	.registration-card {
		border-radius: 18px;
	}
	.registration-header {
		gap: 15px;
		padding: 29px 21px;
	}
	.registration-icon {
		width: 52px;
		height: 52px;
		border-radius: 15px;
		font-size: 20px;
	}
	.registration-header h1 {
		font-size: 29px;
	}
	.registration-header p {
		font-size: 13px;
	}
	.registration-form {
		padding-right: 21px;
		padding-bottom: 36px;
		padding-left: 21px;
	}
	.registration-section {
		padding: 31px 0;
	}
	.registration-section-heading h2 {
		font-size: 18px;
	}
	.registration-plan-grid {
		grid-template-columns: 1fr;
	}
	.registration-plan-content {
		min-height: 102px;
	}
	.registration-actions {
		flex-direction: column;
	}
	.registration-secondary {
		width: 100%;
	}
	.registration-signin {
		padding-right: 20px;
		padding-left: 20px;
	}
}

/* Order review and card checkout */
.page-entercard .bodydiv {
	display: flex;
	align-items: center;
	padding: clamp(38px, 5vw, 72px);
	background:
		radial-gradient(circle at 12% 18%, rgba(60, 104, 221, .09), transparent 30%),
		radial-gradient(circle at 88% 82%, rgba(111, 58, 199, .08), transparent 32%),
		#f8faff;
}

.page-entercard .bodydiv > .row,
.page-entercard .bodydiv > .row > .col-12,
.page-entercard .entercard {
	width: 100%;
	background: transparent;
}

.checkout-page {
	width: 100%;
	max-width: 1020px;
	margin: 0 auto;
}

.checkout-card {
	overflow: hidden;
	border: 1px solid rgba(216, 223, 236, .95);
	border-radius: 22px;
	background: #ffffff;
	box-shadow: 0 22px 50px rgba(28, 43, 82, .14);
	text-align: left;
}

.checkout-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding: 32px clamp(28px, 4vw, 48px);
	border-bottom: 1px solid var(--site-line);
	background: #ffffff;
}

.checkout-heading {
	display: flex;
	align-items: center;
	gap: 18px;
}

.checkout-icon {
	display: grid;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	place-items: center;
	border-radius: 16px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
	box-shadow: 0 9px 22px rgba(50, 54, 177, .24);
	font-size: 22px;
}

.checkout-eyebrow,
.checkout-section-eyebrow {
	display: block;
	margin-bottom: 6px;
	color: var(--site-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.checkout-heading h1 {
	margin: 0 0 5px;
	color: var(--site-text);
	font-size: clamp(27px, 3vw, 34px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.025em;
}

.checkout-heading p {
	margin: 0;
	color: var(--site-muted);
	font-size: 13px;
	line-height: 1.5;
}

.checkout-progress {
	display: flex;
	align-items: center;
	gap: 9px;
	color: #8a95aa;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.checkout-progress-complete {
	color: #22805f;
}

.checkout-progress-complete i {
	margin-right: 4px;
}

.checkout-progress-current {
	padding: 7px 10px;
	border-radius: 8px;
	color: var(--site-primary);
	background: #eef3ff;
}

.checkout-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 22px 28px 0;
	padding: 13px 15px;
	border: 1px solid #f1c8ce;
	border-radius: 10px;
	color: #a72f40;
	background: #fff5f6;
	font-size: 13px;
	line-height: 1.5;
}

.checkout-alert .messagestyle,
.checkout-alert .messagestyle2 {
	color: inherit;
}

.checkout-grid {
	display: grid;
	grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
}

.checkout-summary {
	padding: 36px clamp(26px, 4vw, 42px) 40px;
	border-right: 1px solid var(--site-line);
	background: #f7f9fd;
}

.checkout-summary-heading,
.checkout-payment-heading {
	margin-bottom: 23px;
}

.checkout-summary-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
}

.checkout-summary h2,
.checkout-payment h2 {
	margin: 0;
	color: var(--site-text);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
}

.checkout-edit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 10px;
	border: 1px solid #d5deef;
	border-radius: 8px;
	color: var(--site-primary);
	background: #ffffff;
	font-size: 12px;
	font-weight: 700;
}

.checkout-edit:hover,
.checkout-edit:focus {
	border-color: #b9c7e5;
	background: #f2f5fc;
	outline: none;
}

.checkout-customer-details {
	display: grid;
	gap: 12px;
}

.checkout-detail-row {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	padding: 12px 13px;
	border: 1px solid #e0e5ee;
	border-radius: 10px;
	background: #ffffff;
}

.checkout-detail-icon {
	display: grid;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	place-items: center;
	border-radius: 8px;
	color: var(--site-primary);
	background: #eef3ff;
	font-size: 12px;
}

.checkout-detail-row > div {
	min-width: 0;
}

.checkout-detail-row span {
	display: block;
	margin-bottom: 2px;
	color: #7c879c;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
}

.checkout-detail-row strong {
	display: block;
	overflow: hidden;
	color: #313c55;
	font-size: 13px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.checkout-order {
	margin-top: 34px;
	padding-top: 30px;
	border-top: 1px solid #dfe4ed;
}

.checkout-order h2 {
	margin-bottom: 18px;
}

.checkout-order-lines {
	overflow: hidden;
	border: 1px solid #dfe4ed;
	border-radius: 11px;
	background: #ffffff;
}

.checkout-order-line {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 11px 14px;
	color: #657087;
	font-size: 13px;
	line-height: 1.45;
}

.checkout-order-line strong {
	flex: 0 0 auto;
	color: #313c55;
	font-weight: 700;
}

.checkout-product {
	padding-top: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #e5e9f0;
	color: #323d56;
}

.checkout-total {
	align-items: center;
	margin-top: 3px;
	padding-top: 15px;
	padding-bottom: 15px;
	border-top: 1px solid #e5e9f0;
	color: var(--site-text);
	background: #f3f6fc;
	font-weight: 700;
}

.checkout-total strong {
	color: var(--site-primary);
	font-size: 21px;
}

.checkout-payment {
	padding: 36px clamp(28px, 4vw, 46px) 40px;
	background: #ffffff;
}

.checkout-payment-heading p {
	margin: 7px 0 0;
	color: var(--site-muted);
	font-size: 13px;
	line-height: 1.5;
}

.checkout-field {
	margin-bottom: 20px;
}

.checkout-field label {
	display: block;
	margin-bottom: 8px;
	color: #2b3650;
	font-size: 13px;
	font-weight: 700;
}

.checkout-control {
	display: flex;
	align-items: center;
	height: 52px;
	padding: 0 13px;
	border: 1px solid #ccd4e2;
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(22, 34, 68, .03);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.checkout-control:focus-within,
.checkout-stripe-element.StripeElement--focus {
	border-color: #6c83d5;
	box-shadow: 0 0 0 4px rgba(23, 67, 183, .1);
}

.checkout-control-icon {
	width: 18px;
	color: #8a95aa;
	font-size: 14px;
	text-align: center;
}

.checkout-control input[type="text"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0 10px;
	border: 0;
	color: var(--site-text);
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	line-height: normal;
	outline: none;
}

.checkout-stripe-element,
.checkout-stripe-element.StripeElement {
	height: 52px;
	padding: 13px 14px;
	border: 1px solid #ccd4e2;
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(22, 34, 68, .03);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.checkout-stripe-element.StripeElement--invalid {
	border-color: #c84a5d;
}

.checkout-card-errors {
	min-height: 18px;
	margin-top: 7px;
	color: #b22f43;
	font-size: 11px;
	line-height: 1.45;
}

.checkout-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 52px;
	margin-top: 3px;
	padding: 13px 20px;
	border: 0;
	border-radius: 10px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), #3755c9);
	box-shadow: 0 9px 20px rgba(23, 67, 183, .22);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}

.checkout-submit:hover:not(:disabled),
.checkout-submit:focus:not(:disabled) {
	background: linear-gradient(135deg, #123791, #2d48ae);
	box-shadow: 0 11px 24px rgba(23, 67, 183, .28);
	transform: translateY(-1px);
	outline: none;
}

.checkout-submit:disabled {
	cursor: wait;
	opacity: .7;
}

.checkout-submit-processing i {
	animation: checkout-pulse 1s ease-in-out infinite;
}

@keyframes checkout-pulse {
	0%, 100% { opacity: .45; }
	50% { opacity: 1; }
}

.checkout-security {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 16px;
	color: #7d889d;
	font-size: 11px;
	line-height: 1.4;
	text-align: center;
}

.checkout-security i {
	color: #2d8a69;
}

@media only screen and (max-width: 860px) {
	.checkout-header {
		align-items: flex-start;
	}
	.checkout-progress {
		padding-top: 7px;
	}
	.checkout-grid {
		grid-template-columns: 1fr;
	}
	.checkout-summary {
		border-right: 0;
		border-bottom: 1px solid var(--site-line);
	}
}

@media only screen and (max-width: 640px) {
	.page-entercard .bodydiv {
		padding: 28px 16px;
	}
	.checkout-card {
		border-radius: 18px;
	}
	.checkout-header {
		flex-direction: column;
		gap: 20px;
		padding: 28px 22px;
	}
	.checkout-progress {
		padding-top: 0;
	}
	.checkout-icon {
		width: 50px;
		height: 50px;
		font-size: 19px;
	}
	.checkout-heading {
		align-items: flex-start;
		gap: 14px;
	}
	.checkout-heading h1 {
		font-size: 28px;
	}
	.checkout-alert {
		margin-right: 18px;
		margin-left: 18px;
	}
	.checkout-summary,
	.checkout-payment {
		padding: 30px 22px 34px;
	}
}

/* Math topics selection page */
.page-getprobtypes .bodydiv {
	padding: clamp(34px, 5vw, 68px) clamp(20px, 5vw, 72px) clamp(52px, 6vw, 82px);
	background:
		radial-gradient(circle at 8% 10%, rgba(45, 84, 199, .08), transparent 25%),
		radial-gradient(circle at 92% 88%, rgba(103, 57, 194, .07), transparent 27%),
		#f7f9fd;
}

.page-getprobtypes .bodydiv > .row,
.page-getprobtypes .bodydiv > .row > .col-12,
.page-getprobtypes .getprobtypes {
	width: 100%;
	background: transparent;
}

.page-getprobtypes .selectprobtypewidth {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	color: var(--site-text);
}

.topics-hero {
	position: relative;
	display: flex;
	align-items: center;
	gap: 22px;
	overflow: hidden;
	margin-bottom: 22px;
	padding: clamp(30px, 4.5vw, 48px) clamp(26px, 5vw, 54px);
	border-radius: 22px;
	color: #ffffff;
	background:
		radial-gradient(circle at 88% 22%, rgba(255, 255, 255, .14) 0 2px, transparent 3px) 0 0 / 28px 28px,
		linear-gradient(135deg, #123ba8 0%, #3154c5 57%, #6338bd 100%);
	box-shadow: 0 18px 42px rgba(24, 46, 112, .18);
}

.topics-hero::after {
	position: absolute;
	right: -76px;
	bottom: -110px;
	width: 280px;
	height: 280px;
	border: 42px solid rgba(255, 255, 255, .06);
	border-radius: 50%;
	content: "";
}

.topics-hero-icon {
	position: relative;
	z-index: 1;
	display: grid;
	flex: 0 0 auto;
	width: 66px;
	height: 66px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 18px;
	background: rgba(255, 255, 255, .13);
	box-shadow: 0 10px 24px rgba(15, 37, 111, .2);
	font-size: 25px;
}

.topics-hero > div:last-child {
	position: relative;
	z-index: 1;
}

.topics-eyebrow {
	margin-bottom: 7px;
	color: #dce6ff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.topics-hero .mathtopicsheader {
	margin: 0 0 8px;
	color: #ffffff;
	font-size: clamp(30px, 3.5vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.025em;
	text-align: left;
}

.topics-hero .probtypeintro {
	max-width: 720px;
	margin: 0;
	padding: 0;
	color: rgba(255, 255, 255, .86);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.55;
	text-align: left;
}

.topics-compat-submit {
	position: absolute !important;
	display: none !important;
}

.topics-panel {
	overflow: hidden;
	margin-top: 22px;
	border: 1px solid rgba(215, 222, 235, .96);
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 12px 32px rgba(27, 43, 82, .09);
	text-align: left;
}

.topics-panel-header {
	padding: 27px 30px 24px;
	border-bottom: 1px solid var(--site-line);
	background: linear-gradient(180deg, #ffffff, #fbfcff);
}

.topics-panel-heading {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.topics-step {
	display: grid;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	place-items: center;
	border-radius: 9px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
	box-shadow: 0 5px 12px rgba(50, 54, 177, .2);
	font-size: 13px;
	font-weight: 700;
}

.topics-panel .modehead {
	margin: 1px 0 4px;
	padding: 0;
	color: var(--site-text);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
}

.topics-panel .probtypeheader {
	margin: 0;
	padding: 0;
	color: var(--site-muted);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
}

.topics-list-labels {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 30px;
	border-bottom: 1px solid #edf0f5;
	color: #748096;
	background: #f8faff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.topics-list-labels .quickexamples {
	width: auto;
	color: #566789;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0;
	text-align: right;
	text-transform: none;
}

.topics-list-labels .quickexamples i {
	margin-right: 4px;
	color: var(--site-primary);
}

.topics-subject-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 14px;
	padding: 24px 30px 28px;
}

.topics-subject-column {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 14px;
}

.topics-subject-list .subject {
	overflow: hidden;
	padding: 0;
	border: 1px solid #dfe4ed;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 3px 10px rgba(22, 34, 68, .035);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.topics-subject-list .subject:hover {
	border-color: #bcc8e3;
	box-shadow: 0 7px 18px rgba(22, 34, 68, .07);
	transform: translateY(-1px);
}

.subject-heading {
	display: flex;
	align-items: stretch;
	min-height: 62px;
}

.subject-select {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	gap: 12px;
	min-width: 0;
	min-height: 62px;
	padding: 14px 8px 14px 16px;
	cursor: pointer;
}

.subject-select .topic-checkbox {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.topic-checkmark {
	display: grid;
	flex: 0 0 auto;
	width: 23px;
	height: 23px;
	place-items: center;
	border: 1px solid #b8c3d6;
	border-radius: 7px;
	color: transparent;
	background: #ffffff;
	font-size: 10px;
	transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}

.subject-select .topic-checkbox:checked + .topic-checkmark {
	border-color: var(--site-primary);
	color: #ffffff;
	background: var(--site-primary);
	box-shadow: 0 3px 8px rgba(23, 67, 183, .22);
}

.subject-select .topic-checkbox:focus + .topic-checkmark {
	box-shadow: 0 0 0 4px rgba(23, 67, 183, .13);
}

.topics-subject-list .probtypesubject {
	flex: 1;
	min-width: 0;
	color: var(--topic-color, var(--site-primary));
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.subject-chevron {
	display: inline-block;
	color: #96a0b2;
	font-size: 14px;
	transition: color .18s ease, transform .18s ease;
}

.subject-toggle {
	display: grid;
	flex: 0 0 auto;
	width: 50px;
	padding: 0;
	place-items: center;
	border: 0;
	border-left: 1px solid transparent;
	color: #96a0b2;
	background: transparent;
	cursor: pointer;
}

.subject-toggle:hover,
.subject-toggle:focus {
	color: var(--site-primary);
	background: #f5f7fc;
	outline: none;
}

.subject-toggle:focus-visible {
	box-shadow: inset 0 0 0 3px rgba(23, 67, 183, .13);
}

.subject-toggle[aria-expanded="true"] .subject-chevron {
	color: var(--site-primary);
	transform: rotate(180deg);
}

.topics-subject-list .categories {
	padding: 5px 16px 14px 51px;
	border-top: 1px solid #edf0f5;
	background: #fafbfe;
}

.topics-subject-list .category {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #edf0f5;
}

.topics-subject-list .category:last-child {
	border-bottom: 0;
}

.category-select {
	display: flex;
	flex: 1;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
	color: #4c5870;
	font-size: 12px;
	line-height: 1.45;
	cursor: pointer;
}

.category-select input {
	flex: 0 0 auto;
	margin-top: 2px;
	accent-color: var(--site-primary);
}

.topics-subject-list .probtypecategory {
	color: var(--topic-color, #4c5870);
	font-size: 12px;
	font-weight: 600;
}

.category-example {
	flex: 0 0 auto;
}

.category-example a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 7px;
	border-radius: 6px;
	color: var(--site-primary);
	background: #edf2ff;
	font-size: 10px;
	font-weight: 700;
}

.category-example a:hover,
.category-example a:focus {
	background: #dfe8ff;
	outline: none;
}

.practice-footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 30px 28px;
	border-top: 1px solid var(--site-line);
	background: #fbfcff;
}

.question-format-wrap:has(select[style*="display: none"]) {
	display: none;
}

.question-format-wrap label,
.testselect label {
	display: block;
	margin-bottom: 7px;
	color: #36425b;
	font-size: 11px;
	font-weight: 700;
}

.topics-panel select {
	width: 100%;
	min-width: 215px;
	height: 42px;
	padding: 0 34px 0 12px;
	border: 1px solid #cbd4e3;
	border-radius: 9px;
	color: #33405a;
	background: #ffffff;
	font-family: inherit;
	font-size: 12px;
	outline: none;
}

.topics-panel select:focus {
	border-color: #7087d9;
	box-shadow: 0 0 0 4px rgba(23, 67, 183, .1);
}

.topics-panel input.topics-primary-button[type="submit"],
.topics-panel .testbuttons input[type="submit"] {
	min-height: 44px;
	padding: 11px 18px;
	border: 0;
	border-radius: 9px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), #3e54c8);
	box-shadow: 0 7px 16px rgba(23, 67, 183, .2);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	transition: background .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}

.topics-panel input.topics-primary-button[type="submit"]:hover:enabled,
.topics-panel input.topics-primary-button[type="submit"]:focus:enabled,
.topics-panel .testbuttons input[type="submit"]:hover:enabled,
.topics-panel .testbuttons input[type="submit"]:focus:enabled {
	background: linear-gradient(135deg, #12358e, #3246ae);
	box-shadow: 0 9px 20px rgba(23, 67, 183, .26);
	transform: translateY(-1px);
	outline: none;
}

.topics-panel input.topics-primary-button[type="submit"]:disabled,
.topics-panel .testbuttons input[type="submit"]:disabled {
	color: #6f7b91;
	background: #e5e9f1;
	box-shadow: none;
	opacity: 1;
}

.test-options-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
	gap: 18px;
	padding: 24px 30px 30px;
}

.test-option-card {
	display: flex;
	min-width: 0;
	padding: 22px;
	flex-direction: column;
	border: 1px solid #dfe4ed;
	border-radius: 13px;
	background: #ffffff;
	box-shadow: 0 4px 13px rgba(22, 34, 68, .04);
}

.test-option-heading {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 20px;
}

.test-option-icon {
	display: grid;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	place-items: center;
	border-radius: 10px;
	color: var(--site-primary);
	background: #edf2ff;
	font-size: 15px;
}

.test-option-icon.sample-icon {
	color: #7140bd;
	background: #f2edfc;
}

.test-option-heading h3 {
	margin: 0 0 4px;
	color: var(--site-text);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.test-option-heading p {
	margin: 0;
	color: var(--site-muted);
	font-size: 11px;
	line-height: 1.5;
}

.proficiency-column-headings {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 116px;
	gap: 12px;
	padding: 8px 11px;
	border-bottom: 1px solid #e3e8f0;
	color: #7b869a;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.proficiency-column-headings .profdataheader {
	width: auto;
	color: inherit;
	font-size: inherit;
	text-align: right;
}

.topics-panel .profsubjectdiv {
	padding: 0 0 14px;
}

.topics-panel .profrow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 116px;
	gap: 12px;
	align-items: center;
	width: 100%;
	padding: 10px 11px;
	border-bottom: 1px solid #edf0f5;
	font-size: 12px;
	cursor: pointer;
	transition: background .15s ease;
}

.topics-panel .profrow:hover {
	background: #f7f9fe;
}

.topics-panel .profsubject,
.topics-panel .profdata {
	display: block;
	width: auto;
	font-size: 12px;
}

.topics-panel .profsubject {
	min-width: 0;
	color: #40506b;
	text-align: left;
}

.topics-panel .profsubject input {
	margin: 0 7px 0 0;
	accent-color: var(--site-primary);
}

.topics-panel .profsubject span {
	color: var(--topic-color, #40506b);
	font-weight: 600;
}

.topics-panel .profdata {
	color: var(--site-primary);
	text-align: right;
}

.topics-panel .profdata strong {
	display: inline-block;
	min-width: 48px;
	padding: 4px 7px;
	border-radius: 999px;
	background: #edf2ff;
	font-size: 11px;
	text-align: center;
}

.test-controls {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 7px;
}

.topics-panel .testselect,
.topics-panel .testbuttons {
	display: block;
	padding: 0;
	text-align: left;
}

.topics-panel .testselect {
	flex: 1;
}

.topics-panel .testselect select {
	min-width: 0;
}

.test-button-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.topics-panel .testbuttons input[type="submit"] {
	white-space: nowrap;
}

.topics-panel .testbuttons input.topics-secondary-button {
	border: 1px solid #cbd5e6;
	color: var(--site-primary);
	background: #ffffff;
	box-shadow: none;
}

.topics-panel .testbuttons input.topics-secondary-button:hover:enabled,
.topics-panel .testbuttons input.topics-secondary-button:focus:enabled {
	border-color: #acbde1;
	color: #133897;
	background: #f2f5fc;
	box-shadow: none;
}

.sample-test-card {
	background: linear-gradient(180deg, #ffffff, #fbfaff);
}

.sample-test-details {
	display: grid;
	gap: 11px;
	margin-bottom: 26px;
	padding: 17px;
	border: 1px solid #e4dff0;
	border-radius: 10px;
	color: #59647a;
	background: #f8f5fd;
	font-size: 11px;
	font-weight: 600;
}

.sample-test-details i {
	width: 18px;
	color: #7140bd;
	text-align: center;
}

.sample-test-controls {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.sample-test-controls .testbuttons input {
	width: 100%;
}

@media only screen and (max-width: 900px) {
	.test-options-grid {
		grid-template-columns: 1fr;
	}
}

@media only screen and (max-width: 720px) {
	.page-getprobtypes .bodydiv {
		padding: 28px 16px 48px;
	}
	.topics-hero {
		align-items: flex-start;
		padding: 30px 24px;
		border-radius: 18px;
	}
	.topics-hero-icon {
		width: 54px;
		height: 54px;
		border-radius: 15px;
		font-size: 20px;
	}
	.topics-subject-list {
		grid-template-columns: 1fr;
	}
	.topics-subject-list.topics-columns-ready {
		display: flex;
		flex-direction: column;
	}
	.topics-subject-list.topics-columns-ready .topics-subject-column {
		display: contents;
	}
	.practice-footer,
	.test-controls {
		align-items: stretch;
		flex-direction: column;
	}
	.question-format-wrap,
	.topics-primary-button,
	.topics-panel .testselect,
	.test-button-row,
	.topics-panel .testbuttons,
	.topics-panel .testbuttons input[type="submit"] {
		width: 100%;
	}
	.test-button-row {
		flex-direction: column;
	}
}

@media only screen and (max-width: 520px) {
	.topics-hero {
		gap: 15px;
	}
	.topics-hero-icon {
		width: 46px;
		height: 46px;
		border-radius: 13px;
		font-size: 17px;
	}
	.topics-hero .mathtopicsheader {
		font-size: 28px;
	}
	.topics-hero .probtypeintro {
		font-size: 13px;
	}
	.topics-panel-header,
	.topics-subject-list,
	.test-options-grid {
		padding-right: 18px;
		padding-left: 18px;
	}
	.topics-list-labels {
		padding-right: 18px;
		padding-left: 18px;
	}
	.topics-list-labels .quickexamples {
		display: none !important;
	}
	.practice-footer {
		padding-right: 18px;
		padding-left: 18px;
	}
	.topics-subject-list .categories {
		padding-left: 16px;
	}
	.category-example a span {
		display: none;
	}
	.proficiency-column-headings,
	.topics-panel .profrow {
		grid-template-columns: minmax(0, 1fr) 84px;
	}
	.test-option-card {
		padding: 18px;
	}
}

/* Quick example modal */
body.example-modal-open {
	overflow: hidden;
}

.modalexample {
	position: fixed;
	z-index: 1200;
	inset: 0;
	width: 100%;
	height: 100vh;
	padding: 24px;
	overflow: hidden;
	background: rgba(16, 24, 45, .67);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.modalexample-content {
	position: relative;
	display: flex;
	overflow: hidden;
	width: min(1120px, 100%);
	height: calc(100vh - 48px);
	margin: 0 auto;
	padding: 0;
	border: 1px solid rgba(218, 224, 235, .95);
	border-radius: 20px;
	color: var(--site-text);
	background: #ffffff;
	box-shadow: 0 28px 75px rgba(5, 13, 34, .32);
	font-size: 16px;
	font-weight: 400;
	text-align: left;
}

.example-modal-close {
	position: absolute;
	z-index: 5;
	top: 19px;
	right: 20px;
	display: grid;
	width: 40px;
	height: 40px;
	padding: 0;
	place-items: center;
	border: 1px solid #d7deea;
	border-radius: 10px;
	color: #68748a;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 3px 10px rgba(18, 31, 68, .06);
	font-size: 15px;
	cursor: pointer;
	transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.example-modal-close:hover,
.example-modal-close:focus {
	border-color: #bac6da;
	color: var(--site-primary);
	background: #f4f7fd;
	transform: translateY(-1px);
	outline: none;
}

.example-modal-close:focus-visible {
	box-shadow: 0 0 0 4px rgba(23, 67, 183, .13);
}

.example-panel {
	width: 100%;
	height: 100%;
	min-height: 0;
	flex-direction: column;
	background: #f6f8fc;
}

.example-modal-header {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 16px;
	padding: 24px 76px 23px 30px;
	border-bottom: 1px solid var(--site-line);
	background: #ffffff;
}

.example-header-icon {
	display: grid;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	place-items: center;
	border-radius: 13px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
	box-shadow: 0 8px 18px rgba(46, 58, 178, .2);
	font-size: 19px;
}

.example-eyebrow {
	margin-bottom: 3px;
	color: var(--site-primary);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.example-modal-header .examplecatname {
	margin: 0 0 3px;
	color: var(--site-text);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
}

.example-modal-header p {
	margin: 0;
	color: var(--site-muted);
	font-size: 12px;
	line-height: 1.45;
}

.example-modal-scroll {
	flex: 1 1 auto;
	min-height: 0;
	padding: 28px clamp(24px, 5vw, 54px) 34px;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-color: #b8c3d5 transparent;
	scrollbar-width: thin;
}

.example-modal-scroll::-webkit-scrollbar {
	width: 9px;
}

.example-modal-scroll::-webkit-scrollbar-track {
	background: transparent;
}

.example-modal-scroll::-webkit-scrollbar-thumb {
	border: 2px solid transparent;
	border-radius: 999px;
	background: #b8c3d5;
	background-clip: padding-box;
}

.example-question-card,
.example-solution-card {
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
	padding: clamp(24px, 4vw, 36px);
	border: 1px solid #dfe4ed;
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(24, 39, 79, .06);
}

.example-solution-card {
	margin-top: 22px;
	border-color: #d9e2f6;
	background: linear-gradient(180deg, #ffffff, #f9fbff);
}

.example-section-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}

.example-section-number {
	display: grid;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	place-items: center;
	border-radius: 10px;
	color: #ffffff;
	background: var(--site-primary);
	box-shadow: 0 5px 12px rgba(23, 67, 183, .18);
	font-size: 12px;
	font-weight: 700;
}

.example-solution-number {
	color: #7540bd;
	background: #f0eafb;
	box-shadow: none;
	font-size: 15px;
}

.example-section-label {
	margin-bottom: 2px;
	color: #7c879b;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.example-section-heading h3 {
	margin: 0;
	color: var(--site-text);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.example-question-text {
	margin-bottom: 23px;
	color: #1f2a43;
	font-size: clamp(17px, 2vw, 20px);
	font-weight: 650;
	line-height: 1.55;
}

.example-diagram {
	margin: 0 0 24px;
	text-align: center;
}

.example-diagram img {
	max-width: 100%;
	height: auto;
}

.example-options {
	display: grid;
	gap: 10px;
}

.example-option {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 11px 13px;
	border: 1px solid #e0e5ed;
	border-radius: 10px;
	color: #38445c;
	background: #ffffff;
	font-size: 15px;
	line-height: 1.5;
}

.example-option-letter {
	display: grid;
	flex: 0 0 auto;
	width: 29px;
	height: 29px;
	place-items: center;
	border-radius: 8px;
	color: #56637a;
	background: #f0f3f8;
	font-size: 12px;
	font-weight: 700;
	text-transform: lowercase;
}

.example-option-text {
	min-width: 0;
	font-size: inherit;
}

.example-option-correct {
	border-color: #a9ddc8;
	background: #f2fbf7;
	box-shadow: inset 3px 0 0 #27a073;
}

.example-option-correct .example-option-letter {
	color: #ffffff;
	background: #258d69;
}

.example-correct-answer {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	padding: 5px 8px;
	border-radius: 999px;
	color: #176f52;
	background: #dff4eb;
	font-size: 10px;
	font-weight: 700;
	white-space: nowrap;
}

.example-solution-text {
	overflow-wrap: anywhere;
	color: #33405a;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.75;
}

.example-solution-text img,
.example-solution-text svg {
	max-width: 100%;
	height: auto;
}

.example-solution-text table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.example-modal-footer {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 15px 28px;
	border-top: 1px solid var(--site-line);
	background: #ffffff;
}

.example-modal-footer > span {
	color: #748097;
	font-size: 11px;
	font-weight: 600;
}

.example-modal-footer > span i {
	margin-right: 5px;
	color: #258d69;
}

.example-modal-footer button {
	min-height: 40px;
	padding: 9px 17px;
	border: 0;
	border-radius: 9px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), #3e54c8);
	box-shadow: 0 6px 14px rgba(23, 67, 183, .18);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.example-modal-footer button:hover,
.example-modal-footer button:focus {
	background: linear-gradient(135deg, #12358e, #3246ae);
	outline: none;
}

@supports (height: 100dvh) {
	.modalexample {
		height: 100dvh;
	}
	.modalexample-content {
		height: calc(100dvh - 48px);
	}
}

@media only screen and (max-width: 700px) {
	.modalexample {
		padding: 0;
	}
	.modalexample-content {
		width: 100%;
		height: 100vh;
		margin: 0;
		border: 0;
		border-radius: 0;
	}
	.example-modal-close {
		top: 15px;
		right: 15px;
	}
	.example-modal-header {
		align-items: flex-start;
		gap: 12px;
		padding: 18px 62px 17px 18px;
	}
	.example-header-icon {
		width: 42px;
		height: 42px;
		border-radius: 11px;
		font-size: 16px;
	}
	.example-modal-header .examplecatname {
		font-size: 19px;
	}
	.example-modal-header p {
		display: none;
	}
	.example-modal-scroll {
		padding: 18px 14px 24px;
	}
	.example-question-card,
	.example-solution-card {
		padding: 21px 18px;
		border-radius: 13px;
	}
	.example-section-heading {
		margin-bottom: 19px;
	}
	.example-option {
		flex-wrap: wrap;
	}
	.example-correct-answer {
		margin-left: 41px;
	}
	.example-modal-footer {
		padding: 12px 15px;
	}
	.example-modal-footer > span {
		display: none;
	}
	.example-modal-footer button {
		width: 100%;
	}
}

@supports (height: 100dvh) {
	@media only screen and (max-width: 700px) {
		.modalexample-content {
			height: 100dvh;
		}
	}
}

/* Active question page */
.page-questiondisplay .bodydiv {
	padding: clamp(30px, 4vw, 54px);
	background:
		radial-gradient(circle at 8% 12%, rgba(50, 91, 204, .07), transparent 25%),
		radial-gradient(circle at 92% 88%, rgba(103, 57, 194, .06), transparent 27%),
		#f6f8fc;
}

.page-questiondisplay .bodydiv > .row {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

.page-questiondisplay .bodydiv > .row > .col-12 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 22px;
	align-items: start;
	width: 100%;
}

.page-questiondisplay .bodydiv .col-7,
.page-questiondisplay .bodydiv .col-5 {
	float: none;
	width: 100%;
}

.practice-question-card {
	overflow: hidden;
	width: 100%;
	border: 1px solid #dce3ee;
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 15px 38px rgba(26, 42, 84, .1);
}

.practice-question-header {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 22px 26px;
	border-bottom: 1px solid var(--site-line);
	background: linear-gradient(180deg, #ffffff, #fbfcff);
}

.practice-question-icon {
	display: grid;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	place-items: center;
	border-radius: 11px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
	box-shadow: 0 7px 16px rgba(42, 57, 180, .19);
	font-size: 16px;
}

.practice-question-eyebrow {
	margin-bottom: 2px;
	color: var(--site-primary);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.practice-question-header h1 {
	margin: 0;
	color: var(--site-text);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.practice-question-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 6px 9px;
	border-radius: 999px;
	color: #315b9b;
	background: #edf3ff;
	font-size: 10px;
	font-weight: 700;
}

.practice-question-status i {
	color: #2b80c5;
	font-size: 6px;
}

.practice-question-body {
	padding: clamp(26px, 4vw, 42px);
}

.page-questiondisplay .practice-question-prompt {
	margin: 0 0 28px;
	padding: 0;
	color: #18233b;
	font-size: clamp(18px, 2.1vw, 22px);
	font-weight: 700;
	line-height: 1.55;
	text-align: left;
}

.page-questiondisplay .practice-question-diagram {
	margin: 0 0 28px;
	padding: 0;
	text-align: center;
}

.practice-question-diagram img {
	max-width: 100%;
	height: auto;
}

.answer-choices {
	display: grid;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.answer-choices legend {
	margin-bottom: 11px;
	padding: 0;
	color: #68758c;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
}

.answer-choice {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 55px;
	padding: 11px 14px;
	border: 1px solid #dfe4ed;
	border-radius: 11px;
	color: #33405a;
	background: #ffffff;
	box-shadow: 0 2px 7px rgba(23, 36, 70, .025);
	font-size: 16px;
	line-height: 1.45;
	cursor: pointer;
	transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.answer-choice:hover {
	border-color: #b9c5df;
	background: #fbfcff;
	transform: translateY(-1px);
}

.answer-choice > input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.answer-radio {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	border: 1px solid #adb9cd;
	border-radius: 50%;
	background: #ffffff;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.answer-radio::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--site-primary);
	content: "";
	transform: translate(-50%, -50%) scale(0);
	transition: transform .16s ease;
}

.answer-choice > input:checked + .answer-radio {
	border-color: var(--site-primary);
	box-shadow: 0 0 0 3px rgba(23, 67, 183, .1);
}

.answer-choice > input:checked + .answer-radio::after {
	transform: translate(-50%, -50%) scale(1);
}

.answer-choice:has(> input:checked) {
	border-color: #6f86d6;
	background: #f3f6ff;
	box-shadow: 0 0 0 3px rgba(23, 67, 183, .08);
}

.answer-choice > input:focus + .answer-radio {
	box-shadow: 0 0 0 4px rgba(23, 67, 183, .14);
}

.answer-letter {
	display: grid;
	flex: 0 0 auto;
	width: 29px;
	height: 29px;
	place-items: center;
	border-radius: 8px;
	color: #526078;
	background: #f0f3f8;
	font-size: 12px;
	font-weight: 700;
	text-transform: lowercase;
}

.answer-choice:has(> input:checked) .answer-letter {
	color: #ffffff;
	background: var(--site-primary);
}

.answer-text {
	min-width: 0;
	font-size: inherit;
}

.page-questiondisplay .solution-preference {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 22px;
	padding: 0;
	color: #57637a;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
}

.solution-preference > input {
	position: absolute;
	opacity: 0;
}

.solution-preference-check {
	display: grid;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	place-items: center;
	border: 1px solid #b8c3d5;
	border-radius: 6px;
	color: transparent;
	background: #ffffff;
	font-size: 9px;
}

.solution-preference > input:checked + .solution-preference-check {
	border-color: var(--site-primary);
	color: #ffffff;
	background: var(--site-primary);
}

.solution-preference > input:focus + .solution-preference-check {
	box-shadow: 0 0 0 4px rgba(23, 67, 183, .12);
}

.question-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 25px;
	padding-top: 23px;
	border-top: 1px solid var(--site-line);
}

.page-questiondisplay .question-actions input.question-action[type="submit"] {
	min-height: 43px;
	padding: 10px 17px;
	border: 1px solid transparent;
	border-radius: 9px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease, opacity .16s ease;
}

.page-questiondisplay .question-actions input.question-submit[type="submit"] {
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), #3e54c8);
	box-shadow: 0 7px 16px rgba(23, 67, 183, .2);
}

.page-questiondisplay .question-actions input.question-submit[type="submit"]:hover:enabled,
.page-questiondisplay .question-actions input.question-submit[type="submit"]:focus:enabled {
	background: linear-gradient(135deg, #12358e, #3246ae);
	box-shadow: 0 9px 20px rgba(23, 67, 183, .26);
	transform: translateY(-1px);
}

.page-questiondisplay .question-actions input.question-submit[type="submit"]:disabled {
	color: #7f899b;
	background: #e4e8ef;
	box-shadow: none;
	opacity: 1;
}

.page-questiondisplay .question-actions input.question-skip[type="submit"],
.page-questiondisplay .question-actions input.question-pause[type="submit"] {
	border-color: #cbd4e3;
	color: #40506c;
	background: #ffffff;
	box-shadow: none;
}

.page-questiondisplay .question-actions input.question-skip[type="submit"]:hover,
.page-questiondisplay .question-actions input.question-skip[type="submit"]:focus,
.page-questiondisplay .question-actions input.question-pause[type="submit"]:hover,
.page-questiondisplay .question-actions input.question-pause[type="submit"]:focus {
	border-color: #adbcda;
	color: var(--site-primary);
	background: #f4f7fd;
	transform: translateY(-1px);
}

.page-questiondisplay .question-actions input.question-end-test[type="submit"] {
	margin-left: auto;
	border-color: #efc5cc;
	color: #a4384a;
	background: #fff7f8;
}

.skipped-questions {
	margin-top: 28px;
	padding: 19px;
	border: 1px solid #e1e6ef;
	border-radius: 12px;
	background: #f8faff;
}

.skipped-questions h2 {
	margin: 0 0 12px;
	color: #34415a;
	font-size: 14px;
}

.skipped-questions h2 i {
	margin-right: 5px;
	color: var(--site-primary);
}

.skipped-question-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 9px 0;
	border-top: 1px solid #e6eaf1;
	color: #5b677d;
	font-size: 11px;
	line-height: 1.45;
}

.skipped-question-row a {
	flex: 0 0 auto;
	font-weight: 700;
}

.page-questiondisplay .sidebar {
	width: 100%;
	padding: 0;
	font-size: inherit;
	font-weight: 400;
	text-align: left;
}

.session-panel {
	position: sticky;
	top: 18px;
	overflow: hidden;
	border: 1px solid #dce3ee;
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 12px 30px rgba(26, 42, 84, .08);
}

.session-panel-header {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 20px;
	border-bottom: 1px solid var(--site-line);
	background: linear-gradient(180deg, #ffffff, #fbfcff);
}

.session-panel-icon {
	display: grid;
	flex: 0 0 auto;
	width: 37px;
	height: 37px;
	place-items: center;
	border-radius: 10px;
	color: var(--site-primary);
	background: #edf2ff;
	font-size: 14px;
}

.session-panel-eyebrow {
	margin-bottom: 2px;
	color: #7b8699;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.session-panel-header h2 {
	margin: 0;
	color: var(--site-text);
	font-size: 16px;
	font-weight: 700;
}

.session-stats {
	display: grid;
	gap: 0;
	padding: 7px 18px;
}

.session-stat {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	padding: 14px 2px;
	border-bottom: 1px solid #edf0f5;
}

.session-stat:last-child {
	border-bottom: 0;
}

.session-stat-icon {
	display: grid;
	flex: 0 0 auto;
	width: 33px;
	height: 33px;
	place-items: center;
	border-radius: 9px;
	color: var(--site-primary);
	background: #f0f4fd;
	font-size: 12px;
}

.session-stat > div {
	min-width: 0;
}

.session-stat > div > span {
	display: block;
	margin-bottom: 2px;
	color: #8390a4;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.session-stat strong {
	overflow: hidden;
	color: #2c3851;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	text-overflow: ellipsis;
}

.session-stat small {
	display: block;
	margin-top: 2px;
	color: #66748b;
	font-size: 10px;
	font-weight: 600;
}

.session-stat-score .session-stat-icon {
	color: #237b5d;
	background: #eaf8f2;
}

.session-mode-switch {
	padding: 18px;
	border-top: 1px solid var(--site-line);
	background: #f8faff;
}

.session-mode-switch p {
	margin: 0 0 10px;
	color: #6d798e;
	font-size: 10px;
	line-height: 1.45;
}

.session-mode-switch a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	min-height: 40px;
	padding: 9px 12px;
	border: 1px solid #c8d3e7;
	border-radius: 9px;
	color: var(--site-primary);
	background: #ffffff;
	font-size: 11px;
	font-weight: 700;
}

.session-mode-switch a:hover,
.session-mode-switch a:focus {
	border-color: #aebfe1;
	background: #eef3ff;
	outline: none;
}

@media only screen and (max-width: 960px) {
	.page-questiondisplay .bodydiv > .row > .col-12 {
		grid-template-columns: 1fr;
	}
	.session-panel {
		position: static;
	}
	.session-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 18px;
	}
}

@media only screen and (max-width: 640px) {
	.page-questiondisplay .bodydiv {
		padding: 22px 14px 36px;
	}
	.practice-question-card,
	.session-panel {
		border-radius: 14px;
	}
	.practice-question-header {
		padding: 18px;
	}
	.practice-question-status {
		display: none;
	}
	.practice-question-body {
		padding: 24px 18px 27px;
	}
	.answer-choice {
		padding: 11px;
		font-size: 15px;
	}
	.question-actions {
		flex-wrap: wrap;
	}
	.page-questiondisplay .question-actions input.question-action[type="submit"] {
		flex: 1 1 calc(50% - 5px);
	}
	.page-questiondisplay .question-actions input.question-submit[type="submit"] {
		flex-basis: 100%;
	}
	.page-questiondisplay .question-actions input.question-end-test[type="submit"] {
		margin-left: 0;
	}
	.session-stats {
		grid-template-columns: 1fr;
	}
	.skipped-question-row {
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
	}
}

/* Solution review page */
.page-solutiondisplay .bodydiv {
	padding: clamp(30px, 4vw, 54px);
	background:
		radial-gradient(circle at 8% 12%, rgba(50, 91, 204, .07), transparent 25%),
		radial-gradient(circle at 92% 88%, rgba(103, 57, 194, .06), transparent 27%),
		#f6f8fc;
}

.page-solutiondisplay .bodydiv > .row {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

.page-solutiondisplay .bodydiv > .row > .col-12 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 22px;
	align-items: start;
	width: 100%;
}

.page-solutiondisplay .bodydiv .col-7,
.page-solutiondisplay .bodydiv .col-5 {
	float: none;
	width: 100%;
}

.page-solutiondisplay .sidebar {
	width: 100%;
	padding: 0;
	font-size: inherit;
	font-weight: 400;
	text-align: left;
}

.solution-review-card {
	overflow: hidden;
	width: 100%;
	border: 1px solid #dce3ee;
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 15px 38px rgba(26, 42, 84, .1);
}

.solution-review-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 26px;
	border-bottom: 1px solid #dce9e4;
	background: linear-gradient(135deg, #f3fbf7, #f9fcff);
}

.solution-review-incorrect .solution-review-header {
	border-bottom-color: #f0dfe2;
	background: linear-gradient(135deg, #fff7f8, #fbfcff);
}

.solution-review-review .solution-review-header {
	border-bottom-color: var(--site-line);
	background: linear-gradient(135deg, #f5f8ff, #fbfcff);
}

.solution-result-icon {
	display: grid;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	place-items: center;
	border-radius: 13px;
	color: #ffffff;
	background: linear-gradient(135deg, #238462, #36aa7c);
	box-shadow: 0 8px 18px rgba(35, 132, 98, .2);
	font-size: 18px;
}

.solution-review-incorrect .solution-result-icon {
	background: linear-gradient(135deg, #b84559, #dc6677);
	box-shadow: 0 8px 18px rgba(184, 69, 89, .19);
}

.solution-review-review .solution-result-icon {
	background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
	box-shadow: 0 8px 18px rgba(42, 57, 180, .19);
}

.solution-result-copy {
	min-width: 0;
}

.solution-review-eyebrow {
	margin-bottom: 2px;
	color: #548170;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.solution-review-incorrect .solution-review-eyebrow {
	color: #a05562;
}

.solution-review-review .solution-review-eyebrow {
	color: var(--site-primary);
}

.solution-result-copy h1 {
	margin: 0;
	color: var(--site-text);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}

.solution-result-copy p {
	margin: 3px 0 0;
	color: #67748a;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.45;
}

.solution-result-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 7px 10px;
	border: 1px solid #cce9dc;
	border-radius: 999px;
	color: #237b5d;
	background: #eaf8f2;
	font-size: 10px;
	font-weight: 700;
	white-space: nowrap;
}

.solution-review-incorrect .solution-result-badge {
	border-color: #f0d1d7;
	color: #a73f51;
	background: #fff0f2;
}

.solution-review-review .solution-result-badge {
	border-color: #cfdaef;
	color: var(--site-primary);
	background: #eef3ff;
}

.solution-review-body {
	display: grid;
	gap: 24px;
	padding: clamp(26px, 4vw, 42px);
}

.solution-section-label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	color: #748198;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.solution-section-label i {
	color: var(--site-primary);
	font-size: 11px;
}

.solution-question-section {
	padding: 21px 23px;
	border: 1px solid #e1e6ef;
	border-radius: 13px;
	background: #fbfcff;
}

.solution-question-text {
	color: #18233b;
	font-size: clamp(17px, 2vw, 21px);
	font-weight: 700;
	line-height: 1.55;
}

.solution-question-diagram {
	margin: 20px 0 0;
	padding: 0;
	text-align: center;
}

.solution-question-diagram img {
	max-width: 100%;
	height: auto;
}

.solution-answer-list {
	display: grid;
	gap: 9px;
}

.solution-answer {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 51px;
	padding: 10px 13px;
	border: 1px solid #e1e5ed;
	border-radius: 10px;
	color: #39465f;
	background: #ffffff;
	font-size: 15px;
	line-height: 1.45;
}

.solution-answer-marker {
	display: grid;
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	place-items: center;
	border: 1px solid #c9d1de;
	border-radius: 50%;
	color: transparent;
	background: #ffffff;
	font-size: 9px;
}

.solution-answer-letter {
	display: grid;
	flex: 0 0 auto;
	width: 29px;
	height: 29px;
	place-items: center;
	border-radius: 8px;
	color: #526078;
	background: #f0f3f8;
	font-size: 12px;
	font-weight: 700;
	text-transform: lowercase;
}

.solution-answer-text {
	min-width: 0;
}

.solution-answer-label {
	flex: 0 0 auto;
	margin-left: auto;
	padding: 4px 7px;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 700;
	white-space: nowrap;
}

.solution-answer-correct {
	border-color: #acdcca;
	color: #205f4c;
	background: #f0faf6;
	box-shadow: 0 0 0 2px rgba(35, 132, 98, .05);
}

.solution-answer-correct .solution-answer-marker {
	border-color: #2b906d;
	color: #ffffff;
	background: #2b906d;
}

.solution-answer-correct .solution-answer-letter {
	color: #ffffff;
	background: #2b906d;
}

.solution-answer-correct .solution-answer-label {
	color: #237b5d;
	background: #dcf2e9;
}

.solution-answer-incorrect {
	border-color: #edc2c9;
	color: #873746;
	background: #fff5f6;
}

.solution-answer-incorrect .solution-answer-marker {
	border-color: #c65366;
	color: #ffffff;
	background: #c65366;
}

.solution-answer-incorrect .solution-answer-letter {
	color: #ffffff;
	background: #c65366;
}

.solution-answer-incorrect .solution-answer-label {
	color: #a33e50;
	background: #f9dfe3;
}

.solution-explanation {
	overflow: hidden;
	border: 1px solid #dce3ee;
	border-radius: 14px;
	background: #ffffff;
	box-shadow: 0 8px 22px rgba(26, 42, 84, .055);
}

.solution-explanation-header {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 18px 21px;
	border-bottom: 1px solid #e3e8f0;
	background: #f8faff;
}

.solution-explanation-header > span {
	display: grid;
	flex: 0 0 auto;
	width: 35px;
	height: 35px;
	place-items: center;
	border-radius: 9px;
	color: #795700;
	background: #fff2c9;
	font-size: 15px;
}

.solution-explanation-header .solution-section-label {
	margin-bottom: 1px;
}

.solution-explanation-header h2 {
	margin: 0;
	color: #253149;
	font-size: 16px;
	font-weight: 700;
}

.solution-explanation-content {
	padding: clamp(23px, 3.5vw, 34px);
	color: #33415a;
	font-size: clamp(14px, 1.45vw, 16px);
	font-weight: 500;
	line-height: 1.8;
}

.solution-explanation-content b,
.solution-explanation-content strong {
	color: #18233b;
	font-weight: 700;
}

.solution-explanation-content .MathJax_Display {
	margin: 1.15em 0 !important;
	overflow-x: auto;
	overflow-y: hidden;
}

.solution-navigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 22px;
	border-top: 1px solid var(--site-line);
}

.solution-navigation-secondary {
	display: flex;
	align-items: center;
	gap: 9px;
}

.solution-nav-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 43px;
	padding: 10px 16px;
	border: 1px solid transparent;
	border-radius: 9px;
	font-size: 11px;
	font-weight: 700;
	transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.solution-nav-primary,
.solution-nav-primary:visited {
	margin-left: auto;
	color: #ffffff !important;
	background: linear-gradient(135deg, var(--site-primary), #3e54c8);
	box-shadow: 0 7px 16px rgba(23, 67, 183, .2);
}

.solution-nav-primary:hover,
.solution-nav-primary:focus,
.solution-nav-primary:hover:visited,
.solution-nav-primary:focus:visited {
	color: #ffffff !important;
	background: linear-gradient(135deg, #12358e, #3246ae);
	box-shadow: 0 9px 20px rgba(23, 67, 183, .26);
	outline: none;
	transform: translateY(-1px);
}

.solution-nav-secondary {
	border-color: #cbd4e3;
	color: #40506c;
	background: #ffffff;
}

.solution-nav-secondary:hover,
.solution-nav-secondary:focus {
	border-color: #adbcda;
	color: var(--site-primary);
	background: #f4f7fd;
	outline: none;
	transform: translateY(-1px);
}

@media only screen and (max-width: 960px) {
	.page-solutiondisplay .bodydiv > .row > .col-12 {
		grid-template-columns: 1fr;
	}
}

@media only screen and (max-width: 640px) {
	.page-solutiondisplay .bodydiv {
		padding: 22px 14px 36px;
	}
	.solution-review-card {
		border-radius: 14px;
	}
	.solution-review-header {
		align-items: flex-start;
		padding: 18px;
	}
	.solution-result-icon {
		width: 40px;
		height: 40px;
		border-radius: 11px;
	}
	.solution-result-badge {
		display: none;
	}
	.solution-result-copy p {
		font-size: 10px;
	}
	.solution-review-body {
		gap: 19px;
		padding: 23px 17px 27px;
	}
	.solution-question-section {
		padding: 18px;
	}
	.solution-answer {
		align-items: flex-start;
		flex-wrap: wrap;
		padding: 11px;
	}
	.solution-answer-marker,
	.solution-answer-letter {
		margin-top: 1px;
	}
	.solution-answer-text {
		flex: 1 1 calc(100% - 81px);
	}
	.solution-answer-label {
		margin: 2px 0 0 59px;
	}
	.solution-explanation-header {
		padding: 16px;
	}
	.solution-explanation-content {
		padding: 21px 18px;
		font-size: 14px;
	}
	.solution-navigation,
	.solution-navigation-secondary {
		align-items: stretch;
		flex-direction: column;
	}
	.solution-nav-button,
	.solution-nav-primary {
		width: 100%;
		margin-left: 0;
	}
}

/* Statistics dashboard */
.page-viewstats .bodydiv {
	padding: clamp(30px, 4vw, 54px);
	background:
		radial-gradient(circle at 8% 10%, rgba(50, 91, 204, .07), transparent 24%),
		radial-gradient(circle at 94% 88%, rgba(103, 57, 194, .055), transparent 28%),
		#f6f8fc;
}

.page-viewstats .bodydiv > .row {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
}

.page-viewstats .viewstats {
	width: 100%;
	border: 0;
}

.stats-dashboard {
	display: grid;
	gap: 20px;
	width: 100%;
}

.stats-dashboard-hero {
	overflow: hidden;
	border: 1px solid #dce3ee;
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 15px 38px rgba(26, 42, 84, .09);
}

.stats-dashboard-heading {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 25px 28px;
	border-bottom: 1px solid var(--site-line);
	background:
		linear-gradient(135deg, rgba(23, 67, 183, .055), rgba(100, 56, 199, .035)),
		#ffffff;
}

.stats-dashboard-icon {
	display: grid;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	place-items: center;
	border-radius: 13px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
	box-shadow: 0 8px 18px rgba(42, 57, 180, .2);
	font-size: 18px;
}

.stats-dashboard-eyebrow {
	margin-bottom: 2px;
	color: var(--site-primary);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.stats-dashboard-heading h1 {
	margin: 0;
	color: var(--site-text);
	font-size: clamp(21px, 2.4vw, 27px);
	font-weight: 700;
	line-height: 1.25;
}

.stats-dashboard-heading p {
	margin: 5px 0 0;
	color: #68758b;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
}

.stats-summary-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: #e6eaf1;
}

.stats-summary-card {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 20px 22px;
	background: #ffffff;
}

.stats-summary-icon {
	display: grid;
	flex: 0 0 auto;
	width: 39px;
	height: 39px;
	place-items: center;
	border-radius: 10px;
	font-size: 14px;
}

.stats-summary-blue {
	color: #2459bd;
	background: #edf3ff;
}

.stats-summary-green {
	color: #237b5d;
	background: #eaf8f2;
}

.stats-summary-purple {
	color: #7544b8;
	background: #f3edff;
}

.stats-summary-gold {
	color: #966b08;
	background: #fff5d9;
}

.stats-summary-card > div {
	min-width: 0;
}

.stats-summary-card span:not(.stats-summary-icon) {
	display: block;
	margin-bottom: 2px;
	color: #8390a4;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.stats-summary-card strong {
	display: block;
	overflow: hidden;
	color: #253149;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.15;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.stats-summary-card small {
	display: block;
	margin-top: 3px;
	color: #748096;
	font-size: 9px;
	font-weight: 600;
}

.stats-mode-tabs {
	display: inline-flex;
	justify-self: start;
	gap: 5px;
	padding: 5px;
	border: 1px solid #dce3ee;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 6px 18px rgba(26, 42, 84, .055);
}

.stats-mode-tab,
.stats-mode-tab:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 39px;
	padding: 9px 16px;
	border-radius: 8px;
	color: #55627a;
	font-size: 11px;
	font-weight: 700;
	transition: color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.stats-mode-tab:hover,
.stats-mode-tab:focus {
	color: var(--site-primary);
	background: #f1f5ff;
	outline: none;
}

.stats-mode-tab.active,
.stats-mode-tab.active:visited {
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), #4359ca);
	box-shadow: 0 5px 13px rgba(23, 67, 183, .2);
}

.stats-filter-path,
.stats-review-breadcrumb {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 48px;
	padding: 11px 16px;
	border: 1px solid #dce3ee;
	border-radius: 11px;
	color: #79869a;
	background: #ffffff;
	box-shadow: 0 5px 15px rgba(26, 42, 84, .04);
	font-size: 10px;
	font-weight: 600;
}

.stats-filter-path > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	color: #8390a4;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.stats-filter-path > span i {
	color: var(--site-primary);
	font-size: 10px;
}

.stats-filter-path > div,
.stats-review-breadcrumb {
	min-width: 0;
}

.stats-filter-path .statheadtitle,
.stats-review-breadcrumb .statheadtitle,
.stats-review-breadcrumb .reviewheadtitle {
	margin: 0;
	padding: 0;
	color: #4b5870;
	font-size: 10px;
	font-weight: 700;
}

.stats-filter-path .statheadtitle a,
.stats-review-breadcrumb .statheadtitle a {
	color: var(--site-primary);
}

.stats-sections {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.stats-section-card {
	overflow: hidden;
	min-width: 0;
	border: 1px solid #dce3ee;
	border-radius: 15px;
	background: #ffffff;
	box-shadow: 0 10px 27px rgba(26, 42, 84, .065);
}

.stats-section-subject-card,
.stats-section-date-card {
	grid-column: 1 / -1;
}

.stats-section-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 19px 21px;
	border-bottom: 1px solid #e4e8ef;
	background: #fbfcff;
}

.stats-section-icon {
	display: grid;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	place-items: center;
	border-radius: 10px;
	font-size: 14px;
}

.stats-section-subject {
	color: #2459bd;
	background: #edf3ff;
}

.stats-section-level {
	color: #7544b8;
	background: #f3edff;
}

.stats-section-result {
	color: #237b5d;
	background: #eaf8f2;
}

.stats-section-date {
	color: #966b08;
	background: #fff5d9;
}

.stats-section-kicker {
	margin-bottom: 2px;
	color: #8290a5;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.stats-section-header h2 {
	margin: 0;
	color: #253149;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.stats-section-header p {
	margin: 3px 0 0;
	color: #748096;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.45;
}

.stats-table-scroll {
	overflow-x: auto;
	width: 100%;
}

.stats-table {
	width: 100%;
	min-width: 610px;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
}

.stats-sections > .stats-section-card:nth-child(2) .stats-table,
.stats-sections > .stats-section-card:nth-child(3) .stats-table {
	min-width: 500px;
}

.stats-table th.statsectcolhead1,
.stats-table th.statsectcolhead2 {
	padding: 12px 15px;
	border: 0;
	border-bottom: 1px solid #dfe4ec;
	color: #758197;
	background: #f7f9fc;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .04em;
	text-align: right;
	text-transform: uppercase;
}

.stats-table th.statsectcolhead1 {
	text-align: left;
}

.stats-table td.statsectcoldata1,
.stats-table td.statsectcoldata2 {
	padding: 12px 15px;
	border: 0;
	border-bottom: 1px solid #edf0f4;
	color: #3b4860;
	background: #ffffff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	text-align: right;
	vertical-align: middle;
}

.stats-table td.statsectcoldata1 {
	color: #2b3850;
	font-weight: 700;
	text-align: left;
}

.stats-table tbody tr:last-child td {
	border-bottom: 0;
}

.stats-table tbody tr:not(.stats-total-row):not(.stats-related-row):not(.stats-date-actions):hover td {
	background: #fafbfe;
}

.stats-drill-link,
.stats-drill-link:visited {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--site-primary);
	font-weight: 700;
}

.stats-drill-link i {
	font-size: 7px;
	opacity: .65;
	transition: transform .16s ease;
}

.stats-drill-link:hover i,
.stats-drill-link:focus i {
	transform: translateX(2px);
}

.stats-percent-pill {
	display: inline-flex;
	justify-content: center;
	min-width: 51px;
	padding: 4px 7px;
	border-radius: 999px;
	color: #315d50;
	background: #edf8f4;
	font-size: 9px;
	font-weight: 700;
}

.stats-total-row td.statsectcoldata1,
.stats-total-row td.statsectcoldata2 {
	border-top: 1px solid #d7deea;
	color: #253149;
	background: #f5f7fb;
	font-weight: 700;
}

.stats-result-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 50%;
	background: #8995a8;
}

.stats-correct-row .stats-result-dot {
	background: #2b906d;
}

.stats-incorrect-row .stats-result-dot {
	background: #c65366;
}

.stats-review-link,
.stats-review-link:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 68px;
	padding: 6px 9px;
	border: 1px solid #cbd6ec;
	border-radius: 7px;
	color: var(--site-primary);
	background: #f5f8ff;
	font-size: 9px;
	font-weight: 700;
}

.stats-review-link:hover,
.stats-review-link:focus {
	border-color: #aebfe1;
	background: #eaf0ff;
	outline: none;
}

.stats-related-row td,
.stats-date-actions td {
	padding: 13px 15px;
	border-top: 1px solid #e2e7ef;
	background: #f8faff;
}

.stats-related-row td {
	font-size: 9px;
	font-weight: 600;
}

.stats-related-row span {
	margin-right: 8px;
	color: #7c879b;
}

.stats-related-row a,
.stats-date-actions a,
.stats-related-row a:visited,
.stats-date-actions a:visited {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 3px 5px 3px 0;
	padding: 5px 8px;
	border: 1px solid #d3dceb;
	border-radius: 7px;
	color: var(--site-primary);
	background: #ffffff;
	font-size: 9px;
	font-weight: 700;
}

.stats-date-actions td {
	text-align: left;
}

@media only screen and (max-width: 1050px) {
	.stats-summary-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.stats-sections {
		grid-template-columns: 1fr;
	}
	.stats-section-subject-card,
	.stats-section-date-card {
		grid-column: auto;
	}
}

@media only screen and (max-width: 640px) {
	.page-viewstats .bodydiv {
		padding: 22px 14px 36px;
	}
	.stats-dashboard {
		gap: 15px;
	}
	.stats-dashboard-hero,
	.stats-section-card {
		border-radius: 14px;
	}
	.stats-dashboard-heading {
		align-items: flex-start;
		padding: 20px 18px;
	}
	.stats-dashboard-icon {
		width: 42px;
		height: 42px;
		border-radius: 11px;
	}
	.stats-dashboard-heading p {
		font-size: 10px;
	}
	.stats-summary-grid {
		grid-template-columns: 1fr;
	}
	.stats-summary-card {
		padding: 15px 18px;
	}
	.stats-mode-tabs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-self: stretch;
	}
	.stats-mode-tab,
	.stats-mode-tab:visited {
		padding: 9px 10px;
		font-size: 10px;
	}
	.stats-filter-path {
		align-items: flex-start;
		flex-direction: column;
		gap: 5px;
	}
	.stats-section-header {
		align-items: flex-start;
		padding: 17px;
	}
	.stats-section-icon {
		width: 35px;
		height: 35px;
	}
	.stats-section-header p {
		display: none;
	}
}

/* Profile page */
.page-profile .bodydiv {
	padding: clamp(34px, 5vw, 68px);
	background:
		radial-gradient(circle at 9% 12%, rgba(50, 91, 204, .075), transparent 25%),
		radial-gradient(circle at 91% 88%, rgba(103, 57, 194, .06), transparent 28%),
		#f6f8fc;
}

.page-profile .bodydiv > .row {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
}

.page-profile .profile {
	width: 100%;
	border: 0;
	background: transparent;
	text-align: left;
}

.profile-page-shell {
	width: 100%;
}

.profile-card {
	overflow: hidden;
	width: 100%;
	border: 1px solid #dce3ee;
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 16px 42px rgba(26, 42, 84, .1);
}

.profile-card-header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 27px 30px;
	border-bottom: 1px solid var(--site-line);
	background:
		linear-gradient(135deg, rgba(23, 67, 183, .06), rgba(100, 56, 199, .04)),
		#ffffff;
}

.profile-avatar {
	display: grid;
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	place-items: center;
	border-radius: 15px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
	box-shadow: 0 9px 20px rgba(42, 57, 180, .22);
	font-size: 22px;
	font-weight: 700;
}

.profile-heading-copy {
	min-width: 0;
}

.profile-eyebrow {
	margin-bottom: 2px;
	color: var(--site-primary);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.profile-heading-copy h1 {
	margin: 0;
	color: var(--site-text);
	font-size: clamp(21px, 2.5vw, 27px);
	font-weight: 700;
	line-height: 1.25;
}

.profile-heading-copy p {
	margin: 5px 0 0;
	color: #68758b;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.45;
}

.profile-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	margin-left: auto;
	padding: 7px 10px;
	border: 1px solid #cce9dc;
	border-radius: 999px;
	color: #237b5d;
	background: #eaf8f2;
	font-size: 9px;
	font-weight: 700;
}

.profile-card-body {
	display: grid;
	gap: 22px;
	padding: clamp(25px, 4vw, 36px);
}

.profile-section {
	overflow: hidden;
	border: 1px solid #dfe4ec;
	border-radius: 14px;
	background: #ffffff;
}

.profile-section-header {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 17px 20px;
	border-bottom: 1px solid #e4e8ef;
	background: #f8faff;
}

.profile-section-header > span {
	display: grid;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	place-items: center;
	border-radius: 9px;
	color: var(--site-primary);
	background: #eaf0ff;
	font-size: 14px;
}

.profile-membership-section .profile-section-header > span {
	color: #7544b8;
	background: #f3edff;
}

.profile-section-kicker {
	margin-bottom: 1px;
	color: #8290a5;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.profile-section-header h2 {
	margin: 0;
	color: #253149;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.profile-detail-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: #e7ebf2;
}

.profile-detail {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	padding: 21px 20px;
	background: #ffffff;
}

.profile-detail-icon {
	display: grid;
	flex: 0 0 auto;
	width: 35px;
	height: 35px;
	place-items: center;
	border-radius: 9px;
	color: #536889;
	background: #f0f3f8;
	font-size: 13px;
}

.profile-detail > div {
	min-width: 0;
}

.profile-detail > div > span {
	display: block;
	margin-bottom: 3px;
	color: #8390a4;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.profile-detail strong {
	display: block;
	overflow: hidden;
	color: #2b3850;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.profile-membership-content {
	display: grid;
	grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
	gap: 0;
}

.profile-subscription-periods,
.profile-payment-history {
	padding: 21px;
}

.profile-subscription-periods {
	border-right: 1px solid #e4e8ef;
	background: #fbfcff;
}

.profile-membership-label {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 13px;
	color: #66738a;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.profile-membership-label i {
	color: var(--site-primary);
	font-size: 11px;
}

.profile-period-row {
	margin-top: 8px;
	padding: 10px 12px;
	border: 1px solid #dce4f2;
	border-radius: 8px;
	color: #34415a;
	background: #ffffff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
}

.profile-payment-list {
	display: grid;
	gap: 0;
	border: 1px solid #e1e6ef;
	border-radius: 9px;
	background: #ffffff;
}

.profile-payment-row {
	display: grid;
	grid-template-columns: minmax(120px, 1.25fr) minmax(95px, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 11px 13px;
	border-bottom: 1px solid #edf0f4;
	color: #526078;
	font-size: 10px;
	font-weight: 600;
}

.profile-payment-row:last-child {
	border-bottom: 0;
}

.profile-payment-date {
	color: #34415a;
	font-weight: 700;
}

.profile-payment-plan {
	color: #6e7a90;
}

.profile-payment-row strong {
	color: #237b5d;
	font-size: 11px;
	font-weight: 700;
}

.profile-subscription-notice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 16px 18px;
	border: 1px solid #e8d6d9;
	border-radius: 11px;
	background: #fff9fa;
}

.profile-subscription-notice > div,
.profile-subscription-ended {
	display: flex;
	align-items: center;
	gap: 10px;
}

.profile-subscription-notice i {
	flex: 0 0 auto;
	color: #a84a5b;
	font-size: 17px;
}

.profile-subscription-notice span,
.profile-subscription-notice div {
	min-width: 0;
}

.profile-subscription-notice strong,
.profile-subscription-notice small {
	display: block;
}

.profile-subscription-notice strong {
	color: #583640;
	font-size: 10px;
	font-weight: 700;
}

.profile-subscription-notice small {
	margin-top: 2px;
	color: #806a70;
	font-size: 9px;
	font-weight: 500;
	line-height: 1.4;
}

.profile-subscription-ended {
	justify-content: flex-start;
	border-color: #e7dba8;
	background: #fffbed;
}

.profile-subscription-ended i {
	color: #966b08;
}

.profile-cancel-button {
	min-height: 37px;
	padding: 8px 12px;
	border: 1px solid #e5b9c0;
	border-radius: 8px;
	color: #a63f50;
	background: #ffffff;
	font-family: inherit;
	font-size: 9px;
	font-weight: 700;
	cursor: pointer;
}

.profile-cancel-button:hover,
.profile-cancel-button:focus {
	border-color: #cf8793;
	background: #fff1f3;
	outline: none;
}

.profile-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 22px;
	border-top: 1px solid var(--site-line);
}

.profile-actions h2 {
	margin: 0;
	color: #253149;
	font-size: 13px;
	font-weight: 700;
}

.profile-actions p {
	margin: 3px 0 0;
	color: #748096;
	font-size: 9px;
	font-weight: 500;
}

.profile-action-buttons {
	display: flex;
	align-items: center;
	gap: 9px;
}

.profile-action,
.profile-action:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 42px;
	padding: 10px 15px;
	border: 1px solid transparent;
	border-radius: 9px;
	font-size: 10px;
	font-weight: 700;
	transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.profile-action-primary,
.profile-action-primary:visited {
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), #4359ca);
	box-shadow: 0 7px 16px rgba(23, 67, 183, .2);
}

.profile-action-primary:hover,
.profile-action-primary:focus {
	color: #ffffff;
	background: linear-gradient(135deg, #12358e, #3246ae);
	box-shadow: 0 9px 20px rgba(23, 67, 183, .25);
	outline: none;
	transform: translateY(-1px);
}

.profile-action-secondary,
.profile-action-secondary:visited {
	border-color: #cbd4e3;
	color: #40506c;
	background: #ffffff;
}

.profile-action-secondary:hover,
.profile-action-secondary:focus {
	border-color: #adbcda;
	color: var(--site-primary);
	background: #f4f7fd;
	outline: none;
	transform: translateY(-1px);
}

.profile-signin-card {
	max-width: 540px;
	margin: 0 auto;
	padding: 42px 36px;
	border: 1px solid #dce3ee;
	border-radius: 17px;
	background: #ffffff;
	box-shadow: 0 15px 38px rgba(26, 42, 84, .09);
	text-align: center;
}

.profile-signin-icon {
	display: grid;
	width: 50px;
	height: 50px;
	margin: 0 auto 17px;
	place-items: center;
	border-radius: 14px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
	font-size: 18px;
}

.profile-signin-card h1 {
	margin: 0;
	color: #253149;
	font-size: 22px;
	font-weight: 700;
}

.profile-signin-card p {
	margin: 9px auto 20px;
	color: #68758b;
	font-size: 11px;
	line-height: 1.6;
}

.profile-signin-card a,
.profile-signin-card a:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 42px;
	padding: 10px 16px;
	border-radius: 9px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), #4359ca);
	font-size: 10px;
	font-weight: 700;
}

@media only screen and (max-width: 850px) {
	.profile-detail-grid {
		grid-template-columns: 1fr;
	}
	.profile-membership-content {
		grid-template-columns: 1fr;
	}
	.profile-subscription-periods {
		border-right: 0;
		border-bottom: 1px solid #e4e8ef;
	}
}

@media only screen and (max-width: 640px) {
	.page-profile .bodydiv {
		padding: 22px 14px 36px;
	}
	.profile-card {
		border-radius: 14px;
	}
	.profile-card-header {
		align-items: flex-start;
		padding: 21px 18px;
	}
	.profile-avatar {
		width: 45px;
		height: 45px;
		border-radius: 12px;
		font-size: 18px;
	}
	.profile-heading-copy p,
	.profile-status {
		display: none;
	}
	.profile-card-body {
		gap: 17px;
		padding: 22px 17px 26px;
	}
	.profile-section-header {
		padding: 15px 16px;
	}
	.profile-detail,
	.profile-subscription-periods,
	.profile-payment-history {
		padding: 17px 16px;
	}
	.profile-payment-row {
		grid-template-columns: 1fr auto;
	}
	.profile-payment-plan {
		grid-column: 1 / -1;
		grid-row: 2;
	}
	.profile-subscription-notice {
		align-items: flex-start;
		flex-direction: column;
	}
	.profile-subscription-notice form,
	.profile-cancel-button {
		width: 100%;
	}
	.profile-actions {
		align-items: stretch;
		flex-direction: column;
	}
	.profile-action-buttons {
		align-items: stretch;
		flex-direction: column-reverse;
	}
	.profile-action {
		width: 100%;
	}
	.profile-signin-card {
		padding: 34px 22px;
	}
}

/* Edit profile page */
.page-editprofile .bodydiv {
	padding: clamp(34px, 5vw, 68px);
	background:
		radial-gradient(circle at 9% 12%, rgba(50, 91, 204, .075), transparent 25%),
		radial-gradient(circle at 91% 88%, rgba(103, 57, 194, .06), transparent 28%),
		#f6f8fc;
}

.page-editprofile .bodydiv > .row {
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
}

.page-editprofile .editprofile {
	width: 100%;
	border: 0;
	background: transparent;
	text-align: left;
}

.edit-profile-shell {
	width: 100%;
}

.edit-profile-card {
	overflow: hidden;
	width: 100%;
	border: 1px solid #dce3ee;
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 16px 42px rgba(26, 42, 84, .1);
}

.edit-profile-verify-card {
	max-width: 650px;
	margin: 0 auto;
}

.edit-profile-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 25px 28px;
	border-bottom: 1px solid var(--site-line);
	background:
		linear-gradient(135deg, rgba(23, 67, 183, .06), rgba(100, 56, 199, .04)),
		#ffffff;
}

.edit-profile-header-icon {
	display: grid;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	place-items: center;
	border-radius: 13px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
	box-shadow: 0 8px 18px rgba(42, 57, 180, .2);
	font-size: 17px;
}

.edit-profile-eyebrow {
	margin-bottom: 2px;
	color: var(--site-primary);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.edit-profile-header h1 {
	margin: 0;
	color: var(--site-text);
	font-size: clamp(20px, 2.4vw, 25px);
	font-weight: 700;
	line-height: 1.25;
}

.edit-profile-header p {
	margin: 4px 0 0;
	color: #68758b;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.45;
}

.edit-profile-form {
	margin: 0;
}

.edit-profile-verify-body,
.edit-profile-form-body {
	display: grid;
	gap: 19px;
	padding: clamp(24px, 4vw, 34px);
}

.edit-profile-security-note {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 14px 16px;
	border: 1px solid #dce4f2;
	border-radius: 10px;
	background: #f7f9ff;
}

.edit-profile-security-note > i {
	flex: 0 0 auto;
	color: var(--site-primary);
	font-size: 18px;
}

.edit-profile-security-note strong,
.edit-profile-security-note span {
	display: block;
}

.edit-profile-security-note strong {
	color: #33415a;
	font-size: 10px;
	font-weight: 700;
}

.edit-profile-security-note span {
	margin-top: 2px;
	color: #718097;
	font-size: 9px;
	font-weight: 500;
	line-height: 1.4;
}

.edit-profile-section {
	overflow: hidden;
	border: 1px solid #dfe4ec;
	border-radius: 13px;
	background: #ffffff;
}

.edit-profile-section-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px 18px;
	border-bottom: 1px solid #e4e8ef;
	background: #f8faff;
}

.edit-profile-section-header > span {
	display: grid;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	place-items: center;
	border-radius: 9px;
	color: var(--site-primary);
	background: #eaf0ff;
	font-size: 13px;
}

.edit-profile-section-kicker {
	margin-bottom: 1px;
	color: #8290a5;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.edit-profile-section-header h2 {
	margin: 0;
	color: #253149;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.edit-profile-fields-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 17px;
	padding: 19px;
}

.edit-profile-field {
	min-width: 0;
}

.edit-profile-field label {
	display: block;
	margin-bottom: 7px;
	color: #46546c;
	font-size: 9px;
	font-weight: 700;
}

.edit-profile-control {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 45px;
	border: 1px solid #cfd7e4;
	border-radius: 9px;
	background: #ffffff;
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.edit-profile-control:focus-within {
	border-color: #6f86d6;
	background: #ffffff;
	box-shadow: 0 0 0 4px rgba(23, 67, 183, .09);
}

.edit-profile-control-icon {
	position: absolute;
	left: 14px;
	color: #8b97a9;
	font-size: 12px;
	pointer-events: none;
}

.edit-profile-control input,
.edit-profile-control input[type="text"],
.edit-profile-control input[type="email"],
.edit-profile-control input[type="password"] {
	width: 100%;
	height: 43px;
	margin: 0;
	padding: 10px 42px 10px 39px;
	border: 0;
	outline: 0;
	color: #29364e;
	background: transparent;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	text-align: left;
}

.edit-profile-control input[type="text"],
.edit-profile-control input[type="email"] {
	padding-right: 13px;
}

.edit-profile-password-toggle {
	position: absolute;
	right: 7px;
	display: grid;
	width: 32px;
	height: 32px;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 7px;
	color: #758197;
	background: transparent;
	font-size: 12px;
	cursor: pointer;
}

.edit-profile-password-toggle:hover,
.edit-profile-password-toggle:focus {
	color: var(--site-primary);
	background: #edf2ff;
	outline: none;
}

.edit-profile-feedback,
.edit-profile-password-help {
	min-height: 18px;
	margin: 0 19px 13px;
	color: #6f7c91;
	font-size: 9px;
	font-weight: 600;
	line-height: 1.45;
}

.edit-profile-verify-body > .edit-profile-field .edit-profile-feedback {
	margin: 7px 0 0;
}

.edit-profile-feedback-error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	padding: 9px 11px;
	border: 1px solid #f0cbd1;
	border-radius: 8px;
	color: #a43f50;
	background: #fff5f6;
}

.edit-profile-feedback-error:empty {
	display: none;
}

.edit-profile-feedback-error .messagestyle,
.edit-profile-success .messagestyle {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.edit-profile-password-help {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	color: #65738a;
}

.edit-profile-password-help i {
	margin-top: 2px;
	color: var(--site-primary);
}

.edit-profile-success {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 24px 28px 0;
	padding: 12px 14px;
	border: 1px solid #bfe4d5;
	border-radius: 9px;
	color: #237b5d;
	background: #effaf6;
	font-size: 10px;
	font-weight: 700;
}

.edit-profile-success > i {
	font-size: 15px;
}

.edit-profile-expiration {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 14px 16px;
	border: 1px solid #e7dba8;
	border-radius: 10px;
	background: #fffbed;
}

.edit-profile-expiration > span {
	display: grid;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	place-items: center;
	border-radius: 9px;
	color: #966b08;
	background: #fff2c9;
	font-size: 13px;
}

.edit-profile-expiration small,
.edit-profile-expiration strong {
	display: block;
}

.edit-profile-expiration small {
	margin-bottom: 2px;
	color: #897845;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.edit-profile-expiration strong {
	color: #5b4a19;
	font-size: 11px;
	font-weight: 700;
}

.edit-profile-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 9px;
	padding: 18px 28px;
	border-top: 1px solid var(--site-line);
	background: #fbfcff;
}

.edit-profile-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 96px;
	min-height: 42px;
	margin: 0;
	padding: 10px 15px;
	border: 1px solid transparent;
	border-radius: 9px;
	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
	cursor: pointer;
	transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.edit-profile-button-primary {
	color: #ffffff;
	background: linear-gradient(135deg, var(--site-primary), #4359ca);
	box-shadow: 0 7px 16px rgba(23, 67, 183, .2);
}

.edit-profile-button-primary:hover,
.edit-profile-button-primary:focus {
	color: #ffffff;
	background: linear-gradient(135deg, #12358e, #3246ae);
	box-shadow: 0 9px 20px rgba(23, 67, 183, .25);
	outline: none;
	transform: translateY(-1px);
}

.edit-profile-button-secondary {
	order: -1;
	border-color: #cbd4e3;
	color: #40506c;
	background: #ffffff;
}

.edit-profile-button-secondary:hover,
.edit-profile-button-secondary:focus {
	border-color: #adbcda;
	color: var(--site-primary);
	background: #f4f7fd;
	outline: none;
	transform: translateY(-1px);
}

@media only screen and (max-width: 700px) {
	.edit-profile-fields-grid {
		grid-template-columns: 1fr;
	}
}

@media only screen and (max-width: 640px) {
	.page-editprofile .bodydiv {
		padding: 22px 14px 36px;
	}
	.edit-profile-card {
		border-radius: 14px;
	}
	.edit-profile-header {
		align-items: flex-start;
		padding: 20px 18px;
	}
	.edit-profile-header-icon {
		width: 41px;
		height: 41px;
		border-radius: 11px;
	}
	.edit-profile-header p {
		display: none;
	}
	.edit-profile-verify-body,
	.edit-profile-form-body {
		padding: 21px 17px;
	}
	.edit-profile-section-header {
		padding: 14px 15px;
	}
	.edit-profile-fields-grid {
		gap: 14px;
		padding: 16px;
	}
	.edit-profile-feedback,
	.edit-profile-password-help {
		margin-right: 16px;
		margin-left: 16px;
	}
	.edit-profile-success {
		margin: 18px 17px 0;
	}
	.edit-profile-actions {
		align-items: stretch;
		flex-direction: column;
		padding: 16px 17px;
	}
	.edit-profile-button-secondary {
		order: 0;
	}
	.edit-profile-button {
		width: 100%;
	}
}

/* Membership plan page */
.page-makepayment .bodydiv {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: 560px;
	padding: 46px 28px 64px;
	background: radial-gradient(circle at 12% 8%, rgba(37, 82, 204, .08), transparent 28%), linear-gradient(180deg, #f8faff 0%, #f4f7fc 100%);
}
.page-makepayment .bodydiv > .row {
	width: 100%;
	max-width: 1080px;
}
.membership-page-shell {
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	color: #17213b;
}
.membership-card {
	overflow: hidden;
	background: #fff;
	border: 1px solid #dce4f3;
	border-radius: 20px;
	box-shadow: 0 18px 46px rgba(28, 50, 104, .12);
}
.membership-card-header {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 28px 34px;
	background: linear-gradient(135deg, #183f9f 0%, #5140ca 100%);
	color: #fff;
}
.membership-header-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 15px;
	background: rgba(255, 255, 255, .14);
	font-size: 22px;
}
.membership-eyebrow {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .82;
}
.membership-card-header h1 {
	margin: 0;
	font-size: 27px;
	line-height: 1.2;
	color: #fff;
}
.membership-card-header p {
	margin: 7px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .84);
}
.membership-benefits {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-bottom: 1px solid #e5eaf4;
	background: #f8faff;
}
.membership-benefits span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 54px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 700;
	color: #42506d;
}
.membership-benefits span + span {
	border-left: 1px solid #e5eaf4;
}
.membership-benefits i {
	color: #2b63d9;
}
.membership-form {
	margin: 0;
}
.membership-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 26px 34px 0;
	padding: 13px 15px;
	border: 1px solid #fecaca;
	border-radius: 10px;
	background: #fff5f5;
	font-size: 14px;
	line-height: 1.45;
	color: #b42318;
}
.membership-alert i {
	margin-top: 2px;
}
.membership-plan-fieldset {
	min-width: 0;
	margin: 0;
	padding: 30px 34px 34px;
	border: 0;
}
.membership-plan-fieldset legend {
	float: left;
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
	font-size: 20px;
	font-weight: 700;
	color: #17213b;
}
.membership-plan-intro {
	clear: both;
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.5;
	color: #65718a;
}
.membership-plan-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
.membership-plan-option {
	display: block;
	margin: 0;
	cursor: pointer;
}
.membership-plan-option > input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.membership-plan-surface {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	min-height: 78px;
	padding: 15px 17px;
	border: 2px solid #e1e7f2;
	border-radius: 13px;
	background: #fff;
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.membership-plan-option:hover .membership-plan-surface {
	transform: translateY(-1px);
	border-color: #9db3e8;
	box-shadow: 0 8px 20px rgba(35, 71, 156, .09);
}
.membership-plan-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 2px solid #b8c3d8;
	border-radius: 50%;
	background: #fff;
	font-size: 10px;
	color: transparent;
	transition: all .18s ease;
}
.membership-plan-details,
.membership-plan-price {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.membership-plan-details strong {
	font-size: 16px;
	color: #1d2943;
}
.membership-plan-details small,
.membership-plan-price small {
	font-size: 11px;
	font-weight: 400;
	color: #758099;
}
.membership-plan-price {
	align-items: flex-end;
	text-align: right;
}
.membership-plan-price strong {
	font-size: 20px;
	color: #1749b5;
}
.membership-plan-option > input:checked + .membership-plan-surface {
	border-color: #285ac9;
	background: #f5f8ff;
	box-shadow: 0 0 0 3px rgba(40, 90, 201, .1);
}
.membership-plan-option > input:checked + .membership-plan-surface .membership-plan-check {
	border-color: #285ac9;
	background: #285ac9;
	color: #fff;
}
.membership-plan-option > input:focus-visible + .membership-plan-surface {
	outline: 3px solid rgba(40, 90, 201, .28);
	outline-offset: 3px;
}
.membership-form-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 21px 34px;
	border-top: 1px solid #e5eaf4;
	background: #f8faff;
}
.membership-secure-note {
	display: flex;
	align-items: center;
	gap: 11px;
	color: #2f6c59;
}
.membership-secure-note > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #e8f6f1;
}
.membership-secure-note span {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.membership-secure-note strong {
	font-size: 13px;
}
.membership-secure-note small {
	font-size: 11px;
	color: #6d7a8e;
}
.membership-checkout-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	margin: 0;
	padding: 0 24px;
	border: 0;
	border-radius: 11px;
	background: linear-gradient(135deg, #2455c5 0%, #4c39c6 100%);
	box-shadow: 0 9px 20px rgba(45, 69, 184, .22);
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease;
}
.membership-checkout-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 24px rgba(45, 69, 184, .28);
}
.membership-checkout-button:focus-visible {
	outline: 3px solid rgba(40, 90, 201, .28);
	outline-offset: 3px;
}

@media only screen and (max-width: 760px) {
	.page-makepayment .bodydiv {
		padding: 28px 18px 44px;
	}
	.membership-plan-grid {
		grid-template-columns: 1fr;
	}
}

@media only screen and (max-width: 560px) {
	.page-makepayment .bodydiv {
		padding: 20px 12px 36px;
	}
	.membership-card {
		border-radius: 15px;
	}
	.membership-card-header {
		align-items: flex-start;
		padding: 22px 18px;
	}
	.membership-header-icon {
		width: 43px;
		height: 43px;
		border-radius: 12px;
		font-size: 18px;
	}
	.membership-card-header h1 {
		font-size: 22px;
	}
	.membership-card-header p {
		display: none;
	}
	.membership-benefits {
		grid-template-columns: 1fr;
		padding: 9px 18px;
	}
	.membership-benefits span {
		justify-content: flex-start;
		min-height: 34px;
		padding: 4px 0;
	}
	.membership-benefits span + span {
		border-left: 0;
	}
	.membership-alert {
		margin: 20px 18px 0;
	}
	.membership-plan-fieldset {
		padding: 24px 18px;
	}
	.membership-plan-surface {
		grid-template-columns: 26px minmax(0, 1fr);
	}
	.membership-plan-price {
		grid-column: 2;
		align-items: flex-start;
		text-align: left;
	}
	.membership-plan-price small {
		display: none;
	}
	.membership-form-footer {
		align-items: stretch;
		flex-direction: column;
		padding: 18px;
	}
	.membership-checkout-button {
		width: 100%;
	}
}

/* Sample problems and tests landing page */
.page-sampleproblems .bodydiv {
	padding: 42px 28px 58px;
	background: radial-gradient(circle at 8% 8%, rgba(72, 61, 190, .08), transparent 25%), linear-gradient(180deg, #f8faff 0%, #f3f6fc 100%);
}
.page-sampleproblems .sampleproblems {
	width: 100%;
}
.sample-access {
	width: min(1050px, 100%);
	margin: 0 auto;
	color: #1d2943;
}
.sample-access-hero {
	max-width: 770px;
	margin: 0 auto 30px;
	text-align: center;
}
.sample-access-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #4b3bbd;
}
.sample-access-hero h1 {
	margin: 0;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.13;
	letter-spacing: -.025em;
	color: #18264a;
}
.sample-access-hero > p {
	max-width: 650px;
	margin: 14px auto 19px;
	font-size: 16px;
	line-height: 1.65;
	color: #63708a;
}
.sample-access-summary {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	border: 1px solid #dbe2f2;
	border-radius: 999px;
	background: rgba(255, 255, 255, .85);
	box-shadow: 0 5px 16px rgba(30, 53, 105, .06);
	font-size: 13px;
	color: #5f6b82;
}
.sample-access-summary span {
	padding: 9px 16px;
}
.sample-access-summary span + span {
	border-left: 1px solid #dbe2f2;
}
.sample-access-summary strong {
	color: #244aa6;
}
.sample-option-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}
.sample-option-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 390px;
	padding: 30px;
	border: 1px solid #dce3f1;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 14px 36px rgba(31, 51, 101, .09);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sample-option-card:hover {
	transform: translateY(-3px);
	border-color: #c8d3ec;
	box-shadow: 0 19px 42px rgba(31, 51, 101, .13);
}
.sample-option-card-featured {
	border-top: 4px solid #4b3bbd;
	padding-top: 27px;
}
.sample-option-badge {
	position: absolute;
	top: 18px;
	right: 20px;
	padding: 6px 10px;
	border-radius: 999px;
	background: #f0edff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #4b3bbd;
}
.sample-option-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 22px;
	border-radius: 15px;
	font-size: 22px;
}
.sample-option-icon-practice {
	background: #eaf1ff;
	color: #2455c5;
}
.sample-option-icon-test {
	background: #f0edff;
	color: #4b3bbd;
}
.sample-option-copy {
	flex: 1;
}
.sample-option-label {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #66738c;
}
.sample-option-copy h2 {
	margin: 0 0 11px;
	font-size: 24px;
	line-height: 1.2;
	color: #1d2943;
}
.sample-option-copy p {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: #69758c;
}
.sample-option-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 25px 0 18px;
	padding-top: 18px;
	border-top: 1px solid #e7ebf3;
	font-size: 12px;
	font-weight: 700;
	color: #49617d;
}
.sample-option-meta i {
	color: #23855d;
}
.sample-option-form {
	margin: 0;
}
.sample-option-button,
.sample-option-button:visited {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 49px;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: 11px;
	background: linear-gradient(135deg, #2455c5 0%, #4b3bbd 100%);
	box-shadow: 0 9px 19px rgba(45, 69, 184, .21);
	font-size: 14px;
	font-weight: 800;
	color: #fff;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease;
}
.sample-option-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 23px rgba(45, 69, 184, .29);
}
.sample-option-button:focus-visible,
.sample-account-link:focus-visible,
.sample-account-button:focus-visible {
	outline: 3px solid rgba(40, 90, 201, .27);
	outline-offset: 3px;
}
.sample-option-complete {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 49px;
	padding: 0 15px;
	border-radius: 11px;
	background: #eaf7f1;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	color: #287256;
}
.sample-access-account {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 22px;
	padding: 20px 24px;
	border: 1px solid #d9e1f1;
	border-radius: 15px;
	background: rgba(255, 255, 255, .8);
}
.sample-access-account > div:first-child {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.sample-access-account strong {
	font-size: 14px;
	color: #243354;
}
.sample-access-account span {
	font-size: 12px;
	color: #718098;
}
.sample-account-actions {
	display: flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
}
.sample-account-link,
.sample-account-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 39px;
	padding: 0 15px;
	border-radius: 9px;
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
}
.sample-account-link,
.sample-account-link:visited {
	border: 1px solid #cbd5e8;
	background: #fff;
	color: #334a80;
}
.sample-account-button,
.sample-account-button:visited {
	border: 1px solid #244eae;
	background: #244eae;
	color: #fff;
}
.sample-account-link:hover,
.sample-account-button:hover {
	filter: brightness(.97);
}

@media only screen and (max-width: 760px) {
	.page-sampleproblems .bodydiv {
		padding: 30px 18px 44px;
	}
	.sample-option-grid {
		grid-template-columns: 1fr;
	}
	.sample-option-card {
		min-height: 0;
	}
	.sample-access-account {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media only screen and (max-width: 480px) {
	.page-sampleproblems .bodydiv {
		padding: 23px 12px 36px;
	}
	.sample-access-hero > p {
		font-size: 14px;
	}
	.sample-access-summary {
		width: 100%;
		border-radius: 12px;
	}
	.sample-access-summary span {
		flex: 1;
		padding: 9px 10px;
	}
	.sample-option-card {
		padding: 24px 20px;
		border-radius: 16px;
	}
	.sample-option-card-featured {
		padding-top: 23px;
	}
	.sample-option-badge {
		top: 16px;
		right: 16px;
	}
	.sample-account-actions {
		width: 100%;
	}
	.sample-account-link,
	.sample-account-button {
		flex: 1;
	}
}

/* Payment and registration success page */
.page-paymentapproved .bodydiv {
	padding: 48px 24px 58px;
	background: radial-gradient(circle at 50% 0%, rgba(64, 79, 194, .1), transparent 32%), linear-gradient(180deg, #f8faff 0%, #f3f6fc 100%);
}
.page-paymentapproved .paymentapproved {
	width: 100%;
}
.payment-success-workspace {
	width: min(760px, 100%);
	margin: 0 auto;
	color: #1d2943;
}
.payment-success-card {
	position: relative;
	padding: 38px 42px 34px;
	border: 1px solid #dce3f1;
	border-top: 4px solid #2eac79;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 18px 45px rgba(31, 51, 101, .11);
	text-align: left;
}
.payment-success-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin: -4px auto 20px;
	border: 7px solid #e7f7f0;
	border-radius: 50%;
	background: #2eac79;
	box-shadow: 0 8px 20px rgba(46, 172, 121, .2);
	font-size: 25px;
	color: #fff;
}
.payment-success-heading {
	max-width: 600px;
	margin: 0 auto 24px;
	text-align: center;
}
.payment-success-eyebrow {
	display: block;
	margin-bottom: 7px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #27805f;
}
.payment-success-heading h1 {
	margin: 0;
	font-size: clamp(27px, 4vw, 36px);
	line-height: 1.17;
	letter-spacing: -.025em;
	color: #18264a;
}
.payment-success-heading p {
	margin: 11px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: #68758d;
}
.payment-success-message {
	margin-bottom: 25px;
	padding: 16px 18px;
	border: 1px solid #cfe8dd;
	border-radius: 12px;
	background: #f1faf6;
	font-size: 13px;
	line-height: 1.65;
	text-align: center;
	color: #315f50;
}
.payment-success-message .messagestyle2 {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
.payment-success-message a,
.payment-success-message a:visited {
	font-weight: 800;
	color: #2455c5 !important;
}
.payment-next-steps {
	padding: 23px;
	border: 1px solid #e1e6f0;
	border-radius: 14px;
	background: #fbfcff;
}
.payment-next-steps h2 {
	margin: 0 0 17px;
	font-size: 16px;
	color: #243354;
}
.payment-step-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
.payment-step {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.payment-step-number {
	display: inline-flex;
	flex: 0 0 30px;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: #e9efff;
	font-size: 12px;
	font-weight: 800;
	color: #2855bd;
}
.payment-step strong {
	display: block;
	margin: 1px 0 4px;
	font-size: 13px;
	color: #293956;
}
.payment-step p {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: #6e7a90;
}
.payment-spam-note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #e4e9f3;
	font-size: 12px;
	line-height: 1.5;
	color: #67748b;
}
.payment-spam-note i {
	font-size: 16px;
	color: #80651d;
}
.payment-spam-note strong {
	color: #4c566a;
}
.payment-ready-panel {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 19px 21px;
	border: 1px solid #dce4f3;
	border-radius: 13px;
	background: #f7f9ff;
}
.payment-ready-panel > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: #e9efff;
	font-size: 18px;
	color: #2855bd;
}
.payment-ready-panel > div {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.payment-ready-panel strong {
	font-size: 13px;
	color: #283754;
}
.payment-ready-panel span {
	font-size: 12px;
	color: #6b7890;
}
.payment-success-actions {
	display: flex;
	justify-content: center;
	gap: 11px;
	margin-top: 27px;
}
.payment-success-button,
.payment-success-button:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 47px;
	padding: 0 20px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.payment-success-primary,
.payment-success-primary:visited {
	border: 1px solid #2455c5;
	background: linear-gradient(135deg, #2455c5 0%, #4b3bbd 100%);
	box-shadow: 0 9px 19px rgba(45, 69, 184, .2);
	color: #fff;
}
.payment-success-secondary,
.payment-success-secondary:visited {
	border: 1px solid #cbd5e8;
	background: #fff;
	color: #334a80;
}
.payment-success-button:hover {
	transform: translateY(-1px);
}
.payment-success-primary:hover {
	box-shadow: 0 12px 23px rgba(45, 69, 184, .27);
}
.payment-success-secondary:hover {
	background: #f7f9fd;
}
.payment-success-button:focus-visible {
	outline: 3px solid rgba(40, 90, 201, .27);
	outline-offset: 3px;
}
.payment-security-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 16px;
	font-size: 11px;
	color: #7a8599;
}
.payment-security-note i {
	color: #368067;
}

@media only screen and (max-width: 640px) {
	.page-paymentapproved .bodydiv {
		padding: 30px 14px 42px;
	}
	.payment-success-card {
		padding: 31px 21px 25px;
		border-radius: 16px;
	}
	.payment-success-icon {
		width: 60px;
		height: 60px;
		font-size: 22px;
	}
	.payment-step-list {
		grid-template-columns: 1fr;
		gap: 17px;
	}
	.payment-success-actions {
		flex-direction: column-reverse;
	}
	.payment-success-button {
		width: 100%;
	}
}

/* Unconfirmed account page */
.page-notconfirmed .bodydiv {
	padding: 46px 24px 58px;
	background: radial-gradient(circle at 50% 0%, rgba(64, 79, 194, .1), transparent 31%), linear-gradient(180deg, #f8faff 0%, #f3f6fc 100%);
}
.page-notconfirmed .notconfirmed {
	width: 100%;
}
.confirmation-pending-workspace {
	width: min(720px, 100%);
	margin: 0 auto;
	color: #1d2943;
}
.confirmation-pending-card {
	padding: 38px 42px 32px;
	border: 1px solid #dce3f1;
	border-top: 4px solid #4b55c4;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 18px 45px rgba(31, 51, 101, .11);
	text-align: left;
}
.confirmation-pending-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	margin: -3px auto 20px;
	border: 7px solid #eceeff;
	border-radius: 50%;
	background: linear-gradient(135deg, #2855bd 0%, #5a3ac2 100%);
	box-shadow: 0 8px 20px rgba(61, 72, 185, .21);
	font-size: 23px;
	color: #fff;
}
.confirmation-pending-heading {
	max-width: 570px;
	margin: 0 auto 23px;
	text-align: center;
}
.confirmation-pending-eyebrow {
	display: block;
	margin-bottom: 7px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #4a42b4;
}
.confirmation-pending-heading h1 {
	margin: 0;
	font-size: clamp(27px, 4vw, 35px);
	line-height: 1.17;
	letter-spacing: -.025em;
	color: #18264a;
}
.confirmation-pending-heading p {
	margin: 11px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: #68758d;
}
.confirmation-email-panel {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 22px;
	padding: 17px 19px;
	border: 1px solid #d9e2f4;
	border-radius: 13px;
	background: #f5f8ff;
}
.confirmation-email-panel > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 39px;
	height: 39px;
	border-radius: 10px;
	background: #e5ecff;
	font-size: 16px;
	color: #2855bd;
}
.confirmation-email-panel > div {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 3px;
}
.confirmation-email-panel span {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #748099;
}
.confirmation-email-panel strong {
	overflow-wrap: anywhere;
	font-size: 14px;
	color: #2b3c61;
}
.confirmation-checklist {
	display: grid;
	gap: 12px;
	padding: 0 4px;
}
.confirmation-check-item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 13px;
	line-height: 1.5;
	color: #4f5d75;
}
.confirmation-check-item i {
	display: inline-flex;
	flex: 0 0 23px;
	align-items: center;
	justify-content: center;
	width: 23px;
	height: 23px;
	margin-top: -1px;
	border-radius: 50%;
	background: #e8f6f0;
	font-size: 10px;
	color: #27805f;
}
.confirmation-folder-note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 22px 0 20px;
	padding: 13px 15px;
	border: 1px solid #eadfab;
	border-radius: 10px;
	background: #fffbeb;
	font-size: 12px;
	line-height: 1.5;
	color: #6f5a20;
}
.confirmation-folder-note i {
	margin-top: 2px;
	color: #9b7611;
}
.confirmation-login-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 49px;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: 11px;
	background: linear-gradient(135deg, #2455c5 0%, #4b3bbd 100%);
	box-shadow: 0 9px 19px rgba(45, 69, 184, .21);
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	color: #fff;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease;
}
.confirmation-login-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 23px rgba(45, 69, 184, .28);
}
.confirmation-login-button:focus-visible,
.confirmation-cancel-button:focus-visible {
	outline: 3px solid rgba(40, 90, 201, .27);
	outline-offset: 3px;
}
.confirmation-cancel-panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	margin-top: 26px;
	padding-top: 24px;
	border-top: 1px solid #e5e9f2;
}
.confirmation-cancel-panel > div {
	flex: 1;
}
.confirmation-cancel-panel strong {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	color: #404a60;
}
.confirmation-cancel-panel p {
	margin: 0;
	font-size: 11px;
	line-height: 1.55;
	color: #7a8498;
}
.confirmation-cancel-button {
	flex: 0 0 auto;
	min-height: 39px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid #ddc5c8;
	border-radius: 9px;
	background: #fff;
	font-family: inherit;
	font-size: 11px;
	font-weight: 800;
	color: #a33b48;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease;
}
.confirmation-cancel-button:hover {
	border-color: #c99198;
	background: #fff7f8;
}
.confirmation-help-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 16px;
	font-size: 11px;
	color: #7a8599;
}
.confirmation-help-note i {
	color: #5267ac;
}

/* Confirmation dialog for the cancellation action */
.page-notconfirmed #confirmpopup {
	padding: 20px;
	background: rgba(20, 27, 52, .58);
}
.page-notconfirmed #confirmpopup .modal-content {
	width: min(430px, calc(100% - 28px));
	height: auto;
	margin: 15vh auto 0;
	padding: 27px;
	border: 1px solid #e1e5ee;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 24px 65px rgba(12, 20, 44, .28);
	font-size: 15px;
	line-height: 1.55;
	color: #2a344b;
}
.page-notconfirmed #confirmpopup .modal-content > div:first-child {
	padding: 0 0 22px !important;
}
.page-notconfirmed #confirmpopup .modal-content > div:last-child {
	display: flex;
	justify-content: center;
	gap: 10px;
}
.page-notconfirmed #confirmpopup .modal-content button {
	min-width: 105px;
	min-height: 41px;
	margin: 0;
	padding: 0 14px;
	border-radius: 9px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}
.page-notconfirmed #confirmpopup .modal-content button:first-child {
	border: 1px solid #b93445;
	background: #b93445;
	color: #fff;
}
.page-notconfirmed #confirmpopup .modal-content button:last-child {
	border: 1px solid #cad3e4;
	background: #fff;
	color: #344664;
}

@media only screen and (max-width: 620px) {
	.page-notconfirmed .bodydiv {
		padding: 29px 13px 42px;
	}
	.confirmation-pending-card {
		padding: 31px 20px 25px;
		border-radius: 16px;
	}
	.confirmation-pending-icon {
		width: 58px;
		height: 58px;
		font-size: 20px;
	}
	.confirmation-cancel-panel {
		align-items: stretch;
		flex-direction: column;
		gap: 14px;
	}
	.confirmation-cancel-button {
		width: 100%;
	}
}

/* Coordinated remaining-template redesign */
.page-addgroup .bodydiv,
.page-adminreview .bodydiv,
.page-displayquestion .bodydiv,
.page-index .bodydiv,
.page-newproblems .bodydiv,
.page-paymentpage .bodydiv,
.page-problems .bodydiv,
.page-testcomplete .bodydiv,
.page-viewproblems .bodydiv {
	padding: 42px 28px 58px;
	background: radial-gradient(circle at 8% 7%, rgba(72, 61, 190, .08), transparent 25%), linear-gradient(180deg, #f8faff 0%, #f3f6fc 100%);
}
.page-addgroup .addgroup,
.page-adminreview .adminreview,
.page-displayquestion .displayquestion,
.page-index .index,
.page-newproblems .newproblems,
.page-paymentpage .paymentpage,
.page-problems .problems,
.page-testcomplete .testcomplete,
.page-viewproblems .viewproblems {
	width: 100%;
}

/* Shared administrator forms */
.admin-form-workspace {
	width: min(720px, 100%);
	margin: 0 auto;
}
.admin-form-card,
.question-editor-card,
.admin-review-editor,
.problem-library-workspace,
.problem-library-detail,
.test-complete-card {
	border: 1px solid #dce3f1;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 16px 42px rgba(31, 51, 101, .1);
}
.admin-form-header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 28px 32px;
	border-bottom: 1px solid #e5eaf3;
	background: linear-gradient(135deg, #f8faff 0%, #f3f1ff 100%);
}
.admin-form-icon,
.question-editor-icon,
.problem-library-hero-icon {
	display: inline-flex;
	flex: 0 0 49px;
	align-items: center;
	justify-content: center;
	width: 49px;
	height: 49px;
	border-radius: 13px;
	background: linear-gradient(135deg, #2455c5 0%, #4b3bbd 100%);
	box-shadow: 0 8px 18px rgba(45, 69, 184, .2);
	font-size: 19px;
	color: #fff;
}
.admin-form-eyebrow,
.question-editor-eyebrow,
.question-editor-kicker,
.admin-review-eyebrow,
.problem-library-eyebrow,
.test-complete-eyebrow,
.stored-solution-eyebrow,
.account-notice-eyebrow,
.simple-success-eyebrow,
.home-eyebrow {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #4b47b4;
}
.admin-form-header h1,
.question-editor-header h1,
.problem-library-hero h1 {
	margin: 3px 0 4px;
	font-size: 24px;
	line-height: 1.2;
	color: #1d2943;
}
.admin-form-header p,
.question-editor-header p,
.problem-library-hero p {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: #718098;
}
.admin-form-body {
	padding: 30px 32px 33px;
}
.admin-code-panel {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-bottom: 25px;
	padding: 21px;
	border: 1px dashed #b9c8e6;
	border-radius: 13px;
	background: #f7f9ff;
	text-align: center;
}
.admin-code-panel span {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #72809a;
}
.admin-code-panel strong {
	margin: 5px 0 3px;
	font-size: 29px;
	letter-spacing: .12em;
	color: #244eae;
}
.admin-code-panel small {
	font-size: 11px;
	color: #7a8699;
}
.admin-field-grid,
.question-metadata-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
.admin-field label,
.question-editor-field label,
.admin-review-field label,
.problem-library-filter label {
	display: block;
	margin-bottom: 7px;
	font-size: 12px;
	font-weight: 800;
	color: #35435d;
}
.admin-control {
	display: flex;
	align-items: center;
	height: 48px;
	padding: 0 13px;
	border: 1px solid #cad4e5;
	border-radius: 10px;
	background: #fff;
}
.admin-control:focus-within,
.problem-library-select:focus-within {
	border-color: #6c83d5;
	box-shadow: 0 0 0 4px rgba(23, 67, 183, .09);
}
.admin-control i {
	width: 19px;
	color: #8995aa;
}
.admin-control input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0 7px;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	font-size: 14px;
	color: #263552;
}
.admin-primary-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 47px;
	margin-top: 24px;
	padding: 0 20px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(135deg, #2455c5 0%, #4b3bbd 100%);
	box-shadow: 0 8px 18px rgba(45, 69, 184, .2);
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	color: #fff;
	cursor: pointer;
}
.admin-form-body > .admin-primary-button {
	width: 100%;
}
.admin-success-state,
.admin-empty-state {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 50px 30px;
	text-align: center;
}
.admin-success-state > span,
.admin-empty-state > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border: 7px solid #e8f6f0;
	border-radius: 50%;
	background: #2eac79;
	font-size: 22px;
	color: #fff;
}
.admin-success-state h2,
.admin-empty-state h1 {
	margin: 18px 0 7px;
	font-size: 23px;
	color: #1f2d49;
}
.admin-success-state p,
.admin-empty-state p {
	margin: 0;
	font-size: 13px;
	color: #718098;
}
.admin-success-state a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	padding: 11px 16px;
	border-radius: 9px;
	background: #eef2ff;
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
	color: #294ca8;
}
.admin-empty-state {
	width: min(600px, 100%);
	margin: 0 auto;
	border: 1px solid #dce3f1;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 14px 36px rgba(31, 51, 101, .09);
}
.admin-empty-state > span {
	border-color: #e9edfa;
	background: #6071aa;
}

/* Home page */
.home-landing {
	width: min(1140px, 100%);
	margin: 0 auto;
}
.home-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
	overflow: hidden;
	min-height: 430px;
	border-radius: 24px;
	background: linear-gradient(135deg, #142e75 0%, #303d9c 55%, #5632a8 100%);
	box-shadow: 0 20px 50px rgba(31, 51, 101, .18);
	color: #fff;
}
.home-hero-copy {
	position: relative;
	z-index: 2;
	align-self: center;
	padding: 54px;
}
.home-eyebrow {
	color: #cfd8ff;
}
.home-hero h1 {
	margin: 12px 0 17px;
	font-size: clamp(36px, 5vw, 54px);
	line-height: 1.08;
	letter-spacing: -.035em;
	color: #fff;
}
.home-hero-copy > p {
	max-width: 620px;
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: #dce4ff;
}
.home-message {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-top: 18px;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 10px;
	background: rgba(255, 255, 255, .1);
	font-size: 12px;
	line-height: 1.5;
	color: #fff;
}
.home-message .messagestyle2,
.home-message .messagestyle {
	font-size: inherit;
	color: inherit;
}
.home-message a {
	font-weight: 800;
	color: #fff;
}
.home-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
	margin-top: 27px;
}
.home-action,
.home-action:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 47px;
	padding: 0 19px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
}
.home-action-primary,
.home-action-primary:visited {
	background: #fff;
	box-shadow: 0 9px 20px rgba(15, 25, 73, .2);
	color: #283f9e;
}
.home-action-secondary,
.home-action-secondary:visited {
	border: 1px solid rgba(255, 255, 255, .38);
	background: rgba(255, 255, 255, .08);
	color: #fff;
}
.home-hero-visual {
	position: relative;
	min-height: 360px;
}
.home-visual-orbit {
	position: absolute;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
}
.home-visual-orbit-one {
	top: 48px;
	right: 43px;
	width: 285px;
	height: 285px;
}
.home-visual-orbit-two {
	top: 93px;
	right: 88px;
	width: 195px;
	height: 195px;
}
.home-math-card {
	position: absolute;
	top: 137px;
	right: 74px;
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 225px;
	padding: 25px 20px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 17px;
	background: rgba(255, 255, 255, .14);
	box-shadow: 0 18px 40px rgba(10, 18, 55, .18);
	backdrop-filter: blur(7px);
	text-align: center;
}
.home-math-card i {
	margin-bottom: 12px;
	font-size: 27px;
	color: #fff;
}
.home-math-card strong {
	font-size: 16px;
}
.home-math-card span {
	margin-top: 5px;
	font-size: 11px;
	color: #dbe3ff;
}
.home-math-symbol {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 13px;
	background: rgba(255, 255, 255, .16);
	font-family: Georgia, serif;
	font-size: 21px;
	color: #fff;
}
.home-symbol-one { top: 69px; right: 84px; }
.home-symbol-two { bottom: 60px; right: 55px; }
.home-symbol-three { top: 121px; left: 20px; }
.home-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 21px;
}
.home-feature-grid article {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 21px;
	border: 1px solid #dce3f1;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 8px 20px rgba(31, 51, 101, .06);
}
.home-feature-grid article > span {
	display: inline-flex;
	flex: 0 0 39px;
	align-items: center;
	justify-content: center;
	width: 39px;
	height: 39px;
	border-radius: 10px;
	background: #edf1ff;
	color: #3853b0;
}
.home-feature-grid h2 {
	margin: 1px 0 5px;
	font-size: 14px;
	color: #263552;
}
.home-feature-grid p {
	margin: 0;
	font-size: 11px;
	line-height: 1.55;
	color: #728098;
}

/* Shared site dialogs */
.site-modal {
	padding: 20px;
	background: rgba(17, 24, 48, .6);
}
.site-modal-open {
	overflow: hidden;
}
.site-modal .site-modal-card {
	width: min(430px, calc(100% - 24px));
	height: auto;
	margin: 15vh auto 0;
	padding: 30px;
	border: 1px solid #e0e5ef;
	border-radius: 17px;
	background: #fff;
	box-shadow: 0 25px 70px rgba(9, 17, 40, .3);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	color: #344057;
}
.site-modal-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	border-radius: 13px;
	background: #eaf0ff;
	font-size: 19px;
	color: #3155b6;
}
.site-modal-icon-warning {
	background: #fff0f1;
	color: #b23d4c;
}
.site-modal h2 {
	margin: 0 0 8px;
	font-size: 21px;
	color: #222f48;
}
.site-modal-message {
	margin-bottom: 23px;
	color: #68748a;
}
.site-modal-actions {
	display: flex;
	justify-content: center;
	gap: 10px;
}
.site-modal-button {
	min-width: 125px;
	min-height: 42px;
	margin: 0;
	padding: 0 15px;
	border-radius: 9px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}
.site-modal-primary {
	border: 1px solid #2c55bb;
	background: #2c55bb;
	color: #fff;
}
.site-modal-confirm {
	border: 1px solid #b93c4d;
	background: #b93c4d;
	color: #fff;
}
.site-modal-cancel {
	border: 1px solid #cbd4e4;
	background: #fff;
	color: #3b4c68;
}
.site-modal-processing .site-modal-message {
	margin-bottom: 0;
}

/* Administrative review and editor */
.admin-review-workspace,
.admin-preview-workspace {
	width: min(1000px, 100%);
	margin: 0 auto;
}
.admin-review-editor {
	margin-top: 22px;
	padding: 28px;
}
.admin-review-editor > header,
.question-editor-section > header,
.stored-solution-section > header,
.problem-library-results-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}
.admin-review-editor > header > span,
.question-editor-section > header > span,
.stored-solution-section > header > span {
	display: inline-flex;
	flex: 0 0 39px;
	align-items: center;
	justify-content: center;
	width: 39px;
	height: 39px;
	border-radius: 10px;
	background: #edf1ff;
	color: #3954b0;
}
.admin-review-editor h2,
.question-editor-section h2,
.stored-solution-section h2 {
	margin: 2px 0 3px;
	font-size: 17px;
	color: #263552;
}
.admin-review-editor header p {
	margin: 0;
	font-size: 11px;
	color: #778399;
}
.admin-review-field + .admin-review-form {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #e5eaf3;
}
.admin-review-field textarea,
.question-editor-field textarea,
.question-editor-field input,
.question-editor-field select {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #cad4e5;
	border-radius: 9px;
	background: #fbfcff;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.55;
	color: #263552;
	outline: 0;
}
.admin-review-field textarea,
.question-editor-field textarea {
	min-height: 92px;
	padding: 12px 13px;
	resize: vertical;
}
.admin-review-field textarea:focus,
.question-editor-field textarea:focus,
.question-editor-field input:focus,
.question-editor-field select:focus {
	border-color: #6c83d5;
	box-shadow: 0 0 0 4px rgba(23, 67, 183, .08);
}
.question-editor-workspace {
	width: min(1120px, 100%);
	margin: 0 auto;
}
.question-editor-card {
	overflow: hidden;
}
.question-editor-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 27px 31px;
	border-bottom: 1px solid #e4e9f2;
	background: linear-gradient(135deg, #f8faff 0%, #f3f1ff 100%);
}
.question-editor-heading {
	display: flex;
	align-items: center;
	gap: 15px;
}
.question-editor-identifiers {
	display: flex;
	gap: 8px;
}
.question-editor-identifiers span {
	padding: 7px 10px;
	border: 1px solid #d8e0ef;
	border-radius: 8px;
	background: #fff;
	font-size: 10px;
	color: #748096;
}
.question-editor-identifiers strong {
	color: #314774;
}
.question-editor-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 15px 31px;
	border-bottom: 1px solid #e5eaf3;
	background: #fbfcff;
}
.question-editor-toolbar label {
	font-size: 11px;
	font-weight: 800;
	color: #56647d;
}
.question-editor-toolbar > div {
	display: flex;
	gap: 8px;
}
.question-editor-toolbar input {
	width: 105px;
	height: 39px;
	padding: 0 10px;
	border: 1px solid #cad4e5;
	border-radius: 8px;
	font: inherit;
	font-size: 12px;
}
.question-editor-toolbar button,
.question-editor-footer button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 39px;
	padding: 0 14px;
	border: 0;
	border-radius: 8px;
	background: #2c55bb;
	font-family: inherit;
	font-size: 11px;
	font-weight: 800;
	color: #fff;
	cursor: pointer;
}
.question-editor-body {
	display: grid;
	gap: 20px;
	padding: 27px 31px;
}
.question-editor-section {
	padding: 23px;
	border: 1px solid #e1e6f0;
	border-radius: 13px;
	background: #fff;
}
.question-editor-field + .question-editor-field {
	margin-top: 16px;
}
.question-editor-field input,
.question-editor-field select {
	height: 44px;
	padding: 0 11px;
}
.question-option-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 15px;
	margin-top: 17px;
}
.question-option-grid .question-editor-field + .question-editor-field {
	margin-top: 0;
}
.question-option-field label {
	display: flex;
	align-items: center;
	gap: 7px;
}
.question-option-field label > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 23px;
	height: 23px;
	border-radius: 7px;
	background: #edf1f8;
	font-size: 10px;
	color: #50617f;
}
.question-option-field label small {
	margin-left: auto;
	font-size: 9px;
	color: #27805f;
}
.question-option-correct textarea {
	border-color: #9ed3bf;
	background: #f7fcfa;
}
.question-metadata-grid .question-editor-field + .question-editor-field {
	margin-top: 0;
}
.question-ready-toggle {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 19px;
	padding: 14px;
	border: 1px solid #dce4f1;
	border-radius: 10px;
	background: #f9fbff;
	cursor: pointer;
}
.question-ready-toggle input {
	position: absolute;
	opacity: 0;
}
.question-ready-toggle > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	border: 2px solid #b9c4d8;
	border-radius: 8px;
	background: #fff;
	font-size: 11px;
	color: transparent;
}
.question-ready-toggle input:checked + span {
	border-color: #2e9a70;
	background: #2e9a70;
	color: #fff;
}
.question-ready-toggle div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.question-ready-toggle strong { font-size: 12px; color: #35435e; }
.question-ready-toggle small { font-size: 10px; color: #7a869a; }
.question-editor-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 18px 31px;
	border-top: 1px solid #e4e9f2;
	background: #f8faff;
}
.question-editor-footer a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 800;
	text-decoration: none;
	color: #526487;
}

/* Simple account and payment notices */
.simple-success-workspace,
.account-notice-workspace {
	display: flex;
	justify-content: center;
	width: 100%;
}
.simple-success-card,
.account-notice-card {
	width: min(590px, 100%);
	padding: 45px 38px;
	border: 1px solid #dce3f1;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 17px 44px rgba(31, 51, 101, .1);
	text-align: center;
}
.simple-success-icon,
.account-notice-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 18px;
	border: 7px solid #e8f6f0;
	border-radius: 50%;
	background: #2eac79;
	font-size: 22px;
	color: #fff;
}
.account-notice-icon {
	border-color: #ebeffd;
	background: linear-gradient(135deg, #2855bd, #563ab9);
}
.simple-success-card h1,
.account-notice-card h1 {
	margin: 7px 0 10px;
	font-size: 29px;
	line-height: 1.2;
	color: #1d2943;
}
.simple-success-card > p,
.account-notice-message {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #69768d;
}
.account-notice-message .messagestyle,
.account-notice-message .messagestyle2 {
	font-size: inherit;
	color: inherit;
}
.simple-success-actions,
.account-notice-actions {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 25px;
}
.simple-success-actions a,
.account-notice-actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 45px;
	padding: 0 17px;
	border-radius: 9px;
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
}
.simple-success-actions a:first-child,
.account-notice-primary {
	background: linear-gradient(135deg, #2455c5 0%, #4b3bbd 100%);
	box-shadow: 0 8px 18px rgba(45, 69, 184, .19);
	color: #fff;
}
.simple-success-actions a:last-child,
.account-notice-secondary {
	border: 1px solid #cbd5e8;
	background: #fff;
	color: #374d79;
}

/* Stored solution and question preview fragments */
.stored-solution-preview,
.question-preview-card {
	display: grid;
	gap: 18px;
	width: 100%;
}
.stored-solution-section,
.question-preview-card {
	padding: 24px;
	border: 1px solid #dfe5ef;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 8px 22px rgba(31, 51, 101, .06);
}
.stored-solution-content,
.question-preview-prompt,
.question-preview-solution section {
	font-size: 14px;
	line-height: 1.75;
	color: #293852;
}
.stored-choice-list,
.question-preview-options {
	display: grid;
	gap: 9px;
}
.stored-choice,
.question-preview-option {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 13px;
	border: 1px solid #dce3ef;
	border-radius: 10px;
	background: #fbfcff;
	font-size: 13px;
	color: #35435c;
}
.stored-choice-letter,
.question-preview-letter {
	display: inline-flex;
	flex: 0 0 28px;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: #edf1f8;
	font-size: 11px;
	font-weight: 800;
	color: #4a5b79;
}
.stored-choice-correct,
.question-preview-option.is-correct {
	border-color: #9ed3bf;
	background: #f2fbf7;
}
.stored-choice-correct .stored-choice-letter,
.question-preview-option.is-correct .question-preview-letter {
	background: #2e9a70;
	color: #fff;
}
.stored-choice > i,
.question-preview-option > i {
	margin-left: auto;
	color: #27805f;
}
.stored-choice-prefix,
.question-preview-prefix {
	margin-right: 5px;
	font-weight: 700;
	color: #5f6d84;
}
.stored-solution-diagram,
.question-preview-diagram {
	margin-top: 18px;
}
.question-preview-card {
	padding: 0;
	overflow: hidden;
}
.question-preview-header,
.admin-preview-heading {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 20px 24px;
	border-bottom: 1px solid #e4e9f2;
	background: linear-gradient(135deg, #f8faff, #f2f0ff);
}
.question-preview-header > span,
.admin-preview-heading > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 41px;
	height: 41px;
	border-radius: 11px;
	background: #e8edff;
	color: #3d54b2;
}
.question-preview-header > div > div,
.admin-preview-heading > div > div {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #5968a4;
}
.question-preview-header h2,
.admin-preview-heading h1 {
	margin: 2px 0 0;
	font-size: 18px;
	color: #263552;
}
.admin-preview-heading {
	margin-bottom: 20px;
	border: 1px solid #dce3f1;
	border-radius: 14px;
	box-shadow: 0 8px 22px rgba(31, 51, 101, .06);
}
.admin-preview-heading p {
	margin: 4px 0 0;
	font-size: 11px;
	color: #728098;
}
.question-preview-body {
	padding: 24px;
}
.question-preview-options {
	margin-top: 18px;
}
.question-preview-solution {
	margin-top: 20px;
	padding-top: 19px;
	border-top: 1px solid #e4e9f2;
}
.question-preview-solution > div {
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #4a5eb0;
}

/* Test completion */
.test-complete-workspace {
	width: min(850px, 100%);
	margin: 0 auto;
}
.test-complete-card {
	overflow: hidden;
}
.test-complete-hero {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 38px 30px 29px;
	border-bottom: 1px solid #e4e9f2;
	background: linear-gradient(135deg, #f5fbf8 0%, #f4f3ff 100%);
	text-align: center;
}
.test-complete-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 63px;
	height: 63px;
	margin-bottom: 15px;
	border: 7px solid #def3ea;
	border-radius: 50%;
	background: #2eac79;
	font-size: 22px;
	color: #fff;
}
.test-complete-hero h1 {
	margin: 7px 0 8px;
	font-size: 31px;
	color: #1e2c48;
}
.test-complete-hero p {
	margin: 0;
	font-size: 13px;
	color: #718098;
}
.test-result-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	padding: 25px 28px;
}
.test-result-card {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 15px;
	border: 1px solid #dfe5ef;
	border-radius: 11px;
	background: #fbfcff;
}
.test-result-card > span {
	display: inline-flex;
	flex: 0 0 34px;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: #eaf0ff;
	color: #3756b2;
}
.test-result-card > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.test-result-card small {
	font-size: 9px;
	font-weight: 800;
	text-transform: uppercase;
	color: #758198;
}
.test-result-card strong {
	font-size: 16px;
	color: #273653;
}
.test-result-score > span {
	background: #fff4d8;
	color: #9a7313;
}
.test-subject-results {
	margin: 0 28px 27px;
	padding: 22px;
	border: 1px solid #e0e5ef;
	border-radius: 13px;
}
.test-subject-results > header {
	margin-bottom: 15px;
}
.test-subject-results h2 {
	margin: 3px 0 0;
	font-size: 18px;
	color: #263552;
}
.test-subject-list {
	display: grid;
	gap: 8px;
}
.test-subject-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 11px 13px;
	border-radius: 9px;
	background: #f7f9fd;
}
.test-subject-row > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.test-subject-row strong { font-size: 12px; color: #34415b; }
.test-subject-row span { font-size: 10px; color: #778399; }
.test-subject-percent {
	padding: 5px 8px;
	border-radius: 999px;
	background: #e9efff;
	font-weight: 800;
	color: #3854b0 !important;
}
.test-subject-empty {
	padding: 15px;
	border-radius: 9px;
	background: #f7f9fd;
	font-size: 12px;
	text-align: center;
	color: #778399;
}
.test-complete-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 20px 28px;
	border-top: 1px solid #e4e9f2;
	background: #f8faff;
}
.test-complete-action,
.test-complete-action:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 43px;
	padding: 0 15px;
	border-radius: 9px;
	font-size: 11px;
	font-weight: 800;
	text-decoration: none;
}
.test-complete-primary,
.test-complete-primary:visited {
	background: linear-gradient(135deg, #2455c5, #4b3bbd);
	color: #fff;
}
.test-complete-secondary,
.test-complete-secondary:visited {
	border: 1px solid #cad4e5;
	background: #fff;
	color: #40547a;
}

/* Problem library */
.problem-library-workspace,
.problem-library-detail {
	width: min(1050px, 100%);
	margin: 0 auto;
	overflow: hidden;
}
.problem-library-hero {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 28px 31px;
	border-bottom: 1px solid #e5eaf3;
	background: linear-gradient(135deg, #f8faff 0%, #f3f1ff 100%);
}
.problem-library-subjects {
	display: flex;
	overflow-x: auto;
	gap: 7px;
	padding: 16px 23px;
	border-bottom: 1px solid #e5eaf3;
	background: #fff;
}
.problem-library-subjects a,
.problem-library-subjects a:visited {
	flex: 0 0 auto;
	padding: 8px 11px;
	border: 1px solid #d6ddeb;
	border-radius: 999px;
	background: #fff;
	font-size: 10px;
	font-weight: 800;
	text-decoration: none;
	color: #54637e;
}
.problem-library-subjects a.is-active {
	border-color: #365ac0;
	background: #365ac0;
	color: #fff;
}
.problem-library-filter {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	padding: 22px 25px;
	border-bottom: 1px solid #e5eaf3;
	background: #fafbfe;
}
.problem-library-filter > div {
	flex: 1;
}
.problem-library-select {
	display: flex;
	align-items: center;
	height: 44px;
	padding: 0 11px;
	border: 1px solid #cad4e5;
	border-radius: 9px;
	background: #fff;
}
.problem-library-select i {
	width: 19px;
	color: #8995aa;
}
.problem-library-select select {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	font-size: 12px;
	color: #30405f;
}
.problem-library-filter button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: 9px;
	background: #2d55ba;
	font-family: inherit;
	font-size: 11px;
	font-weight: 800;
	color: #fff;
	cursor: pointer;
}
.problem-library-results {
	padding: 25px;
}
.problem-library-results-heading {
	justify-content: space-between;
}
.problem-library-results-heading span {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6472a7;
}
.problem-library-results-heading h2 {
	margin: 3px 0 0;
	font-size: 18px;
	color: #263552;
}
.problem-library-results-heading > i {
	color: #9aa5b8;
}
.problem-library-list {
	display: grid;
	gap: 13px;
}
.problem-library-list-item {
	overflow: hidden;
	border: 1px solid #dfe5ef;
	border-radius: 11px;
	background: #fff;
}
.problem-library-list-item > header {
	padding: 10px 14px;
	border-bottom: 1px solid #e6eaf2;
	background: #f8faff;
}
.problem-library-list-item > header a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 11px;
	font-weight: 800;
	text-decoration: none;
	color: #3153aa;
}
.problem-library-list-question {
	padding: 15px;
	font-size: 13px;
	line-height: 1.65;
	color: #2f3d58;
}
.problem-library-list-solution {
	padding: 13px 15px;
	border-top: 1px solid #e6eaf2;
	background: #fcfcfe;
	font-size: 12px;
	line-height: 1.6;
	color: #56637a;
}
.problem-library-list-solution > span {
	display: block;
	margin-bottom: 7px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #4d60aa;
}
.problem-library-empty,
.problem-library-start {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 30px;
	border: 1px dashed #cfd8e8;
	border-radius: 11px;
	background: #fafbfe;
	text-align: left;
	color: #7a869b;
}
.problem-library-empty {
	flex-direction: column;
	text-align: center;
}
.problem-library-start {
	margin: 25px;
}
.problem-library-start i,
.problem-library-empty i {
	font-size: 20px;
	color: #6c7fb8;
}
.problem-library-start > div,
.problem-library-empty {
	font-size: 11px;
}
.problem-library-start strong,
.problem-library-empty strong {
	display: block;
	margin-bottom: 3px;
	font-size: 12px;
	color: #4d5b74;
}
.problem-library-detail-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 27px;
	border-bottom: 1px solid #e4e9f2;
	background: linear-gradient(135deg, #f8faff, #f2f0ff);
}
.problem-library-back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 800;
	text-decoration: none;
	color: #405a9c;
}
.problem-library-detail-header h1 {
	margin: 3px 0 0;
	font-size: 20px;
	color: #263552;
}
.problem-library-question,
.problem-library-solution {
	padding: 27px;
}
.problem-library-solution {
	border-top: 1px solid #e4e9f2;
	background: #fbfcff;
}
.problem-library-section-label {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 14px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #4d60aa;
}
.problem-library-prompt,
.problem-library-solution-content {
	font-size: 14px;
	line-height: 1.75;
	color: #293852;
}
.problem-library-options {
	display: grid;
	gap: 9px;
	margin-top: 20px;
}
.problem-library-option {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 13px;
	border: 1px solid #dce3ef;
	border-radius: 10px;
	background: #fff;
	font-size: 13px;
	color: #35435c;
}
.problem-library-option-letter {
	display: inline-flex;
	flex: 0 0 28px;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: #edf1f8;
	font-size: 11px;
	font-weight: 800;
	color: #4a5b79;
}
.problem-library-option-correct {
	border-color: #9ed3bf;
	background: #f2fbf7;
}
.problem-library-option-correct .problem-library-option-letter {
	background: #2e9a70;
	color: #fff;
}
.problem-library-correct-label {
	margin-left: auto;
	font-size: 9px;
	font-weight: 800;
	text-transform: uppercase;
	color: #27805f;
}
.problem-library-option-prefix {
	margin-right: 5px;
	font-weight: 700;
	color: #5f6d84;
}

/* Administrator sidebar */
.admin-sidebar-card {
	overflow: hidden;
	border: 1px solid #dce3f1;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(31, 51, 101, .09);
	text-align: left;
}
.admin-sidebar-header {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 18px;
	border-bottom: 1px solid #e4e9f2;
	background: linear-gradient(135deg, #f7f9ff, #f2f0ff);
}
.admin-sidebar-header > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #e7ecff;
	color: #3c54b0;
}
.admin-sidebar-header div div {
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6573a8;
}
.admin-sidebar-header h2 {
	margin: 2px 0 0;
	font-size: 15px;
	color: #273653;
}
.admin-sidebar-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	padding: 14px 16px 0;
}
.admin-sidebar-stats > div {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 10px;
	border: 1px solid #e0e6f0;
	border-radius: 9px;
	background: #fafbfe;
}
.admin-sidebar-stats span { font-size: 8px; font-weight: 800; text-transform: uppercase; color: #7d8799; }
.admin-sidebar-stats strong { margin-top: 3px; font-size: 14px; color: #35435d; }
.admin-sidebar-stats small { margin-top: 2px; font-size: 9px; color: #728098; }
.admin-sidebar-form {
	display: grid;
	gap: 13px;
	padding: 17px;
}
.admin-sidebar-field label {
	display: block;
	margin-bottom: 5px;
	font-size: 9px;
	font-weight: 800;
	text-transform: uppercase;
	color: #68758c;
}
.admin-sidebar-field select,
.admin-sidebar-search {
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	border: 1px solid #cad4e5;
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 11px;
	color: #34435f;
}
.admin-sidebar-field select {
	padding: 0 9px;
}
.admin-sidebar-search {
	display: flex;
	align-items: center;
	padding: 0 10px;
}
.admin-sidebar-search i {
	width: 17px;
	color: #8995aa;
}
.admin-sidebar-search input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
}
.admin-sidebar-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	font-weight: 700;
	color: #53617a;
	cursor: pointer;
}
.admin-sidebar-check input {
	position: absolute;
	opacity: 0;
}
.admin-sidebar-check > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	border: 2px solid #b8c4d8;
	border-radius: 6px;
	background: #fff;
	font-size: 9px;
	color: transparent;
}
.admin-sidebar-check input:checked + span {
	border-color: #3159bb;
	background: #3159bb;
	color: #fff;
}
.admin-sidebar-primary,
.admin-sidebar-secondary {
	width: 100%;
	min-height: 40px;
	margin: 0;
	border-radius: 8px;
	font-family: inherit;
	font-size: 10px;
	font-weight: 800;
	cursor: pointer;
}
.admin-sidebar-primary {
	border: 0;
	background: #2d55ba;
	color: #fff;
}
.admin-sidebar-secondary {
	border: 1px solid #d5bdc1;
	background: #fff;
	color: #a04450;
}
.admin-sidebar-card > footer {
	padding: 11px 16px;
	border-top: 1px solid #e4e9f2;
	background: #f8faff;
	font-size: 9px;
	text-align: center;
	color: #778399;
}
.admin-sidebar-card > footer strong {
	color: #425276;
}

@media only screen and (max-width: 900px) {
	.home-hero {
		grid-template-columns: 1fr;
	}
	.home-hero-visual {
		display: none;
	}
	.home-feature-grid {
		grid-template-columns: 1fr;
	}
	.test-result-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.question-editor-header {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media only screen and (max-width: 680px) {
	.page-addgroup .bodydiv,
	.page-adminreview .bodydiv,
	.page-displayquestion .bodydiv,
	.page-index .bodydiv,
	.page-newproblems .bodydiv,
	.page-paymentpage .bodydiv,
	.page-problems .bodydiv,
	.page-testcomplete .bodydiv,
	.page-viewproblems .bodydiv {
		padding: 28px 13px 42px;
	}
	.admin-form-card,
	.question-editor-card,
	.problem-library-workspace,
	.problem-library-detail,
	.test-complete-card {
		border-radius: 15px;
	}
	.admin-form-header,
	.question-editor-header,
	.problem-library-hero {
		padding: 22px 19px;
	}
	.admin-form-body,
	.question-editor-body {
		padding: 22px 19px;
	}
	.admin-field-grid,
	.question-metadata-grid,
	.question-option-grid {
		grid-template-columns: 1fr;
	}
	.question-editor-toolbar {
		align-items: stretch;
		flex-direction: column;
		padding: 14px 19px;
	}
	.question-editor-toolbar > div {
		width: 100%;
	}
	.question-editor-toolbar input {
		flex: 1;
		width: auto;
	}
	.question-editor-footer {
		align-items: stretch;
		flex-direction: column-reverse;
		padding: 16px 19px;
	}
	.question-editor-footer a,
	.question-editor-footer button {
		justify-content: center;
		width: 100%;
	}
	.home-hero {
		min-height: 0;
		border-radius: 17px;
	}
	.home-hero-copy {
		padding: 38px 24px;
	}
	.home-hero h1 {
		font-size: 34px;
	}
	.home-actions,
	.simple-success-actions,
	.account-notice-actions {
		align-items: stretch;
		flex-direction: column;
	}
	.home-action,
	.simple-success-actions a,
	.account-notice-actions a {
		width: 100%;
	}
	.simple-success-card,
	.account-notice-card {
		padding: 36px 21px;
	}
	.test-result-grid {
		grid-template-columns: 1fr;
		padding: 20px;
	}
	.test-subject-results {
		margin: 0 20px 21px;
		padding: 18px;
	}
	.test-complete-actions {
		align-items: stretch;
		flex-direction: column;
		padding: 18px 20px;
	}
	.test-complete-action {
		width: 100%;
	}
	.problem-library-hero {
		align-items: flex-start;
	}
	.problem-library-filter {
		align-items: stretch;
		flex-direction: column;
	}
	.problem-library-filter button {
		width: 100%;
	}
	.problem-library-results,
	.problem-library-question,
	.problem-library-solution {
		padding: 20px;
	}
	.problem-library-detail-header {
		align-items: flex-start;
		flex-direction: column-reverse;
	}
	.site-modal .site-modal-card {
		padding: 24px 20px;
	}
	.site-modal-actions {
		align-items: stretch;
		flex-direction: column;
	}
	.site-modal-button {
		width: 100%;
	}
}