/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

/* Style Sheet        */

.error-message {
  color: #bb6666;
  text-align: center;
}

A.glossary {
  color: red;
  font-size: 100%;
  font-weight: 200;
  cursor: crosshair;
}

A.FAQ {
  color: "#007755";
  font-size: 100%;
  font-weight: 200;
  cursor: help;
}

A.headerFAQ {
  color: "#007755";
  font-size: 100%;
  font-weight: "bold";
  cursor: help;
}

a.loginNavigation {
  color: #000000;
}

img.mainemap {
  border-color: "#CCCCFF";
}

.indent {
  padding-left: 20px;
}

body,
body.x-body {
  background: -o-radial-gradient(
    50% 50%,
    closest-side,
    #ffffff 0%,
    #e8f2f8 100%
  );
  background: radial-gradient(
    closest-side at 50% 50%,
    #ffffff 0%,
    #e8f2f8 100%
  );
  font-family: "Open Sans", sans-serif;
  margin: 0;
}

.active {
  color: #23238e;
}

td.active {
  background-color: #23238e;
}

.inactive {
  color: #6666ff;
}

td.inactive {
  background-color: #6666ff;
}

div.nav-row {
  background-color: #000000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 50px;
  line-height: 50px;
  width: 100%;
}

div.nav-row-item {
  display: flex;
  align-items: center;
}

div.nav-row-item5 svg {
  padding-right: 10px;
  padding-bottom: 8px;
}

div.nav-row-logo {
  width: 25%;
}

@media (max-width: 1270px) {
  /*div.nav-row-logo {
      display: none;
   }*/

  div.nav-row {
    justify-content: center;
  }
}

span.nav-row-logo-text {
  color: #549dcc;
  font-size: 28px;
  padding-left: 10px;
}

div.nav-row-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 50%;
}

div.nav-row-end {
  -ms-flex-pack: distribute;
  justify-content: space-around;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 20%;
}

div.nav-row-item-no-hov a,
div.nav-row-item a {
  color: #ffffff;
  font-size: 16px;
  padding-bottom: 10px;
  text-decoration: none;
  transition: all 0.5s ease;
  font-family: open-sans, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
}

div.nav-row-item:hover a,
div.nav-row-item:focus-within a {
  border-bottom: 3px solid #549dcc;
  color: #549dcc;
  transition: all 0.5s ease;
  padding-bottom: 5px;
}

div.nav-row-logo {
  padding-left: 10px;
}

div.nav-row-item-no-hov a.btn-logout {
  border-radius: 5px;
  background-color: #393939;
  font-weight: 600;
  height: 30px;
  width: 70px;
  text-align: center;
  display: block;
  margin-top: 10px;
  line-height: 30px;
  padding-bottom: 0;
}

a.btn-logout:hover,
a.btn-logout:focus {
  background-color: #549dcc;
  color: #003263;
}

img.settings-icon {
  float: left;
  padding-right: 5px;
  padding-top: 18px;
}

div.dashboard-container {
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  /* min-width:1270px; */
  width: 80%;
  font-size: 16px;
}

div.dashboard-container a:hover {
  filter: contrast(1.5);
  font-style: italic;
}

div.dashboard-container a:focus {
  filter: contrast(1.5);
  border: 2px solid black;
}

div.dashboard-content {
  width: 100%;
}

div.dashboard-content-header {
  background-color: #003263;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 150px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
}

div.dashboard-content-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

div.dashboard-header-lables {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  color: #ffffff;
}

div.dashboard-header-label {
  font-size: 16pt;
  padding-left: 10px;
  width: calc(100% / 7);
  padding-bottom: 5px;
}

div.dashboard-header-label a {
  color: #549dcc;
}

div.dashboard-content-header-wrapper {
  background-color: #003263;
}

div.dashboard-badges {
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 75%;
  padding-top: 10px;
  text-align: center;
  width: 30%;
}

.dashboard-badge {
  width: calc(100% / 3);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-height: 80px;
}

div.badge-holder {
  height: auto;
}

a.zoom-link {
  border: 1px solid #4a8cff;
  border-radius: 5px;
  height: 55px;
  margin-left: 5px;
  margin-top: 10px;
  padding-right: 10px;
  padding-left: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-decoration: none;
  margin-right: 10px;
}

