/* eRevision should be programmed to support max 1440px width (restrict content to this width for sensibility, even if the screen is wider, eg a 60" TV) */
/* eRevision should be programmed to support min 320px width (smallest mobile width iPhone 5) */
/* eRevision should be programmed to support unlimited max height */
/* eRevision should be programmed to support min 320 height (smallest mobile width in landscape) */
/* these are set in div.maincontent and div.nav and small.footer-text - the three main sections of the website, upper, middle, lower */ 
/* eRevision allows some instances of maincontent to be wider than 1440px to better display tables etc, but this is not recommended for user pages, as it distorts the alignment (#wideView) */
/* we provide margins on each side of each content section, which decrease to nothing as the screen width decreases */

/*
MAKING CHANGES? PLEASE READ THIS FIRST!

We have been encountering problems where changes made to a CSS file do not take effect for all our users, as their device has cached the file, and does not know when to refresh the content.
To resolve this, there is a get variable on the end of the .css links; when this variable changes, the browser will refresh the contents of the file.
The variable is *filename*.css?version=091526032024

Where did the 301120202359 come from, and what are you meant to change it to?
30=30th day
06=6th month
2020=the year
15=24hr hour value
35=minute value

Any time changes are made to this CSS file, update the version value in accordance with the above scheme by searching the repository and updating relevant locations.

Note: Some instances use filemtime() to get the last modified time of the file, and this is used to update the version number. This is not always the case, so please check the file before updating the version number.
*/

@page {
    size: auto;
}

/* ********************* All Pages ******************************** */

html{
	height:100%;
}

html body {
	font-family: Arial, sans-serif;
    background-color: whitesmoke;
    text-align: center;
    line-height: 1.5;
    color: #212529;
}

html body div.maincontent{
	position: relative;
	display: inline-block;
	width: 85%;
	max-width: 1440px; /* 1440px is the maximum width of any screen displayed content */
	text-align: center;
	margin: 0 auto;
	padding-top: 2vh;
}

html body div.maincontent#wideView{
	width: 90%;
	max-width: 1660px;
}

@media (max-width: 1200px) { /* Less than 1200px */
	html body div.maincontent{
		width: 90%;
	}
}
@media all and (max-width: 950px) { /* Less than 950px */
	html body div.maincontent{
		width: 92%;
	}
}
@media all and (max-width: 700px) { /* Less than 700px */
	html body div.maincontent{
		width: 95%;
	}
}
@media all and (max-width: 475px) { /* Less than 475px */
	html body div.maincontent{
		width: 98%;
	}
}

.pagecontent { /* this is the main page content, excluding standard elements like notifications headers footers etc. few children are standard across page content in this div */
	text-align: left;
}

.pageHeading {
	width: fit-content;
	width: -ms-fit-content;
	width: -moz-fit-content;
	width: -webkit-fit-content;
	font-family: 'Patua One', Arial , sans-serif;
	font-style: normal;
    font-weight: normal;
	margin-bottom: 0px;
	line-height: 1.2;
	text-align: center;
	display: inline-block;
}

.landingSubHeading{
	font-weight: 300;
	font-size: 16px;
	color: green;
	font-family: 'Patua One', Arial , sans-serif;
	font-style: normal;
	font-weight: normal;
	top: -1.5vw;
	position: relative;
	left: 3vw;
}

@media all and (min-width: 150px) { /* Greater than 150px */
	.pageHeading {
		font-size: calc(20px + 7vw); 
	}
	.smallerPageHeading {
		font-size: calc(20px + 5vw); 
	}
	.pageSubHeading{
		font-size: 13px;
	}
}
@media all and (min-width: 575px) { /* Greater than 575px */
	.pageHeading {
		font-size: calc(30px + 5vw); 
	}
	.smallerPageHeading {
		font-size: calc(30px + 3vw); 
	}
	.pageSubHeading{
		font-size: 13px;
	}
}
@media all and (min-width: 1000px) { /* Greater than 1000px */
	.pageHeading {
		font-size: calc(40px + 3vw);  
	}
	.smallerPageHeading {
		font-size: calc(40px + 1vw); 
	}
	.pageSubHeading{
		font-size: 16px;
	}
	#inboxHeading {
		font-size: 3.8em !important;
	}
}
@media all and (min-width: 1600px) { /* Greater than 1600px */
	.pageHeading {
		font-size: calc(50px + 1vw);   
	}
	.smallerPageHeading {
		font-size: calc(50px); 
	}
	.pageSubHeading{
		font-size: 16px;
	}
}

#logoColor{
	color: #c12;
}

/* Bootstrap 5 tweak: do not underline links unless hovered over */
a:not([class*="btn"]) {
    text-decoration: none;
}

a:not([class*="btn"]):hover {
    text-decoration: none;
}

.notification-msg {
	background-color: rgba(230, 178, 8, 0.95) !important;
	color:#000;
}

.error-msg {
	background-color: #ff8383 !important;
	color: #6b0202 !important;
}

.success-msg {
	background-color: #80dc80 !important;
    color: #0a520a !important;
}

.notification-msg,.error-msg,.success-msg,.info-msg {
    font-family: 'Patua One', Arial , sans-serif;
    border-radius:10px;
}

h1,h2,h3,h4,h5 {
    font-family: 'Patua One', Arial , sans-serif
}

h1 { 
	font-size:2.1rem; 
	font-style:normal;
	font-weight:normal;
	margin-bottom:10px;
}

table {
    background-color: #FFF !important;
}

#examAnswersTable td {
	overflow: auto;
}

table *::-webkit-scrollbar {
	width: 20px;
}

table *::-webkit-scrollbar-track {
	background-color: #e4e4e4;
	border-radius: 100px;
}

table *::-webkit-scrollbar-thumb {
	border-radius: 100px;
	border: 5px solid transparent;
	background-clip: content-box;
	background-color: #006a98;
}

.table-striped th {
	padding: 0.5rem;
}

.table-striped td {
	padding: 0.3rem;
}

.table-striped .btn {
	padding: .2rem .5rem;
}

.table-striped .edit-btn {
	padding: .4rem 1.5rem;
    border-radius: 5px;
	font-weight: bold;
	font-size: 0.8rem;
	text-transform: uppercase;
    box-shadow: 3px 5px 14px 0px #cccccc;
}

.table-striped .delete-btn {
	padding: .4rem 1.5rem;
    border-radius: 5px;
	font-weight: bold;
	font-size: 0.8rem;
	text-transform: uppercase;
    box-shadow: 3px 5px 14px 0px #cccccc;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  	color: #c1c1d7 !important;
  	opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #c1c1d7 !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #c1c1d7 !important;
}

select, input:not([type="checkbox"]):not(.typeitAnswerCorrect):not(.typeitAnswerIncorrect):not([type="submit"]), textarea {
    background-color: #ffffe1 !important;
}

.addButton {
    background-color:#3d89da !important;
    color: #FFF !important;
}

.blue-background{ /*for a homework table*/
	background-color: #D6E6F5 !important;
}

.answerCorrect{
	opacity:1 !important;
	border:none;
	background:#2E8B57 !important;
	color: white;
	border-radius: 6px;
}

/*if disabled is not declared, the bootstrap default for disabled buttons overrides this*/
.answerCorrect:disabled{
	opacity:1;
	border:none;
	background:#2E8B57;
	color: white;
	border-radius: 6px;
}

.answerIncorrect {
	opacity:1 !important;
	border:none;
	background: #E47D6E !important;
	color: black;
	border-radius: 6px;
}

.answerCorrect:not(.bootstrap-select):after{
    background-image:url('https://erevision.uk/theme/correct.png');
}

.answerIncorrect:not(.bootstrap-select):after{
    background-image:url('https://erevision.uk/theme/incorrect.png');
}

.answerIncorrect:after,.answerCorrect:after {
    content:"";
    padding:10px 10px 10px 10px;
    background-position: left center;
    background-size: contain;
    display:inline-block;
    margin:0px -5px -5px 2px;
    background-repeat:no-repeat;
}

.unselectedCorrectAnswer{
	opacity: 0.70 !important;
	background:#b8f0a3 !important;
	color: white;
	border-radius: 6px;
	border: 1px dashed black !important;
    background: #e6e6e6;
    cursor: not-allowed;

}

/*if disabled is not declared, the bootstrap default for disabled buttons overrides this*/
.unselectedCorrectAnswer:disabled{
	opacity: 0.70 !important;
	background:#b8f0a3 !important;
	color: white;
	border-radius: 6px;
	border: 1px dashed black !important;
    background: #e6e6e6;
    cursor: not-allowed;
}

#level {
    width:auto;
    font-weight:bold;
    font-family:'Kalam', sans-serif;
}

.form-control {
    border:1px solid #bababa !important;
}

.studentMark {
	width:auto;
}

.col-form-label {
    font-weight:bold;
    text-align:right;
}

.btn {
	font-family: 'Montserrat', sans-serif;
	font-style:normal;
	font-weight:400;
	font-size:0.9em;
}

.btn-light {
    border:1px solid #ccc;
}

.btn-light.disabled, .btn-light:disabled {
    border:1px dashed #888 !important;
	background: #e6e6e6;
	cursor:not-allowed;
}

.btn-secondary {
	background-color:#097392!important;
	border:none;
}

.btn-secondary:hover {
    background-color: #064d62!important;
	border:none;
}

.btn-secondary.disabled, .btn-secondary:disabled {
	background-color: #6c757d!important;
	border:none;
}

.breadcrumb {
	margin:10px 0px;
	padding:0;
	font-family: 'Montserrat', sans-serif;
	font-size:0.9rem;
}

.breadcrumb-item+.breadcrumb-item::before {
	content:">";
}

.ActivityType, .title {
	color:#c12;
	text-transform: capitalize;
}

.offline, .notCurrent {
	color:rgb(214, 44, 18);
	font-weight: bold;
}

.tab {
	margin:5px 5px 5px 25px;
	line-height:1.2em;
	font-weight:bold;
	color:purple;
	overflow: visible;
}

.form-control-sm {
	padding:0px;
	font-size:1rem !important;
}

.cover {
	padding: 0 1.5rem;
}

.cover .btn-lg {
	padding: .75rem 1.25rem;
	font-weight: 700;
}

.packageGrid {
	width: 100% !important;
}

.sign-in-card {
	margin: 0 auto;
	float: none;
	margin-bottom: 10px;
	padding: 10px;
}

.sign-in-cover-container {
	width: 100% !important;
}

.sign-in-error-msg {
	--box-shadow-color: rgba(0, 0, 0, .5);
	box-shadow: 3px 5px 5px var(--box-shadow-color) !important;
}

.sign-in-notifications {
	display: block;
	padding-bottom: 10px;
    padding-top: 10px;
}

#sign-in-cover {
	padding: 0 0.75rem;
}

#sign-in-card {
	padding: 15px !important; 
	border-radius: 20px !important;
	box-shadow: 5px 10px 10px !important;
}

