

//----------- MAIN BOX ----------------

.main_box
  height: calc(100vh - 14.5em)
  background-color: white
  overflow: auto
  .main_text
    color: $secondarycolor
    //font-size: calc(5.5vh + 2em)
    //padding: .7em 6em 1em 1em
    font-weight: bold
    font-size: calc(4.5vw + 1.5em)
    line-height: calc(.4vw + .9em)
    font-weight: bold
    padding: .7em .7em 0 .7em
    margin: 0
  .nav_box
    position: fixed
    width: 95%
    background-color: $midgray
    &.with_feedback
      margin-top: 3.9em
    .nav_position
      .nav_top
        +flex
        height: 2em
        .nav_circles
          margin: 0 .8em
          +flex
          .nav_c
            height: .75em
            width: .75em
            margin-right: .5em
            border-radius: 5em
            border: .01em solid $gray
            &.c_red
              background-color: #ef6a5e
            &.c_yellow
              background-color: #f7c150
            &.c_green
              background-color: #60c655
        .nav_tab
          +flex
          justify-content: space-between
          background-color: white
          color: black
          width: 12em
          height: 100%
          .tab_title
            margin-left: 1em
            font-size: .8em
          .tab_cross
            font-size: .6em
            margin-top: -1em
            margin-right: 1em
        .nav_plus
          color: black
          font-size: .8em
          margin-left: 1em
      .nav_bottom
        +flex
        height: 2.4em
        color: black
        background-color: white
        border-bottom: .01em solid $gray
        .nav_icons
          margin-left: 1em
          min-width: 5em
          .nav_i
            font-size: .9em
            margin-right: 1em
        .box_url
          +flex
          justify-content: space-between
          width: calc(100% - 7.5em)
          border: 0.04em solid $gray
          border-radius: .2em
          padding: .2em
          .url_group
            white-space: nowrap
            text-overflow: ellipsis
            overflow: hidden
            .nav_secure, .nav_no-secure
              margin: 0 .5em
              font-size: .8em
            .nav_secure
              color: green
            .nav_no-secure
              color: $gray
            .nav_url
              font-size: .8em
          .nav_star
            margin: 0 .5em
      .three_dots
        +column-flex
        justify-content: center
        .dot
          width: .25em
          height: .25em
          border-radius: .2em
          margin-left: .5em
          margin-bottom: .25em
          background-color: $gray

  .image_box
    text-align: center
    width: 100%
    margin-top: 4.4em
    &.with_feedback
      margin-top: 8.3em
    .iframeparent
      width: 100%
    .eduiframe
      width: 100%
      height: 300vh
      pointer-events: none
      display: block
      border: none
      margin: 0
      padding: 0
      overflow: hidden
      overflow-x: hidden
  .quiz_image
    width: 100%
    display: block
    margin: 0 auto
    &.with_margins
      width: 70%
  &.main_box_finished
    height: calc(100vh - 7.7em)
    .main_text
      font-size: calc(5vh + 1.3em)
      padding: .7em 3em .8em 1em
      .survey
        padding-bottom: .5em



@media (max-width: $media1) and (orientation: landscape)

  .main_box
    .main_text
      font-size: calc(4vw + 2em)
      padding: 1em

    &.main_box_finished
      .main_text
        font-size: calc(4vh + 1.4em)
        padding: .7em 2.3em 1em 1em


@media (max-width: $media2)

  .main_box
    .main_text
      font-size: calc(5vh + 2.3em)
      padding: .8em



@media (max-width: $media4) and (orientation: landscape)

  .main_box
    .main_text
      font-size: calc(5vh + 1.9em)
      padding: 1em 2em 1em 1em
    .nav_box
      &.with_feedback
        margin-top: 3.1em
    .image_box
      &.with_feedback
        margin-top: 7.5em



@media (max-width: $media4) 
  
  .main_box
    .nav_box
      &.with_feedback
        margin-top: 3.1em
    .image_box
      &.with_feedback
        margin-top: 7.5em
    &.main_box_finished
      .main_text
        font-size: calc(3vh + 1.6em)
        padding: .7em 1em 1em 1em


@media (max-width: $media5)

  .main_box
    .main_text
      font-size: calc(4vh + 1.9em)
      padding: 1em 2em 0 1em
    .nav_box
      &.with_feedback
        margin-top: 3.1em
    .image_box
      &.with_feedback
        margin-top: 7.5em


@media (max-width: $media6)

  .main_box
    .main_text
      font-size: calc(4.5vh + 2.2em)
      padding: .8em 1em .8em .8em


