body,
html,
#wrapper {
  width: 100%;
  height: 100%;
}
#wrapper {
  display: table;
  background-color: #fff;
}
#main {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
#nextButton,
#backButton {
  display: flex;
}
.target-body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  border: 2px dashed #f69c55;
}

.t-y {
  color: #ffc929 !important;
}

.navigators {
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px !important;
}
.bar-container {
  align-items: center;
}
.introjs-tooltip {
  min-width: 600px;
  /* max-width: 600px; */
}

.introjs-disabled {
  display: none !important;
}

.target {
  font-size: 28pt;
}

.myProgress {
  width: 60px;
  height: 14px;
  margin: 4.5px;
  background-color: #fff;
}

.myBar {
  width: 60px;
  height: 100%;
  background-color: rgb(76, 107, 175);
  text-align: center;
  line-height: 30px;
  color: white;
}
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 30px; /* Preferred icon size */
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  overflow: hidden;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: "liga";
}

/* Rules for sizing the icon. */
.material-icons.md-18 {
  font-size: 30px;
}
.material-icons.md-24 {
  font-size: 24px;
}
.material-icons.md-36 {
  font-size: 36px;
}
.material-icons.md-48 {
  font-size: 48px;
}
.currenQuestion,
.totalQuestionSpan,
.timerSpan,
.score-holder {
  font-size: 18px;
}
/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
  color: rgba(0, 0, 0, 0.54);
}
.material-icons.md-dark.md-inactive {
  color: rgba(0, 0, 0, 0.26);
}

/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
  color: rgba(255, 255, 255, 1);
}
.material-icons.md-light.md-inactive {
  color: rgba(255, 255, 255, 0.3);
}

@keyframes zoominoutsinglefeatured {
  0% {
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    -o-transform: scale(1.1);
    -moz-animation: scale(1.1);
  }
  50% {
    transform: scale(2, 2);
    -webkit-transform: scale(2, 2);
    -o-transform: scale(2, 2);
    -moz-animation: scale(2, 2);
  }
  100% {
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
  }
}

.cardcontainer {
  animation: zoominoutsinglefeatured 2s infinite;
  -webkit-animation: zoominoutsinglefeatured 2s infinite;
  -moz-animation: zoominoutsinglefeatured 2s infinite;
  -o-animation: zoominoutsinglefeatured 2s infinite;
}
.target-bar-line {
  width: 100%;
  background-color: #ff7424;
  position: relative;
  min-height: 10px;
}

.target-shape {
  width: 100%;
  max-width: 440px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ff7424;
  text-align: center;
  padding: 10px 20px;
  color: #fff;
  clip-path: polygon(0% 0%, 50px 100%, calc(100% - 50px) 100%, 100% 0%);
  border-radius: 6px;
}
.target {
  font-weight: 400;
  font-size: 27px;
}
.target-value {
  font-weight: 700;
  font-size: 27px;
}
.canvasContainer {
  background: #2545a4;
}