@font-face {
  font-family: "OpenSans";
  src: url("./font/OpenSans-Regular.ttf") format("truetype");
  /* IE9 Compat Modes */
}
/* form {
  margin: 0 5em;
} */
/* Start Added img 07/22/21 */
/* End Added img 07/22/21 */
.justify-content-end {
  -webkit-justify-content: flex-end;
}

.navbar {
  -webkit-justify-content: space-between;
  -webkit-align-items: center;
  min-height: 92px;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100vh;
  font-family: "OpenSans", Fallback, sans-serif;
}

.body {
  background-image: url("../images/login_bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-justify-content: center;
}

.tab {
  display: none;
}

.submit {
  display: none;
}

#current {
  display: inline;
}

#total {
  display: inline;
}

#prevBtn {
  width: 100px;
}

#nextBtn {
  width: 100px;
}

.center {
  text-align: center;
  margin: auto !important;
}

.butts {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.login {
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}

.containerWrapper {
  background-color: #f5f3f3;
  padding-bottom: 2rem;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-flex-grow: 1;
  position: relative;
}

.resultContainer {
  background-color: #14b379;
  padding: 2.5rem;
}

.resultInfo {
  color: white;
}

.resultHeader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  font-size: 2rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-justify-content: center;
}

.resultSubHeader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  font-size: 1rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-justify-content: center;
}

.score {
  margin: 0 0.5rem 0 1rem;
  font-weight: bold;
}

.scoreOver {
  margin-left: 0.5rem;
}

.exitScore {
  margin-left: 0.3em;
  text-decoration: underline;
  color: white;
}

.container.home {
  padding: 0 2.5em;
}

.loginImg {
  max-width: 7.5rem;
  margin: 1rem 0 0 1rem;
}

.loginSecImg {
  max-width: 18.5rem;
  margin: 0 0 0.5rem 0;
}

.homeImg {
  max-width: 7.5rem;
  margin: 0.5rem 1rem;
}

.rounded-circle {
  max-width: 130px !important;
  border: 0.2rem solid white;
  position: relative;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -webkit-border-radius: 50% !important;
}

.flexContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 2.5em 3em;
  border: 2px solid #bebebe;
  background-image: url("../images/login_midbg.jpg.jpg");
  background-size: cover;
  width: 90%;
  max-width: 650px;
  min-height: 400px;
}
.flexContainer p {
  margin: 1rem 0 2.5rem;
}

#my-signin2 {
  margin-bottom: 0.5rem;
}
#my-signin2 span {
  font-weight: bold;
  margin-left: -1rem;
}

.upperLeft {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-justify-content: flex-end;
  margin: 2em 1em;
}

a {
  color: black;
  font-weight: bold;
}

hr {
  height: 2px;
  border-width: 0;
  color: gray;
  background-color: gray;
}

nav a {
  color: white;
  font-weight: normal;
}

.navbar.home {
  background-image: url("../images/header_bg.jpg");
  background-size: cover;
  display: -webkit-flex;
}

.nav-link {
  line-height: 0rem;
}

.logoutIcon {
  filter: invert(100%);
  -webkit-filter: invert(100%);
  width: 1.75rem;
  margin-left: 1rem;
}

.emailIcon {
  width: 1.3rem;
  margin-right: 0.5rem;
}

.profile {
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-items: center;
  margin-bottom: -1.5rem;
  min-height: 170px;
}
.profile .container {
  margin: 2em 0 3em;
}

.profile.exam {
  min-height: 75px;
  -webkit-box-align: normal;
      -ms-flex-align: normal;
          align-items: normal;
  -webkit-align-items: normal;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-bottom: 0;
}
.profile.exam .rounded-circle {
  border: 0.1rem solid white;
  transform: translateY(-12%);
  -webkit-transform: translateY(-12%);
}
.profile.exam .profileInfo {
  text-align: left;
  margin-left: 1rem;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  -webkit-align-self: center;
  transform: translateY(0);
  -webkit-transform: translateY(0);
}
.profile.exam .clock {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  -webkit-align-self: center;
  font-size: 2rem;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-flex-grow: 1;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-justify-content: flex-end;
}

.progress {
  height: 0.5rem;
  border-radius: 0;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  -webkit-flex: none;
}