#sign-in-btn {
    margin-right: 15px;
}

div.blogContent {
	width: 100%;
	height: auto;
	margin: 0 auto 0px; /* footer height + space */
	padding: 0 0 50px; /* footer height + space */
}

.page-buttons {
	display: inline-block;
	padding-bottom: 10px;
	padding-top: 10px;
	padding-right: 10px;
	border-radius: 5px;
}

form.page-buttons .go-back:before {
    content: '\2190';
    vertical-align: middle;
    display: inline-block;
    font-size: 14px;
    padding-right: 5px;
    margin-top: -5px;
}

.go-back:before {
    content: '\2190';
    vertical-align: middle;
    display: inline-block;
    font-size: 14px;
    padding-right: 5px;
    margin-top: -5px;
}

.packageScores {
	font-size: 0.8rem;
}

.notifications {
	display: block;
	padding-bottom: 5px;
	padding-top: 5px;
}

.labelImage {
	height: 60px; 
	max-width: 60px;
}

.smallButton {
	padding-top: 2px !important;
	padding-bottom: 2px !important;
	padding-left: 5px !important;
	padding-right: 5px !important;
}

.instruct-page {
	margin: 1px 2px;
	padding: 2px 6px !important;
	text-align: center !important;
	vertical-align: middle !important;
    border: none;
    background: #217cf3;
	color: #fff;
    border-radius: 5px;
}

.approveAndLock {
	background-color: #93C572 !important;
}

.lockAndUnlockQuiz {
	border-color: rgba(238, 194, 50, 0.95) !important;
	border-width: 3px !important;
}

.goOffline {
	background-color: #e76f5c !important;
}

.authoringTopics {
	background: #EEE;
	border-left:1px solid #000;
	border-right:1px solid #000;
	border-bottom:2px solid #EAC67A !important;
}

.quizRow {
	margin-right: 0px !important;
	width: 100%;
	padding-right: 0px !important;
	float: left;
	padding-left:0px !important;
}
.card {
	border: 1px solid #d8d8d8;
    margin-bottom: 15px;
    box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.08);
}
.card-header {
	border-bottom: none;
}

.card-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
}

.card-text-no-emoji{
	font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
}

.card-title {
    color:#233237;
}

.quiz-info-left{
	background-color: #ffffff !important;
	color: #3F413E !important;
	border-radius: 5px 0 0 5px !important;
	font-weight: normal !important;
}

.quiz-info-middle{
	text-align:center;
	background-color: gold !important;
	color: #000 !important;
	border-radius:0 !important;
	font-weight: bold !important;
}

.quiz-info-right{
	text-align:center;
	background-color: gold !important;
	color: #000 !important;
	border-radius: 0 5px 5px 0 !important;
	font-weight: bold !important;
}

.passmark-view-btn {
	color: #6EAC39 !important;	
	font-weight: bold;
	margin-right: 10px;
}

.admin-author-only-btn {
	background-color: #d86872 !important;
	border-color:  #E79397 !important;
}

.inactive {
	background-color: #E9B3B6 !important;
}

.author-admin-only-clm {
	background-color: #E9B3B6 !important;
}

.author-admin-only-text {
	color: #E9868B !important;
	font-weight: bold;
}

.group-middle {
	display: flex;
	padding: 0.5em;
	margin: 0;
	background-color: rgba(241, 236, 236, 0.97);
	border-top: 1px solid;
	border-right: 1px solid;
	border-bottom: 1px solid;
	width: 20%;
	color: #6EAC39;
	font-weight: bold;
}

.htmlTags {
	color: #0E130B !important;
	font-weight: normal !important;
}

.row-passmarks {
	height: 100% !important;	
	padding-top: 3px !important;
	padding-bottom: 3px !important;
	padding-left: 3px !important;
	padding-right: 3px !important;
}

a.disabled {
	pointer-events: none;
	cursor: default;
}

.lookIntoPackQuiz {
	padding: 5px 5px 5px 5px;
	width: 150px;
	display: flex;
	font-weight: bold;
}

.go-back {
}

.packOverviewText {
	font-size: 15px;
}

.targetLevel {
	white-space: nowrap;
    background-color: #000 !important;
	color: #FFF !important;
	text-align:center;
    font-family:'Kalam', sans-serif;
	font-weight: bold !important;
}

.dropdown-nav {
	background-color: #024e6f !important;
}

.hamburgerMenuA{
	padding: 0;
	left:unset !important;
}
.hamburgerMenuB{
	padding: 0;
	left:unset !important;
}

.subTopicName {
	line-height:1rem;
	text-align:left;
	white-space: normal !important;	
	max-width: 400px !important;
}

.quizSubtopic {
	margin-top: 8px !important;
	margin-bottom: 8px !important;
}

li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

div.answerExplanation {
    margin-right: 10em;
}

.breadcrumb-nav {
	background-color: transparent!important;
	 line-height:1em;
}

.answered {
	background-color: rgba(226, 224, 218, 0.95)!important;
}

.radioButtons {
	display: flex !important;
    align-items: center !important;
}

.gapFillAnswerPosition{ /*authoring*/
	background: rgba(230, 178, 8, 0.95)!important;
	border-radius: 6px;
	padding: 5px 5px 5px 5px;
}

.showOneAnswer {
	display: inline-block;
}

.showOneAnswer .showAllAnswers {
	visibility: hidden;
	max-width: 600px;
	background-color: #E47D6E !important;
	color: #352F2F;
	text-align: center;
	border-radius: 6px;
	padding: 5px 5px 5px 5px;
	position: absolute;
	z-index: 1;
}

.showOneAnswer:hover .showAllAnswers {
	visibility: visible;
}

div.draggable, div.dragged {
	border: 1px solid black;
	padding:2px;
	cursor: move;
	text-align:center;
	background-color: #285888;
	color: #FFF;
	-moz-border-radius: 10px;
    	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 2px 2px 2px #888;
	-webkit-box-shadow: 2px 2px 2px #888;
	box-shadow: 2px 2px 2px #888;
	font-family: 'Montserrat', sans-serif;
}

div.draggable img {
	width:180px;
	border-radius:10px;
	margin:0auto;
}

div.droppable img {
	width:180px;
	border-radius:10px;
	margin:0auto;
}

audio{
	min-width:180px;
	max-width: 500px;
	width: 35%;
}

div.droppable {
	display: table;
	padding:2px;
	text-align:center;
	margin:0 auto;
}

div.droppable p, div.dropped p {
	display: table-cell;
	vertical-align: middle;
	text-align:center;
}

.readyToGoLive {
    color:rgba(230, 178, 8, 0.95)!important;
	font-weight: bold;
}

.empty, .incorrect, .notLive {
	color:#E76F5C!important;
	font-weight: bold;
}

.notAvailableForTeacher {
	color:rgb(121, 121, 121)!important;
}

.inProgress {
	color:#4F96C5!important;
	font-weight: bold;
}

.live, .correct {
	color: green !important;
	font-weight: bold;
}

.soonExpired{
	background-color: rgb(68, 152, 204) !important;
}

.expiredWarning {
	background-color: #ffe3e3 !important;
}

.packageExpired{
	background-color: rgb(231, 136, 92) !important;
}

.tooManyStudentsAssigned, .soonToGoLive{
	background-color:#E76F5C!important;
}

.menu-li{
	width: auto !important;
}

.checkBtn{
	z-index: 2;
    position: inherit;
	margin-top: 3px;
}

.allowedToCheck{
	background-color:#80B158!important;
	border-color: #80B158!important;
}

.allowedToCheck:hover{
	background-color: #739F4F!important;
	border:none;
}

a.button, .disabledButton{
    -webkit-appearance: button;
    -moz-appearance: button;
	padding: 5px 5px;
	margin-bottom: 3px;
	text-decoration: none;
	color: initial;
}

ul{
	display: block;
}

li{
	width: 100%;
}

.disabledButton {
	-webkit-appearance: button;
    -moz-appearance: button;
	padding: 5px 5px;
	margin-bottom: 3px;
	text-decoration: none;
	background-color: white;
}

.my-custom-width{
	width:1450px;
}

.not-live-yet {
	background-color:#E9B3B6!important;
}

a.quizNotTaken, .quizNotTaken {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    padding: 5px;
	background-color:rgba(230, 192, 81, 0.95);
	font-weight: bold;	
	border-color:  #000;
	border-left:none;
}

a.quizTakenAtLowerLevel, .quizTakenAtLowerLevel {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    padding: 5px;
	background-color: #75B9EC;
	font-weight: bold;
	border-color:  #000;
	border-left:none;
}

a.nonGradedMerit, .nonGradedMerit {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    padding: 5px;
	background-color: #75B9EC;
	font-weight: bold;
	border-color:  #000 !important;
	border-left:none;
}

a.passGreen, .passGreen {
	background-color: #98BD7D !important;
}

a.meritGreen, .meritGreen {
	background-color: #98BD7D !important;
}

a.passBlue, .passBlue {
	background-color: #75B9EC !important;
}

a.meritYellow, .meritYellow {
	background-color: #f9c732 !important;
}

.blackQuiz{
	border-color: #000000 !important;
	background-color: #FFFFFF !important;
}

.greenQuiz{
	border-color: #228B22 !important;
	background-color: #98BD7D !important;
}

.blueQuiz{
	border-color: rgb(70, 143, 208) !important;
	background-color: rgb(124, 208, 241) !important;
}

.orangeQuiz{
	border-color: orange !important;
	background-color: rgb(254, 216,132) !important;
}

.redQuiz{
	border-color: #EC407A !important;
	background-color:#EC407A!important;
}

.infoQuiz{
	border-color: #17a2b8 !important;
	background-color:#17a2b8!important;
}

a.quizFailed, .quizFailed {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    background-color:#E7968B;
    padding: 5px;
	font-weight: bold;	
	border-color:  #000;
	border-left:none;
}

.table-success {
	background-color:#99ca7387!important;
}

a.quizPassed, .quizPassed, .nonGradedDistinction {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    padding: 5px;
    background-color: #98BD7D;
	font-weight: bold;	
	border-color:  #000;
	border-left:none;
}

a.nonGradedDistinction {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    padding: 5px;
    background-color: #98BD7D !important;
	font-weight: bold;	
	border-color:  #000 !important;
	border-left:none;
}

.quiz-btn {
	background-color: #F8F8F8;
	color: #000 !important;
	overflow-wrap:break-word;
}

.quiz-button {
	width:135px !important; 
	height: 35px !important;
}

a.seeQuizProgress {
	background-color: #ADD8E6;
}

.fail {
	color: #c12;
}

.pass {
	color: #228B22;
}

.passC {
	color: #27db2d;
}

.passB {
	color: #07a128;
}

.passA {
	color: #035503;
}
.inprogress {
	color: #c55b1c;
}

.colorKey{
	background:#f5f5f5;
}

