/* ==UserStyle==
@name         Webassign Dark Theme
@author		  Sheen Patel
@namespace    https://github.com/PseudonymPatel/webassign-darkmode
@homepageURL  https://github.com/PseudonymPatel/webassign-darkmode
@updateURL    https://raw.githubusercontent.com/PseudonymPatel/webassign-darkmode/master/webassign-darkmode.user.css
@version      0.6.2
@license      MIT
@preprocessor less

@var color main-color "Main color for everything to be based on. Also try #000005" #121212
@var color border-color "Color to make borders" #676767
@var number first-layer-brightness "How bright to make first level of brightness (0 - 100%)" [8, 0, 100, 1, "%"]
@var number second-layer-brightness "brightness of second level of brightness (0 - 100%)" [12, 0, 100, 1, "%"]
@var color accent-color "Color to make blue things/accent" #1190d0
@var color main-text-color "Color to make majority of text." #bec0ca

==/UserStyle== */
@-moz-document domain("webassign.net") {

	/* -----------------------------------------
	*   Body and site-wide styling 
	*  -----------------------------------------
	*/
	body {
		background-color: @main-color;
		color: @main-text-color;
	}
	
	a,
	a:link {
		color: @accent-color;
	}

	#webAssignContent svg,
	#studentHeader svg {
		fill: @main-text-color;
	}
    
    html, body {
        background: @main-color;
    }
    
    .qContent .wa1given {
        color: @main-text-color
    }

	/* -------------
	*  Page header 
	* -------------
	*/
	#studentHeader {
		color: @main-text-color;
	}

	#studentHeader button {
		color: @accent-color;
	}

	/* Small language indicator color */
	#studentHeader div div div div {
		color: @main-text-color;
	}

	#studentHeader div div div div[lang]:hover {
		background-color: @accent-color;
	}

	#studentHeader div div div ul {
		background-color: @main-color;
	}

	#studentSubHeader {
		background-color: darken(@accent-color, @first-layer-brightness);
		color: contrast(#FFF, #000);
	}

	#studentSubHeader button:hover {
		color: contrast(#FFF, #000);
	}

	#webAssignHomeLink svg path {
		fill: @accent-color;
	}

	/* Purchase now countdown timer */
	#js-countdown-purchase-access {
		background-color: lighten(@main-color, @first-layer-brightness);
	}
	#js-countdown-purchase-access div {
		box-shadow: none;
	}
	#js-countdown-purchase-access h2 {
		color: @accent-color;
	}

	/* Main page header */
	#js-page-top div h1 {
		color: @accent-color;
	}
	#js-page-top div,
	#js-page-top div span {
		color: @main-text-color;
	}

	/* Main page cards (things like assignments, grades, etc. */
	#js-student-home-notices section,
	.studentModuleLayout section {
		background-color: lighten(@main-color, @first-layer-brightness);
		border-color: @main-color;
		border-width: 0;
		padding-bottom: 3px;
	}
	#js-student-home-notices h2,
	.studentModuleLayout h2 {
		background-color: lighten(@main-color, @second-layer-brightness);
		border-width: 0;
		color: @main-text-color;
	}
	#js-student-home-notices p,
	#js-student-home-notices h3,
	#js-student-home-notices li,
	#js-student-home-notices div button,
	.studentModuleLayout div p,
	.studentModuleLayout div h3,
	.studentModuleLayout div li,
	.studentModuleLayout div button {
		color: @main-text-color;
	}

	/* Specific to assignments card*/
	#js-student-myAssignmentsWrapper section a {
		background-color: transparent;
		border-color: @border-color;
	}
	#js-student-myAssignmentsWrapper section a:hover,
	#js-student-myAssignmentsWrapper section a:focus {
		box-shadow: @accent-color 0px 0px 0rem 0.3125rem;
	}

	#js-student-myAssignmentsWrapper section a div {
		color: @main-text-color;
	}

	#js-student-myAssignmentsWrapper section div {
		border-color: @border-color;
	}

	#js-student-myAssignmentsWrapper section div button {
		background-color: @accent-color;
		border-color: @accent-color;
		transition: background-color ease 0.2s;
	}
	#js-student-myAssignmentsWrapper section div button:hover {
		background-color: darken(@accent-color, @first-layer-brightness);
		border-color: darken(@accent-color, @first-layer-brightness);
		transition: background-color ease 0.2s;
	}

	/* specific to resources card */
	#resourcesTitle button {
		background-color: #FFF0;
		color: @main-text-color;
		border-width: 0;
	}
	#resourcesTitle button span {
		background-color: transparent;
	}
	#resourcesTitle {
		border-radius: 0.3125rem;
	}
	.studentModuleLayout section[data-test^="Resources"] {
		padding-bottom: 0;
		border-radius: 0.3125rem;
	}

	/* Specific to Calendar card */
	.month__menu {
		/* Couldn't see html in dropdown menu... */
		color: black;
	}

	/* Mouse hovering on textbook link */
	#js-student-home-aboutClass section li {
		border-radius: 0.3125rem;
	}
	#js-student-home-aboutClass section li:hover {
		box-shadow: @accent-color 0px 0px 0rem 0.3125rem;
	}

	/* -------- Small adjustments --------- */
	/* Buttons to apply accent coloring and transition */
	#js-student-home-class-insights a,
	#js-student-home-calendar button:not(:first-child) {
		background-color: @accent-color;
		border-color: @accent-color;
		transition: background-color ease 0.2s;
	}
	#js-student-home-class-insights a:hover,
	#js-student-home-calendar button:not(:first-child):hover {
		background-color: darken(@accent-color, @first-layer-brightness);
		border-color: darken(@accent-color, @first-layer-brightness);
		transition: background-color ease 0.2s;
	}

	/* ------------------------------------------
	 *  My assignments page
	 * ------------------------------------------
	 */
	#js-student-myAssignmentsPage section table thead tr,
	#js-student-myAssignmentsPage section table thead th {
		background-color: lighten(@main-color, @second-layer-brightness);
		color: @main-text-color;
		border-color: @border-color;
	}
	#js-student-myAssignmentsPage section table thead tr:first-child,
	#js-student-myAssignmentsPage section table thead th:first-child {
		border-radius: 0.3125rem 0 0 0;
	}
	#js-student-myAssignmentsPage section table thead tr:last-child,
	#js-student-myAssignmentsPage section table thead th:last-child {
		border-radius: 0 0.3125rem 0 0;
	}

	#js-student-myAssignmentsPage section {
		border-width: 0;
	}
	#js-student-myAssignmentsPage section table tbody > tr {
		background-color: lighten(@main-color, @first-layer-brightness);
		border-color: @border-color;
	}
	#js-student-myAssignmentsPage section table tbody > tr > th {
		color: @main-text-color;
	}

	#js-student-myAssignmentsPage section table tbody > tr > th a,
	#js-student-myAssignmentsPage section table tbody > tr > th button span {
		color: @accent-color;
		transition: color ease 0.2s;
	}
	#js-student-myAssignmentsPage section table tbody > tr > th a:hover,
	#js-student-myAssignmentsPage section table tbody > tr > th button span:hover {
		color: darken(@accent-color, @first-layer-brightness);
		transition: color ease 0.2s;
	}

	#js-student-myAssignmentsPage > div > div > div button {
		background-color: @accent-color;
		color: #f5f5f5;
		border-color: @accent-color;
		border-width: 1px;
		transition: background-color ease 0.2s;
	}
	#js-student-myAssignmentsPage > div > div > div button:hover {
		background-color: darken(@accent-color, @first-layer-brightness);
		border-color: darken(@accent-color, @first-layer-brightness);
		transition: background-color ease 0.2s;
	}
	#js-student-myAssignmentsPage > div > div > div button:focus:hover {
		border-color: darken(@accent-color, @first-layer-brightness);
	}

	/* ------------------------------------------
	 *  Calendar Page, need !important due to inline styling
	 * ------------------------------------------
	 */
	.studentCalendarBorder,
	.studentCalendar {
		border: none !important;
	}

	.studentCalendar .calendarTop {
		background-color: lighten(@main-color, @second-layer-brightness) !important;
		border-radius: 0.3125rem 0.3125rem 0 0;
		font-size: 1em;
		border-bottom: solid 1px @border-color;
	}
	.studentCalendar .calendarTop a {
		color: @accent-color;
	}
	.studentCalendar .calendarTop a:hover {
		color: @main-text-color;
	}

	.studentCalendar .dayLabels {
		background: lighten(@main-color, @first-layer-brightness) !important;
		padding: 4px 0;
	}

	.studentCalendar .days {
		background-color: transparent !important;
	}

	.studentCalendar .days li {
		background-color: lighten(@main-color, @first-layer-brightness);
		border-radius: 0 0 5px 5px;
		width: calc(100% / 7);
	}
	.studentCalendar .days li .cNum {
		/* day numbers */
		background-color: lighten(@main-color, @second-layer-brightness);
	}

	.studentCalendar .days li a {
		color: @accent-color
	}

	.studentCalendar .days li.weekEnd {
		width: calc(100% / 7 - 4px);
	}

	/* ------------------------------------------
	 *  Main Page (landing page)
	 * ------------------------------------------
	 */
	.nav-header .genesis-nav-menu .menu-item.search {
		border-top-color: transparent;
	}
	.nav-header .genesis-nav-menu > .menu-item {
		border-top-color: @accent-color;
	}
	.nav-header .search input[type=text] {
		background: @main-color;
	}
	.site-inner h2 span {
		background-color: @main-color;
		color: #cc0000;
	}
	.site-inner .wrap .home-about-boxes a {
		background-color: lighten(@main-color, @first-layer-brightness);
		color: lightgray;
		border-top-color: @border-color;
	}
	.footer-widgets {
		background-color: transparent;
		border-width: 1px;
		border-color: @border-color;
	}
	.home-rotator {
		background-color: transparent;
	}

	/* ------------------------------------------
     *  Custom scrollbar
     * ------------------------------------------
     */
	::-webkit-scrollbar-button {
		background-color: transparent;
		height: 0;
		width: 0;
	}

	::-webkit-scrollbar {
		background-color: lighten(@main-color, @first-layer-brightness);
		width: 10px;
		height: 10px;
		border-radius: 10px;
	}

	::-webkit-scrollbar-thumb {
		background: @accent-color;
		overflow: hidden;
		border-radius: 6px;
	}
	::-webkit-scrollbar-thumb:hover {
		background-color: #0087cc;
	}

	::-webkit-scrollbar-track {
		background-color: transparent;
	}

	/* corner where vertical and horizontal bars meet */
	::-webkit-scrollbar-corner {
		background-color: lighten(@main-color, @first-layer-brightness);
	}

	/* --------- Below submission stuff footer ------------ */
	#js-assignment-take-footer div button {
		color: @accent-color;
		text-decoration: none;
	}
	#js-assignment-take-footer div button:hover {
		text-decoration: underline;
	}

	footer#studentFooter {
		background-color: lighten(@main-color, @first-layer-brightness);
	}
}

