/*document*/
@charset "utf-8";
/* andada-pro-regular - latin */
@font-face {
  font-family: 'Andada Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/andada-pro-v2-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/andada-pro-v2-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/andada-pro-v2-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/andada-pro-v2-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/andada-pro-v2-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/andada-pro-v2-latin-regular.svg#AndadaPro') format('svg'); /* Legacy iOS */
  font-display: swap;
}
/* andada-pro-italic - latin */
@font-face {
  font-family: 'Andada Pro';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/andada-pro-v2-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/andada-pro-v2-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/andada-pro-v2-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/andada-pro-v2-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/andada-pro-v2-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/andada-pro-v2-latin-italic.svg#AndadaPro') format('svg'); /* Legacy iOS */
  font-display: swap;
}
/* averia-serif-libre-regular - latin */
@font-face {
  font-family: 'Averia Serif Libre';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/averia-serif-libre-v10-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/averia-serif-libre-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/averia-serif-libre-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/averia-serif-libre-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/averia-serif-libre-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/averia-serif-libre-v10-latin-regular.svg#AveriaSerifLibre') format('svg'); /* Legacy iOS */
  font-display: swap;
}
/* ubuntu-regular - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ubuntu-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/ubuntu-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ubuntu-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/ubuntu-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ubuntu-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/ubuntu-v15-latin-regular.svg#Ubuntu') format('svg'); /* Legacy iOS */
  font-display: swap;
}
/* sora-regular - latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/sora-v3-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/sora-v3-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/sora-v3-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/sora-v3-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/sora-v3-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/sora-v3-latin-regular.svg#Sora') format('svg'); /* Legacy iOS */
  font-display: swap;
}
/* sora-700 - latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/sora-v3-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/sora-v3-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/sora-v3-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/sora-v3-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/sora-v3-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/sora-v3-latin-700.svg#Sora') format('svg'); /* Legacy iOS */
  font-display: swap;
}
a:link {
  color: black;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: black;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: black;
  background-color: transparent;
  text-decoration: underline;
}

.aboutPageSpecific{
	display: flex;
	flex-direction: row;
}

.indented{
	margin-left:2rem;
	margin-right:2rem;
}
.notice{
	display: block;
	margin: auto;
	text-align: center;
	background-color: powderblue;
}

.testDivX{
	max-width: 40rem;
	background-color: 'grey';
}

pre {
    font-size: 1rem;
    font-weight: normal;
    padding: 0.5rem;
    /*border: 0.5px solid black;*/
    font-family: Verdana, Courier New, monospace;
    /*font-family : 'Helvetica',sans-serif;*/
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
.pickAnswerLine{
  margin: 0.2rem;
  padding: 0.2rem;
}
#pickTypeQbox{
  border: 0.5px solid black;
}
#inputField{
  border-radius: 0.2rem;
  box-shadow: none;
  margin: 1rem;
  align-self: center;
  display: none;
  /*background-color: ghostwhite;*/
  width:  30%;
}
#inputField:focus{
  font-size: 1rem;
  outline: none !important;
  border-color: black;
  box-shadow: 0 0 2px #719ECE;
}
#etype1{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  font-size: 1rem;
}
#etype1 > div{
  padding: 0.5rem;
  margin: 1rem;
  align-self: center;
  border: 1px solid black;
  width: auto;
}
#etype1 > table{
  padding: 0.1rem;
  margin: 0.1rem;
  align-self: center;
  width: auto;
}
.copyrightLine{
  font-size: 1rem;
  padding: 1rem;
  margin: 0.5rem;
  text-align: center;
  color: whitesmoke;
}
.aboutPageContainer{
  display: flex;
}
.imgElement{
  width: 20%; height: 20%; align-self: center;
}
.imgElementExtra{
  width: 30%; height: auto; align-self: center;
}
.centered{
	display: flex;
	justify-content: center;
}
.aboutPageTextContainer{
  margin: 2rem 4rem 2rem 4rem;  
}
.aboutPageFirstHeading{
  font-size: 0.9rem; font-weight: 200;
}
.accountPageContainer{
  display: flex;
	/*align-items: center;flex-direction: row;justify-content: space-evenly;*/
}
.accountInfoDiv{
  /*height: 20rem;*/
  height: auto;
  overflow: scroll;
  width: 25rem;
  padding: 0.5rem;
  margin: 1rem;
  /* box-shadow:2px 2px 3px #888;
  border: 2px solid gray;
  border-radius: 5px; */
}
.accountPageForm{
  height: auto;
  width: 25rem;
  padding: 0.5rem;
  margin: 1rem;
  /*
  box-shadow:2px 2px 3px #888;
  border-radius: 5px;
  border: 2px solid gray;*/
}
.accountPageForm > *{
  display: flex;
  flex-direction: column;
  /*align-items: center;*/
  width: auto;
  margin: 0.2rem;
}
.accountPageForm > form{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  margin: 0.2rem;
}
.contactPageContainer{
  /*be consistent!*/
  margin: 4rem;
  display: block;
}
.privacyPageContainer{
  margin: 4rem;
  display: block;
}
.termsDiv{
  margin: 4rem;
}
.verifyPageDiv{
  padding:1rem;display:flex;align-items: center;justify-content: center;flex-direction: column;  
}
.verifyPageForm{
  font-size:0.8rem; font-weight:normal;
}