.colorKey .greenQuiz, .colorKey .blueQuiz, .colorKey .whiteQuiz, .checkeredQuiz, .colorKey .redQuiz, .colorKey .infoQuiz, .colorKey .orangeQuiz, .colorKey .amberQuiz, .colorKey .pinkQuiz, .colorKey .lightQuiz, .colorKey .soonExpired, .colorKey .packageExpired {
	width:15px;
	height:15px;
	border-radius:50%;
	display:inline-block;
}

.colorKey .checkeredQuiz {
	background: repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%) 50% / 10px 10px;
}

.colorKey .greenQuiz {
	background: green!important;
}
.colorKey .blue {
	background: #86cfda !important
}
.colorKey .whiteQuiz {
	background: white !important;
	border: black solid 1px !important;
}
.colorKey .redQuiz {
	background: #EC407A!important;
}
.colorKey .infoQuiz {
	background: #17a2b8!important;
}
.colorKey .pinkQuiz {
	background: #ffb3b3!important;
}
.colorKey .amberQuiz {
	background: rgb(231, 136, 92)!important;
}
.colorKey .lightQuiz {
	background: #fff!important;
	border: #999 solid 2px;
}

.failedTest {
	background-color: #D85948 !important;
}

.passedTest {
	background-color: #98BD7D !important;
}
.failedEquivalentTest {
	background-color: #75B9EC !important;
}
.packageOverview {
	border-collapse: collapse;
	width: 70%;
}

img {
    border: 0px;
}

.specCharKeyboardLabel {
	background: #98BD7D !important;
	border-color: #98BD7D!important;
	color: #fff!important;
    padding: .3rem .3rem;
    font-size: 1rem;
    line-height: 1.5;
	border-radius: .25rem;
	margin: auto!important;
}

.expandableSpecCharKeyboard {
	position: auto;
	display: inline-block;
}

.expandableSpecCharKeyboard .showSpecCharKeyboard {
	visibility: hidden;
	width: 500px;
	background-color: #98BD7D;
	color: #fff;
	text-align: center;
	float: none;
	border-radius: 6px;
	padding: 5px 5px;
	position: absolute;
	z-index: 1;
	display: inline-block;
}

.specCharKeyboardButton {
	border-left: 1.5px;
	border-right: 1.5px;
	border-top: 1.5px;
	border-bottom: 1.5px;
	padding: 1.5px 1.5px 1.5px 1.5px;
	border-radius: .75rem;
}

.expandableSpecCharKeyboard:hover .showSpecCharKeyboard {
	visibility: visible;
}

#specialCharactersTable {
	width: 95%;
}

.authoringSpecCharKeyboardNote{
	display: inline-block;
	max-width: 200px;
}

.homework {
	background-color: #ADD8E6;
	line-height: 20px;
}

.homeworkDone {
	background-color: #90EE90;
	line-height: 20px;
}

.notSetAsHomework, .topic, .packageAvailable {
	background-color: #BDBDBD;
	line-height: 20px;
}

.package {
	background-color: #949191;
	line-height: 20px;
}

.goingLiveSoon {
	background-color: #F54D4D;
	line-height: 20px;
}

.locked {
	background-color: #f4c20d;
	line-height: 20px;
}

.authoring-completedQuiz {
	color: #70B839;
	font-weight: bold;
}

.authoring-incompletedQuiz {
	color:#E76F5C;
	font-weight: bold;
}

.print-only{
	display: none;
	position: fixed;
	top: 5px;
	right:5px;
	width: auto;
	background-color: rgb(255,255,255, 0.6);
	z-index: 1999;
}

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
	}

	.print-only{
		display: block;
	}

	.noBreakOnPrint{
        page-break-inside: avoid;
	}

	.printOnSeperatePage{ 
		position: relative;
		display: block;
		page-break-after: always;
		page-break-before: always;
	 } /* page-break-after works, as well */
	
}

.media_helper_img_display{
	max-width: 100%;
	max-height: 100%;
	position: relative;
}

.addNumberOfFielsToReorder{
	border-radius: 0.25rem;
	width: 40px;
}

.hover_img a { 
	position: relative;
}

.hover_img a span { 
	position: absolute; 
	top: 28px;
	left: 40px;
	display:none; 
	z-index:99; 
}

.hover_img a:hover span { 
	display: block;
}

.quiz-category {
	background-color: #ffffdf;
	border-radius: 5px;
	padding: 3px 4px 3px 4px;
	margin-bottom: 3px;
	margin-top: 3px;
	font-size: 0.6rem;
	color: #0E130B;
}

#this-quiz-cat {
	background-color:#B0DF91;
	border-color: rgb(130, 182, 95);
	border-style: solid;	
	border-width: 0.8px;
}

.itsLive {
	background-color: #daffb3;
}

.itsNotLive {
	background-color: #ffb3b3;
}

.reorderModule {
	padding: 0.5rem 1rem;
	margin-bottom: .5rem;
	cursor: move;
	border-radius: 0.25rem;
	max-height: 30rem;
	max-width: 20rem;
}

.rearrangeOrderCard {
	padding: 0.5rem 1rem;
	margin-bottom: .5rem;
	cursor: move;
	border-radius: 0.25rem;
	border: 1px solid #000;
    color: #212529;
    background: rgb(255, 182, 185);
}

#homepageSection {
	margin: 25px 15px 15px 15px;
	background-color: #f5f5f5;
}


/* xxs < 577 */
@media screen and (max-width: 575px) {

	.arrowImgDown{
		width: 4vw;
		height: 4vw;
		padding-top: 0px; 
	}

	.arrowImgRight{
		display: none;
	}

	.quiz-list-grid{
		display: grid;
		grid-template-columns: auto auto;
	}

	.col-quizzes{
		width:100% !important;
		float:left !important;
		position: relative !important;
		min-height: 1px !important;
		padding-right: 15px !important;
		padding-left: 15px !important;
	}

}

/* xxs > 576 */
@media screen and (min-width: 576px) {

	.arrowImgDown{
		display: none;
	}

	.quiz-list-grid{
		display: grid;
		grid-template-columns: auto auto auto;
	}

	.col-quizzes{
		width:90% !important;
		float:left !important;
		position: relative !important;
		min-height: 1px !important;
		padding-right: 15px !important;
		padding-left: 15px !important;
	}

}

/* xs < 768 */
@media screen and (max-width: 767px) {
	
	.arrowCards{
		padding: 6px !important;
		margin: 0px !important;
		border: 0px !important;
		background-color: rgba(0, 0, 255, 0) !important;
		text-align: center !important;
	}

	.arrowImgRight{
		width: 4vw;
		height: 4vw;
		padding-top: 0px; 
	}
	
	.studentTeacherText{
		font-size: 18px !important;
	}

	.colWrapPoint767{
		flex-flow: column wrap !important;
	}

	.colWrapPoint992{
		flex-flow: column wrap !important;
	}

	.quiz-list {
		border: 0px !important;
		font-size: 12px !important;
	}
}

/* sm > 768*/
@media screen and (min-width: 768px) {

	.arrowImgRight{
		width: 4vw;
		height: 4vw;
		padding-top: 0px; 
	}

	.arrowImgDown{
		display: none;
	}

	.arrowCards{
		padding: 0.2vw !important;
		margin: 0px !important;
		border: 0px !important;
		background-color: rgba(0, 0, 255, 0) !important;
	}

	.leftAlignCard{
		text-align: left !important;
	}

	.rightAlignCard{
		text-align: right !important;
		
	}

	.studentTeacherText{
		font-size: 2vw !important;
	}

	.studentTeacherCard{
		width: 33% !important;
		margin: 40px !important;
	}

	.colWrapPoint992{
		flex-flow: column wrap !important;
	}

	.quiz-list {
		border: 0px !important;
		font-size: 12px !important;
	}

	.col-quizzes{
		width:48% !important;
		float:left !important;
		position: relative !important;
		min-height: 1px !important;
		padding-right: 15px !important;
		padding-left: 15px !important;
	}

}

/* m > 992*/
@media screen and (min-width: 992px) {
	.quiz-list {
		border: 0px !important;
		font-size: 1.2vw !important;
	}

	.colWrapPoint992{
		flex-flow: row wrap !important;
	}

	.arrowImgRight{
		width: 36px;
		height: 36px;
		padding-top: 0px; 
	}

	.col-quizzes{
		width:33% !important;
		float:left !important;
		position: relative !important;
		min-height: 1px !important;
		padding-right: 15px !important;
		padding-left: 15px !important;
	}
	
}

/* xL > 1400 */
@media screen and (min-width: 1300px) {
	.col-quizzes{
		width:14.25% !important;
		float:left !important;
		position: relative !important;
		min-height: 1px !important;
		padding-right: 15px !important;
		padding-left: 15px !important;
	}
}

.homepage-cards {
	border-radius: 15px; 
	border-width: 5px;
}

.home-cards-images {
	max-height: 170px; 
	max-width: 150px;
}

.blue-back {
	background-color: #e4ecf3 !important;
}

.sky-blue-back {
	background-color: #BDD7EE !important;
}

.white-back {
	background-color: white !important;
}

.leftCard {
	float: left;
}

.rightCard {
	float: right;
}

.cardBox {
	box-shadow: 3px 6px 6px grey;
}

.carousel-inner img {
	margin: auto;
}

/* to make the prev and next button black not white */
.carousel-control-prev-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
   
.carousel-control-next-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

.slide-img {
	max-width: 100%;
	height: auto;
	padding: 0px 5vw;
}

.descriptionImg {
	max-width: 300px; 
	max-height: 250px; 
}

.non-graded-card {
	background-color: #a3d874;
}

.list-non-graded {
	background-color: #a3d874;
}

input.largerCheckbox {
	width: 20px;
	height: 20px;
	margin-right: 10px;
}

.quizAuthoringInfoImage{
	width: 90%;
	padding-bottom: 15px;
}

.quizAuthoringInfoQuestionMark{
	border: 0;
	height: 33px;
	width: 30px;
	padding-bottom: 5px;
}

.excelIcon{
	height: 20px;
	width: 20px;
	border: 0;
}

.aboutPageQuizImages{
	border: 0;
	height: 250px;
	max-width: 400px;
}

.loadingGifLarge{
	height: 25px;
	width: 25px;
}

.loadingGif{
	height: 20px;
	width: 20px;
}

.loadingGifSmall{
	height: 15px;
	width: 15px;
}

#loadingGifLarge{
	height: 25px;
	width: 25px;
}

#loadingGif{
	height: 20px;
	width: 20px;
}

#loadingGifSmall{
	height: 15px;
	width: 15px;
}

.awardIcon{
	height: 28px;
	width: 28px;
}

.deleteIcon{
	height: 28px;
	width: 28px;
}

.disabledInput {
	background-color: #efefef !important;
}

.personImg {
	width: calc(8vw + 150px); 
	height: calc(8vw + 150px);
	border-radius: 0px;
}

.progressImg {
	max-width: 75%; 
	height: auto; 
	border-color: black; 
	border-width:2px; 
	border-radius: 5px; 
	border-style:solid;
}