@-moz-document url-prefix("https://www.webassign.net/wa-auth/") {

	html {
		background-color: transparent;
	}

	.this-is-hydra,
	.login-container[_ngcontent-c1] {
		background-color: @main-color;
	}

	button.wa-primary {
		background-color: #cc0000;
		color: #FFF;
		transition: background-color ease 0.2s;
	}
	button.wa-primary:hover {
		background-color: #aa0000;
		color: #FFF;
		transition: background-color ease 0.2s;
	}

	button.wa-secondary {
		background-color: transparent;
	}

	.this-is-hydra h2,
	.this-is-hydra div {
		color: @main-text-color;
	}

	.this-is-hydra .login-container .login-form[_ngcontent-c1] {
		background-color: transparent;
		border: none;
	}

	.login-container[_ngcontent-c1] h2[_ngcontent-c1] {
		margin-top: 70px;
	}

	.this-is-hydra .auth-container {
		background-color: lighten(@main-color, @second-layer-brightness);
		border-width: 0;
		border-radius: 0.3125rem;
	}

	.header-bar .enroll {
		background-color: #cc0000;
		color: #FFF;
		transition: background-color ease 0.2s;
	}
	.header-bar .enroll:hover {
		background-color: #aa0000;
		color: #FFF;
		transition: background-color ease 0.2s;
	}

	.auth-container a,
	.input-group .forget {
		color: @main-text-color;
	}
	.auth-container a:hover {
		color: @accent-color;
	}

	.auth-container .input-group input {
		background-color: @main-color;
		box-shadow: none;
		border-color: @border-color;
		color: @main-text-color;
	}

	.error-box[_ngcontent-c2] {
		outline: none;
	}
}