.verificationReqSuccessDiv{
  margin: 4rem;
}

.emailVerifiedContainer{
  margin: 4rem;
}

.loader {
  border: 2px solid #f3f3f3; /* Light grey */
  border-top: 2px solid #222;
  border-right: 2px solid #222;
  /*border-style: dotted;*/
  /* border-top: 2px solid #3498db;  Blue */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
}

#attemptAndMode{
	display:flex;
	flex-direction: row;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

button#btn-start.pleaseWait{
  background: transparent;
  font-size: 1rem;
}

#startBtnImg {
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#startBtnImg > button{
  margin:0.5rem;
  min-width: 10em;
  width: auto;
}
#startBtnImg > button:hover{
  cursor: pointer;
}
/*.bodyflex{
  display: flex;
  flex-direction: column;
  height: 100%;
}*/
/*calendar.css*/
#MCQ{
  font-family: Verdana, Courier New, monospace; 
  font-size: 1rem;
  font-weight: normal;
  margin: 0.5rem;
}
#SCC{
  font-family: Verdana, Courier New, monospace;
  font-size: 1rem;
  font-weight: normal;
  margin: 0.5rem;
  display: flex;
  flex-direction: column;
  width: 40rem;
}
#SCC > div{
  font-family: Verdana, Courier New, monospace;
  font-size: 1rem;
}
.calendar-wrapper {
  max-width: 280px;
  /*font: 100% system-ui;*/
  font-size: 0.8rem;
  background-color: transparent;
}
.calendar {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

.calendar-wrapper > strong{
  background-color: black;
  color: whitesmoke;
}
.first-day {
  grid-column-start: 3;
}


.day-name {
  background: #eee;
}

h1 {
  text-align: center;
}
.calendar-wrapper > ol {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
#grid > li {
  padding: 3.5px;
}
#grid > li:hover{
  background-color: midnightblue;
  color: whitesmoke;
  cursor: pointer;
}
.testing{
  min-height: calc(100vh - 5rem);
}
/* questionpage */
/* flexbox fixed height  */
.flex-container-v {
  position: relative;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-fill {
  -webkit-flex: 0 1 auto;
  -moz-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}
.flex-fixed {
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}
.lhs {
  position: absolute;
  top: 8px;
  left: 8px;
  max-width:  100rem;
  width: 90rem;
  margin: 1rem;
  max-height: 40rem;
  height: 30rem;
  border: 1px solid red;
  overflow: hidden;
}
.list-container {
    overflow-y: scroll;
} 
.sample{
  width: auto;
}
::-moz-selection { /* Code for Firefox */
  color: white;
  background:  #3297FD;
}

::selection {
  color: white;
  background:  #3297FD;
}

#btn-start{
  border: 2px solid #222;
  font-size: 1.5rem;
  background-color:transparent; /* gold */
  color:#222;
  font-family: Verdana;
  /* font-family: 'Andada Pro', sans-serif;*/
}
span,text,small,strong,div{
  font-family: 'Open Sans',sans-serif; 
}

html,body{
	box-sizing: border-box;
	height: 100%;
        width: 100%;
	/*padding: .1rem;*/
	background-color: white;
/*  min-height: calc(100vh - 17rem);*/
}