.welcomecards{
	padding: 0px !important;
	margin: 0px !important;
	border: 0px !important;
	background-color: rgba(0, 0, 255, 0) !important;
	flex-basis: 19% !important;
}

.box-shadow--2dp {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
.box-shadow--3dp {
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12)
}
.box-shadow--4dp {
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2)
}
.box-shadow--6dp {
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2)
}
.box-shadow--8dp {
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2)
}
.box-shadow--16dp {
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2)
}

.cogsImg {
	width: calc(2vw + 16px);
	height: calc(1vw + 16px);
}

.cogsText {
	font-size: calc(1.6vw + 12px);
}

.LPAimg{
	width: calc(4vw + 40px);
	height: calc(4vw + 40px);
}

.LPAarrow{
	max-width: calc(0.8vw + 8px);
	max-height: calc(0.8vw + 8px);
	margin-top: 0px !important; 
	vertical-align: top;
}

.LPAcontainer{
	display: grid;
	grid-template-columns: 28% 8% 28% 8% 28%;
}

.LPAdiv{
	padding: 0px;
	margin-top: 0px !important; 
}

.LPAfont{
	font-size: calc(0.8vw + 8px);
	margin-top: 0px !important; 
}

.LPAtailored{
	font-size: calc(0.6vw + 8px);
	margin-top: 0px !important; 
}

.subscriptionCard{
	margin-left: 3vw !important;
	margin-right: 3vw !important;
	margin-bottom: 10px !important;
}

.subscriptionText{
	font-size: calc(0.4vw + 15px);
}

.subscriptionTextLarge{
	font-size: calc(0.8vw + 20px);
}


.subscriptionArrow{
	width: calc(0.6vw + 30px); 
	max-height: calc(0.6vw + 30px);
}
.quizcarouseltext{

	padding-left: 10vw !important;
	padding-right: 10vw !important;
	text-align: justify !important;
}

.featuresHead{
	background-color:	#0178C3 !important;
	color: white !important;
}

.featuresSub{
	background-color:	#53A8D1 !important;
}

.jodit_toolbar li{
	width: auto;
	float: none;
}

.jodit_toolbar{
	z-index:2021;
}

.jodit_wysiwyg body{
	z-index: 100 !important;
	background-color: white !important;
}

body.jodit_wysiwyg{
	text-align:left;
	max-height: 100%;
	overflow-y: scroll;
	width: 100%;
	height: 100%;
}

html.jodit{
	overflow-y: scroll;
	width: 100%;
}

iframe.jodit_wysiwyg_iframe{
	min-height: 80px !important;
	height: 80px !important;
	overflow-y: scroll;
	width: 100%;
}

.jodit_fullsize_box iframe.jodit_wysiwyg_iframe {
	height: 100% !important;
}

.jodit_wysiwyg_iframe{
	overflow-y: scroll;
	width: 100%;
}

div.jodit_fullsize_box{
	z-index: 1021 !important;
}

.jodit_tabs_buttons a{
	min-height: 50px !important;
}

.jodit_toolbar>li.jodit_toolbar_btn {
	color: black !important;
}

.jodit_toolbar {
	position: static !important;
}

.jodit_sticky-dummy_toolbar {
	display: none !important;
}

.jodit_icon_Table_help{
	width: 75px !important;
}


.jodit_icon_insertName{
	width: 65px !important;
	height: 40px !important;
}

.jodit_icon_insertUserRole, .jodit_icon_insertSchoolName, .jodit_icon_insertPostcode{
	width: 75px !important;
	height: 40px !important;
}

.jodit_icon_insertSchoolName{
	width: 100px !important;
	height: 40px !important;
}

.jodit_icon_Gapfill, .jodit_icon_GapfillEmpty, .jodit_icon_TypeIt, .jodit_icon_TypeItEmpty1, .jodit_icon_TypeItEmpty2, .jodit_icon_TypeItEmpty3, .jodit_icon_TypeItEmpty4{
	width: 150px !important;
}

.jodit_container:not(.jodit_inline) {
	background: white !important;
}

.jodit_toolbar_popup-inline>div {
	background: white !important;
}


.jodit_toolbar_list>.jodit_toolbar li.jodit_toolbar_btn {
	z-index: 99999 !important;
	background-color: white;
}

.jodit_toolbar>li.jodit_toolbar_btn {
	height: 50px !important;
}

.jodit_toolbar>li.jodit_toolbar_btn.jodit_active{
	background-color: rgb(249, 249, 249)!important;
}

.jodit_toolbar_btn-brush svg{
	fill:black !important;
}

.jodit_wysiwyg_iframe{
	border-collapse: collapse;
}

.featuresGreen{
	color: green;
}

object, video{
	max-width: 70vw !important;  
	max-height: 58vw !important;
}

.container.homepage {
	margin-top: -3vw;
}

.signInRegisterBox{
	margin-top: 20px;
	width: 80%;
	display: inline-block;
	max-width: 900px;
	background-color: #BDD7EE !important;
	padding: 15px !important;
    border-radius: 20px !important;
    box-shadow: 5px 10px 10px !important;
}

.unsubscribeBox{
	margin-top: 20px;
	width: 80%;
	display: inline-block;
	max-width: 900px;
	background-color: #BDD7EE !important;
	padding: 15px !important;
    border-radius: 20px !important;
    box-shadow: 5px 10px 10px !important;
}

.formInputDiv{
	margin-bottom: 1rem;
	position: relative;
    width: 80%;
    padding-right: 1vw;
	padding-left: 1vw;
	margin-left: 10%;
}

.formInput{
	border: 1px solid #888 !important;
	display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.package_moreInfoBtn1{
	color: blue;
}

.package_moreInfoBtn1:hover{
	text-decoration: underline;
	cursor: pointer;
}

.package_moreInfo{
	display: none;
	float:left;
	width:100%;
	margin-top:10px;
}

/* Landing Page */

.logo{
	width: calc(4vw + 40px);
    height: calc(4vw + 40px);
}

.landingContent{
	width: 100%;
	float: left;
	margin-top: -1.5vw;
}

.landingTabSpace{
	width:100%;
	float: left;
	padding-top: 10px;
	text-align: center;
}

.landingTab{
	padding: 5px;
	padding-left: 15px;
	padding-right: 15px;
	cursor: pointer;
	margin: 0.6%;
	border: thin;
	border-color: black;
	border-radius: 5px;
	border-style: solid;
	display: inline-block;
}

@media all and (max-width: 450px) { /* Less than 450px */
	.landingTab{
		padding-left: 8px;
		padding-right: 8px;
		font-size: 10px;
	}
}
@media all and (max-width: 600px) { /* Less than 600px */
	.landingTab{
		padding-left: 10px;
		padding-right: 10px;
		font-size: 12px;
	}
}

.landingTab:hover{
	border-color: #097392;
}

.tabContentSpace{
	width: 100%;
	float: left;
}

.tabContent{
	box-shadow: 3px 6px 6px grey;
	background-color: #BDD7EE !important;
	padding: 1.25rem;
	text-align: left;
	display: inline-block;
	width: 80%;
	min-height: 275px;	
	height:fit-content;
	height:-ms-fit-content;
	height:-moz-fit-content;
	height:-webkit-fit-content;
}

#bottomBanner{
	width:80%;
	display: inline-block;
}

@media all and (max-width: 1400px) { /* Less than 1400px */
	.tabContent{
		width:90%;
	}
	#bottomBanner{
		width:90%;
	}
}

@media all and (max-width: 1250px) { /* Less than 1250px */
	.tabContent{
		width:100%;
	}
	#bottomBanner{
		width:100%;
	}
}

#overviewTab{
	text-shadow:1px 0px 0px black;
}

#overview_tabText{
	display:inline-block;
}
#students_tabText{
	display:none;
}

#teachers_tabText{
	display:none;
}

#schools_tabText{
	display:none;
}

#endorsements_tabText{
	display: none;
}

#discountCodes_tabText{
	display: none;
}

ul.ticked-list {
	list-style: none;
	padding-left: 15px;
	padding-right: 15px;
	width: fit-content;
	width: -ms-fit-content;
	width: -moz-fit-content;
	width: -webkit-fit-content;
	float: left;
	max-width: 65%;
}

ul.ticked-list#endorsemenetsList{
	width:100%;
	max-width: 100%;
}
  
li.ticked-list-item::before {
	content: '✓';
	margin-right: 10px;
	font-weight: 800;
}

li.ticked-list-item {
	width: fit-content;
	width: -ms-fit-content;
	width: -moz-fit-content;
	width: -webkit-fit-content;
}

.tabEndorsement{
	float: right;
	margin-left: 10px;
	max-width: 33%;
	margin-top:-15px;
	width: inherit;
	position: relative;
}

.tabContentText{
	float: left;
	width: 100%;
}

.tabText{
	width: 100%;
}

.speech-bubble {
	position: relative;
	background: #097392;
	border-radius: .4em;
	padding:10px;
	padding-top: 5px;
	padding-bottom: 5px;
	top:0px;
	margin:5px;
	max-width: 100%;
	float: none;
	color: #FFFFFF;
	margin-right:10px;
	line-height: 20px;
	display: inline-block;
	max-width:500px;
	font-size: 15px;
	color: 	#FFFFFF;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	left: 0;
	top: 60%;
	width: 0;
	height: 0;
	border: 18px solid transparent;
	border-right-color: #097392;
	border-left: 0;
	border-bottom: 0;
	margin-top: -19px;
	margin-left: -18px;
}

#tabEndorsement_teachers{
	text-align: center;
}

#overviewEndorsement_1{
	top: 15px;
}

#tabEndorsement_students{
	top:20px;
}

#teachersEndorsement_1{
	top:15px;
}

#schoolsEndorsement_1{
	max-width:260px;
	top: 5px;
}

#schoolsEndorsement_2{
	max-width:730px;
	top:-5px;
}

#schoolsEndorsement_3{
	max-width: 730px;
	top:11px;
}

#endorsementsEndorsement_1{
	float: left;
	top: 0px;
	left: 5%;
	max-width: 40%;
}
#endorsementsEndorsement_2{
	float: left;
	top: 0px;
	left: 15%;
	max-width: 40%;
}
#endorsementsEndorsement_3{
	float: left;
	left: 5%;
	max-width: 95%;
}
#endorsementsEndorsement_4{
	float: left;
	left: 5%;
	max-width: 35%;
	width: fit-content;
	width: -ms-fit-content;
	width: -moz-fit-content;
	width: -webkit-fit-content;
}
#endorsementsEndorsement_5{
	float: left;
	left: 12%;
	max-width: 50%;
}
#endorsementsEndorsement_6{
	float: left;
	left: 5%;
	max-width: 60%;
}

.package_moreInfoBtn{
	color:#006bff;
	font-size:24pt;
	padding:0;
	line-height:70%;
	float:right;
	min-width:25px;
}