@-moz-document url-prefix("https://www.webassign.net/web/Student") {

	#js-assignment-wrapper {
		margin-bottom: 5px;
	}

	#js-assignment-header h1 {
		color: @main-text-color;
	}

	/* ----- Header stuff -------- */
	#js-assignment-header div,
	#js-assignment-header div span {
		color: @main-text-color;
	}
	#js-assignment-header div svg {
		fill: @main-text-color;
	}

	#js-assignment-header div #wa a,
	#js-assignment-header div #wa a svg {
		color: @accent-color;
		fill: #FFF;
		transition: ease 1s;
	}
	#js-assignment-header div #wa a:hover {
		color: @accent-color;
		fill: #FFF;
		margin-left: -10px;
		transition: ease 1s;
	}

	/* ------- Assignment information cards -----------*/
	#js-assignment-wrapper > div > div,
	#js-assignment-wrapper > div > section {
		color: @main-text-color;
		background-color: lighten(@main-color, @first-layer-brightness);
		margin: 5px;
		border-width: 0;
		border-radius: 0.3125rem;
	}
	#js-assignment-wrapper > div > div > h2,
	#js-assignment-wrapper > div > section h2 {
		color: @main-text-color;
		background-color: lighten(@main-color, @second-layer-brightness);
		border-color: @border-color;
		border-width: 0;
	}
	#js-assignment-wrapper > div span,
	#js-assignment-wrapper h3,
	#js-assignment-wrapper p {
		color: @main-text-color !important;
		/* Have to overrule their important */
	}

	#js-assignment-wrapper > div > div > div > div > div {
		background-color: transparent;
		border-color: @border-color;
		border-radius: 0.3125rem;
	}

	#js-assignment-wrapper table a div {
		background-color: transparent;
		color: @main-text-color;
		border-color: @border-color;
	}

	#js-assignment-wrapper table a:hover div,
	#js-assignment-wrapper table a:hover div p {
		color: @accent-color !important;
		/* Having to overrule their important chain */
		text-decoration-color: @accent-color;
	}

	#js-assignment-wrapper > div > div > div > div > div div:first-child {
		background-color: lighten(@main-color, @first-layer-brightness);
		border-color: @border-color;
	}

	#js-assignment-wrapper button,
	#printAssignment {
		background-color: @accent-color;
		color: #FFF;
		border-color: @accent-color;
		transition: background-color ease 0.2s;
	}

	#js-assignment-wrapper button:hover,
	#printAssignment:hover {
		background-color: darken(@accent-color, @first-layer-brightness);
		border-color: darken(@accent-color, @first-layer-brightness);
		transition: background-color ease 0.2s;
	}

	#js-assignment-wrapper button span,
	#printAssignment span {
		color: #FFF !important;
	}

	#printAssignment svg path {
		fill: #FFF;
	}

	/* ------------ Main content and problems --------------- */
	.waQBox {
		margin: 0 5px 1em 5px;
	}

	.qUtility > .container,
	.waQBox .qUtility .qButtons {
		margin-left: 10px;
		margin-top: 0px;
		background-color: lighten(@main-color, @first-layer-brightness);
		border-width: 0;
		border-radius: 0 0 0.3125rem 0.3125rem;
	}

	.waQBox .qUtility .qContent {
		background-color: lighten(@main-color, @first-layer-brightness);
		border-color: @border-color;
		border-radius: 0 0 0.3125rem 0.3125rem;
		border-width: 0;
	}

	.qContent .wa1par,
	.qContent .sublabel,
	.qContent .wa1ans {
		color: @main-text-color;
	}

	/* Next two selectors: Saved work stuff */
	.waQBox > .qAlert {
		background-color: transparent;
		border-width: 0;
	}

	#js-student-assignment_saved-notification > div {
		background: @accent-color;

		button {
			background: @accent-color;
			border-color: @accent-color;
		}
	}

	#webAssign input[type=submit] {
		text-transform: uppercase;
		font-family: "Open Sans", sans-serif;
		font-size: 14px;
		font-weight: 600;
		color: @accent-color;
		padding: 0 15px;
		height: 37px;
		border-color: @accent-color;
		border-radius: 5px;
		border-width: 2px;
		background: none;
		transition: background 0.35s ease 0s, color 0.35s ease 0s;
	}

	#webAssign input[type=submit]:hover {
		background-color: @accent-color;
		color: #FFF;
	}

	.js-question-header > article > section {
		background-color: lighten(@main-color, @second-layer-brightness);
		border-color: @border-color;
		color: @main-text-color;
		border-width: 0;
		border-radius: 0.3125rem 0.3125rem 0 0.3125rem;
	}

	img[src^='/latex'],
	img[src^='/cgi-perl'] {
		background-color: #FFF;
	}

	.watexfraction .watexdenominator {
		border-color: @main-text-color;
	}

	/* --------- Text Fields and Buttons --------------- */
	.qTextField input[type=text] {
		background-color: lighten(@main-color, @first-layer-brightness);
		border-radius: 0.3125rem;
		border-style: solid;
	}

	#webAssign input {
		color: #FFF;
	}

	#webAssign textarea {
		background-color: @main-color;
		color: @main-text-color;
		border-color: @border-color;
		border-radius: 0.3125rem;
	}

	.mathpad-wrapper span.mq-cursor {
		border-color: #FFF;
	}

	.additional {
		border-color: @border-color;
		border-radius: 5px;
	}

	.additional h1 {
		background-color: lighten(@main-color, @first-layer-brightness);
		border-radius: 5px 5px 0 0;
		border-bottom: 1px;
	}
	.additional li,
	.additional li a {
		color: @accent-color;
	}

	.section .section_content {
		background-color: transparent !important;
	}

	.tutorialButton,
	.tutorialButton a {
		color: @accent-color;
		background-color: transparent;
		border-color: @accent-color;
		border-width: 2px;
		border-radius: 5px;
	}

	.static {
		color: @main-text-color;
		background-color: @main-color;
	}

	.qContent .pse8ae .pse8QuestionBlock {
		background-color: transparent;
	}

	.qContent .pse8ae .pse8Header {
		border-color: @border-color;
		border-bottom: 1px dashed;
		z-index: 0;
	}

	.qContent .pse8ae .pse8HeaderTitle,
	.qContent .pse8ae .pse8HintTitle {
		color: @accent-color;
	}

	.qContent .pse8ae .pse8FigureBlock {
		position: relative;
		z-index: 10;
	}

	.qContent .pse8ae .pse8FigureCaption {
		color: @main-color;
	}

	/* Manual grading blob */
	.manualGrading {
		border-color: @border-color;
		border-radius: 0.3125rem;

		p {
			color: @main-text-color;
		}
		.teacher-comments {
			font-style: italic;
		}
	}

	/* --------- Testing/accordian stuff ------------ */
	.qContent .accordion .element {
		background-color: transparent;
	}

	.qContent ul.accordion > li {
		background-color: transparent;
		border-color: @border-color;
	}

	.qContent ul.accordion li .titleBar {
		background-color: lighten(@main-color, @first-layer-brightness);
	}

	/* ---------- Show my Work ------------ */
	#webAssign .smw {
		background-color: lighten(@main-color, @second-layer-brightness);
		border-radius: 0.3125em;
	}

	.smwTextContainer,
	.smwTextContainer .smwTextArea {
		background-color: @main-color;
		color: @main-text-color;
		text-shadow: none;
		border-radius: 0.2125rem;
		border-color: @border-color;

		.disabled {
			color: darken(@main-text-color, 20%);
			opacity: 1;
		}
	}

	.smwTextContainer .waOverlay {
		border-color: @border-color;
		border-radius: 0.3125rem;
		background-color: @main-color !important;
		padding: 5px;
		width: calc(100% - 10px) !important;
		height: calc(100% - 10px) !important;
	}

	.waUploadWrap .waUpload {
		.waAttach,
		.fileList .file-img {
			color: @accent-color;
		}

		strong,
		.fileList {
			color: @main-text-color;
		}
	}

	.smw .ribbon.container {
		background-color: lighten(@main-color, @first-layer-brightness);
		border-color: @border-color;
	}

	.smw .smwAnswerWrap {
		width: 100%;
	}

	.smw .smwAnswerWrap .smwAnswer p {
		color: @main-text-color;
	}

	/* ---------- Details/Notes/Ask Teacher/Practice Another accordions ---------- */
	.js-question-header > article > section > div > div > div:not(p) {
		background-color: transparent;
		border-radius: 0 0 0.3125em 0.3125em !important;
	}

	.js-question-header > article > section button {
		border-color: @accent-color;
		background-color: transparent;
		transition: background 0.35s ease 0s, color 0.35s ease 0s;
		color: @accent-color;
	}

	.js-question-header > article > section button:not(:disabled):hover {
		background-color: @accent-color;
		color: #FFF;
		border-color: @accent-color;
	}

	.js-question-header > article > section button:not(:disabled):focus {
		background-color: @accent-color;
		color: #FFF;
		border-color: @accent-color;
	}

	.js-question-header > article > section > div {
		border-radius: 10px;
	}

	.js-question-header > article > section > div > div > div {
		background: transparent !important;
		border-width: 0;
	}

	/* Why does this look weird? (nested) It's because of less! Note: this leads to the .css-1rmd0ik generated div tag. */
	.js-question-header > article > section > div > div > div > div {
		background: lighten(@main-color, @second-layer-brightness);

		h4 {
			color: @accent-color;
		}

		h5 {
			color: @accent-color;
		}

		div > div {
			background: transparent;
			border-width: 0;
			box-shadow: none;
			color: @main-text-color;
		}

		div[data-test^='showMyWork'],
		div[data-test^='questionTotalScore'] {
			background-color: transparent;
			color: @main-text-color;
			border-color: @border-color;
			border-radius: 0.3125rem;
			border-width: 1px;
		}

		form,
		form label {
			background: none;
			color: @main-text-color;
			padding: 0;
		}

		textarea {
			background-color: @main-color;
			border: 1px solid @border-color;
			color: @main-text-color !important;
			min-height: 100px;
		}

		button {
			border-color: @accent-color;
			color: #FFF;
			background-color: @accent-color;
		}
		
		button:hover {
			border-color: @accent-color;
			color: #FFF;
			background-color: darken(@accent-color, @first-layer-brightness) !important;
		}

		button:disabled {
			color: @main-color;
		}

		table {
			color: @main-text-color;
			background-color: transparent;
		}

		table th {
			color: @main-text-color;
		}
		
		div[data-testid^='messageBody'] {
			p {
				color: @main-text-color;
			}
			
			border-width: 1px;
			background-color: lighten(@main-color, @first-layer-brightness);
		}
		div[data-testid^='messageBody'] div:first-child {
			position: relative;
			border-width: 1px;
			border-color: @border-color;
		}
	}

	/* - Practice Another and prev. answer iframe stuff - */
	.container.popupWrap .popupContent,
	.previousAnswersContainer .container.popupWrap {
		background: transparent !important;
	}

	#webAssign.previousAnswersContainer {
		background-color: lighten(@main-color, @second-layer-brightness) !important;
	}

	#webAssign.previousAnswersContainer form > .qResponse {
		background-color: @main-color;
	}

	#webAssign.previousAnswersContainer form > .qResponse .title {
		background-color: transparent;
		color: @main-text-color;
	}

	.mathquill-embedded-latex.disabled {
		background-color: @main-color;
	}

	iframe[data-test^="practiceAnother"] {
		border-width: 0;
		background: transparent;
	}

	#pavWrapper6 button {
		transition: background 0.35s ease 0s, color 0.35s ease 0s;
		border: 2px solid @accent-color;
		color: @accent-color;
		text-transform: uppercase;
		font-family: "Open Sans", sans-serif;
	}
	#pavWrapper6 button:hover {
		transition: background 0.35s ease 0s, color 0.35s ease 0s;
		border: 2px solid @accent-color;
		background-color: @accent-color;
		color: #FFF;
		text-transform: uppercase;
	}

	/* ---------- Solution/Explanation Container ------------------ */
	.qContent .solutionContainer {
		border-radius: 5px;
		border: 1px solid @border-color;
	}

	.solutionContainer .solutionHeadContainer {
		background-color: lighten(@main-color, @first-layer-brightness);
		border-radius: 5px 5px 0 0;
		border-bottom: 1px solid @border-color;
		font-weight: bold;
		color: @accent-color;
	}

	.solutionContainer .solutionContent {
		padding: 10px;
	}

	/* ----- Page footer with submit assignment button ------- */
	#js-page-bottom > div > div {
		background-color: lighten(@main-color, @first-layer-brightness);
		box-shadow: none;
		border-width: 0;
	}

	#js-page-bottom div button {
		background-color: @accent-color;
		border-width: 0;
		padding: 10px 20px;
		color: #FFF;
		transition: background-color ease 0.2s;
	}

	#js-page-bottom div button:hover {
		background-color: darken(@accent-color, @first-layer-brightness);
		transition: background-color ease 0.2s;
	}
}