@media (max-width: $media6) and (orientation: landscape)

  .main_box
    height: calc(100vh - 8.3em)
    .main_text
      font-size: calc(2vh + 2em)
      padding: .8em 3em .8em 1em
    .nav_box
      &.with_feedback
        margin-top: 1.7em
    .image_box
      &.with_feedback
        margin-top: 6.1em

    .quiz_image
      &.with_margins
        width: 80%
    &.main_box_finished
      height: calc(100vh - 4.7em)



@media (max-width: $media6)
  @media (max-height: $media13)

    .main_box
      .main_text
        font-size: calc(1.7vw + 2em)
        padding: .7em 3em 0 1em
      .nav_box
        .nav_position
          .nav_top
            display: none
        &.with_feedback
          margin-top: 1.7em
      .image_box
        margin-top: 2.4em
        &.with_feedback
          margin-top: 4em



@media (max-width: 818px)
  @media (max-height: 613px)

    .main_box
      .main_text
        font-size: calc(3.2vw + 2.2em)
        padding: .8em 1.5em 0 .8em



@media (max-width: $media7) and (orientation: portrait)
  .main_box
    .nav_box
      width: 94.5%



@media (max-width: $media7) and (orientation: landscape) //iPhoneX

  .main_box
    .main_text
      font-size: calc(1.5vw + 2em)
      padding: .7em 1.5em 0 1em
    &.main_box_finished
      height: calc(100vh - 4.7em)



@media (max-width: $media8)

  .main_box
    .main_text
      font-size: calc(4vh + 2em)
      padding: .9em
    .nav_box
      &.with_feedback
        margin-top: 3.1em

    .image_box
      &.with_feedback
        margin-top: 7.5em
      .quiz_image
        &.with_margins
          width: 80%
    &.main_box_finished
      .main_text
        font-size: calc(2.35vh + 1.6em)


@media (max-width: $media9)

  .main_box
    height: calc(100vh - 9em)
    .nav_box
      .nav_position
        .nav_top
          display: none
      &.with_feedback
        margin-top: 1.7em
    .image_box
      margin-top: 2.4em
      &.with_feedback
        margin-top: 4em

    .quiz_image
      &.with_margins
        width: 95%
    &.main_box_finished
      height: calc(100vh - 4.1em)



@media (max-width: $media9) and (orientation: landscape)

  .main_box
    height: calc(100vh - 8em)
    .main_text
      font-size: calc(2.5vw + 1.7em)
      padding: .7em 2.5em .7em 1em

    .image_box
      .quiz_image
        &.with_margins
          width: 80%
    &.main_box_finished
      height: calc(100vh - 4.7em)


@media (max-width: 670px) and (orientation: landscape)

  .main_box
    .main_text
      font-size: calc(2vw + 1.7em)
      padding: .7em 2em 0 1em




@media (max-width: $media10) and (orientation: portrait)
  .main_box
    .nav_box
      width: 94%



@media (max-width: $media10) and (orientation: landscape)

  .main_box
    .main_text
      font-size: calc(3vh + 1.5em)
      padding: .8em 3em .8em 1em



@media (max-width: $media10)
  @media (max-height: $media14)

    .main_box
      .main_text
        font-size: calc(2vw + 1.5em)
        padding: .8em 3em 0 1em


@media (max-width: 568px)
  @media (max-height: $media14)

    .main_box
      .main_text
        font-size: calc(2vh + 1.5em)
        padding: .8em 3em 0 1em


@media (max-width: $media11) and (orientation: portrait)
  .main_box
    .nav_box
      width: 95%


@media (max-width: $media12)

  .main_box
    .main_text
      font-size: calc(4vh + 1.2em)
      padding: .8em 1.2em 0 .8em
    &.main_box_finished
      .main_text
        font-size: calc(2vh + .9em)


@media (max-width: $media13)

  .main_box
    .main_text
      font-size: calc(4.2vh + 1.2em)
      padding: .8em 1.2em .8em .8em



@media (max-width: 414px) and (orientation: portrait)

  .main_box
    .main_text
      font-size: calc(3.5vh + 1.2em)
    .nav_box
      width: 94.3%



@media (max-width: $media14)

  .main_box
    .main_text
      font-size: calc(4vh + 1em)
      padding: .7em 1.5em 0 .7em


@media (max-width: $media14) and (orientation: portrait)

  .main_box
    .nav_box
      width: 93.9%


@media (max-width: $media15)

  .main_box
    .main_text
      font-size: calc(3.5vh + 1em)


@media (max-width: $media15) and (orientation: portrait)

  .main_box
    .nav_box
      width: 92%


