.cls_custom_radiobuttons {
  position: relative;
  left: 10px;
  top: 5px;
}

.cls_custom_eur_icons {
  position: relative;
   top: 10px;
}


.component_container {
    width: 60px;
    height: 75px;
    margin-right: 15px;
    margin-bottom: 6px;
    display: inline-block;
}

.component_actions {
    text-align: center;
}

/*.mobile-frame {
  width: 570px;
  height: 980px;
  margin: 10px auto 0;
  padding: 0;

  background: url('../images/preview/nxvrea.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 20% center;
}

.wrap {
  width: 360px;
  height: 600px;
  margin: 0 auto 0;
  background: #fff;
  position: relative;
  top: 121px;
  right:26px;

  overflow-y: auto;
  box-sizing: border-box;
}

#id_mobile_preview_root {
  background: url('../images/preview/background_texture.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  overflow: hidden;
}

#id_mobile_close {
  width: 80px;
  height: 80px;
  display: block;
  position: relative;
  top: 142px;
  left: 200px;

}

.preview_frame {
  width: 360px;
  height: 600px;
}

.preview_header {
  height: 100px;
  width: 100%;
  font-family: 'Neucha';
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  line-height: 3;
}

.preview_simple_statement {
  height: 200px;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  font-family: 'Neucha';
  font-weight: bold;
  font-size: 35px;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
}

.preview_simple_answers {
  height: 300px;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

.preview_composed_statement {
  height: 270px;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  font-family: 'Neucha';
  font-weight: bold;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
}

.preview_composed_answers {
  height: 200px;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

.preview_incorrect_answer_banner {
  height: 50px;
  width: 100%;
  background: url('../images/preview/resp_incorrecta.png');
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  font-family: 'Neucha';
  font-size: 25px;
  padding-left: 20px;
  margin-bottom: 10px;
  line-height: 2.1;
}

.preview_correct_answer_banner {
  height: 50px;
  width: 100%;
  background: url('../images/preview/resp_correcta.png');
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  font-family: 'Neucha';
  font-size: 25px;
  padding-left: 20px;
  margin-bottom: 10px;
  line-height: 2.1;
}*/

.mobile-frame {
  width: 400px;
  height: 800px;
  padding-top: 50px;
  padding-left: 10px;
  padding-right: 10px;
  background: url('../images/preview/mobile_frame.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 20% center;
}

.wrap {
  width: 380px;
  height: 680px;
  box-sizing: border-box;
}

#id_mobile_preview_root {
  background: url('../images/preview/background.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  overflow: hidden;
}

#id_mobile_close {
  width: 130px;
  height: 45px;
  display: block;
  position: relative;
  top: 13px;
  left: 120px;

}

.preview_frame {
  width: 360px;
  height: 600px;
}

.preview_header {
  height: 100px;
  width: 100%;
  font-family: 'Neucha';
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  line-height: 3;
}

.preview_simple_statement {
  height: 260px;
  width: 100%;
  word-break: break-word;
  padding-left: 20px;
  padding-right: 20px;
  font-family: 'Neucha';
  font-weight: bold;
  font-size: 35px;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
}