del.discount {
	color: red;
    text-decoration: none;
    position: relative;
    display: inline-block;
}

del.discount:after {
	content: " ";
    width: 100%;
    display: inline-block;
    border-top: 1px solid;
    border-color: red;
    position: absolute;
    bottom: 50%;
    left: 0;
    transform: rotate(-11deg);
} 

ins {
    color: green;
    text-decoration: none;
}

#infoMessage_renewalCalculator{
	width: 400px;
}

/* Student Packages Page */

.subjectName{
	border: thin;
	border-top-style: solid;
	border-color: black;
	background-color: #c5dee6 !important;
	height: 100% !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 5px !important;
	padding-right: 5px !important;
	float: left;
	width: 100%;
}

.subjectPackage{
	width: 100%;
	float: left;
	border: thin;
	border-top-style: solid;
	border-color: black;
	padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 5px !important;
	padding-right: 5px !important;
	display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

.topicTestPackage{
	width: 100%;
	float: left;
	border: thin;
	border-bottom-style: solid;
	border-color: black;
	padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 5px !important;
	padding-right: 5px !important;
}

.switchPackageLevelOption{
	display: inline-flex;
	float: left;
	padding-right: 15px;
}

.signUpBtn{
	font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
	font-size: 0.9em;
	padding: .25rem .5rem;
    line-height: 1.5;
	border-radius: .2rem;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	color: #28a745;
	border-color: #28a745;
	border-style: solid;
	border-width: 1px;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	transition-property: color, background-color, border-color, box-shadow;
    transition-duration: 0.15s, 0.15s, 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    transition-delay: 0s, 0s, 0s, 0s;
}

.signUpBtn:hover{
	color: #fff;
    background-color: #28a745;
	border-color: #28a745;
	text-decoration: none;
}

.signUpBtn:focus{
	box-shadow: 0 0 0 0.2rem rgba(40,167,69,.5);
}

.packageAdvertisementSpace{
	width: 100%;
	float:left;
}

.expiredPackageSpace{
	width: 100%;
	float:left;
}

.packageAdvertisement_package{
	width: 22%;
	margin:1%;
	display: inline-grid;
	min-width: 250px;
}

#studentPackageListsContainer{
	width: 100%;
}

#teacherPackageListsContainer{
	width: 100%;
}

#setYourTargetGradeInfoContainer{
	float: right;
}

.studentPackageName{
	width: 45%;
	float: left;
}

@media (max-width: 450px) {
	.studentPackageName{
		width: 100%;
	}

	#setYourTargetGradeBtn{
		float: left;
	}
}

.advertisePackagesDescription.advertismentText{
	line-height: 1.2;
}

.signUpNowDiv{
	margin-right: 2%;
	float: left;
	margin-top: 2%;
}

.tryItNowDiv{
	float: left;
	margin-right: 2%;
	margin-top: 2%;
}

.moreInfoDiv{
	float: left;
	margin-top: 2%;
}

.avdertisePackagesActionButtons{
	float: left;
	width: 100%;
}


/* Quiz Pages */

.ajaxLoadingOverlayDiv{ /*This is intended to be applied to a div containing #ajaxLoadingOverlayGif img tag for ajax to prepend into activityCanvas*/
    position: absolute;
    width: 100%;
    height: 100%;
    margin-left: -15px;
    margin-top: -10px;
    background-color: whitesmoke;
    opacity: 0.65;
    z-index: 9;
}

.ajaxLoadingOverlayGif{ 
	position: relative;
    left: 42.5%;
    width: 15%;
    top: 35%;
    z-index: 9;
}

.switchLevelResponse{
	float: left;
}

#browserWarningSpace{
	min-width:80%;
	max-width:100%;
	width:fit-content;
	width:-ms-fit-content;
	width:-moz-fit-content;
	width:-webkit-fit-content;
}

.trophyDiv{
	padding: 6px;
	-moz-border-radius: 100%; 
	-webkit-border-radius: 100%; 
	border-radius: 100%;
	border-color: darkgray;
	border-style: solid;
	border-width: thin;
	float:right;
	bottom: -60%;
}

.subtopicTitleWithAward{
	float: left;
	width: calc(100% - 50px);
}
.subPageBtns {
	display: flex;
	justify-content: end;
}
.progressDiv, .leaderboardDiv, .revisionModeDiv {
	border-radius: 50%;
	border-color: darkgray;
	border-style: solid;
	border-width: 1px;
	background: linear-gradient(200deg, #fff, #ddd);
	height: 75px;
    flex-wrap: wrap;
	width: 113px;
	padding: 5px;
	margin-left: 10px;
	margin-bottom: 10px;
}
.progressDiv span, .leaderboardDiv span, .revisionModeDiv span {
	display: block;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 20px;
	font-size: 12px;
	color: #555;
    flex: 0 0 100%;
}
.progressDiv:hover, .leaderboardDiv:hover, .revisionModeDiv:hover, .progressDiv:focus, .leaderboardDiv:focus, .revisionModeDiv:focus {
	background: linear-gradient(#ddd, #fff);
	border-color: #000;
	cursor: pointer;
}

.revisionModeActive {
	border-color: green;
	background: rgba(51, 170, 51, .4);  /*  40% opaque green */
}
.revisionModeActive:hover{
	border-color: green;
	background: rgba(142, 233, 142, 0.767);  /*  40% opaque green */
}

.settingsCogDiv:hover{
	cursor: pointer;
}

.redRow{
	background: red !important;
}

.vertical-rl{
	-ms-writing-mode: tb-rl; 
	-webkit-writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-ms-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}
.groupActions:hover{
	cursor: pointer;
}

.studentActions:hover{
	cursor: pointer;
}

#passwordPolicyDiv{
	margin-top:10px;
}

#lockPackageHomeworkOnlyText{
	margin-left: 10px;
	position: relative;
	top: 4px;
}

#lockPackageHomeworkOnlyDiv{
	cursor: pointer;
	width: 100%;
	padding-bottom: 10px;
}

#lockPackageHomeworkOnlyDiv:hover{
	text-decoration: underline;
}

#lockPackageHomeworkOnlyDiv:hover #lockPackageHomeworkOnlyImage{
	opacity: 1;
	filter: alpha(opacity=100);
}

#lockPackageHomeworkOnlyImage{
	opacity: 0.4;
	filter: alpha(opacity=40);
	width: 25px;
}

.notSetForHomework{
	background-color:rgb(248, 248, 248);
	cursor:pointer;
}
.notSetForHomework.not-allowed{
	cursor:not-allowed;
}

.notSetForHomework:not(.not-allowed):hover{
	background-color:#86cfda !important;
}

.homeworkDeadlineReached{
	cursor: pointer;
	background-color: #afed96 !important;
}

.releasedForHomework{
	cursor: pointer;
	background-color: #ffdf7e !important;
}

.setForHomework{
	cursor: pointer;
	background-color: #ff8d7e !important;
}

.selectedForHomework{
	border-width: medium !important;
	border-style: solid !important;
	border-color: yellow !important;
	background-color: #86cfda !important;
}

.ui-dialog{
	max-width:600px;
}

.stateDiv{
	width:100%;
}

.subtopicsHomeworkDiv{
	display:none;
}

.row{
	margin-left: 0px;
	margin-right: 0px;
}

.container-fluid{
	padding-left: 0px;
	padding-right: 0px;
}

.quizzesRow {
	margin-right: 0px !important;
	width: 100%;
	padding-right: 0px !important;
	float: left;
	padding-left:0px !important;
	margin-left: -15px;
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.toggleSubtopicsText{
	font-size: 20px;
	font-weight: bold;
}

.selectAllInSubtopic{
	color: #007bff;
	text-decoration: none;
}
.selectAllInSubtopic:hover{
	text-decoration: underline;
	color: #0056b3;
	cursor: pointer;
}

.cancelSubtopicFromSetWork{
	color: #007bff;
	text-decoration: none;
}
.cancelSubtopicFromSetWork:hover{
	text-decoration: underline;
	color: #0056b3;
	cursor: pointer;
}

.homeworkFormOption{
	float:left;
	width:fit-content;
	width:-ms-fit-content;
	width:-moz-fit-content;
	width:-webkit-fit-content;
	padding-right:5px;
	display:block;
}

#licenseDateInfoToggle{
	cursor: pointer;
	color: #0074D9;
}

#licenseDateInfoToggle:hover{
	text-decoration: underline;
	cursor: pointer;
}

.infoIcon{
	z-index:11;
	margin-left:-7px;
	margin-top:7px;
	position:relative;
	cursor: pointer;
}

.infoDiv{
	height: 1px;
	width: 1px;
	display: inline-grid;
}

#quizScoreInfoIcon{
	float: right;
    padding-right: 10px;
    top: -10px;
    position: relative;
}

#signInPasswordPolicyInfoDiv{
	position: absolute;
    top: 0px;
    right: 40px;
}

.disablePointer{
	pointer-events: none;
}

.quizButtonNameSetForHomework{
	position: relative;
	top:7px;
}

.toggleFreePackageContent{
	cursor: pointer;
}

.packageDiv{
	float: left;
	width: 100%;
	display: block;
    margin-right: auto;
    margin-left: auto;
}

.moduleTitle {
	font-weight:200;
	font-family: 'Montserrat', sans-serif;
	font-size:1rem;
	background-color:#233237! important;
	color:#EAC67A;
	padding: 6px 0px;
	border:1px solid black;
	position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px
}

.revisionModuleTitle {
	font-weight:300;
	font-family: 'Montserrat', sans-serif;
	font-size:1rem;
	background-color:#48b148 !important;
	color:#004031;
	padding: 6px 0px;
	border:1px solid black;
	position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px
}