a.video-link {
  border: 1px solid #4a8cff;
  border-radius: 5px;
  height: 45px;
  margin-left: 5px;
  margin-top: 10px;
  padding-right: 10px;
  padding-left: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-decoration: none;
  margin-right: 10px;
}

a.zoom-link svg,
a.video-link svg {
  width: 200px;
  height: auto;
}

svg .videoFill {
  enable-background: new;
}

svg .videoFIll2 {
  fill: #fff;
}

svg .zoomFill {
  fill: #fff;
}

a.zoom-link:hover svg .zoomFill {
  fill: #003263;
}

.zoom-link:hover,
.zoom-link:focus {
  background-color: #fff;
  border: 1px solid #fff;
}

.video-link:hover,
.video-link:focus {
  background-color: #fff;
  border: 1px solid #fff;
}

.video-link:hover svg .videoFill2,
.video-link:focus svg .videoFill2 {
  fill: #003263;
}

div.dasboard-header-info {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  color: #003263;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 50px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-bottom: 5px;
}

div.header-info-instructor {
  text-align: right;
}

h1.header-info-course-name {
  font-size: 16pt;
  font-weight: 600;
  margin: 0px;
}

div.header-info-day-time {
  color: #003263;
  font-size: 18px;
}

span.section-label-name {
  color: #003263;
  font-size: 18px;
}
span.section-label-value {
  color: #003263;
  font-size: 20px;
  font-weight: 600;
}

div.dashboard-content-main {
  background-color: #ffffff;
  border: 1px solid #000000;
}

div.instructor-name {
  color: #003263;
  font-size: 16px;
  font-weight: 600;
}

div.instructor-email a {
  color: #003263;
}

div.lab-week-row {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  border-bottom: 1px solid #000000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  min-height: 50px;
  align-items: center;
}