.progress-bar {
  background-color: #14b379;
}

.fullName {
  font-size: 1.4rem;
}

.description {
  font-size: 0.85rem;
  font-weight: normal;
}

.email {
  font-size: 0.85rem;
  font-weight: normal;
}

.profileInfo {
  -webkit-transform: translateY(-3.3rem);
  transform: translateY(-3.3rem);
  text-align: center;
}

.exam .container {
  margin: 1em 4em;
  font-weight: bold;
}

h5 {
  text-align: center;
}

.inline {
  display: inline;
  margin-right: 0.8em;
}

.underline {
  text-decoration: underline;
}

.list-group {
  margin-top: 1.5em;
}

li:first-child {
  border: none !important;
}

.list-group-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-items: center;
  color: #828282;
  border-color: rgba(0, 0, 0, 0.125);
  border-style: solid;
  border-width: 0 0 0 0;
}
.list-group-item:first-of-type {
  border-width: 0 0 0 0 !important;
}

.scoreSlash {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
}

.exams {
  border-color: rgba(0, 0, 0, 0.125);
  border-style: solid;
  border-width: 0 0 1px 0;
}
.exams .list-group-item {
  padding-left: 5.5em;
}
.exams li:nth-of-type(even) {
  background-color: #f2f8f6;
}

.previousList .list-group-item {
  background-color: transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-items: center;
  color: #828282;
  border-color: rgba(0, 0, 0, 0.125);
  border-style: solid;
  border-width: 1px 0 0 0;
  padding-left: 5.5em;
}

.listTitle {
  font-weight: bold;
  margin-bottom: 0.5em;
  margin-left: 5.5em;
}

.listSubTitle {
  font-weight: bold;
  margin-bottom: 0.5em;
  margin-left: 5.5em;
}

.listExamTitle {
  margin-bottom: -0.5em;
  margin-left: 5.5em;
}

.listExamSubTitle {
  margin-bottom: 1em;
  margin-left: 2.7em;
  font-size: 2em;
}

.questioners {
  padding: 2rem;
  overflow: hidden;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-justify-content: flex-start;
}