.topicTitle{
	font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    background-color: #EAC67A !important;
    padding: 4px 0px;
    color: #233237;
    border-left: 2px solid #EAC67A;
	border-right: 2px solid #EAC67A;
	position: relative;
    width: 100%;
    padding-right: 15px;
	padding-left: 15px;
	margin-left: 0px !important;
	margin-right: 0px !important;
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.revisionTopicTitle{
	font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    background-color: #004031 !important;
    padding: 4px 0px;
    color: #48b148;
    border-left: 2px solid #004031;
	border-right: 2px solid #004031;
	position: relative;
    width: 100%;
    padding-right: 15px;
	padding-left: 15px;
	margin-left: 0px !important;
	margin-right: 0px !important;
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.hiddenTopic {
	background-color: #ffe8b8 !important;
	background: repeating-linear-gradient( -45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 10px, rgba(255, 29, 29, 0.2) 10px, rgba(255, 29, 29, 0.2) 20px );
}

.subtopicRow {
	background: #FFF;
	font-family: 'Montserrat', sans-serif;
	padding:6px 0px;
	font-size:0.8rem;
	font-weight:bold;
	border-left:2px solid #EAC67A !important;
	border-right:2px solid #EAC67A !important;
	border-bottom:2px solid #EAC67A !important;
	margin-left: 0px !important;
	margin-right: 0px !important;
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.revisionSubtopicRow {
	background: #FFF;
	font-family: 'Montserrat', sans-serif;
	padding:6px 0px;
	font-size:0.8rem;
	font-weight:bold;
	border-left:2px solid #004031 !important;
	border-right:2px solid #004031 !important;
	border-bottom:2px solid #004031 !important;
	margin-left: 0px !important;
	margin-right: 0px !important;
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.subtopicTitle{
	margin:auto;
}

.quizDiv{
	float:left;
	width:100%;
	margin: 2px;
	margin-left: 25px;
	max-width: 150px;
	float: left;
}

.quizBtn{
	align-items:center;
	background-color:#f8f9fa;
	border: 1px solid #888;
	border-radius:10px;
	opacity: .65;
	box-sizing:border-box;
	color:rgb(0, 0, 0);
	display:flex;
	font-family:Kalam, sans-serif;
	font-size:14px;
	font-style:normal;
	font-weight:700;
	height:38px;
	justify-content:center;
	line-height:21px;
	margin:0px;
	overflow-wrap:break-word;
	padding: 0px !important;
	pointer-events:auto;
	position:relative;
	text-align:center;
	text-decoration-color:rgb(0, 0, 0);
	text-decoration-line:none;
	text-decoration-style:solid;
	text-size-adjust:100%;
	user-select:none;
	vertical-align:middle;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
	pointer-events: auto;
	align-items: center;
	display: flex;
	justify-content: center;
}

.clickable{
	cursor: pointer;
}

.greyedOut{
	background-color: #c3c3c3 !important;
	cursor: default !important;
}

#homeworkSetsList .card-header{
	padding: .45rem 1rem;
}

#toggleMoreHomeworkSets:hover{
	text-decoration: underline;
	cursor: pointer;
	background-color: #eeeeee;
}

.olderHomeworkSet{
	display:none;
}

.quizBtn.clickable{
	background-color: rgb(248, 248, 248);
	border-color:rgb(0, 0, 0);
	opacity: 1;
}

.quizBtnLeft{
	display: flex;
	height: 100%;
	color: black !important;
    padding-top: 5%;
	position: inherit;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	width:70%;
}

.quizBtnLeft.clickable:hover{
	background-color: rgb(235, 233, 233);
}

.narrowLeftQuizBtn{
	width:60% !important;
}

.quizButtonName{
	width: 100%;
}

.quizBtnRight{
	text-align:center;
	margin: 0;
	border-radius: 0 10px 10px 0;
	border-left: 1px solid #888 !important;
	width: 30%;
	color: #6EAC39;
	font-weight: bold !important;
	font-size: 14px!important;
	font-family:'Kalam', sans-serif!important;
	color: #000 !important;
	overflow-wrap:break-word;
	font-family: 'Montserrat', sans-serif;
	font-style:normal;
	font-weight:400;
	font-size:0.9em;
	align-items: center;
	display: flex;
	justify-content: center;
	height: 100%;
	cursor: pointer;
	line-height: 12px;
}

.quizBtnRight.clickable:hover{
	border-left: 1px solid #000 !important;
}

.quiz-category-card{
	position: absolute; 
	top: 23px;
	left: 40px;
	display:none; 
	z-index:99; 
	background-color: rgb(204, 204, 204)!important;
	padding: 6px 8px 6px 8px;
	border-radius: 10px;
	opacity: 0.9;
	border-color: #69696A;
	border-style: solid;	
	border-width: 1px;
}

.quizDiv:hover .quiz-category-card{
	display:block;
}

.packageBottomInfo{
	display: block;
    float: left;
    margin-top: 30px;
}

.packageHomeworkSets{
	border-right: #9b9b9b;
	border-right-style: solid;
	border-right-width: thin;
	border-left: #9b9b9b;
	border-left-style: solid;
	border-left-width: thin;
	border-bottom: #9b9b9b;
	border-bottom-style: solid;
	border-bottom-width: thin;
	padding:10px;
}

.homeworkPackageTitle{
	font-size:1.25rem;
	color:#EAC67A;
}

.homeworkPackageTitle:hover{
	color:rgb(228, 180, 77);
	text-decoration:underline;
}

.homeworkContentLink{
	color:#000;
	text-align: left;
	padding:0px;
	padding-bottom:5px;
	display: contents;
}

.homeworkContentLink:hover{
	text-decoration:underline;
}

.homeworkContentReviewLink{
	color:#000;
	text-align: left;
	padding:0px;
	display: inline;
}

.homeworkContentReviewLink:hover{
	text-decoration:underline;
}

.toggleOlderHomeworks{
	width: 100%;
	text-align: center;
	cursor: pointer;
}

.toggleOlderHomeworks:hover{
	text-decoration: underline;
}

.homeworkOlderDiv{
	display:none;
}

.showOtherHomeworkInstances{
	cursor: pointer;
}
.showOtherHomeworkInstances:hover{
	text-decoration: underline;
}

.toggleFutureHomeworks{
	width: 100%;
	text-align: center;
	cursor: pointer;
}

.toggleFutureHomeworks:hover{
	text-decoration: underline;
}

.homeworkFutureDiv{
	display:none;
}

.dialog_modal_warning{
	background-color: red;
    background-image: none;
    opacity: 0.75;
    z-index: 1040;
}

.jQueryDialog{
	position: fixed;
	top:80px !important;
	max-width: 85vw !important;
	right: 0 !important;
    left: 0 !important;
    margin-right: auto !important;
	margin-left: auto !important;
	z-index: 1000 !important;
}

.jQueryDialogContent{
	max-height: 65vh !important;
	width: fit-content !important;
	width:-ms-fit-content !important;
	width:-moz-fit-content !important;
	width:-webkit-fit-content !important;
	max-width: 80vw !important;
}

.resultsLevelCell{
	width: 100%;
}

.resultsDateCell{
	width: 100%;
}

.resultsScoreCell{
	width: 100%;
}

.resultsDeleteCell{
	width: 100%;
}

.resultsPassCell{
	display: inline-block;
	width: 100%;
}

.resultsDeleteScoreImage{
	position: relative;
	cursor: pointer;
	padding-bottom: 1px;
}

.tdResultsPass{
	width: 40px;
}

thead th.tablesorter-header{
    background-repeat: no-repeat;
    background-position: right center;
}
.tablesorter-header{
	background-repeat: no-repeat;
    background-position: right center;
	background-image: url("data:image/gif;base64, R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==");
}
.tablesorter-header.sorter-false{
	background-repeat: initial;
    background-position: initial;
	background-image: unset;
}
thead th.tablesorter-headerAsc {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}
thead th.tablesorter-headerDesc {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}

#tablePaginationControls{
	width: 100%;
	float: left;
}

#toggleReportInfo:hover{
	cursor: pointer;
	text-decoration: underline;
	color: #0074D9;
}

.author_report_quiz_img{
	max-width: 50%;
}

#toggleLogInfo:hover{
	cursor: pointer;
	text-decoration: underline;
	color: #0074D9;
}

.leaderboardKeyInfo{
	top: -10px;
    right: -2px;
    position: relative;
}

#teacherUserSearch{
	float:left; max-width:73%; margin-right:10px;
}
#teacherSearchUsers{
	float:left; width:20%; min-width:80px; 
}
.currentStudentOptionsLabel{
	float:left;
	padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
	line-height: 1.5;
	font-weight: bold;
	text-align: left;
	margin-right:10px;
	min-width: 60px;
	width: 15%;
}
#groupLookupLabel{
	max-width:33%;
	width: fit-content;
	width: -ms-fit-content;
	width: -moz-fit-content;
	width: -webkit-fit-content;
}

#userSeasrchDiv{
	width: 83%;
}
#groupLookupDiv{
	width: 66%;
}

@media all and (max-width: 1350px) { /* Less than 1350px */
	#userSeasrchDiv{
		width:100%;
	}
	#groupLookupDiv{
		width: 100%;
	}
	.currentStudentOptionsLabel{
		width: 100%;
		padding-top:0px;
	}

	#groupLookupLabel{
		max-width:100%;
	}
}

@media all and (max-width: 820px) { /* Less than 820px */
	#teacherUserSearch{
		max-width:100%; margin-right:10px; margin-bottom:5px;
	}
}

.preview-img-display{
	width: 17rem;
    max-width: 80%;
}

#globalSettingsLiteModeI{
	padding-left: 10px;
}

.packageOptionsPanel{
	padding: 20px;
	border: #495057;
	border-width: thin;
	border-style: solid;
	background-color: #dadcdd;
	border-radius: 5px;
	margin-top:20px;
}

#confirmTeacherUsersPrompt{
	width: fit-content;
	width: -ms-fit-content;
	width: -moz-fit-content;
	width: -webkit-fit-content;
	font-size: 100%;
	padding: 15px;
	padding-right: 30px;
	background-color: tomato;
	border-radius: 10px;
	border: red;
	border-width: thin;
	border-style: solid;
}

.dropdown-submenu {
	position: relative;
}
  
.submenu-right a::after {
	transform: rotate(-90deg);
	position: absolute;
	right: 6px;
	top: .8em;
}

.submenu-left a::after{
	transform: rotate(-270deg);
	position: absolute;
	left: 6px;
	top: .9em;
}


#conversionsInfoBtn{
	margin-left: 15px;
    margin-top: -7px;
}

/*----- Accordion -----*/

.accordion, .accordion * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.accordion {
    overflow: hidden;
    background: #f8f8f8;
    position: relative;
}

.accordion:before {
    position: absolute;
    z-index: 0;
    top: 28px;
    bottom: 10px;
    left: 20px;
    content: "";
}

/*----- Section Titles -----*/

.accordion .accordion-section-title {
    width: 100%;
    padding: 9px;
    display: inline-block !important;
    background: #e8e8e8;
    transition: all linear 0.15s;
    font-size: 14px;
    color: #222 !important;
    font-weight: 600;
    position: relative;
}

.accordion-section-title:before {
    margin-right: 18px;
    content: "\2B9E";
    display: inline-block;
    font-size: 12px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: 200ms;
    color: #fff;
    background: #3e5a8a;
	width: 32px;
    height: 32px;
    text-align: center;
    line-height: 33px;
	border-radius: 50%;
}

.accordion-section-title.active:before {
    margin-right: 18px;
    content: "\2B9F";
    color: #fff;
}

.accordion-section-title .text-right {
    width:50%;
	display: inline-block;
	float: right;
	padding: 7px 0;
}

.accordion-section-title.active, .accordion-section-title:hover {
    color: #222 !important;
    text-decoration: none;
}

.accordion-section:last-child .accordion-section-title {
    border-bottom: none;
}


/*----- Section Content -----*/

