.equations__contaiener {
  display: flex;
  flex-basis: 85%;
  font-weight: 900;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 92%;
  margin-top: 16px;
}

.equation__mobile__header {
  display: none;
}

.equations__list {
  display: flex;
  flex-direction: row;
  line-height: 22px;
  flex-wrap: wrap;
}

.equations__item {
  width: 38px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  margin-left: 0.3em;
  margin-right: 0.3em;
}

.equations__item label {
  font-weight: 900 !important;
}

.equation__multiplicand {
  margin-left: 0.9rem;
  margin-bottom: 0;
}

.equations__item .times {
  display: flex;
  flex-direction: row;
  border-bottom: 2px solid #c4c4c4;
}

.equations__item .times label {
  margin: 0.12em;
}

.equations__item input {
  margin: 0.5em;
  font-size: 100%;
  border: 1px dashed #a8a8a8;
  font-family: 'Roboto', sans-serif;
  border-radius: 2px;
  background: #f1f1f1;
  height: 1.25em;
  width: 1.2em;
  text-align: right;
}

.btn__done__mobile {
  display: none;
}

.equations__contaiener footer {
  display: none;
}

/* Results */

.results__contaiener {
  display: flex;
  flex-basis: 85%;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 92%;
  margin-top: 16px;
}

/* Responsive */

@media screen and (min-width: 320px) and (max-width: 990px) {

  .results__contaiener
  {
    font-size: 26px;
  }

  .equations__contaiener {
    flex-basis: 100%;
    height: 100%;
    font-size: 26px;
    display: block;
  }

  .equation__mobile__header {
    width: 100%;
    height: 171px;
    display: block;
  }

  .equation__header__img {
    z-index: 4;
    width: 108px;
    height: 116px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
  }

  .equation__mobile__header svg {
    display: block !important;
    width: 100% !important;
  }

  .equation__mobile__header .vector_mobile_1 {
    top: -310px;
    height: 798px;
    z-index: 3;
  }

  .equation__mobile__header .vector_mobile_2 {
    top: -305px;
    height: 798px;
    z-index: 2;
  }

  .equation__mobile__header .vector_mobile_6 {
    top: -310px;
    height: 1268px;
    z-index: 3;
  }

  .equation__mobile__header .vector_mobile_7 {
    top: -305px;
    height: 1268px;
    z-index: 2;
  }

  .equation__mobile__header .vector_mobile_9 {
    top: -310px;
    height: 1268px;
    z-index: 3;
  }

  .equation__mobile__header .vector_mobile_10 {
    top: -305px;
    height: 1268px;
    z-index: 2;
  }


  .equations__list {
    width: 100%;
    margin: 20px auto 0 auto;
    height: 530px;
    overflow: scroll;
    justify-content: space-between;
    position: relative;
    z-index: 4;
  }

  .equations__list.mobile 
  {
      margin-top: -80px;
      height: auto!important;
      overflow: unset!important;
  }

  .equations__item {
    width: 38px;
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 36px;
  }

  .equation__multiplicand
  {
    margin-left: 1.3rem!important;
  }

  .equations__item p 
  {
    width: 100%!important;
    text-align: end!important;
  }

  .equations__item input {
    width: 2.2em;
    height: 1.55em;
  }

  .btn__done__mobile {
    display: block;
    background-color: #b70000;
    width: 345px;
    height: 55px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 72px;
    border-radius: 10px;
    border: none;
    font-size: 1.875rem;
    color: #fff;
  }

  .equations__contaiener footer {
    width: 100%;
    height: 100px;
    margin-top: 50px;
    display: block;
    position: relative;
  }

  .equations__contaiener footer svg {
    display: block !important;
    width: 100% !important;
  }

  .equations__contaiener footer .footer-svg_1 {
    z-index: 2;
  }
  .equations__contaiener footer .footer-svg_2 {
    bottom: 10px;
  }
}

@media screen and (max-width: 320px) {
  .btn__done__mobile {
    width: 282px;
    height: 55px;
  }

  .equation__mobile__header .vector_mobile_1 {
    height: 798px;
  }

  .equation__mobile__header .vector_mobile_2 {
    height: 798px;
  }


  .equation__mobile__header .vector_mobile_6 {
    height: 1268px;
  }

  .equation__mobile__header .vector_mobile_7 {
    height: 1268px;
  }
}