/*header*/
nav{
  padding-left: 2rem;
  padding-right: 2rem;
  /*background-color: #0f134d;*/
   background-color: #222;
  /*background-color: #034f84;*/
  display: block;
  margin: 0;
  align-items: stretch;
  width: 100%;
  box-shadow: 0.5px 0.5px 5px gray;
}
#navbar-flexbox{
  padding: 0.8rem;
  font-size: 1rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  /*margin-left: 4rem;*/
  /*margin-right: 4rem;*/
  background-color: transparent;
  /*background-color: black;*/
	/*border: 5px solid teal;*/
}
/*
li > a{
  color: white;
}
*/
.nav-link:not(.brand){
  color: whitesmoke;
  line-height: 2.5rem;
}
.nav-link.brand{
  font-family: 'Andada Pro','Averia Serif Libre';
  font-size: 1.8rem;
  color: whitesmoke;
}
.nav-link:not(.brand):hover{
  text-decoration: underline;
}
/*.nav-link.brand:hover{
  color: darkslateblue;
}*/
.about{
  margin-left: 1rem;
}
.blog{
  margin-left: 1rem;
}
.shop{
  margin-left: 1rem;
}
.newpost{
  margin-left: 1rem;
}
.login{
	margin-left: 1rem;
}
.logout{
	margin-left: 1rem;
}
.subscribe{
	margin-left: auto;
}
.account{
	margin-left: 1rem;
}
/*content*/
#content{
	display: flex;
	flex-direction: column;
	border:  none;
	align-items: stretch;
	justify-content: center;
	max-width: 40rem;
}
#footer-flexbox{
  display: flex;
  justify-content: center;
}
#footer-flexbox > div{
	/* margin: 0.5rem; */
}
.footerlink{
  font-size: 1rem;
  color: white;
  margin: 1rem;
  padding: 1rem;
}
.social{
        color: white;
        padding: 1rem;
        margin: 1rem;
}
#instruction{
/* 	align-self: center; */
  margin: 0.2rem;
  font-weight: 700;
  font-size: 1rem;
  background-color: transparent;
  color: black;
	text-align:center;
}
/*TABLE*/
div#wmtypeX{
    display: none;
    margin: 2rem;
    background-color: transparent;
    /*background-color: #eeeeee;*/
    /*background-color: blanchedalmond;*/
  }
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  /*border: 1px solid black;*/
  text-align: left;
  padding: 4px;
}

tr:nth-child(even) {
  background-color: #EEF;
  /*background-color: #fff44f;*/
  /*background-color: powderblue;*/
}
/*questions*/
/*no effect*/
div#questionBoxInput{
  font-size: 1rem;
}
#textMore{
  display: none;
  text-align: center;
  justify-content: center;
  background-color: transparent;
}
/*no effect*/
#dropArea{
  background-color: transparent;
}
.questionheader{
  background-color: transparent;
}
#questionBox{
  font-size: 1rem;
  line-height: 2.2rem;
  background-color: transparent;
}

#question{
	flex: 2;
	background-color: transparent;
  /*padding: 2rem;*/
}
#srcbox{
    /*margin-bottom: 5rem;*/
    /*flex: 4;*/
    color: midnightblue;
    background-color: transparent;
}
#srcBox{
	/*margin-bottom: 5rem;*/
  /*flex: 4;*/
  color: midnightblue;
  background-color: transparent;
  /*padding: 2rem;*/
}
.questionheader{
  display: flex;
  flex-direction: column;
}
.timingetc{
  display: flex;
  flex-direction: row-reverse;
  padding: 0.2rem;
}
/*TIMER?*/
#demo{
  color: #333;
}
#qcount{
  margin-right: 1rem;
	background-color: transparent;
	text-align:center;
}
#control1{
    display: flex;
    align-self: center;
    color: midnightblue;
    background-color: transparent;
    text-align: center;
    padding: 0.1rem;
    margin: 0.1rem;
    position: fixed;
    top: 70%;
    left: 5%;
}
#control2{
    align-self: center;
    flex:1;
    color: cyan;
    background-color: transparent;
    text-align: center;
    padding: 0.25rem;
    margin: 0.25rem;
}

