body *,
body *::after,
body *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body,
html {
  margin: 0; }

body,
input[type="text"],
input[type="password"],
input[type="email"] {
  font-size: 15px; }

html, body, input, textarea, select, option {
  font-family: "Source Sans Pro", sans-serif; }

body {
  min-width: 320px; }

img {
  display: block;
  max-width: 100%; }

a {
  text-decoration: none; }

h1, h2, h3, h4, h5 {
  margin: 0; }

.mm {
  margin: 0 auto; }

.colarea {
  font-size: 0; }

.col1, .col2, .col3, .col45, .col23, .col25, .col34, .col4, .col5, .col6, .col7, .col8 {
  display: inline-block;
  vertical-align: top;
  font-size: 20px;
  padding: 0; }

.col1 {
  width: 100%; }

.col45 {
  width: 80%; }

.col34 {
  width: 75%; }

.col23 {
  width: 66.66%; }

.col25 {
  width: 40%; }

.col2 {
  width: 50%; }

.col3 {
  width: 33.33%; }

.col4 {
  width: 25%; }

.col5 {
  width: 20%; }

.col6 {
  width: 16.66%; }

.col7 {
  width: 14.28%; }

.col8 {
  width: 12.5%; }

.cb {
  clear: both; }

.upper {
  text-transform: uppercase; }

.low {
  text-transform: lowercase; }

.n-margin {
  margin: 0; }

.t-left {
  text-align: left; }

.t-right {
  text-align: right; }

.t-center {
  text-align: center; }

.clearfix::after {
  display: block;
  clear: both;
  content: ""; }

.show-tb {
  display: none; }
.btn-control-error p{
  background-color: red;
  color: white;
  padding: 10px;
  border-radius: 4px;
}
@media all and (max-width: 768px) {
  .hide-tb {
    display: none; }

  .show-tb {
    display: block; } }
@media all and (max-width: 560px) {
  .hide-mb {
    display: none; } }
.btn-control {
  padding-top: 10px; }


