body {
    -webkit-tap-highlight-color: transparent;
    font-family: sans-serif;
  
    position: relative !important;
    width: 100%;
  }
  
  .before-start .test {
      position: absolute;
      z-index: -1;
  }
  
  .before-start .adviser,
  .before-start #apply,
  .before-start #skip,
  .before-start #skipping,
  .before-start .play-task-description-btn,
  .before-start .test-progress {
    display: none;
  }
  
  
  button[disabled]{
      opacity: .4;
      cursor: not-allowed !important;
  }
  
  [data-test="selectable"] .row li.disabled{
      opacity: 0.4;
      cursor: not-allowed;
  }
  [data-test="selectable"] .row li.disabled > * {
      pointer-events: none;
  }
  [data-test="selectable"] .row li.disabled > * {
      pointer-events: none;
  }
  [data-test="selectable"].not-allowed .row li label{
      pointer-events: none;
  }
  
  [data-test="selectable"].not-allowed .row li label.correct{
      border: 2px solid green;
  }
  
  ul{
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  #start{
      width: 100%;
    margin-top: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  #apply{
      text-align: center;
  }
  
  .test-overview {
    width: 100%;
    font-size: 0;
  
    position: relative;
    z-index: 100;
  
    overflow: visible;
  
    box-shadow: 4.5px 4.5px 5.5px rgba(0, 0, 0, 33%);
  }
  
  .test-overview picture {
    position: relative;
  
    display: block;
  
    width: 100%;
    height: auto;
  }
  
  .test-overview__img {
    width: 100%;
    height: auto;
  }
  
  .test-action{
      width: 100%;
      display: flex;
      justify-content: center;
      position: relative;
  }
  
  [data-test="selectable"] {
      /* width: 100%; */
      display: flex;
      position: relative;
      overflow: hidden;
  }
  
  .controls{
      position: absolute;
      width: 100%;
      top: 0;
      height: 100%;
      font-size: 32px;
      color: #4e4e4e;
      display: none;
  }
  .controls .prev{
      cursor: pointer;
      display: inline-block;
      position: absolute;
      left: -21px;
      top: 50%;
      transform: translate(0, -70%);
  }
  .controls .next{
      cursor: pointer;
      display: inline-block;
      position: absolute;
      right: -21px;
      top: 50%;
      transform: translate(0, -70%);
  }
  
  .selectable-list {
      position: relative;
  }
  
  .selectable-row {
      position: relative;
      display: block;
      margin: 0;
  }
  
  #configTypeBtn,
  #configModeBtn,
  .edit-test-button {
    margin: 10px;
    padding: 5px;
    z-index: 101;
  }
  
  #configTypeBtn{
      position: fixed;
      bottom: 0;
      left: 0;
  }
  
  #configModeBtn{
      position: fixed;
      bottom: 0;
      right: 0;
  }
  
  .edit-test-button {
    font-family: inherit;
    font-size: 16px;
    line-height: 1.15;
  
    position: absolute;
    top: 0;
    right: 0;
  
    overflow: visible;
  
  
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    text-transform: none;
  
    color: #000;;
    border: 1px solid #767676;
    outline: none;
    background-color: #efefef;
  
    appearance: button;
  }
  
  /*second task*/
  [data-test="slider"] .row li {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      max-width: 300px;
      margin: 0 auto 30px;
  }
  [data-test="slider"] .row li > span{
      display: inline-block;
      vertical-align: middle;
  }
  
  [data-test="slider"] .row li .text{
      min-width: 250px;
      text-align: right;
  }
  [data-test="slider"] .row li .value{
      width: 34px;
      height: 25px;
      font-size: 16px;
      border-radius: 6px;
      text-align: center;
      border: 2px solid #ccc;
      line-height: 25px;
  }
  
  [data-test="slider"] .row li .value.success{
      border: 2px solid green;
  }
  [data-test="slider"] .row li .value.error{
      border: 2px solid red;
  }
  [data-test="slider"] .row li > div {
      margin-top: 13px;
      flex-basis: 100%;
  }
  
  /*drag and drop*/
  [data-test="sortableCol"]{
      display: flex;
      justify-content: center;
      position: relative;
      flex-wrap: wrap;
  }
  [data-test="sortableCol"] .row:first-of-type {
      margin-right: 70px;
  }
  
  [data-test="sortableCol"] li{
      position: relative;
      width: 266px !important;
  }
  [data-test="sortableRow"].base {
      overflow: hidden;
      margin-bottom: 20px;
      padding-bottom: 3px;
      margin-right: 0;
  }
  [data-test="sortableRow"] .row {
      position: relative;
      text-align: center;
  }
  [data-test="sortableRow"] .slide-item {
      /*width: 550px;*/
      opacity: 0;
  }
  [data-test="sortableRow"] .slide-item.active {
      opacity: 1;
  }
  [data-test="sortableRow"] li, [data-test="sortableRow"] ~ div ul{
      font-size: 20px;
  }
  [data-test="sortableRow"] li label{
      position: relative;
  }
  [data-test="sortableRow"] > .row > li label span{
      position: relative;
      padding-left: 55px;
      margin-left: 3px;
  }
  [data-test="sortableRow"] > .row > li label span:after{
      content: '.........';
      position: absolute;
      top: 0;
      left: 0;
  }
  
  [data-test="sortableRow"] > .row > li label + .row > li label:after{
      display: none;
  }
  
  [data-test="sortableRow"] .slide-item .row-sortable + span{
      margin-left: 7px;
  }
  
  [data-test="sortableCol"] .row:first-of-type li:after {
      content: '';
      position: absolute;
      left: 100%;
      top: 50%;
      transform: translate(0, -50%);
      width: 71px;
      height: 1px;
      background-color: #ccc;
  }
  [data-test="sortableCol"] .row:first-of-type li:before {
      content: '>';
      position: absolute;
      transform: translate(0, -50%);
      top: 50%;
      color: #ccc;
      font-size: 27px;
      right: -71px;
  }
  
  [data-test="sortableRow"] .row-sortable li{
      display: inline-block;
      vertical-align: middle;
      touch-action: none;
  }
  
  [data-test="sortableCol"] .row li label{
      font-size: 17px;
      border: 2px solid #ccc;
      padding: 10px 15px;
      text-align: center;
      border-radius: 8px;
      display: block;
      position: relative;
  }
  [data-test="sortableCol"] .row:last-of-type li label{
      padding: 10px 15px 10px 26px;
      cursor: move;
      height: 62px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  [data-test="sortableCol"] .row:last-of-type li label:before{
      position: absolute;
      left: 10px;
      top: 50%;
      content: '';
      width: 15px;
      height: 23px;
      z-index: 10;
      background: url("../images/sort-up-or-down-double-arrow-symbol.svg") center;
      background-size: cover;
      transform: translate(0, -50%);
  }
  [data-test="sortableCol"] .row li{
      width: 160px;
      border-radius: 8px;
      margin-bottom: 25px;
  }
  
  [data-test="sortableCol"] .row:last-of-type li label.success{
      border: 2px solid green;
  }
  [data-test="sortableCol"] .row:last-of-type li label.error{
      border: 2px solid red;
  }
  [data-test="sortableRow"] ~ div .row.success{
      border: 2px solid green;
  }
  /*drop*/
  
  .unselectable {
      -moz-user-select: -moz-none;
      -moz-user-select: none;
      -o-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none
  }
  
  .draggable_clone {
      position: absolute;
      z-index: 100001;
      pointer-events:none;
  }
  
  .draggable.dragging, .draggable .dragging {
      opacity: 0.5;
  }
  
  .sortable .sortable_clone {
      position: absolute;
      z-index: 100001;
      list-style-type: none;
      top: -40% !important;
  }
  
  .indicator-number{
      position: absolute;
      margin-top: 3px;
      left: -22px;
  }
  
  .ui-loader-default {
      display: none;
  }
  
  [data-test="mixed"] {
      position: relative;
      overflow: hidden;
  }
  
  [data-test="input"] {
      display: flex;
      position: relative;
      overflow: hidden;
  }
  
  [data-id] {
      position: relative;
      overflow: hidden;
  }
  
  .sortable .sortable_placeholder {
    box-sizing: border-box !important;
  }
  
  @media(max-width: 1380px) {
      [data-test="selectable"].not-allowed .row li label.correct{
          border-width: 0.1449vw;
      }
  
      #start {
          margin-top: 2.8986vw;
      }
  
      .test-overview {
          box-shadow: 0.3261vw 0.3261vw 0.3986vw rgba(0, 0, 0, 33%);
      }
  
      .controls{
          font-size: 2.3188vw;
      }
  
      .controls .prev{
          left: -1.5217vw;
      }
  
      .controls .next{
          right: -1.5217vw;
      }
  
      #configTypeBtn,
      #configModeBtn,
      .edit-test-button {
          font-size: 1.1594vw;
          margin: 0.7246vw;
          padding: 0.3623vw;
      }
  
      .edit-test-button {
          border-width: 0.0725vw;
      }
  
      [data-test="slider"] .row li {
          max-width: 21.7391vw;
          margin: 0 auto 2.1739vw;
      }
  
      [data-test="slider"] .row li .text{
          min-width: 18.1159vw;
      }
  
      [data-test="slider"] .row li .value{
          width: 2.4638vw;
          height: 1.8116vw;
          font-size: 1.1594vw;
          border-radius: 0.4348vw;
          border-width: 0.1449vw;
          line-height: 1.8116vw;
      }
  
      [data-test="slider"] .row li .value.success,
      [data-test="slider"] .row li .value.error {
          border-width: 0.1449vw;
      }
  
      [data-test="slider"] .row li > div {
          margin-top: 0.942vw;
      }
  
      [data-test="sortableCol"] .row:first-of-type {
          margin-right: 5.0725vw;
      }
  
      [data-test="sortableCol"] li {
          width: 19.2754vw !important;
      }
  
      [data-test="sortableRow"].base {
          margin-bottom: 1.4493vw;
          padding-bottom: 0.2174vw;
      }
  
      [data-test="sortableRow"] li,
      [data-test="sortableRow"] ~ div ul {
          font-size: 1.4493vw;
      }
  
      [data-test="sortableRow"] > .row > li label span {
          padding-left: 3.9855vw;
          margin-left: 0.2174vw;
      }
  
      [data-test="sortableRow"] .slide-item .row-sortable + span {
          margin-left: 0.5072vw;
      }
  
      [data-test="sortableCol"] .row:first-of-type li:after {
          width: 5.1449vw;
          height: 0.0725vw;
      }
  
      [data-test="sortableCol"] .row:first-of-type li:before {
          font-size: 1.9565vw;
          right: -5.1449vw;
      }
  
      [data-test="sortableCol"] .row li label {
          font-size: 1.2319vw;
          border-width: 0.1449vw;
          padding: 0.7246vw 1.087vw;
          border-radius: 0.5797vw;
      }
      
      [data-test="sortableCol"] .row:last-of-type li label {
          padding: 0.7246vw 1.087vw 0.7246vw 1.8841vw;
          height: 4.4928vw;
      }
  
      [data-test="sortableCol"] .row:last-of-type li label:before {
          left: 0.7246vw;
          width: 1.087vw;
          height: 1.6667vw;
      }
  
      [data-test="sortableCol"] .row li{
          width: 11.5942vw;
          border-radius: 0.5797vw;
          margin-bottom: 1.8116vw;
      }
  
      [data-test="sortableCol"] .row:last-of-type li label.success,
      [data-test="sortableCol"] .row:last-of-type li label.error,
      [data-test="sortableRow"] ~ div .row.success {
          border-width: 2px;
      }
  
      .indicator-number {
          margin-top: 0.2174vw;
          left: -1.5942vw;
      }
  }
  
  @media(max-width: 767px) {
      #configTypeBtn,
      #configModeBtn,
      .edit-test-button {
          margin: 2.5vw;
          padding: 1.25vw;
          font-size: 4vw;
      }
  
      .edit-test-button {
          border-width: 0.25vw;
          font-size: 4vw;
      }
  
      #configTypeBtn {
          bottom: 11vw;
      }
  
      #configModeBtn{
          left: 0;
      }
  
      .test-overview {
          box-shadow: 0 0.5vw 1.25vw rgba(0, 0, 0, 33%);
      }
  
      [data-test="sortableCol"] .row:first-child li {
          width: 50vw !important;
      }
      [data-test="sortableCol"] .row:last-child li label{
          height: 22.5vw;
      }
  
      [data-test="sortableCol"] .row li{
          width: 36.6667vw;
      }
      .base li:before {
          right: -8.6111vw;
      }
      .base li:after {
          width: 8.6111vw;
      }
  
      .controls .prev {
          top: 50%;
          transform: translate(-50%, -50%);
      }
  
      .controls .next {
          top: 50%;
          transform: translate(50%, -50%);
      }
  
      [data-test="sortableRow"] .slide-item{
          width: 133.3333vw;
      }
  }
  
  @media(max-width: 480px) {
      [data-test="sortableCol"] .row:first-child {
          margin-right: 30px;
      }
  
      [data-test="sortableRow"] .slide-item{
          width: 320px;
          min-width: auto;
      }
      [data-test="sortableRow"].base{
          display: flex;
          margin-bottom: 25px;
      }
      /* [data-test="sortableRow"] .indicator-number {
           margin-top: 40px;
      } */
      .super-mode [data-test="sortableRow"] ~ div ul {
          height: 50px;
          display: flex;
          width: 100%;
          min-width: 140px;
      }
  }