/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1;
  font-family: "Verdana", Arial, Helvetica, sans-serif;
  font-size: 0.8em;
  background-color: #000033;
  min-height: 100vh;
  display: flex;
  flex-direction: column; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* ---------------------------------- mixins CSS ------------------------------------*/
/* ----------- variables ---------- */
/* -------- mixins ----------*/
nav {
  background-color: #220077;
  width: 100%; }

.nav-container {
  background-color: #220077;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  grid-gap: 4rem;
  height: 3.4rem;
  margin: auto;
  max-width: 1200px; }

.nav-hold {
  padding-top: 1rem;
  padding-right: 2rem;
  padding-bottom: 1rem;
  padding-left: 2rem; }

ul.navbar {
  display: flex;
  justify-content: space-around; }
  ul.navbar li {
    display: inline-block;
    font-family: "Verdana";
    color: #eee;
    font-size: 0.9rem; }
    ul.navbar li a:link, ul.navbar li a:visited {
      color: #fff; }

a.navbar-brand {
  font-family: "Verdana";
  color: #eee;
  font-size: 0.9rem;
  color: #fff; }

.footlocker {
  width: 100%;
  background-color: #220077;
  margin-top: auto; }

.foot {
  max-width: 1200px;
  margin: auto; }

.shoe {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2rem;
  height: 3.2rem; }

.toe {
  display: flex;
  justify-content: center;
  font-family: "Verdana";
  color: #eee;
  font-size: 0.9rem; }
  .toe a:link, .toe a:visited {
    color: #fff; }

/* ---------- flex  box ------------*/
#head-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 48px;
  background-color: #333333;
  border-radius: 5px 5px 0px 0px; }

#head-row p {
  color: #ffffff;
  font-style: normal;
  font-size: 16px; }

#hr-left {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 85%;
  height: 100%;
  background-color: #333333;
  color: #FFFFFF;
  margin-left: 10px;
  font-family: Verdana; }

#hr-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 15%;
  height: 100%;
  background-color: #333333;
  border-radius: 0px 10px 0px 0px; }

#countarea {
  width: 100%;
  font-family: "Verdana";
  color: #eee;
  font-size: 0.9rem;
  padding: 10px;
  color: #eeeeee; }

#mid-row {
  display: flex;
  width: 100%;
  flex-flow: row nowrap;
  justify-content: space-between; }

/* --------------- this is the div where the questions are placed   -------------- */
#mid-right {
  position: relative;
  display: flex;
  justify-content: flex-start;
  width: 85%;
  background-color: #ccccff;
  margin-left: 1px; }

#questionarea {
  padding: 10px;
  min-height: 12rem;
  max-height: 50vh;
  overflow: auto;
  font-family: "Verdana";
  font-size: 14px;
  color: #fff; }
  #questionarea p {
    font-family: "Verdana";
    font-size: 14px;
    color: #fff;
    margin-left: 20px;
    margin-right: 20px;
    line-height: 30px; }
    #questionarea p.Rans, #questionarea p.Wans {
      color: #fff; }

.input-holder {
  display: flex;
  gap: 0.4rem;
  flex-direction: column;
  align-items: center; }
  .input-holder .input-box {
    font-family: "Verdana";
    color: #530;
    font-size: 0.9rem; }

.swf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid: 1rem;
  width: 95%;
  margin: 0 auto 0 auto; }

.iswf1 {
  padding: 1rem; }

.iswf2 {
  display: flex;
  align-self: center;
  padding: 0;
  border: 1px solid #999;
  height: 300px;
  width: 450px; }

#mycalc {
  padding: 0px;
  margin: 0px;
  position: absolute;
  z-index: 10;
  right: 36px;
  height: 100%;
  display: none; }

#ans-row {
  display: flex;
  height: 100px;
  margin-top: 1px; }

#ans-row-left {
  padding: 6px;
  display: flex;
  height: 100%;
  width: 15%;
  background-color: #ccccff; }

#ans-row-right {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  width: 85%;
  background-color: #ccccff;
  margin-left: 1px; }

#hint-row {
  display: flex;
  height: 100px;
  margin-top: 1px;
  background-color: #ccccff; }

#hint-row-left {
  padding: 6px;
  display: flex;
  width: 15%;
  background-color: #ccccee; }

#hint-row-right {
  display: flex;
  width: 85%;
  margin-left: 1px;
  background-color: #ccccee; }

#ptable {
  margin-left: 2px; }

#ptable:hover {
  cursor: pointer; }

#calcarea {
  width: 60px;
  height: 76px;
  margin-left: 2px; }

p.tom {
  margin-left: auto;
  margin-right: auto;
  text-align: center; }