div.lab-col {
  min-height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

div.lab-sub-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

div.lab-week {
  font-weight: 700;
  padding-left: 10px;
  margin-right: 25px;
}

div.lab-week-index {
  width: 24%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: distribute;
  justify-content: flex-start;
  align-items: center;
  padding-left: 10px;
}

div.lab-assignments {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: normal;
  -ms-flex-pack: normal;
  justify-content: normal;
  width: 70%;
}

div.lab-status {
  width: 5%;
}

div.lab-title {
  width: 30%;
}
div.lab-badge {
  width: 5%;
}
div.lab-grade-status {
  width: 13%;
}
div.lab-grade-score {
  width: 13%;
}
div.lab-action {
  width: 10%;
}

div.grid-badge {
  width: 5%;
}

div.lab-category-name {
  width: 100%;
}

div.hidden {
  display: none;
}

div.aciton-btn {
  display: block;
  width: 50px;
  background: #b0d7ff 0% 0% no-repeat padding-box;
  border-radius: 5px;
  height: 25px;
  text-align: center;
}

fieldset.gridFieldset {
  border: none;
  display: flex;
  justify-content: center;
}

div.gridContainer {
  display: grid;
  grid-template-columns: 50% 50%;
  background-color: #ccccff;
  padding: 10px;
  padding-right: 40px;
  grid-row-gap: 10px;
}

div.gridSubmitRow {
  display: flex;
  grid-column-start: span 2;
  justify-content: space-evenly;
}

div.dashboard-header-label.week {
  width: 24%;
}
div.dashboard-header-label.assign {
  width: 30%;
}
div.dashboard-header-label.badge {
  width: 5%;
}
div.dashboard-header-label.lateness {
  width: 5%;
}
div.dashboard-header-label.grade-status {
  width: 13%;
}
div.dashboard-header-label.show-score {
  width: 13%;
}

div.dashboard-header-label.show-score a {
  color: #b5e2ff !important;
}

div.dashboard-header-label.show-score a:hover {
  color: white !important;
}

div.dashboard-header-label.show-score a:focus {
  color: white !important;
  border: 2px solid #b5e2ff !important;
}

div.dashboard-header-label.status {
  width: 10%;
}
div.dashboard-header-label.action {
  width: 10%;
}

img.badge-icon {
  width: 45%;
  height: auto;
}

img.small-badge-icon {
  width: 33px;
  height: auto;
}

td.latestNews {
  color: #000000;
}

.copyright {
  font-size: medium;
  font-style: italic;
}

.copyright.silver {
  font-style: normal;
  font-family: sans-serif;
  color: silver;
}

.accessDenied {
  color: #000080;
  font-size: x-large;
}
.accessDenied {
  color: #000080;
  font-size: large;
}

.loginHeader,
.fontLarge {
  font-size: large;
}

table.loginTable {
  width: 250px;
  height: 350px;
}

span.bold {
  font-weight: bold;
}

.courseTitle {
  font-size: x-large;
  font-weight: bold;
}

.marqueeBanner {
  font-size: large;
  color: green;
}

.marqueeBackground {
  background-color: #eaea3f;
}

.large {
  font-size: large;
}

.xlarge {
  font-size: x-large;
}

.largeBlack {
  font-size: large;
  color: #000000;
}

.xlargeBlack {
  font-size: x-large;
  color: #000000;
}

.xlargeRed {
  font-size: x-large;
  color: red;
}

.fontWhite {
  color: #ffffff;
}

.fontBlack {
  color: #000000;
}

table.tableZero {
  padding: 0;
  border: none;
  border-spacing: 0;
  border-collapse: collapse;
}
table.tableZero th,
table.tableZero td {
  padding: 0;
}

table.studentProgress {
  border: 0;
}
table.studentProgress td {
  border: 0;
}

.statusTable .late,
.studentProgress .late {
  text-align: right;
  padding: 5px;
  grid-row-start: 2;
  grid-column-start: 1;
}

.late-equal {
  grid-row-start: 2;
  grid-column-start: 2;
}

.late-deadline {
  grid-row-start: 2;
  grid-column-start: 3;
  text-align: left;
}

.statusTable .pastDue {
  text-align: right;
  padding: 5px;
  grid-row-start: 3;
  grid-column-start: 1;
}

.pastDue-equal {
  grid-row-start: 3;
  grid-column-start: 2;
}

.pastDue-deadline {
  grid-row-start: 3;
  grid-column-start: 3;
  text-align: left;
}

table.statusTable .pastDue,
table.studentProgress .pastDue {
  text-align: center;
  padding: 5px;
}

*.x-body.x-reset *:focus {
  outline: 3px auto rgb(0, 0, 238) !important;
}

.SubmitHelpText {
  font-size: small;
}

div.dashboard-container a {
  color: #003263;
  font-size: 18px;
}

div.dashboard-container .btn-lab-submit {
  background: #b0d7ff;
  max-width: 120px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 40px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 5px;
  text-decoration: none;
  color: #3e3e3e;
  font-size: 14px;
  font-weight: 600;
}

div.dashboard-container .btn-lab-submit a {
  color: #3e3e3e;
}

div.dashboard-container .btn-lab-submit:hover {
  background-color: #003263;
  color: #ffffff;
}

.btn-lab-submit.disabled {
  background: #e7f3ff;
}
.btn-lab-submit.disabled:hover {
  background: #e7f3ff;
  color: #003263;
}

.btn-lab-submit.disabled {
  background: #e7f3ff;
}

/*

* {
	color: inherit;
	background: transparent;
}


cursor: default, auto, crosshair, hand, move, n-resize, s-resize, e-resize, w-resize, ne-resize, se-resize, nw-resize, sw-resize, text, wait, help*/

.addRes {
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
}

.catItems {
}

.catRow {
  height: 40px;
  padding-bottom: 20px;
}

.catNameDisplay {
  cursor: pointer;
}

.hide {
  display: none;
  height: 0;
}

.controlLink {
  text-decoration: none;
}

table td.posControl {
  width: 7%;
  margin: 0;
  padding-bottom: 10px;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

table td.catName {
  margin: 0;
  padding: 0;
  font-size: 20px;
}

table td.addItem {
  width: 10%;
  margin: 0;
  padding: 0;
}

table td.catEdit {
  width: 10%;
  margin: 0;
  padding: 0;
}

table td.catDelete {
  width: 10%;
  margin: 0;
  padding: 0;
}

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

.container {
  width: 1800px;
  margin: auto;
}

.legend {
  width: 275px;
  border: 1px black solid;
  padding: 7px;
}

.controls {
  float: left;
}

.resLabel {
  width: 200px;
  background-color: #3366ff;
  color: white;
  text-align: left;
  padding: 0;
}

.content {
  margin-top: 35px;
  margin-left: auto;
  margin-right: auto;
  clear: both;
  min-height: 200px;
  background-color: #ffffff;
  border-radius: 25px;
  width: 1170px;
  overflow: auto;
}

.conStudent {
  border: solid 4px #808080;
}

.tblForm {
  margin-top: 75px;
  margin-left: auto;
  margin-right: auto;
  width: 380px;
}

.tblResources {
  margin-top: 10px;
  background-color: #ffffff;
  width: 50%;
}

.leftSide {
  float: left;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

.rightSide {
  float: right;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

.orderIcon {
  line-height: 25px;
  vertical-align: top;
}

/*** FONT-AWESOME STYLES ***/

.arrow {
  display: block;
  font-size: 20px;
  height: 20px;
  text-align: center;
  width: 25px;
  z-index: 1;
  padding-left: 5px;
  cursor: pointer;
}
.upArrow:before {
  content: "\f106";
  font-family: "fontawesome";
  line-height: 30px;
  color: #000000;
}

.upArrow:before:hover {
  color: #c0c0c0;
}

.downArrow:before {
  content: "\f107";
  font-family: "fontawesome";
  margin-top: 20px;
  color: #000000;
}

.downArrow:before:hover {
  color: #c0c0c0;
}

.upArrowItem:before {
  content: "\f106";
  font-family: "fontawesome";
  color: #808080;
  line-height: 30px;
}

.upArrowItem:before:hover {
  color: #c0c0c0;
}

.downArrowItem:before {
  content: "\f107";
  font-family: "fontawesome";
  color: #808080;
  margin-top: 20px;
}

.downArrowItem:before:hover {
  color: #c0c0c0;
}

.editIcon:before {
  content: "\f040";
  font-family: "fontawesome";
  font-size: 20px;
  color: #000000;
  width: 25px;
  height: 25px;
}

.editIcon:before:hover {
  color: #c0c0c0;
}

.deleteIcon:before {
  content: "\f1f8";
  font-family: "fontawesome";
  font-size: 20px;
  color: #000000;
  width: 25px;
  height: 25px;
}

.deleteIcon:before:hover {
  color: #c0c0c0;
}

.addIcon:before {
  content: "\f067";
  font-family: "fontawesome";
  font-size: 20px;
  color: #000000;
  width: 25px;
  height: 25px;
}

.addIcon:before:hover {
  color: #c0c0c0;
}

.open:before {
  content: "\f106";
  font-family: "fontawesome";
  font-size: 26px;
  color: #000000;
  width: 15px;
  height: 15px;
}

.closed:before {
  content: "\f107";
  font-family: "fontawesome";
  font-size: 26px;
  color: #000000;
  width: 15px;
  height: 15px;
}

.customIcon {
  color: #9a9a9a;
  padding-top: 2px;
  font-size: 12px;
}

/* table tyles **/

.itemName {
  padding-left: 15px;
  font-size: 22px;
}

.descRow {
  height: 40px;
}

.itemDesc {
  padding-left: 25px;
  font-style: italic;
}

.resItems {
  width: 100%;
}

.statusAction {
  padding-right: 5px;
  cursor: pointer;
  display: inline-block;
  width: 8px;
}

.modalContainer {
  width: 50%;
  margin: auto;
  padding-top: 20px;
}

.status-table-holder {
  position: absolute;
  top: 50px;
  left: 0;
}

.centerTable {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}

.tableTitle {
  font-weight: bold;
  text-align: center;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  padding-right: 75px;
}

.statusTitle {
  font-weight: bold;
  text-align: center;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
}

.statusTable {
  max-width: 350px;
  width: 100%;
  display: grid;
  grid-template-columns: 18% 17% 66%;
  align-items: center;
  text-align: center;
  font-weight: 600;
}

.assignmentStatusTable {
  max-width: 500px;
  width: 100%;
  display: grid;
  grid-template-columns: 18% 7% 75%;
  align-items: center;
  text-align: center;
  padding-top: 25px;
  grid-auto-rows: minmax(40px, auto);
  font-weight: 600;
}

.assignmentStatus {
  text-align: right;
}

.assignmentDefinition {
  text-align: left;
}

.button {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  text-align: center;
  cursor: default;
  color: buttontext;
  background-color: buttonface;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1px 6px;
  border-width: 2px;
  border-style: outset;
  border-color: buttonface;
  -o-border-image: initial;
  border-image: initial;
  text-decoration: none;
  -webkit-appearance: push-button;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: pre;
  -webkit-rtl-ordering: logical;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-rendering: auto;
  margin: 0em;
  font: 400 13.3333px Arial;
}

/******** Section View Tables ********/

/* Section View Table Head */
.sectionViewHead {
  font-family: sans-serif;
  font-size: 16px;
  background-color: #3d3d85;
  color: #fff;
}

.sectionViewHead th {
  font-family: sans-serif;
  font-weight: 400;
  vertical-align: middle;
  padding: 10px;
  /*box-sizing: border-box;*/
}

.sectionViewHead th.sectionViewHeadLeft {
  text-align: left;
  width: 32%;
}

.sectionViewInfo {
  vertical-align: middle;
  margin-right: 5px;
  font-size: 26px;
}

.sectionViewBackBtn {
  margin-right: 20px;
}

.sectionViewHead th.sectionViewHeadMiddle {
  text-align: center;
  width: 36%;
}

.sectionViewHead th.sectionViewHeadMiddle strong {
  font-size: 18px;
}

.sectionViewHead th.sectionViewHeadSpace {
  width: auto;
  padding: 0;
}

.sectionViewHead th.sectionViewHeadRight {
  text-align: left;
  width: 27%;
  font-size: 12px;
}

.sectionViewHead ul {
  margin: 0;
}

/* Section View Table Body */
.sectionViewBody {
  background-color: #fff;
  border-left: 1px solid #cdcdcd;
  border-right: 1px solid #cdcdcd;
  font-family: sans-serif;
  font-size: 12px;
}

.sectionViewBody td {
  border-bottom: 1px solid #cdcdcd;
  padding: 10px 4px;
}

.sectionViewBody tr:hover {
  background-color: #efeefe;
}

.sectionViewBody a {
  text-decoration: none;
}

.sectionViewBodyNumberCol {
  text-align: right;
  color: #777;
}

.sectionViewBodyHeaderRow {
  color: #777;
}

.sectionViewBodyHeaderRow td:last-of-type {
  text-align: right;
}

.sectionViewBody a.sectionViewBodyLabNameLink {
  color: #777;
  text-decoration: underline;
  font-size: 10px;
  display: block;
  margin-bottom: 2px;
}

.sectionViewBodyScoreLink {
  font-size: 14px;
}

.sectionViewBodyAverage {
  font-size: 10px;
  color: #777;
  text-align: center;
}

.sectionViewBodyScoringLink {
  font-size: 16px;
}

a.scoringLinkReady,
a.scoringLinkReady:visited,
.scoringLinkReady {
  color: #59e015;
  font-size: 16px;
}

a.scoringLinkWaiting,
a.scoringLinkWaiting:visited,
.scoringLinkWaiting {
  color: #ff922b;
  font-size: 16px;
}

.sectionViewBodyProgressIcon {
  color: #777;
  font-size: 16px;
}

.fa.fa-clock-o {
  font-size: 20px !important;
}

input.disabledSubmit {
  background-color: #dbdbdb;
  border: 0;
  color: #aeaaaa;
  margin-top: 5px;
  margin-bottom: 5px;
  height: 100%;
  width: 130px;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  vertical-align: middle;
  font-weight: 600;
}

a.enabledButton {
  background-color: #b0d7ff;
  border: 0;
  margin-top: 5px;
  margin-bottom: 5px;
  height: 100%;
  width: 175px;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  vertical-align: middle;
  text-decoration: none;
  font-weight: 600;
}

div.assignItem {
  margin-top: 5px;
  margin-bottom: 5px;
  height: 100%;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  vertical-align: middle;
}

li.rightPadded {
  text-align: right;
  margin-right: 10px;
}

li.assignItem a {
  font-size: normal;
}

.darkBG {
  background-color: #3d3d85;
  color: #ffffff;
}

div#portal-category {
  padding: 2px 4px;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  -webkit-appearance: menulist;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  white-space: pre;
  -webkit-rtl-ordering: logical;
  background-color: white;
  font: 400 13.3333px Arial;
  border-radius: 0px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(169, 169, 169);
  -o-border-image: initial;
  border-image: initial;
}

.questionBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: left;
  line-height: 1.5;
  font-size: 1em;
}

fieldset {
  border: 0;
}

.quizHeader {
  margin-bottom: 20px;
  margin-top: 20px;
}

.quizInstructions {
  width: 60%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

textarea.instructions {
  width: 525px;
  height: 115px;
}

.lab-status-action {
  text-align: center;
}

div.nav-row-mobile-only,
div.mobile-menu-icon,
div.mobile-personal-icon,
div.mobile-header,
div.mobile-personal-icon {
  display: none;
}

svg.settings-icon {
  fill: #fff;
}

@media (max-width: 1024px) {
  div.nav-row-mobile-only {
    background-color: #003263;
    display: block;
    width: 110px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  div.mobile-menu-icon {
    display: inline-block;
    cursor: pointer;
    padding-left: 5px;
    padding-bottom: 11px;
    position: relative;
  }

  .bar1,
  .bar2,
  .bar3 {
    width: 35px;
    height: 5px;
    background-color: #ffffff;
    margin: 6px 0;
    transition: 0.4s;
  }

  .change .bar1 {
    transform: translate(0, 11px) rotate(-45deg);
  }

  .change .bar2 {
    opacity: 0;
  }

  .change .bar3 {
    transform: translate(0, -11px) rotate(45deg);
  }

  div.mobile-personal-icon {
    display: inline-block;
    padding-top: 15px;
    cursor: pointer;
  }

  div.dasboard-header-info {
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    color: #003263;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    -webkit-box-pack: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    padding-bottom: 5px;
    flex-direction: column;
    padding-left: 10px;
  }

  h1.header-info-course-name {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
    margin-top: 20px;
  }

  div.header-info-day-time {
    margin-bottom: 20px;
  }

  div.header-info-instructor {
    text-align: left;
    margin-bottom: 20px;
  }

  /* Mobile Navigation */
  div.nav-row-item.hide-mobile,
  div.nav-row-item-no-hov.hide-mobile {
    display: none;
  }

  div.nav-row-main div.nav-row-item.show-mobile,
  div.nav-row-end div.nav-row-item.show-mobile,
  div.nav-row-end div.nav-row-item-no-hov.show-mobile {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    background-color: #ffffff;
    overflow: visible;
    z-index: 10;
    width: 100vw;
  }

  div.nav-row-end div.nav-row-item.show-mobile.nav-row-item5 {
    top: 40px;
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    justify-content: flex-start;
    height: 41px;
    flex-direction: row;
  }
  div.nav-row-item6 {
    top: 80px;
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    justify-content: center;
    align-items: center;
    height: 70px;
  }

  div.nav-row-item5 svg {
    padding-right: 0;
    padding-bottom: 0;
  }

  div.nav-row-end div.nav-row-item.show-mobile.nav-row-item5 a {
    color: #333333;
  }

  div.nav-row-main div.nav-row-item.show-mobile a,
  div.nav-row-main div.nav-row-item.show-mobile a:hover {
    color: #000000;
    height: 30px;
    text-decoration: none;
  }

  div.dashboard-content-header {
    display: flex;
    flex-direction: column;
    height: auto;
  }
  div.dashboard-badges {
    order: -1;
  }

  div.dashboard-badges {
    color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    height: 75%;
    padding-top: 10px;
    text-align: center;
    width: 100%;
    font-size: 16px;
  }

  div.nav-row-logo {
    width: 100%;
  }

  img.settings-icon {
    width: 15px;
  }
  svg.settings-icon {
    fill: #333333;
    padding-right: 10px;
    padding-left: 5px;
  }

  div.nav-row-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 35%;
    order: -1;
    flex-direction: column;
    align-items: flex-start;
  }

  div.nav-row-end {
    width: 5%;
  }

  a.zoom-link {
    border: 1px solid #4a8cff;
    border-radius: 5px;
    height: 35px;
    margin-left: auto;
    margin-top: 40px;
    padding-right: 10px;
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-decoration: none;
    margin-right: auto;
    margin-bottom: 20px;
  }

  a.video-link {
    border: 1px solid #4a8cff;
    border-radius: 5px;
    height: 35px;
    margin-left: auto;
    margin-top: 20px;
    padding-right: 10px;
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-decoration: none;
    margin-right: auto;
    margin-bottom: 30px;
  }

  div.dashboard-container {
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 96%;
    font-size: 28pt;
  }

  div.instructor-name {
    font-size: 18px;
  }

  div.dashboard-header-lables {
    display: none;
  }

  div.nav-row-mobile-only a {
    color: #b0d7ff;
  }

  div.lab-assignments {
    display: grid;
  }

  div.lab-week-value {
    font-weight: bold;
  }

  div.lab-title {
    padding-left: 20px;
    width: 95%;
  }

  div.lab-week {
    margin: 0;
  }

  div.lab-week-index {
    display: grid;
    grid-template-rows: auto auto; /* first row takes up one unit, second row takes up two units */
    grid-template-columns: 60px minmax(100px, 1fr); /* both rows have two equal-width columns */
    width: 100%;
    margin-top: 40px;
    margin-bottom: 20px;
    padding-left: 20px;
  }

  .mobile-header-lab {
    grid-row: 2 / 3; /* span one row */
    grid-column: 1 / 3; /* span both columns */
  }

  .lab-week {
    grid-row: 3 / 4; /* span the second row */
    grid-column: 1 / 2; /* span the first column */
  }

  .lab-week-value {
    grid-row: 3 / 4; /* span the second row */
    grid-column: 2 / 3; /* span the second column */
  }

  div.lab-grade-score {
    width: 100%;
  }

  div.lab-grade-status {
    width: 100%;
  }

  div.lab-col {
    min-height: 50px;
    width: 95%;
  }

  div.lab-action {
    justify-content: center;
    align-items: center;
  }

  div.mobile-header {
    display: inline-block;
    font-size: 16px;
  }

  div.lab-grade-score {
    padding-left: 20px;
    justify-content: flex-start;
    height: 100%;
  }

  span.mobile-bold,
  div.mobile-bold {
    font-weight: bold;
  }

  div.lab-week-row {
    display: grid;
    grid-template-rows: repeat(
      5,
      auto
    ); /* creates 5 rows, each with a height determined by its content */
    grid-template-columns: repeat(
      2,
      1fr
    ); /* creates 2 columns, each with a width of 1 fractional unit */
    grid-row-gap: 2rem; /* adds a gap of 2rem between rows */
    grid-column-gap: 2rem; /* adds a gap of 2rem between columns */
    font-size: 20px;
  }

  .grid-badge {
    grid-row: 1; /* places the element in the first row */
    grid-column: 1 / 3; /* spans the element across the first and second columns */
  }

  .grid-week-index {
    grid-row: 2; /* places the element in the second row */
    grid-column: 1 / 3; /* spans the element across the first and second columns */
  }

  .grid-assignment {
    grid-row: 3; /* places the element in the second row */
    grid-column: 1 / 3; /* spans the element across the first and second columns */
  }

  .grid-late-status {
    display: none !important;
  }

  .grid-score {
    grid-row: 4; /* places the element in the fourth row */
    grid-column: 1; /* places the element in the first column */
  }

  .grid-status {
    grid-row: 4; /* places the element in the fourth row */
    grid-column: 2; /* places the element in the second column */
  }

  .grid-action {
    grid-row: 5; /* places the element in the fourth row */
    grid-column: 1 / 3; /* spans the element across the first and second columns */
  }

  div.nav-row-item:hover a,
  div.nav-row-item:focus-within a {
    padding-bottom: 10px;
    border: 0;
  }

  div.nav-row-item6 a.btn-logout {
    padding-bottom: 0;
  }

  div.nav-row-item5 a {
    padding-top: 10px;
  }

  div.lab-badge {
    width: 100%;
    flex-direction: row;
    justify-content: center;
  }

  div.dashboard-container .btn-lab-submit {
    min-width: 120px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  img.small-badge-icon {
    width: 100px;
    padding-top: 40px;
  }

  .assignmentStatusTable {
    width: 98%;
    display: grid;
    grid-template-columns: 30% 10% 60%;
    align-items: center;
    text-align: center;
    padding-top: 25px;
    grid-row-gap: 15px;
    font-size: 16px;
  }

  .statusTable {
    width: 100%;
    display: grid;
    grid-template-columns: 18% 17% 66%;
    align-items: center;
    text-align: center;
    grid-row-gap: 15px;
    font-size: 16px;
  }
  .centerTable {
    width: auto;
  }

  .dashboard-badge {
    max-height: 200px;
  }

  a.zoom-link svg,
  a.video-link svg {
    width: 135px;
    height: auto;
  }

  .statusTable {
    width: 100%;
  }
}

@media (max-width: 768px) {
  div.dashboard-container {
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    font-size: 28pt;
  }
}

.sectionViewBodyAverage.help {
  background-color: #ff0000;
  color: #000000;
}

.sectionViewBodyAverage.low {
  background-color: #ffa500;
  color: #000000;
}

.sectionViewBodyAverage.medium {
  background-color: #ffff00;
  color: #000000;
}

.sectionViewBodyAverage.high {
  /* Background color Green */
  background-color: #32cd32;
  color: #000000;
}