.btn{
  margin: 10px;
}
input[type="text"] {
  border-radius: 0;
  border-style: solid;
  border-color: rgba(67, 162, 243, 0.68);
  border-width: 0 0 2px 0;
  background-color: transparent;
  outline: none; }
  input[type="text"]:focus {
    border-color: #43A2F3; }

body {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 15px; }
  body * {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    body *::after, body *::before {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }

.f-row {
  margin: 10px 0 5px 0; }
  .f-row label {
    display: inline-block;
    vertical-align: middle;
    margin: 20px 0 10px 0;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.04em;
    font-weight: 600; }

html, body, h1, h2, h3, h4, h5 {
  margin: 0; }

h2 {
  line-height: 1.2;
  margin-bottom: 25px; }

.h1 {
  font-weight: 900;
  font-size: 3.5em; }

.h2 {
  font-weight: 900;
  font-size: 2.1em; }

.content {
  margin: 0;
  padding: 0;
  /* padding: 15px 0 15px 0;  */
}

.header .logo {
  float: left;
  padding-right: 10px; }
.header p {
  margin: 0;
  padding: 1.4em;
  line-height: 1; }

.footer {
  padding: 20px 0;
  text-align: center; }

.wrapper {
  max-width: 1280px;
  padding: 0 4.375vw;
  margin: 0 auto; }

.colarea {
  font-size: 0; }

.generator {
  margin: 25px 0; }
  .generator .col2 {
    padding: 15px 20px; }

.f-row .colarea {
  margin: 0 -10px; }
.f-row .col2 {
  padding: 0 10px; }

.generator .col2.col-pdg + .col2 {
  border-left: 1px solid; }

.fstElement {
  width: 100%;
  font-size: 1em; }

.fstMultipleMode .fstControls {
  width: auto; }
.fstMultipleMode .fstQueryInput {
  font-size: 1em;
  color: #000; }

.fstResultItem, .fstChoiceItem {
  font-size: 1em; }

.rng-inp {
  position: relative;
  padding: 0 0 25px 0; }
  .rng-inp .rangeslider--horizontal {
    z-index: 1; }

.rng-lt {
  position: absolute;
  bottom: 0;
  font-size: 0.8em; }
  .rng-lt.min {
    left: 7px; }
  .rng-lt.max {
    right: 7px; }

.rangeslider--horizontal {
  height: 10px; }

.rangeslider__fill {
  background-color: #43A2F3; }

.rangeslider--horizontal .rangeslider__handle {
  top: -5px; }
.rangeslider--horizontal .rangeslider__caption {
  position: absolute;
  top: 23px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #43A2F3;
  font-size: 0.8em;
  line-height: 1;
  color: #FFF;
  padding: 2px 4px 3px 4px;
  border-radius: 2px; }

.rangeslider__handle {
  width: 20px;
  height: 20px;
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); }
  .rangeslider__handle:after {
    width: 8px;
    height: 8px; }

.content .b-test {
  position: relative;
  display: none;
}
.content .b-test .panel-control{
  position: absolute;
  left: 20px;
  bottom: 20px;
}
.content .b-test .b-frame {
    display: none;
    width: 100vw;
    height: 100vh;
    padding: 4.375vw;
    overflow: hidden;
    text-align: center;
  position: relative;
  }
  .b-frame-center-content{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80%;
    transform: translate(-50%, -50%);
  }
    .content .b-test .b-frame.b-timer {
      font-weight: 700; }
      .content .b-test .b-frame.b-timer, .content .b-test .b-frame.b-timer * {
        font-size: 20vh; line-height: 1 }
    .content .b-test .b-frame.b-quest {
      font-weight: 700; }
      .content .b-test .b-frame.b-quest .big-num {
        font-size: 70vh; line-height: 1  }
    .content .b-test .b-frame.b-answer input[type="text"] {
      font-size: 5em;
      text-align: center;


    }

@keyframes changenumber{
  0% {transform: scale(0,1) translateX(0);}
  50%{ transform: scale(1,1) translateX(0); }
  100%{transform: scale(1, 1) translateX(100%);}
}


.content .b-test .b-quest.next-number::before{
  content:'';
  top: 0;
  bottom: 0;
  left:0;
  width: 100%;
  position: absolute;
  /*background-color: #FFF;*/
  z-index: 1;
}
.content .b-test .b-quest.next-number::after{
  content:'';
  top: 0;
  bottom: 0;
  left:0;
  width: 100%;
  position: absolute;
  /*animation: changenumber .7s ease ;*/
  transform-origin: 0 50%;
  /*background-color: #0189FF;*/
  /*background-image: linear-gradient(-90deg, #0189FF 0%, #2D3ED5 100%);*/
  z-index: 2;


  /*transform: scale(1,0);*/
  /*transition: 1s linear;*/
}

@keyframes changenumberblur {
  0%{
    filter: blur(0);
    opacity: 1;
    transform:  translateY(0);
  }
  50%{
    filter: blur(10px);
    opacity: 0;
    transform:  translateY(.05%);
  }
  100%{
    filter: blur(0);
    opacity: 1;
    transform:  translateY(0);
  }
}

.content .b-test .b-quest #quest-num{


}

.content .b-test .b-quest.next-number #quest-num{


  animation: changenumberblur .5s linear;

}
.content .b-test .b-frame.b-answer input[type="text"]:focus{
  background-color: rgba(0,0,0,0.05);

}
    .content .b-test .b-frame.b-answer-valid {
      font-weight: 700; }
.content .b-test .b-frame.b-answer-valid.f-frame-error{background-color: #f00;color:#FFF;}
.content .b-test .b-frame.b-answer-valid.f-frame-success{background-color: #0b2;color:#FFF;}
      .content .b-test .b-frame.b-answer-valid .result-answer {
        font-size: 10vh; }

        .content .b-test .b-frame .result-answer-image{
          width: 40%;
          max-width: 400px;
          position: relative;
          background-repeat: no-repeat;
          background-size: contain;
          margin: 0 auto;
          background-position: center;
        }
        .content .b-test .b-frame .result-answer-image::before{

          content: '';
          display: block;
          padding: 0 0 75% 0;
          height: 0;

        }

        .content .b-test .b-frame .result-answer-image.error{ background-image: url(/local/templates/.default/img/owl-error.png);}
        .content .b-test .b-frame .result-answer-image.correct{ background-image: url(/local/templates/.default/img/owl-correct.png);}

        .content .b-test .b-frame.b-answer-valid .result-answer.error {
           }
      .content .b-test .b-frame.b-answer-valid .result-answer-value {
        font-size: 8vh; }
    .content .b-test .b-frame.b-result {
      font-size: 1.5em;
      font-weight: 700; }
      .content .b-test .b-frame.b-result .b-result-test {
        margin: 35px 0 50px 0; }
      .content .b-test .b-frame.b-result .b-count_samples,
      .content .b-test .b-frame.b-result .b-count_corrects,
      .content .b-test .b-frame.b-result .b-count_error {
        font-size: 1.5em; }
        .content .b-test .b-frame.b-result .b-count_samples span,
        .content .b-test .b-frame.b-result .b-count_corrects span,
        .content .b-test .b-frame.b-result .b-count_error span {
          font-size: 1em; }
      .content .b-test .b-frame.b-result .b-count_corrects {
         }
      .content .b-test .b-frame.b-result .b-count_error {
        }
      .content .b-test .b-frame.b-result .result-percent {
        margin: 25px 0 0 0;
        font-size: 2em; }
    .content .b-test .b-frame.active {
      display: block; }
.content.test .b-test {
  display: block; }
.content.test .config {
  display: none; }
@media screen and (max-width: 1024px){
  .generator > .col2{
    width: 100%;
  }
  .content .b-test .b-frame .result-answer-image{
    width: 100%;
  }
}
@media screen and (max-width: 568px){
  .col2{
    width: 100%;
  }
  .content .b-test .b-frame.b-answer-valid .result-answer,
  .h1{
    font-size: 1.75em;
    margin: 0.75em 0 0.25em 0;
    white-space: nowrap;
  }
  .h1.logo{
    margin-top: 15px;
  }
  .content .b-test .b-frame.b-timer .count-second,
  .content .b-test .b-frame.b-quest .big-num{
    font-size: 150px;
  }
  .content .b-test .b-frame.b-timer .count-second{
    display: block;
  }
  .h2{
    font-size: 1.5em;
    margin: 0.75em 0 0.25em 0;
  }
  .generator{
    margin: 0;
  }
  .btn{
    font-size: 16px;
  }
  .f-row label{
    font-size: 0.7em;
    letter-spacing: 0;
    margin: 10px 0 ;
  }
  .content .b-test .b-frame.b-timer,
  .content .b-test .b-frame.b-timer * {
    font-size: 36px;
  }
}


.f-row .select2-container--default .select2-selection--multiple .select2-selection__choice{
  background-color: #43A2F3;
  border: none;
  color: #FFF;
}
.f-row .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
  color: #FFF;
}
.f-row .select-all-panel{
  text-align: right;
}
.f-row .select-all-panel span{
  color: #43A2F3;
  border-bottom: 1px dashed;
}
.f-row  .select2-container {
  width: 100% !important;
}
/*# sourceMappingURL=app.css.map */