/* style the divisions */
.tt {
  box-shadow: 2px	2px	2px	#ffcccc;
  border: solid	1px 	orange;
  border-spacing: 1px;
  border-collapse: separate;
  background-color: #dddddd; }

/* -------------- for the new test grid  ----------------*/
.grid-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 2fr 1fr;
  width: 90%;
  margin: 2rem auto 2rem auto;
  max-width: 1200px;
  border: 1px solid #0f0;
  border-radius: 10px;
  box-shadow: 3px 3px 10px #9c9; }
  .grid-wrapper .box {
    border: 1px solid #0f0;
    font-family: "Verdana";
    color: #eee;
    font-size: 0.9rem;
    padding: 1rem; }

.t1 {
  display: grid;
  justify-content: start;
  align-items: center;
  grid-column: 1/5;
  background-color: #000;
  /*  top-left | top-right | bottom-right | bottom-left */
  border-radius: 10px 0 0 0; }

.t2 {
  background-color: #000;
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 0 10px 0 0; }

.t3 {
  display: flex;
  justify-content: center;
  grid-column: 1/2; }

.t4 {
  grid-column: 2/6; }

.t6 {
  display: flex;
  gap: 0.4rem;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  grid-column: 2/4;
  height: 40px; }

.t7, .t8 {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 0.4rem;
  align-items: center;
  height: 40px; }

.t9 {
  height: 24px; }

.t10 {
  grid-column: 2/6;
  height: 24px; }

.t11 {
  border-radius: 0 0 0 10px; }

.t15 {
  border-radius: 0 0 10px 0; }

#mid-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 15%; }

.t11, .t12, .t13, .t14, .t15 {
  display: flex;
  justify-content: center;
  align-items: center; }

.btn {
  border: solid 1px #666666;
  border-radius: 2px;
  height: 24px;
  background-color: #333;
  color: #ccc; }

.btn:hover {
  box-shadow: 1px	1px	4px	#aaa;
  background: #333;
  border: solid 1px #9999cc;
  color: #fff; }

/* ******** end grid items ************ */
.test_input {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #000066;
  width: 90%;
  box-shadow: 4px	4px	6px	#000000;
  border: 2px	solid	#cccc00;
  margin-left: auto;
  margin-right: auto; }

.setuphead {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 2rem;
  background-color: #000;
  color: #fff;
  font-size: 1.2rem; }

.setup {
  font-family: "Verdana";
  color: #eee;
  font-size: 0.9rem;
  width: 80%;
  color: #fff;
  background-color: #000066;
  line-height: 20px;
  padding-top: 1rem;
  padding-right: 2rem;
  padding-bottom: 1rem;
  padding-left: 2rem; }

.setUpInput {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-row-gap: 0.6rem;
  font-family: "Verdana";
  color: #eee;
  font-size: 0.9rem;
  color: #fff;
  margin-bottom: 2rem; }

.intwo {
  display: flex;
  justify-content: center; }

.set-test {
  font-size: 14px;
  color: #FFFFFF;
  background-color: #003399;
  text-align: center;
  line-height: normal;
  border-color: black #CCCCCC #CCCCCC black;
  font-weight: bold;
  border-right-width: 2px;
  border-bottom-width: 2px; }

.form-enter {
  background-color: #333366;
  font-family: "Verdana";
  color: #eee;
  font-size: 0.9rem;
  font-weight: normal;
  text-align: center;
  height: 24px;
  font-size: 16px;
  color: #eeeeee; }

.form-enterName {
  background-color: #333366;
  font-weight: bold;
  text-align: left;
  height: 24px;
  font-size: 16px;
  color: #eeeeee; }

p.data {
  font-size: 16px;
  color: #000066;
  text-align: center;
  line-height: normal;
  font-weight: normal; }

/* -------------- for the form entry -----------------------------*/
.Rans {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  padding-top: 3px;
  padding-right: 5px;
  padding-bottom: 2px;
  padding-left: 5px;
  margin: 0 auto 0 auto;
  text-align: center;
  background-color: #060;
  border: 2px solid #050;
  box-shadow: 3px	3px	6px #9f9; }

.Wans {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  padding-top: 3px;
  padding-right: 5px;
  padding-bottom: 2px;
  padding-left: 5px;
  margin: 0 auto 0 auto;
  text-align: center;
  background-color: #600;
  border: 2px solid #500;
  box-shadow: 3px	3px	6px #f99; }

.Bans {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #0000ff;
  padding-top: 3px;
  padding-right: 5px;
  padding-bottom: 2px;
  padding-left: 5px;
  text-align: center; }

.count {
  font-size: 16px;
  line-height: normal;
  color: #FFFFFF;
  text-align: center;
  vertical-align: middle; }

.radios {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  width: 15%;
  font-style: normal;
  line-height: normal;
  color: #000000;
  background-color: #999999;
  border: #666666	1px	solid; }

.hint {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: normal;
  color: #003300;
  text-align: justify; }

.equation {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-style: normal;
  color: #006600;
  text-align: center;
  line-height: 24px; }

.question {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-style: normal;
  line-height: 30px;
  color: #000033;
  text-align: justify;
  margin-top: 2px; }

.size14 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: 20px;
  color: #000033;
  text-align: justify; }

.size16 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  color: #000033;
  text-align: justify; }

.size18 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-style: normal;
  line-height: 28px;
  color: #000033;
  text-align: justify; }

.hintEqu {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #003300;
  text-align: center; }

.question-s {
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  color: #000033;
  text-align: justify; }

.equs {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  color: #990000;
  text-align: center;
  line-height: 20px;
  font-weight: bold; }

ol {
  list-style-type: upper-alpha; }

.print {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-style: normal;
  color: #000033; }

.isotope {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 48px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-style: normal;
  color: #000033; }

span.isosu {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 32px;
  position: relative;
  top: -4px;
  left: -2px;
  font-style: normal;
  color: #0000ff; }

span.isoion {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 32px;
  position: relative;
  top: -4px;
  left: 2px;
  font-style: normal;
  color: #000000; }

.txt14 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: 20px;
  color: #000033; }

.txt16 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  color: #000033; }

.txt18 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-style: normal;
  line-height: 28px;
  color: #000033; }

.const {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-style: normal;
  text-align: center;
  color: #990099; }

img.green {
  border: 1px solid	green;
  margin: 10px;
  padding: 20px; }

.rate-data {
  width: 60%;
  background-color: #333333;
  border: 1px	solid #9f9;
  margin: 1rem auto 1rem auto; }
  .rate-data tr td {
    padding: 0.2rem; }

.data {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background-color: #333333;
  border: 1px	solid #9f9;
  margin: -0.6rem auto 0 auto; }
  .data tr td {
    padding: 0.2rem; }

.data td {
  font-size: 11px;
  border: 1px solid #555555;
  color: #CCCCCC;
  text-align: center; }

ol.mcq {
  margin-left: 20px;
  padding-left: 20px; }

ol.mcq li {
  display: list-item;
  /* fixes IE numbering bug */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-style: normal;
  list-style-type: upper-alpha;
  padding-left: 4px;
  margin-left: 20px;
  height: 30px;
  line-height: 24px;
  color: #333366;
  vertical-align: middle; }

ol.mcq li img {
  vertical-align: middle;
  padding-top: 6px;
  padding-bottom: 6px; }

img.blue {
  border: 1px solid	blue;
  margin: 4px;
  padding: 10px; }

table.qtd {
  height: 44px;
  margin-top: 2px;
  margin-bottom: 2px;
  border-radius: 10px; }

table.qtd td {
  padding: 0px;
  color: #ffffff; }

#startarea {
  width: 90%;
  height: 400px;
  overflow: auto;
  text-align: center;
  padding-top: 10px;
  margin-left: auto;
  margin-right: auto; }

#answerarea {
  height: 24px;
  margin-left: auto;
  margin-right: auto;
  width: 90%; }

#answerarea p {
  line-height: 40px;
  padding: 0px; }

#clockarea {
  /*
  	width:			80px;
  	margin-left:	auto;
  	margin-right:	auto;
  	margin-top:		40px;
  	*/ }

#picarea {
  position: relative;
  left: 10px;
  top: 0px;
  width: 22px;
  height: 30px; }

label {
  display: block;
  padding-bottom: 1rem;
  font-family: "Verdana";
  color: #eee;
  font-size: 0.9rem;
  color: #606030; }

table.mcgrid {
  width: 80%;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto; }

table.mcgrid td {
  text-align: center; }

input[type=text]::-ms-clear {
  display: none; }

::-ms-clear {
  display: none; }

/*
#ptarea{
		width:		720px;
		height:		400px;
		display:	block;
		position:	absolute;
		top:		0;
		left:		0;
		z-index:	1000;
}
*/
/* ------------  media query to add a breakpoint at 800px ------------ */
@media screen and (min-width: 2000px) {
  #certificate {
    /* the main container */
    width: 60%; }

  .test_input {
    width: 70%; } }
@media screen and (max-width: 1200px) {
  #certificate {
    width: 90%;
    /* the main container */
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    border: 3px	solid	#444400;
    box-shadow: 3px	3px	6px	#999999;
    border-radius: 8px;
    margin-top: 10px;
    background-color: white; } }
/* Use a media query to add a breakpoint at 800px: */
@media only screen and (max-width: 800px) {
  #certificate {
    /* the main container */
    margin: 3rem 0.2rem 0rem 0.2rem;
    /* the main container */
    width: 100%; }

  .grid-wrapper {
    grid-template-columns: 1fr;
    width: 90%; }

  .test_input {
    width: 98%; }

  .t3 {
    display: none; } }

/*# sourceMappingURL=tps_test_grid.css.map */