.question {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.questionss {
  margin-bottom: 2em;
}

.questionNum {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  margin-right: 1em;
  flex-direction: column;
}

.questionNum p {
  margin-left: 1rem;
}

.listFirst {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 25%;
}

.listSecond {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 25%;
  padding-left: 1.25rem;
}

.examResult {
  width: 25%;
}

.examHeader {
  font-weight: bold;
}

.examSubheader {
  font-size: 0.8rem;
}

.btn {
  background-color: #14b379;
  color: white;
  min-width: 140px;
}

.view {
  background-color: white;
  color: grey;
  padding: 0.375rem 1rem;
}
.view .btnIcon {
  filter: invert(0%);
  -webkit-filter: invert(0%);
  color: white;
  top: -0.1rem;
  position: relative;
  margin-right: 1rem;
}

.btnIcon {
  filter: invert(100%);
  -webkit-filter: invert(100%);
  color: white;
  top: -0.1rem;
  position: relative;
  margin-right: 0.2rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #6c757d;
  content: ">";
}
.breadcrumb-item + .active > div {
  text-decoration: underline;
  font-weight: bold;
}

.breadcrumb-item.active {
  color: #cecece;
}

.breadcrumb {
  background-color: transparent;
  font-size: 0.8em;
}
.breadcrumb li a {
  color: #cecece;
}

h5.inline {
  font-size: 1.3em;
}

.timer {
  margin-left: 45%;
}

.categoryName {
  margin-right: 1em;
}

.choices {
  margin-left: 1.8em;
}

.form-check {
  margin: 0.5em 0;
}

.wrong {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.correct {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.clock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
  color: #828282;
}

.arrow-right {
  background-color: #14b379;
  height: 100px;
  right: -50px;
  position: absolute;
  top: -50px;
  width: 100px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.checkIcon {
  filter: invert(100%);
  -webkit-filter: invert(100%);
  left: 40px;
  top: 70px;
  position: absolute;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.arrow-wrong {
  background-color: #f44a4a;
  height: 100px;
  right: -50px;
  position: absolute;
  top: -50px;
  width: 100px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.wrongIcon {
  filter: invert(100%);
  -webkit-filter: invert(100%);
  left: 40px;
  top: 70px;
  position: absolute;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.wrongAnswer {
  background: #14b379;
  color: white;
}

.form-check-input {
  margin-top: 0.4rem;
  margin-left: -1rem;
}

.optionName {
  margin-left: 0.5rem;
}

.explanation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-items: center;
  background: white;
  padding: 1rem;
  margin-top: 0.5rem;
}

.exTitle {
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.exContent {
  margin-bottom: 1rem;
}

.fa {
  color: #14b379;
  font-size: 1rem;
  margin-right: 0.3rem;
}

.modal {
  pointer-events: none;
}

.modal-header {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-items: center;
}

.modal-body {
  text-align: center;
}

.modal-footer {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-justify-content: center;
}

.exam_img {
  max-width: 850px;
  max-height: 500px;
  width: 100%;
  margin-bottom: 0.5em;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  -ms-grid-column-align: center;
      justify-self: center;
}

.col-modal {
  margin: auto 0;
}

.btn-modal {
  background-color: #ff8303;
  border-color: #ff8303;
  height: 100px;
  left: -70px;
  position: absolute;
  top: -50px;
  width: 100px;
  transform: rotate(84deg);
  -webkit-transform: rotate(-45deg);
}

.fa-question-circle {
  bottom: -30px;
  position: relative;
}

.btn-primary.focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.btn-primary:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}

@media only screen and (max-width: 780px) {
  #header {
    font-size: 2rem;
    text-align: center;
  }

  #subheader {
    text-align: center;
  }

  .list-group-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .listTitle {
    margin-left: 0 !important;
  }

  .listSubTitle {
    margin-left: 0 !important;
  }

  .containerWrapper {
    padding-bottom: 3em;
  }

  .score {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-align-items: center;
  }

  .slash {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-align-items: center;
  }

  .scoreOver {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-align-items: center;
  }

  .resultHeader {
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .listExamTitle {
    margin-left: 0em !important;
  }

  .listExamSubTitle {
    margin-left: 0em !important;
  }

  .exams .list-group-item {
    padding: 1.25rem;
    text-align: center;
  }

  .previousList .list-group-item {
    padding: 1.25rem;
    text-align: center;
  }

  .listFirst {
    width: 100% !important;
    margin-bottom: 0.5rem;
  }

  .listSecond {
    width: 100% !important;
    margin-bottom: 0.5rem;
  }

  .examResult {
    width: 100% !important;
    margin-bottom: 0.5rem;
  }

  .container.home {
    margin: auto;
    padding: 0 0.5rem;
  }

  .questionss .list-group-item {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-align-items: flex-start;
    text-align: left;
  }

  .resultSubHeader {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-align-items: center;
  }

  .scoreSlash {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-justify-content: center;
  }
}
.videoWrapper {
  position: relative;
  background-color: #000;
}
.videoWrapper43 {
  padding-top: 75%;
}
.videoWrapper169 {
  padding-top: 56%;
}

.videoIframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.videoPoster {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: 0;
  outline: none;
  background-position: 50% 50%;
  background-size: 100% 100%;
  background-size: cover;
  text-indent: -999em;
  overflow: hidden;
  opacity: 1;
  -webkit-transition: opacity 800ms, height 0s;
  transition: opacity 800ms, height 0s;
  -webkit-transition-delay: 0s, 0s;
  transition-delay: 0s, 0s;
}
.videoPoster:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border: 5px solid #fff;
  border-radius: 100%;
  -webkit-transition: border-color 300ms;
  transition: border-color 300ms;
}
.videoPoster:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-30%, -50%);
          transform: translate(-30%, -50%);
  width: 0;
  height: 0;
  border-left: 40px solid #fff;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  -webkit-transition: border-color 300ms;
  transition: border-color 300ms;
}
.videoPoster:hover:before, .videoPoster:focus:before {
  border-color: #f00;
}
.videoPoster:hover:after, .videoPoster:focus:after {
  border-left-color: #f00;
}
.videoWrapperActive .videoPoster {
  opacity: 0;
  height: 0;
  -webkit-transition-delay: 0s, 800ms;
  transition-delay: 0s, 800ms;
}