.accordion-section-content {
    margin-bottom: 10px;
    padding: 10px 20px 20px 40px;
    color: #000;
    display: none;
}
.accordion-section-title.active + .accordion-section-content {
    display: block;
}
.accordion-section-content .matchupQuestion {
    background: rgb(14, 121, 178);
}
.questionsContainer {
	display: block;
	position: relative;
	min-height: 300px;
}
.questionsContainer .questionCard {
	background: #fff;
	padding:10px 20px 20px 20px;
	border-radius: 8px;
	box-shadow:0px 1.5px 4px rgba(0,0,0,0.15);
	margin-bottom: 25px;
	position: relative;
}
.questionsContainer .questionCard_footer {
	width:100%;
}
.questionsContainer .questionCard_header {
	width:100%;
	border-bottom: #ddd dashed 1px;
	margin-bottom: 20px;
	padding: 10px;
}
.questionsContainer .questionCard_header label {
	font-size: 18px;
	margin-bottom: 0;
	font-weight: bold;
}
.questionsContainer .deleteCard, .deleteCardImage {
	position: absolute;
	right:0;
	display: inline-block;
	width:25px;
	height:25px;
	line-height: 25px;
	background-color: #ff0000;
	color:#fff;
	vertical-align: middle;
	text-align: center;
	border-radius: 50%;
	font-weight: bold;
	font-size: 14px;
	box-shadow:0px 1.5px 4px rgba(0,0,0,0.25);
	cursor: pointer;
	top: 10px;
    right: 15px;
	z-index: 999;
}
.questionsContainer .deleteCard:hover, .deleteCard:focus, .deleteCardImage:hover {
	text-decoration: none;
	color:#fff;
	background-color: #e40f0f;
}
.questionsContainer .questionCard_footer button {
	margin-right: 20px;
}
.questionCard img.prevCard {
	width: 100%;
}
.questionCard .form-control {
	height: 45px;
}

#flashMessage {
	position:fixed;
	bottom:10px;
	left:10px;
}
#flashMessage .error {
	background-color: #c73333;
    display: block;
    z-index: 999999999;
	position: relative;
    width: 400px;
    padding: 10px;
    color: #fff;
    text-align: left;
	margin: 10px;
	border-radius: 2px;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}
#flashMessage .success {
	background-color: #20a553;
    display: block;
    z-index: 999999999;
	position: relative;
    width: 400px;
    padding: 10px;
    color: #fff;
    text-align: left;
	margin: 10px;
	border-radius: 2px;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}
#flashMessage .warning {
	background-color: #b49e1e;
    display: block;
    z-index: 999999999;
	position: relative;
    width: 400px;
    padding: 10px;
    color: #fff;
    text-align: left;
	margin: 10px;
	border-radius: 2px;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}
#flashMessage .closebtn {
	float: right;
}
img.prevCard {
    width: 60%;
	margin-bottom: 20px;
}
.questionsContainer #loading {
    position: absolute;
    width: 100%;
	height: 100%;
	display : grid;
	background-color: #fff;
}
.questionsContainer #loading:after {
	border: 5px solid #ddd;
	border-top: 5px solid #3498db;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 2s linear infinite;
	margin: auto;
    position: relative;
	content:'';
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.questionContainerBody {
	display:none;
}
button:disabled, input[type="submit"]:disabled {
	background: #777;
	cursor: not-allowed;
}
.modal-header + * {
	text-align: left;
}
.deleteCardImage {
	top: 5px;
	right: 5px;
	transform: none;
	color:#fff !important;
}

.assignedToThisHomework{
	border-width: medium;
	border-color: rgb(50 203 0) !important;
	background: #86cfda !important
}

.bubbleParent {
	overflow:visible;
	position: relative;
	display: inline-block;
	width:auto;
}

.hint button:disabled, .bubble button:disabled, .bubbleParent  {
	cursor: pointer;
	pointer-events: all !important;
}

.bubble {
	position: absolute;
	padding: 10px;
	display: block;
	text-align: center;
	background-color: #fff;
	left: 0;
	border-radius: 5px;
	top: calc(100% + 3px);
	z-index: 9;
	box-shadow: 0px 0.5px 20px rgb(0 0 0 / 38%);
}
.bubble:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 8%;
	bottom: 100%;
	border: 8px solid;
	border-color: transparent transparent #fff transparent;
}
.bubbleParent:hover > .bubble {
	display: block;
}
.hint .badge {
	display: inline;
}
.helperHeader {
	margin: 10px 0;
	max-width: 930px;
}
.helperHeader ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.helperHeader ul li {
	padding: 8px;
	display: inline-block;
	width: auto;
}
.helperHeader .activateHelp {
	display: none;
}

.notSortable{
	cursor:default !important;
}

[tooltip] {
	position: relative;
}

[tooltip]::before,
[tooltip]::after {
	text-transform: none;
	font-size: .9em;
	line-height: 1.4;
	user-select: none;
	pointer-events: none;
	position: absolute;
	display: none;
	z-index: 999999;
}

[tooltip]::before {
	content: '';
	border: 5px solid transparent;
}

[tooltip]::after {
	content: attr(tooltip);
	width: max-content;
	max-width: 25em;
	overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
	padding: 6px 1.5ch;
	border-radius: .3ch;
	box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
	background: #333;
	color: #fff;
}
  
[tooltip]:hover::before,
[tooltip]:hover::after,
[tooltip]:focus::before,
[tooltip]:focus::after {
	display: block;
	display: -webkit-box;
}
  
/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
	display: none !important;
}
  
/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="top"]::before {
	bottom: 100%;
	border-bottom-width: 0;
	border-top-color: #333;
}

[tooltip]:not([flow])::after,
[tooltip][flow^="top"]::after {
	bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="top"]::before,
[tooltip][flow^="top"]::after {
	left: 50%;
	transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
[tooltip][flow^="bottom"]::before {
	top: 100%;
	border-top-width: 0;
	border-bottom-color: #333;
}

[tooltip][flow^="bottom"]::after {
	top: calc(100% + 5px);
}

[tooltip][flow^="bottom"]::before,
[tooltip][flow^="bottom"]::after {
	left: 50%;
	transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
	top: 50%;
	border-right-width: 0;
	border-left-color: #333;
	left: calc(0em - 5px);
	transform: translate(-.5em, -50%);
}

[tooltip][flow^="left"]::after {
	top: 50%;
	right: calc(100% + 5px);
	transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
	top: 50%;
	border-left-width: 0;
	border-right-color: #333;
	right: calc(0em - 5px);
	transform: translate(.5em, -50%);
}

[tooltip][flow^="right"]::after {
	top: 50%;
	left: calc(100% + 5px);
	transform: translate(.5em, -50%);
}

.editable .editable-col {
	position: relative;
	width:130px;
	padding-right: 20px;
}
.editable .editable-col *{
	width:100%;
}
.editable tbody tr:hover {
	background-color: rgb(218, 179, 255);
}
.editable tbody tr:hover .editable-col{
	background-color: rgb(239, 247, 174);
}
.editable tbody .editable-col::after {
	content: "\270E";
	position: absolute;
	right: 0;
	top:10px;
	transform:translateY(-10%) rotateY(180deg);
	font-size: 16px;
	color: #444;
}
.quiz_main_image {
	max-width: 98%;
}
#zz_frame::before {
	content:  '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	background: rgba(0,0,0,0.85);
	z-index: -1;
}
#zz_frame {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 999999;
}
#zz_media {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	margin: 0 auto;
	max-width: 850px;
	display: inline-block;
}
#zz_media img {
	width: 100%;
	box-shadow: 0px 0px 20px 1px rgb(0,0,0);
}
#zz_frame .zz_close {
	color: #fff;
	position: fixed;
	right: 10px;
	top: 10px;
	font-size: 26px;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: #bd0303;
    width: 30px;
    height: 30px;
    line-height: 30px;
	outline: 0;
}
#zz_frame .zz_controls {
	color: #fff;
	position: fixed;
	left: 10px;
	top: 10px;
}
#zz_frame .zz_controls button {
	font-size:14px;
	text-transform: uppercase;
	border:none;
	padding:8px 15px;
	border-radius:5px;
	color:white;
	background:#0672cc;
	outline:none;
	margin-right: 15px;
}
#zz_frame .zz_controls button:disabled {
	background:#777;
}
#zz_frame .zz_controls button svg {
	stroke: #fff;
	width:22px;
	margin-top:-5px;
	margin-right:10px;
}
#zz_frame .zz_controls button:active {
	background-color: #044479;
}
.zz_controls button.zz_zoom-out {
	cursor: zoom-out;
}
.zz_controls button.zz_zoom-in {
	cursor: zoom-in;
}
.zoomable_image {
	cursor: zoom-in;
}

.toggleSwitch {
	display: none;
}
.toggleSwitch, .toggleSwitch:after, .toggleSwitch:before, .toggleSwitch *, .toggleSwitch *:after, .toggleSwitch *:before, .toggleSwitch + .toggleSwitch-btn {
	box-sizing: border-box;
}
.toggleSwitch::-moz-selection, .toggleSwitch:after::-moz-selection, .toggleSwitch:before::-moz-selection, .toggleSwitch *::-moz-selection, .toggleSwitch *:after::-moz-selection, .toggleSwitch *:before::-moz-selection, .toggleSwitch + .toggleSwitch-btn::-moz-selection {
	background: none;
}
.toggleSwitch::selection, .toggleSwitch:after::selection, .toggleSwitch:before::selection, .toggleSwitch *::selection, .toggleSwitch *:after::selection, .toggleSwitch *:before::selection, .toggleSwitch + .toggleSwitch-btn::selection {
	background: none;
}
.toggleSwitch + .toggleSwitch-btn {
	outline: 0;
	display: inline-block;
	width: 2.5em;
	height: 1.4em;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;
	margin: 0 0 0 8px;
	vertical-align: middle;
}

.toggleSwitch + .toggleSwitch-btn:after, .toggleSwitch + .toggleSwitch-btn:before {
	position: relative;
	display: block;
	content: "";
	width: 50%;
	height: 100%;
}
.toggleSwitch + .toggleSwitch-btn:after {
	left: 0;
}
.toggleSwitch + .toggleSwitch-btn:before {
	display: none;
}
.toggleSwitch:checked + .toggleSwitch-btn:after {
	left: 50%;
}
  
.toggleSwitch + .toggleSwitch-btn {
	background: #c12;
	border-radius: 2em;
	padding: 2px;
	transition: all 0.4s ease;
}
.toggleSwitch + .toggleSwitch-btn:after {
	border-radius: 50%;
	background: #fff;
	transition: all 0.2s ease;
}
.toggleSwitch:checked + .toggleSwitch-btn {
	background: #298c44;
}