.preview_simple_answers {
  height: 250px;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

.preview_simple_img {
  width: 340px;
  height: 255px;
}

.preview_composed_img {
  width: 340px;
  height: 255px;
}

.preview_composed_statement {
  height: 285px;
  width: 100%;
  word-break: break-word;
  padding-left: 20px;
  padding-right: 20px;
  font-family: 'Neucha';
  font-weight: bold;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
}

.preview_composed_answers {
  height: 220px;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

.preview_navigator_zone {
  height: 80px;
  width: 100%;
  text-align: center;
  padding-top: 30px;
}

.preview_incorrect_answer_banner {
  height: 50px;
  width: 100%;
  background: url('../images/preview/resp_incorrecta.png');
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  font-family: 'Neucha';
  font-size: 25px;
  padding-left: 20px;
  margin-bottom: 10px;
  line-height: 2.1;
}

.preview_correct_answer_banner {
  height: 50px;
  width: 100%;
  background: url('../images/preview/resp_correcta.png');
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  font-family: 'Neucha';
  font-size: 25px;
  padding-left: 20px;
  margin-bottom: 10px;
  line-height: 2.1;
}

* {
  box-sizing: border-box;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 25px;
  background: #D3D3D3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #FF0000;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #FF0000;
  cursor: pointer;
}

.sliderticks {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

.sliderticks p {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  width: 1px;
  background: #D3D3D3;
  height: 10px;
  line-height: 40px;
  margin: 0 0 20px 0;
}

    /*@media all and (max-width: 570px) {

      @media all and (max-height: 980px) {

        .mobile-frame {
          width: 400px;
          height: 800px;
          padding-left: 2%;
          padding-right: 2%;
          padding-left: 10%;
          padding-right: 6%;
          background: url('../images/preview/mobile_frame.png');
          background-size: contain;
          background-repeat: no-repeat;
          background-position: 20% center;
        }

        .wrap {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
        }

        #id_mobile_preview_root {
          background: url('../images/preview/background.png');
          background-size: cover;
          background-repeat: no-repeat;
          background-position: bottom;
          overflow: hidden;
        }

        #id_mobile_close {
          width: 80px;
          height: 80px;
          display: block;
          position: relative;
          top: 142px;
          left: 200px;

        }

        .preview_frame {
          width: 360px;
          height: 600px;
        }

        .preview_header {
          height: 100px;
          width: 100%;
          font-family: 'Neucha';
          font-size: 40px;
          font-weight: bold;
          text-align: center;
          line-height: 3;
        }

        .preview_simple_statement {
          height: 200px;
          width: 100%;
          padding-left: 20px;
          padding-right: 20px;
          font-family: 'Neucha';
          font-weight: bold;
          font-size: 35px;
          line-height: 1.2;
          text-align: center;
          overflow: hidden;
        }

        .preview_simple_answers {
          height: 300px;
          width: 100%;
          padding-left: 20px;
          padding-right: 20px;
        }

        .preview_composed_statement {
          height: 270px;
          width: 100%;
          padding-left: 20px;
          padding-right: 20px;
          font-family: 'Neucha';
          font-weight: bold;
          font-size: 20px;
          line-height: 1.2;
          text-align: center;
          overflow: hidden;
        }

        .preview_composed_answers {
          height: 200px;
          width: 100%;
          padding-left: 20px;
          padding-right: 20px;
        }

        .preview_incorrect_answer_banner {
          height: 50px;
          width: 100%;
          background: url('../images/preview/resp_incorrecta.png');
          background-size: cover;
          background-repeat: no-repeat;
          color: #fff;
          font-family: 'Neucha';
          font-size: 25px;
          padding-left: 20px;
          margin-bottom: 10px;
          line-height: 2.1;
        }

        .preview_correct_answer_banner {
          height: 50px;
          width: 100%;
          background: url('../images/preview/resp_correcta.png');
          background-size: cover;
          background-repeat: no-repeat;
          color: #fff;
          font-family: 'Neucha';
          font-size: 25px;
          padding-left: 20px;
          margin-bottom: 10px;
          line-height: 2.1;
        }

      }
    }*/

    #modal_question_image .modal-dialog {
      max-width: 80vw;
    }

    #modal_question_image .modal-body img {
      max-width: 100%;
      max-height: 40vh;
      object-fit: contain;
    }


      @media all and (max-height: 980px) {

        @media all and (max-width: 420px) {

          .mobile-frame {
            width: 500px;
            height: 400px;
            padding-top: 36px;
            padding-bottom: 25px;
            padding-left: 65px;
            padding-right: 5px;
            background: url('../images/preview/mobile_frame.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 20% center;
          }

          .wrap {
            width: 190px;
            height: 330px;
            box-sizing: border-box;
          }

          #id_mobile_preview_root {
            background: url('../images/preview/background.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: bottom;
            overflow: hidden;
          }

          #id_mobile_close {
            width: 70px;
            height: 17px;
            display: block;
            position: relative;
            top: 7px;
            left: 60px;

          }

          .preview_frame {
            width: 360px;
            height: 600px;
          }

          .preview_header {
            height: 50px;
            width: 100%;
            font-family: 'Neucha';
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            line-height: 3;
          }

          .preview_simple_statement {
            height: 132px;
            width: 100%;
            padding-left: 10px;
            padding-right: 10px;
            font-family: 'Neucha';
            font-weight: bold;
            font-size: 17px;
            line-height: 1.2;
            text-align: center;
            overflow: hidden;
            word-break: break-word;
          }

          .preview_simple_answers {
            height: 93px;
            width: 100%;
            padding-left: 10px;
            padding-right: 10px;
          }

          .preview_composed_statement {
            height: 145px;
            width: 100%;
            padding-left: 10px;
            padding-right: 10px;
            font-family: 'Neucha';
            font-weight: bold;
            font-size: 10px;
            line-height: 1.2;
            text-align: center;
            overflow: hidden;
            word-break: break-word;
          }

          .preview_composed_answers {
            height: 80px;
            width: 100%;
            padding-left: 10px;
            padding-right: 10px;
          }


          .preview_simple_img {
            width: 170px;
            height: 127.5px;
          }

          .preview_composed_img {
            width: 170px;
            height: 127.5px;
          }
          .preview_navigator_zone {
            height: 30px;
            width: 100%;
            padding-top: 30px;
            text-align: center;
          }

          .preview_incorrect_answer_banner {
            height: 26px;
            width: 100%;
            background: url('../images/preview/resp_incorrecta.png');
            background-size: cover;
            background-repeat: no-repeat;
            color: #fff;
            font-family: 'Neucha';
            font-size: 13px;
            padding-left: 10px;
            margin-bottom: 5px;
            line-height: 2.1;
          }

          .preview_correct_answer_banner {
            height: 26px;
            width: 100%;
            background: url('../images/preview/resp_correcta.png');
            background-size: cover;
            background-repeat: no-repeat;
            color: #fff;
            font-family: 'Neucha';
            font-size: 13px;
            padding-left: 10px;
            margin-bottom: 5px;
            line-height: 2.1;
          }

          .preview_navigator_cicle {
            width: 15px;
            height: 15px;
          }


        }

        @media all and (max-width: 260px) {

          .mobile-frame {
            width: 200px;
            height: 400px;
            padding-top: 15%;
            padding-bottom: 15%;
            padding-left: 2%;
            padding-right: 2%;
            background: url('../images/preview/mobile_frame.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 20% center;
          }

          .wrap {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
          }

          #id_mobile_preview_root {
            background: url('../images/preview/background.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: bottom;
            overflow: hidden;
          }

          #id_mobile_close {
            width: 70px;
            height: 17px;
            display: block;
            position: relative;
            top: 10px;
            left: 60px;

          }

          .preview_frame {
            width: 360px;
            height: 600px;
          }

          .preview_header {
            height: 50px;
            width: 100%;
            font-family: 'Neucha';
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            line-height: 3;
          }

          .preview_simple_statement {
            height: 132px;
            width: 100%;
            padding-left: 10px;
            padding-right: 10px;
            font-family: 'Neucha';
            font-weight: bold;
            font-size: 17px;
            line-height: 1.2;
            text-align: center;
            overflow: hidden;
            word-break: break-word;
          }

          .preview_simple_img {
            width: 170px;
            height: 127.5px;
          }

          .preview_composed_img {
            width: 170px;
            height: 127.5px;
          }

          .preview_simple_answers {
            height: 112px;
            width: 100%;
            padding-left: 10px;
            padding-right: 10px;
          }

          .preview_composed_statement {
            height: 140px;
            width: 100%;
            padding-left: 10px;
            padding-right: 10px;
            font-family: 'Neucha';
            font-weight: bold;
            font-size: 10px;
            line-height: 1.2;
            text-align: center;
            overflow: hidden;
            word-break: break-word;
          }

          .preview_composed_answers {
            height: 100px;
            width: 100%;
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 10px;
          }

          .preview_navigator_zone {
            height: 40px;
            width: 100%;
            padding-top: 10px;
            text-align: center;
          }

          .preview_incorrect_answer_banner {
            height: 26px;
            width: 100%;
            background: url('../images/preview/resp_incorrecta.png');
            background-size: cover;
            background-repeat: no-repeat;
            color: #fff;
            font-family: 'Neucha';
            font-size: 13px;
            padding-left: 10px;
            margin-bottom: 5px;
            line-height: 2.1;
          }

          .preview_correct_answer_banner {
            height: 26px;
            width: 100%;
            background: url('../images/preview/resp_correcta.png');
            background-size: cover;
            background-repeat: no-repeat;
            color: #fff;
            font-family: 'Neucha';
            font-size: 13px;
            padding-left: 10px;
            margin-bottom: 5px;
            line-height: 2.1;
          }

          .preview_navigator_cicle {
            width: 15px;
            height: 15px;
          }


        }

      }

    }