.dark-opacity
  position: fixed
  width: 100vw
  height: 100vh
  top: 0
  left: 0
  background-color: rgba(0,0,0,0.5)
  z-index: 1
  @include hand_cursor
  &.fade-enter
    opacity: 0.01
    &.fade-enter-active
      opacity: 1
      transition: opacity 500ms ease-in
  &.fade-exit
    opacity: 1
    &.fade-exit-active
      opacity: 0.01
      transition: opacity 500ms ease-in

.modal_position
  left: 50%
  top: 50%
  width: 60%
  @include transform (translate(-50%, -50%))
  position: fixed
  z-index: 2
  .modal
    color: black
    width: 100%
    background-color: white
    font-size: 1.7em
    padding-bottom: 1em
    max-height: 26em
    overflow-y: auto
    @include backface-visibility (hidden)
    &.fade-enter
      opacity: 0.01
      @include transform (scale(0.01))
      &.fade-enter-active
        opacity: 1
        @include transition (transform 500ms ease-in)
        @include transform (scale(1))
    &.fade-exit
      opacity: 1
      @include transform (scale(0.01))
      @include transition (transform 500ms ease-in)
      &.fade-exit-active
        opacity: 0.01
        @include transform (scale(1))
        @include transition (transform 500ms ease-in)
    .modal-box
      margin: 1em
      .close-modal-cross
        @include flex
        justify-content: flex-end
      .control
        fill: black
        font-size: .8em
        &.control_cross
          font-size: .6em
          @include hand_cursor
          &:hover
            @include hover_scale_rotation
            fill: $red
      .modal-content
        margin: .3em 1.5em 1.5em
        .modal-title
          font-weight: bold
          &.modal-title-end
            font-size: 2em
            text-align: center
        .modal-text
          .task-list
            margin-bottom: 1em
            .list-title
              font-weight: bold
              @include flex
              justify-content: flex-start
              @include hand_cursor
              .list-title-text
                margin: 0
            ul
              li
                max-width: 100%
                white-space: nowrap
                text-overflow: ellipsis
                overflow: hidden
            .control
              @include hand_cursor
              &.control_plus
                margin-left: 3em
                margin-top: .2em
                font-size: .7em
                //.path03
                  //@include transform (rotate(90deg))
                  //@include transform-origin (50% 50%)
                &:hover
                  @include hover_scale

            .individual_task
              @include flex
              justify-content: space-between
              .individual_task_text
                max-width: 86%
                white-space: nowrap
                text-overflow: ellipsis
                overflow: hidden
                @include hand_cursor
                &:hover
                  color: $secondarycolor
              .task-icons
                .control
                  @include cursor
                  &.control_feedback
                    font-size: .6em
                    fill: $gray
                    &:first-child
                      margin-right: .5em
                    &.right
                      fill: $green
                    &.wrong
                      fill: $red

          .final_score
            margin-top: 1em
            @include flex
            justify-content: space-around
            color: $secondarycolor
            font-weight: bold
            .individual_score
              @include column-flex
              justify-content: center
              .number_score
                font-size: 2em
              .text_score
                font-size: 1.5em
          .text-questions
            margin-bottom: 1em
          .icon_list
            //@include cursor
            li
              display: flex
              margin-bottom: .2em
              .control
                margin-right: .5em
          .license_logo
            width: 2.5em
            margin-left: .3em
            vertical-align: middle
        .e_logo
          width: 2.2em
        .logos
          @include flex
          justify-content: space-around
          margin-top: 1.5em
          margin-bottom: 1.5em
          padding: 0 2em
          .logo
            @include hand_cursor
            &.upm_logo
              width: 3em
            &.orange_logo
              width: 2.5em
            &.incibe_logo
              width: 7em
            &.crif_logo
              width: 4.5em
            @include transition (all 300ms cubic-bezier(0.4, 0, 0.2, 1))

        .modal-actions
          @include flex
          justify-content: space-between
          .btn
            @include hand_cursor
            font-weight: bold
            @include transition (all 300ms cubic-bezier(0.4, 0, 0.2, 1))
            &.btn-green
              color: $green
            &.btn-red
              color: $red
            &:hover
              @include hover_opacity


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

  .modal_position
    width: 70%
      


@media (max-width: $media2)

  .modal_position
    .modal
      .modal-box
        .modal-content
          .modal-title
            &.modal-title-end
              font-size: 1.7em


@media (max-width: $media4)

  .modal_position
    width: 80%
    .modal
      font-size: 1.3em
      max-height: 80vh
      .modal-box
        .modal-content
          .logos
            padding: 0
          .modal-title
            &.modal-title-end
              font-size: 1.7em


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

  .modal_position
    width: 70%
    .modal
      font-size: 1.3em
      max-height: 80vh
      .modal-box
        .modal-content
          .modal-title
            &.modal-title-end
              font-size: 1.7em


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

  .modal_position
    width: 65vw
    .modal
      font-size: .8em
      max-height: 70vh
      .modal-box
        .modal-content
          .modal-title
            &.modal-title-end
              font-size: 2em


@media (max-width: $media8)

  .modal_position
    .modal
      font-size: 1.3em
      .modal-box
        .modal-content
          .modal-title
            &.modal-title-end
              font-size: 1.5em


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

  .modal_position
    width: 70vw
    .modal
      font-size: .8em
      max-height: 70vh


@media (max-width: $media11)

  .modal_position
    .modal
      font-size: 1em
      .modal-box
        .modal-content
          .modal-title
            &.modal-title-end
              font-size: 1.5em


@media (max-width: $media12)

  .modal_position
    width: 85vw
    .modal
      font-size: .8em
      max-height: 60vh



@media (max-width: $media15)

  .modal_position
    .modal
      .modal-box
        .modal-content
          .logos
            .logo
              &.upm_logo
                width: 2.5em
              &.orange_logo
                width: 2em
              &.incibe_logo
                width: 6.5em
              &.crif_logo
                width: 4em