#control1 button{
  font-family: Verdana, 'Andada Pro', sans-serif;
  border: #222 solid 2px;
  background-color: transparent;
  color: #222;
  padding: 0.25rem;
  margin: 0.25rem;
}

.controlpanel{
  position: sticky;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: auto; 
}

#control1 button:hover{
  border: solid 2px #222;
  background-color: gold;
  /*border-radius: 50%;*/
  color: #222;
  padding: 0.25rem;
  margin: 0.25rem;
  cursor: pointer;
}

#control2 button:hover{
  border: none;
  color: darkslateblue;
  padding: 0.25rem;
  margin: 0.25rem;
  cursor: pointer;
}
#control2 button{
  border: none;
  background-color: transparent;
  padding: 0.25rem;
  margin: 0.25rem;
}
#control1 button i{
  font-size: 1.5rem;
}
#control2 button i{
  font-size: 1.5rem;
}
/*
=============== 
Fonts
===============
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");

/*
=============== 
Global Styles
===============
*/

div::after{
  margin: 0;
  padding: 0;
}

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style-type: none;
}
a {
  font-family: Verdana, 'Andada Pro',sans-serif;
  text-decoration: underline;
  font-size: 1rem;
}
.qsetlink a{
  font-family: 'Open Sans',sans-serif;
  color: black;
  text-decoration: none;
}
.qsetlink a:hover{
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  font-family: Verdana,'Andada Pro','sans-serif';
  color: black;
  /*text-align: center;*/
  /*letter-spacing: 0.5rem;*/
  /*text-transform: capitalize;*/
  line-height: 1.25;
  margin-bottom: 0.75rem;
}
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.25rem;
}
h4 {
  font-size: 0.875rem;
}
p {
  font-family: 'Open Sans',sans-serif;
  margin-bottom: 1.25rem;
  color: #333;
 /* font-style: oblique;*/
}
.section {
  padding: 2rem 0;
  height:  20rem;
}
.section-center {
  width: 90vw;
  margin: 0 auto;
  max-width: 1170px;
}
#MCQSCC{
	background: transparent;
}
main {
  /*background: #484557;*/
  font-size: 1rem;
  background: white;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.container{
  margin: 1rem 2rem 1rem 2rem;
  color:  black;
  background-color: transparent;
}
#question-box{
  background-color: transparent;
}
.footercontainer{
  max-width: 75rem;
  margin: auto;;
}
.row{
  display: flex;
  flex-wrap: wrap;
}
ul{
  list-style: none;
}
.footer{
  background-color: #222;
  padding: 1rem 0;
  position: relative;
  top:calc(100vh - 10rem);
}
.footer-col{
  width: 25%;
  padding: 0 15px;
}
.footer-col h4{
  font-size: 1rem;
  color: #fff;
  text-transform: capitalize;
  margin-bottom: 1.5rem;
  position: relative;
}
footer-col > ul{
  display: flex;
  margin: 1rem;
}
.footer-col ul li:not(:last-child){
  margin-bottom: 0.5rem;
}
.footer-col ul li a{
  font-size: 1rem;
  text-transform: capitalize;
  color: gray;
  text-decoration: none;
  display: block;
  transition: all 0.3s ease;
}
.footer-col ul li a:hover{
  color:  #fff;
  text-decoration: underline;
}
.footer .social-links a{
  display: inline-block;
  height: 40px;
  width: 40px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0 0.5rem 0.5rem 0;
  text-align: center;
  line-height: 40px;
  color:  #fff;
  transition: all 0.5s ease;
}
.footer .social-links a:hover{
  color:  #24262b;
  background-color: #fff; 
}

@media (pointer: coarse){
	* {
		font-size: 0.9rem;
	}
	.tryNavLink {
		display: none;
	}
	.accountPageContainer{
		flex-direction: column;
		width: auto;
	}
	.accountInfoDiv{
		width: auto;
	}
	.accountPageForm{
		width: auto;
	}
	.aboutPageSpecific{
	display: flex;
	flex-direction: column;
	}
	table{
		display: flex;
		flex-direction: column;
	}
}
#mcq{
	max-width: 40rem;
}
#homePageImage{
	width: 50%;
	height: 50%;
	display: none;
}
.outerContainer{
	display:flex;
	flex-direction: row;
	margin: 1rem 2rem 1rem 2rem;
	background-color: transparent;
}