@-moz-document regexp(".*/v4cgi/.*") {

	/* ------------------------------
	 *  Practice another page 
	 * ------------------------------
	 */
	#practice,
	.qContent .pse8ae .pse8QuestionBlock,
	#popupWrap {
		background-color: lighten(@main-color, @second-layer-brightness);
	}

	.qContent .pse8ae .pse8FigureCaption {
		color: #000;
	}

	.mathpad-wrapper span.mq-cursor {
		border-color: #FFF;
	}

	.qTextField input[type^='text'] {
		background-color: lighten(@main-color, @first-layer-brightness);
		color: @main-text-color;
		box-shadow: none;
		border: 1px solid @border-color;
	}
}

@-moz-document regexp(".*/v4cgi/questions/tutorial_popup.*") {
	/* ------------------------------
	 *  Tutorial Page, other popup pages. 
	 * ------------------------------
	 */
	#middle {
		background: @main-color;
	}

	#popupWrap .topNavBorder {
		background: lighten(@main-color, @second-layer-brightness);
	}

	#popupWrap #top {
		background-color: lighten(@main-color, @second-layer-brightness);
	}

	.tutorial_popup .section_content {
		background-color: @main-color !important;
	}

	.qContent .tutorial .comp_header_title,
	.qContent .tutorial_popup .comp_header_title {
		color: @accent-color;
	}

	.qContent .tutorial .header,
	.qContent .tutorial_popup .header,
	.qContent .tutorial .section_content,
	.qContent .tutorial_popup .section_content {
		.header_title {
			background-color: @accent-color;
		}

		border-color: @accent-color;
	}

	.finalSubmitBox,
	.finalSubmitBox div {
		background: @accent-color !important;
		border-color: @accent-color !important;
		border-radius: 0.3125rem;
	}
}