#activitiesList tr.excludedSubtopics{
	background-color: lightpink;
}
.toggleSwitch {
	display: none;
}
.toggleSwitch, .toggleSwitch:after, .toggleSwitch:before, .toggleSwitch *, .toggleSwitch *:after, .toggleSwitch *:before, .toggleSwitch + .toggleSwitch-btn {
	box-sizing: border-box;
}
.toggleSwitch::-moz-selection, .toggleSwitch:after::-moz-selection, .toggleSwitch:before::-moz-selection, .toggleSwitch *::-moz-selection, .toggleSwitch *:after::-moz-selection, .toggleSwitch *:before::-moz-selection, .toggleSwitch + .toggleSwitch-btn::-moz-selection {
	background: none;
}
.toggleSwitch::selection, .toggleSwitch:after::selection, .toggleSwitch:before::selection, .toggleSwitch *::selection, .toggleSwitch *:after::selection, .toggleSwitch *:before::selection, .toggleSwitch + .toggleSwitch-btn::selection {
	background: none;
}
.toggleSwitch + .toggleSwitch-btn {
	outline: 0;
	display: inline-block;
	width: 2.5em;
	height: 1.4em;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;
	margin: 0 0 0 8px;
	vertical-align: middle;
}

.progressIcons.toggleSwitch-btn{
	width: 3.5em;
    height: 1.8em;
	margin: 0 0 0 0px;
}
  
.toggleSwitch + .toggleSwitch-btn:after, .toggleSwitch + .toggleSwitch-btn:before {
	position: relative;
	display: block;
	content: "";
	width: 50%;
	height: 100%;
}
.toggleSwitch + .toggleSwitch-btn:after {
	left: 0;
}
.toggleSwitch + .toggleSwitch-btn:before {
	display: none;
}
.toggleSwitch:checked + .toggleSwitch-btn:after {
	left: 50%;
}
  
.toggleSwitch + .toggleSwitch-btn {
	background: #c12;
	border-radius: 2em;
	padding: 2px;
	transition: all 0.4s ease;
}
.toggleSwitch + .toggleSwitch-btn:after {
	border-radius: 50%;
	background: #fff;
	transition: all 0.2s ease;
}
.toggleSwitch:checked + .toggleSwitch-btn {
	background: #298c44;
}

.link-button {
	background: none;
	border: none;
	color: blue;
	text-decoration: underline;
	cursor: pointer;
	font-size: 1em;
	font-family: serif;
}

.deleteButton{
	margin-top:2px;
	margin-bottom:2px;
}

.faqDetail summary::-webkit-details-marker, .faqDetail summary::marker {
	display: none; 
	content: "";
}

.faqHeading {
	border: #f8f8f8 solid 2px;
	border-radius: 0 8px 8px 8px;
	background-color: #fff;
	display: flex;
	justify-content: center;
	position: relative;
	box-sizing: border-box;
}
.faqHeading .gridCol {
	margin: auto;
	position: relative;
}
.faqHeadLeft {
	flex-grow:1;
	vertical-align: middle;
	padding: 10px;
	font-size: 15px;
}
.faqHeadRight {
	width : 160px;
	text-align: right;
	padding: 10px;
}
.faqHeadRight form {
	display: inline;
}

.faqCatTitle {
	font-size: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.faqContent {
	padding: 10px 10px 2px 30px;
	background-color: #f1f1f1;
}
.faqDetail {
	margin-bottom: 5px;
	box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 7%);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    color: #495057;
    background-color: #fff;
    border-color: #007bff #007bff #fff !important;
}

.nav-tabs .nav-link, .nav-tabs .nav-link {
    border-color: #e9ecef #e9ecef #dee2e6;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: #c2c4c7 #c2c4c7 #c7cbcf;
}

.disabledLight{/*to mimic disabled but still allow title to show*/
	border: 1px dashed #888 !important;
	background: #e6e6e6;
	cursor: not-allowed !important;
}

.disabledOpacity{
	cursor: not-allowed !important;
	opacity: 0.5 !important;
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

.packageListBtn{
	padding: 0.175rem 0.375rem;
	font-weight: 600;
}

.packageListInfo{
	min-width: 200px;
	width: fit-content !important;
}

.selectedRole{
	color: #ffc107 !important;
}

.all-copy {  
	-webkit-user-select: all;  /* Chrome all / Safari all */
	-moz-user-select: all;     /* Firefox all */
	-ms-user-select: all;      /* IE 10+ */
	user-select: all;          /* Likely future */   
}

#infoMessage_clickScoreForResults{
	text-transform: none;
}

table.standardBlack td, .standardBlackPreview td{
	border: 1px solid black !important;
	border-collapse: collapse !important; 
	padding-left: 5px !important;
	padding-right: 5px !important;
	text-align: left !important;
}

table.standardBlack, table.standardBlack th, .standardBlackPreview table, .standardBlackPreview th, .headerPreview.standardBlackPreview table tr:first-of-type td{
	border: 2px solid black !important;
	border-collapse: collapse !important;
}

table.standardBlack th, .standardBlackPreview th, .headerPreview.standardBlackPreview table tr:first-of-type td{
	font-weight: bold !important;
	text-align: center !important;
	padding-left: 5px !important;
	padding-right: 5px !important;
}

table.erevisionBlue, table.erevisionBlue td, table.erevisionBlue th, .erevisionBluePreview table, .erevisionBluePreview td, .erevisionBluePreview th {
	border: 1px solid #024e6f !important;
	padding-left: 5px !important;
	padding-right: 5px !important;
	text-align: left !important;
}
table.erevisionBlue th, .erevisionBluePreview th, .headerPreview.erevisionBluePreview table tr:first-of-type td{
	color:white;
	background: #006a98 !important;
	font-weight: bold !important;
	padding-left: 5px !important;
	padding-right: 5px !important;
	text-align: center !important;
}

table.thinGrey, table.thinGrey td, table.thinGrey th, .thinGreyPreview table, .thinGreyPreview td, .thinGreyPreview th{
	border: 1px solid lightgray !important;
	padding-left: 5px !important;
	padding-right: 5px !important;
}

table.thinGrey td, .thinGreyPreview table td{
	padding-left: 5px !important;
	padding-right: 5px !important;
	text-align: left !important;
}

table.thinGrey th, .thinGreyPreview table th, .headerPreview.thinGreyPreview table tr:first-of-type td{
	padding-left: 5px !important;
	padding-right: 5px !important;
	text-align: center !important;
	font-weight: bold !important;
}

.groupSettings .nav-link.active{
	font-weight: bold;
}

/*letterhead reusable view - currently used in stage 7 teacher confirmation process letters to schools for printing*/
.letterhead_tg{border-collapse:collapse;border-spacing:0; background-color: #FFF; padding-bottom:15px;margin-left:-10px;margin-right:-10px;}
.letterhead_tg td{border-color:black;border-style:none;border-width:1px;font-family:Arial, sans-serif;font-size:14px; overflow:hidden;padding:10px 5px;word-break:normal;}
.letterhead_tg th{border-color:black;border-style:none;border-width:1px;font-family:Arial, sans-serif;font-size:14px; font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.letterhead_tg .letterhead_tg-73oq{border-color:#000000;text-align:left;vertical-align:top;font-size:10px;}
.letterhead_tg .letterhead_tg-apnp{border-color:#000000;font-size:28px;text-align:left;vertical-align:middle}


#checkerModeInfoBtn, #missingMediaInfo{
	width: 25px;
    height: 25px;
}

.subtopicView tr, .subtopicView th, .subtopicView td{
	border-color: black !important;
}

.criticalInformationBoxLeft{
	border: blue solid 2px;
	border-radius: 15px 0px 0px 15px;
	padding: 10px;
	margin: 10px 0px;
}
.criticalInformationBoxRight{
	border: blue solid 2px;
	border-radius: 0px 15px 15px 0px;
	padding: 10px;
	margin: 10px 0px;
}

.critical-text{
	color: magenta;
}

.indentText{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

/* :::::::::::::: Presentation css */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	--locked-color: #5fadbf;
	--unlocked-color: #ff5153;
}
.padlock_container {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* :::::::::::::: Required CSS */
/* Locked */
.padlock {
	width: 24px;
	height: 21px;
	border: 3px solid var(--locked-color);
	border-radius: 5px;
	position: relative;
	cursor: pointer;
	-webkit-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
	margin-right: 10px;
}
.padlock:after {
	content: "";
	display: block;
	background: var(--locked-color);
	width: 3px;
	height: 7px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -3.5px 0 0 -2px;
	-webkit-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}
.padlock:before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	bottom: 100%;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	border: 3px solid var(--locked-color);
	border-top-right-radius: 50%;
	border-top-left-radius: 50%;
	border-bottom: 0;
	-webkit-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}
/* Locked Hover */
.padlock:hover:before {
	height: 12px;
}
/* Unlocked */
.padlock_unlocked {
	transform: rotate(10deg);
}
.padlock_unlocked:before {
	bottom: 130%;
	left: 31%;
	margin-left: -11.5px;
	transform: rotate(-45deg);
}
.padlock_unlocked,
.padlock_unlocked:before {
	border-color: var(--unlocked-color);
}
.padlock_unlocked:after {
	background: var(--unlocked-color);
}
/* Unlocked Hover */
.padlock_unlocked:hover {
	transform: rotate(3deg);
}
.padlock_unlocked:hover:before {
	height: 10px;
	left: 40%;
	bottom: 124%;
	transform: rotate(-30deg);
}

.modal-dialog.modal-dialog-scrollable{
	width: fit-content;
    max-width: 80% !important;
}

.whiteSmokeOverlay{
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0px;
	left: 0px;
	background-color: whitesmoke;
	opacity: 0.65;
	z-index: 9;      
}

.loadingMessage{
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0px;
	left: 0px;
	z-index: 99999;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	text-align: center;
}

.loadingMessageContents{
	flex-direction: column;
	display: flex;
	flex-grow: 1;
	justify-content: center;
	align-items: center;
	align-content: center;
	margin: 30px;
}

.microsoftSignIn{
	background: #2F2F2F;
	text-align: left;
	height: 40px;
	width: 202px;
}

.microsoftSignIn img{
	margin: 9px 12px 9px 12px;
}

.microsoftSignIn .microsoftText{
	padding-right: 12px;
	font: Segoe UI regular; 
	font-size: 13px;
	font-weight: 600;
	color: #FFFFFF;
}

.microsoftSignIn:hover{
	background: #5b5b5b;
}

.g_id_signin{
	margin-bottom: 10px;
	min-width: 200px;
}

.big-font-btn{
	font-size:40px;
}

.Cpg{
	border: none;
	color: rgb(13, 110, 253);
}

.unassignedOptions{    
	background: orange;
	color: white;
}

#studentsInGroupTbl.table-striped>tbody>tr:nth-child(odd)>td, 
#studentsInGroupTbl.table-striped>tbody>tr:nth-child(odd)>th {
	background-color: rgba(0, 128, 0, 0.1);
}


.basketTable td{
	padding: 1rem;
}

@media all and (max-width: 600px) { /* Less than 600px */
	.basketTable{
		font-size: 0.8rem;
		max-width: 100%;
	}

	.basketTable th{
		max-width: 50px;
	}
	.basketTable td{
		max-width: 50px;
	}
	.basketTable td{
		padding: 0px;
	}
	
}