@media screen and (min-width: 321px) and (max-width: 425px) {
  .equations__list {
    margin: 50px auto 0 auto;
    justify-content: space-around;
  }

  .btn__done__mobile {
    width: 282px;
    height: 55px;
  }
  
}

@media screen and (min-width: 426px) and (max-width: 606px) {
  .equations__list {
    margin: 50px auto 0 auto;
    justify-content: space-around;
  }

  .equation__mobile__header .vector_mobile_1 {
    top: -370px;
    height: 798px;
    z-index: 3;
  }

  .equation__mobile__header .vector_mobile_2 {
    top: -365px;
    height: 798px;
    z-index: 2;
  }

  .equation__mobile__header .vector_mobile_9 {
    top: -310px;
    height: 1128px;
    z-index: 3;
  }

  .equation__mobile__header .vector_mobile_10 {
    top: -305px;
    height: 1128px;
    z-index: 2;
  }

  .equations__contaiener footer {
    display: block;
  }

  .equations__contaiener footer svg{
    display: none !important;
  }

  .btn__done__mobile {
    margin-top: 10px;
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 607px) and (max-width: 990px) {
  .equations__list {
    margin: 50px auto 0 auto;
    justify-content: space-around;
  }

  .equation__mobile__header .vector_mobile_1 {
    top: -390px;
    z-index: 3;
  }

  .equation__mobile__header .vector_mobile_2 {
    top: -385px;
    z-index: 2;
  }

  .equation__mobile__header .vector_mobile_6 {
    height: 1268px;
  }

  .equation__mobile__header .vector_mobile_7 {
    height: 1268px;
  }

  .equation__mobile__header .vector_mobile_9 {
    top: -310px;
    height: 1128px;
    z-index: 3;
  }

  .equation__mobile__header .vector_mobile_10 {
    top: -305px;
    height: 1128px;
    z-index: 2;
  }

  

  .equations__contaiener footer {
    display: block;
  }

  .equations__contaiener footer svg{
    display: none !important;
  }
}

@media print {

  .equations__list {
    display: flex;
    flex-direction: row;
    height: 560px;
    line-height: 22px;
    flex-wrap: wrap;
  }


  .equations__item {
    margin-left: 1em!important;
    margin-right: 1em!important;
    font-size: 16px!important;
  }

  #equations__mobile
  {
    margin-left: 1em!important;
    margin-right: 1em!important;
  }

  .equations__contaiener {
    display: flex!important;
    flex-basis: 85%!important;
    flex-direction: row!important;
    flex-wrap: wrap!important;
    font-size: 92%!important;
    margin-top: -45px!important;
  }

  .equations__list.mobile
  {
    margin-left: 15px!important;
  }
  .equations__item input {
    display: none!important;
  }

  /* Results Print */

  .results__contaiener {
    display: flex!important;
    flex-basis: 85%!important;
    flex-direction: row!important;
    flex-wrap: wrap!important;
    font-size: 92%!important;
    margin-top: 60px!important;
  }
}

.board__container {
  display: flex;
  width: 770px;
  background-color: #fff;
  position: relative;
  height: 530px;
  margin: 0 auto;
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 9px 1px rgba(0, 0, 0, 0.41);
  box-shadow: 1px 1px 9px 1px rgba(0, 0, 0, 0.41);
}

.board__container header {
  display: none;
}

.board__container svg {
  position: absolute;
  height: 100%;
}

.board__container .vector__1 {
  right: 0;
  z-index: 1;
}
.board__container .vector__2 {
  right: 10px;
}


/* Responsive */

@media screen and (max-width: 990px) {
  .board__container {
    display: flex;
    width: 100%;
    position: relative;
    height: 100%;
    margin: 0;
    border-radius: 5px;
    box-shadow: none;
  }

  #results__board__container
  {
    flex-direction: column-reverse;
  }

  .board__container svg {
    display: none;
  }
}

@media print {
  svg {
    display: none;
  }

  .board__container {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }

  .board__container header {
    display: block;
    width: 100%;
    position: static;
    height: 450px;
  }

  .board__container header img 
  {
      z-index: 4;
      width: 60%;
      height: 92px;
      position: absolute;
      top: 20px;
      left: 10px;
  }

  .board__container header svg {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -534px;
  }

  .board__container header .vector__3
  {
      z-index: 1;
  }

  .board__container header .vector__4
  {
      top: -529px;
  }


  /*Results */

  .board__container .header__results {
    display: block;
    width: 100%;
    position: static;
    height: 240px;
    z-index: 3;
  }

  .header__results .header__title
  {
    display: flex;
    flex-direction: row;
  }


  .header__title .header__title__image 
  {
    width: 108px;
    height: 116px;
    position: relative;
    margin-left: 30px;
  }

  .hero__title
  {
    display: flex;
    flex-direction: column;
  }

  .header__title .header__title__text 
  {
    z-index: 3;
    font-size: 28px;
    margin-top: 40px;
    margin-left: 25px;
    color: #4F4F4F;

  }

  .header__title .header__title__subtext
  {
    z-index: 3;
    font-size: 24px;
    font-weight: 400!important;
    font-family: 'Nunito Sans', sans-serif;
    margin-top: -20px;
    margin-left: 25px;
    color: #fff!important;
  }


  .board__container .header__results svg {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -405px;
  }


  .board__container 
  .header__results .vector__3
  {
      z-index: 1;
  }

  .board__container .header__results .vector__4
  {
      top: -400px;
  }

  .header__board_results
  {
    display: flex;
  }


}

.instructions__container {
  padding: 1em 1em 1em 1em;
  flex-basis: 37%;
  z-index: 5;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.instructions__container__mobile
{
  display: none;
}

.instructions__wrapper {
  width: 218px;
  height: 194px;
  margin-top: 24px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.25);
}

.instructions__container ol {
  width: 179px;
  height: 155px;
  box-sizing: initial;
  padding: 46px 25px 24px 27px;
  margin: 0;
}

.instructions__container li {
  font-size: 13px;
  color: #616161;
  line-height: 18px;
}

.btn__start {
  background-color: #72b4e4;
  width: 140px;
  opacity: 0.3;
  height: 38px;
  cursor: pointer;
  margin-top: 50px;
  border-radius: 10px;
  border: none;
  font-size: 1rem;
  color: #fff;
}


.btn__print {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  align-items: center;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 20px 10px 20px;
  border: none;
  background-color: #f7cc48;
  color: #616161;
  border-radius: 10px 10px 0px 0px;
}

.btn__done {
  background-color: #b70000;
  width: 193px;
  height: 38px;
  cursor: pointer;
  margin-top: 72px;
  border-radius: 10px;
  border: none;
  font-size: 1rem;
  color: #fff;
}

.instructions__teacher {
  width: 70px;
  height: 78px;
  left: 93px;
  top: 56px;
  position: absolute;
}

.instructions__teacher_start {
  width: 150px;
  height: 166px;
  margin-top: 20px;
}

.instructions__teacher_mobile {
  display: none;
}

/* Responsive */

@media screen and (min-width: 321px) and (max-width: 990px) {
  .instructions__container {
    display: none;
  }

  .title__instruction__mobile
  {
    margin-top: 0;
    margin-bottom: 70px;
    font-family: 'Roboto' sans-serif!important;
    color: #4F4F4F!important;
  }

  .instructions__container__mobile
  {
    position: absolute;
    padding: 0;
    width: 100vw;
    justify-content: center;
    align-content: center;
    height: 100%;
    background: linear-gradient(180deg, #f6cd46 0%, #ff986c 100%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .instructions__wrapper {
    width: 340px;
    height: 285px;
    margin-top: 24px;
    position: relative;
    display: flex;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.25);
  }



  .instructions__container__mobile ol {
    width: 340px;
    height: 155px;
    line-height: 28px;
    padding: 70px 37px 24px 37px;
    margin: 0;
  }

  .instructions__container__mobile li {
    font-size: 20px;
    margin-left: 10px;
    color: #616161;
  }

  .instructions__teacher {
    display: none;
  }

  .instructions__teacher_mobile {
    position: absolute;
    top: -60px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 112px;
    height: 124px;
  } 

  .instructions__teacher_start {
    width: 108px;
    height: 116px;
    margin-top: 20px;
  }

  .btn__print {
    display: none;
  }

  .btn__start
  {
    background-color: #72b4e4;
    width: 327px;
    opacity: 0.3;
    height: 70px;
    display: block;
    margin-top: 44px;
    border-radius: 10px;
    border: none;
    font-size: 2.25rem;
    color: #fff;
  }
}

@media screen and (max-width: 425px) {
  .title__instruction__mobile
  {
    font-size: 34px;
    font-family: 'Roboto', sans-serif;
    color: #4F4F4F!important;
  }
.instructions__container__mobile ol {
    line-height: 24px;
  }

  .btn__start
  {
    display: block;
    background-color: #72b4e4;
    width: 213px;
    opacity: 0.3;
    height: 55px;
    margin-top: 72px;
    border-radius: 10px;
    border: none;
    font-size: 2.0rem;
    color: #fff;
  }
}

@media screen and (min-width: 426px) and (max-width: 990px) {
  .title__instruction__mobile
  {
    font-size: 44px!important;
  }
}

@media screen and (min-width: 700px) and (max-width: 990px) {
  .instructions__wrapper {
    height: 300px;
  }

}


@media screen and (max-width: 320px) {
  .instructions__container {
    display: none;
  }

  .title__instruction__mobile
  {
    font-size: 34px;
    text-align: center;
    font-family: 'Roboto' sans-serif!important;
    color: #4F4F4F;
  }

  .instructions__container__mobile
  {
    position: absolute;
    padding: 0;
    width: 100vw;
    justify-content: center;
    align-content: center;
    height: 100%;
    background: linear-gradient(180deg, #f6cd46 0%, #ff986c 100%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .instructions__wrapper {
    width: 280px;
    height: 275px;
    margin-top: 54px;
    position: relative;
    display: flex;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.25);
  }



  .instructions__container__mobile ol {
    width: 340px;
    height: 155px;
    line-height: 20px;
    padding: 44px 37px 24px 37px;
    margin: 0;
  }

  .instructions__container__mobile li {
    font-size: 19px;
    color: #616161;
    margin-left: 5px;
  }

  .instructions__teacher {
    display: none;
  }

  .instructions__teacher_mobile {
    position: absolute;
    top: -80px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 112px;
    height: 120px;
  } 

  .instructions__teacher_start {
    width: 108px;
    height: 116px;
    margin-top: 20px;
  }

  .btn__print {
    display: none;
  }


  .btn__start
  {
    display: block;
    background-color: #72b4e4;
    opacity: 0.3;
    width: 213px;
    height: 55px;
    margin-top: 72px;
    border-radius: 10px;
    border: none;
    font-size: 2.0rem;
    color: #fff;
  }
}

@media screen and (max-width: 990px) and (max-height: 600px) {
  .instructions__wrapper {
    width: 271px;
    height: 230px;
  }

  .instructions__teacher_mobile {
    width: 90px;
    height: 102px;
    left: -5px;
    top: -70px;
    position: absolute;
  }

  .title__instruction__mobile
  {
    font-size: 34px;
    color: #4F4F4F;
    text-align: center;
  }


  .instructions__container__mobile ol {
    line-height: 20px;
    padding: 34px 37px 24px 37px;
  }

  .instructions__container__mobile li {
    font-size: 16px;
  }

  .btn__start
  {
    display: block;
    background-color: #72b4e4;
    width: 243px;
    opacity: 0.3;
    height: 48px;
    cursor: pointer;
    margin-top: 22px;
    border-radius: 10px;
    border: none;
    font-size: 2rem;
    color: #fff;
  }
}

@media print {
  .instructions__container {
    display: none;
  }
}

.results__container {
  padding: 1em 0.5em 1em 1.5em;
  flex-basis: 37%;
  z-index: 5;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.results__container p 
{
  margin: 0!important;
}

.results__mobile__header 
{
  display: none;
}

.answers__container {
  width: auto;
  margin-top: 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
  display: flex;
  background-color: #fff;
}

.correctAns__container {
  border-right: 2px solid #000;
}

.correctAns__text {
  background-color: #72b4e4;
  display: block;
  margin: 0;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.7rem;
  text-align: center;
  padding: 5px 20px 5px 20px;
}

.correctAns__number {
  margin: 0;
  font-size: 28px;
  line-height: 42px!important;
  text-align: center;
}

.wrongAns__text {
  background-color: #b6b6b6;
  display: block;
  margin: 0;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.7rem;
  text-align: center;
  padding: 5px 20px 5px 20px;
}

.wrongAns__number {
  margin: 0;
  font-size: 28px;
  line-height: 42px!important;
  text-align: center;
}

.avarage__container {
  width: auto;
  margin-top: 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
  display: flex;
  background-color: #fff;
}

.time__container {
  border-right: 2px solid #000;
}

.time__text {
  background-color: #f7cc48;
  display: block;
  margin: 0;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.7rem;
  text-align: center;
  padding: 5px 32px 5px 32px;
}

.time__number {
  margin: 0;
  font-size: 28px;
  line-height: 42px!important;
  text-align: center;
}

.score__text {
  background-color: #a4f075;
  display: block;
  margin: 0;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.7rem;
  text-align: center;
  padding: 5px 32px 5px 32px;
}

.score__number {
  margin: 0;
  font-size: 28px;
  line-height: 42px!important;

  text-align: center;
}

.restart__button_mobile
{
  display: none;
}

.restart__button
{
  display: block;
  background-color: #f7cc48;
  text-decoration: none;
  text-transform: uppercase;
  margin-top: 30px;
  padding: 10px 20px 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  color: #616161;
}

@media screen and (max-width: 990px) {
  .results__container .equations__list
  {
    margin-top: -80px!important;
  }

  .restart__button
{
  display: block;
  background-color: #f7cc48;
  text-decoration: none;
  text-transform: uppercase;
  margin-top: 5px;
  padding: 10px 20px 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  display: none;
  color: #616161;
}
.restart__button_mobile
{
  display: block;
  background-color: #f7cc48;
  text-decoration: none;
  text-transform: uppercase;
  margin-top: 5px;
  margin-left: auto;
  margin-bottom: 30px;
  font-size: 20px;
  margin-right: auto;
  padding: 20px 20px 20px 20px;
  border-radius: 10px;
  cursor: pointer;
  color: #616161;
}
}



@media print {
  .results__container {
    display: none!important;
  }

  .header__board_results
  {
      margin-top: 10px!important;
      margin-left: 44px!important;
  }


  .answers__container {
    z-index: 3!important;
    margin-bottom: 0!important;
    border: 1px solid #000!important;
  }

  .correctAns__container {
    border-right: none!important;
    margin-bottom: 0!important;
  }

  .correctAns__text
  {
    margin-bottom: 0!important;
  }
  
  .correctAns__number
  {
    margin-bottom: 0!important;
  }

  .wrongAns__text
  {
    border-left: 1px solid #000!important;
    margin-bottom: 0!important;
  }

  .wrongAns__number
  {
    border-left: 1px solid #000!important;
    margin-bottom: 0!important;
  }

  .time__container {
    border-right: none!important;
    margin-bottom: 0!important;
  }

  .time__text
  {
    margin-bottom: 0!important;
  }

  .time__number
  {
    margin-bottom: 0!important;
  }

  .avarage__container {
    z-index: 3!important;
    border: 1px solid #000!important;
    margin-left: 30px!important;
    margin-bottom: 0!important;
  }

  .score__text {
    border-left: 1px solid #000!important;
    margin-bottom: 0!important;
  }

  .score__number
  {
    border-left: 1px solid #000!important;
    margin-bottom: 0!important;
  }
}


* {
  font-family: 'Roboto', sans-serif;   
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

@media print {
*
{
  box-sizing: initial;
}

body {
  box-sizing: initial;
  margin: 0;
  padding: 0;
}
}

@page {
margin:0cm;
}