@media (min-width: 1025px) {
    div.jnt.c3 div.answer div label,
    div.jnt.c4 div.answer div label,
    div.jnt.c5 div.answer div label,
    div.jnt.c6 div.answer div label,
    div.jnt.c7 div.answer div label {
        display: none;
    } 
}

@media (max-width: 1024px) {

    html, body, div#page {
        height: 100%;
        font-size: 100%;
    }

    div#page {
        display: flex;
        flex-direction: column;
    }

    div.desc {
        margin: 10px 0 10px;
        font-size: 0.9em;
    }

    div#content {
        flex: 1 0 auto;
    }

    div#footer {
        flex-shrink: 0;
    }

    p.error {
      margin: 10px 0;
    }

    div#nav {
        width: 100%;
    }

    div#content {
        margin: 0 15px;
        width: auto;
    }

    div.intro {
        clear: both;
        margin: 15px 0 15px;
        font-size: 100%;
        font-weight: bold;
    }

    div#content form div.login label,
    div#content form div.login input {
        width: 100%;
    }

    div#content form div.login input {
        margin-top: 5px;
        min-height: 30px;
    }

    div#progress_bar {
        width: 100%;
        position: relative;
        float: none;
        text-align: center;
    }

    div#progress_bar img {
        position: relative;
        width: 100%;
        min-height: 32px;
    }

    div#progress_bar span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
    }

    select#lang_switcher {
        width: 25%;
    }

    div.answer {
        width: 100%;
    }

    div.answer > div {
        display: flex;
        align-content: center;
    }

    div.answer input {
        display: inline-block;
        width: 15px;
        height: 15px;
        margin-right: 10px;
    }

    div.answer label {
        display: inline-block;
        width: calc(100% - 20px);
        margin: 0;
        float: none;
    }

    div.buttons {
        display: flex;
        justify-content: space-between;
    }

    div.buttons > input {
        width: 49%;
        height: 30px;
    }

    div#footer {
        width: auto;
    }

    div.jnt div.question {
      display: block;
    }

    div.jnt.c3 div.header,
    div.jnt.c4 div.header,
    div.jnt.c5 div.header,
    div.jnt.c6 div.header,
    div.jnt.c7 div.header {
        display: none;
    } 

    div.jnt.c3 div.question,
    div.jnt.c4 div.question,
    div.jnt.c5 div.question,
    div.jnt.c6 div.question,
    div.jnt.c7 div.question {
        width: 100%;
    }

    div.jnt.c3 div.question p.question,
    div.jnt.c4 div.question p.question,
    div.jnt.c5 div.question p.question,
    div.jnt.c6 div.question p.question,
    div.jnt.c7 div.question p.question {
        width: 100%;
        font-size: 0.9em;
        text-align: left;
        font-weight: bold;
    }

    div.jnt.c3 div.question p.question:has(+ button.remove-question),
    div.jnt.c4 div.question p.question:has(+ button.remove-question),
    div.jnt.c5 div.question p.question:has(+ button.remove-question),
    div.jnt.c6 div.question p.question:has(+ button.remove-question),
    div.jnt.c7 div.question p.question:has(+ button.remove-question) {
        flex-grow: 2;
    }

    div.jnt.c3 div.answer,
    div.jnt.c4 div.answer,
    div.jnt.c5 div.answer,
    div.jnt.c6 div.answer,
    div.jnt.c7 div.answer {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    div.jnt.c3 div.answer > div,
    div.jnt.c4 div.answer > div,
    div.jnt.c5 div.answer > div,
    div.jnt.c6 div.answer > div,
    div.jnt.c7 div.answer > div,
    div.answer > div {
        border: 1px solid #CCC;
        box-sizing: border-box;
        min-height: 32px;
        width: 100%;
        margin-bottom: 5px;
        position:relative;
    }
   
    /* div.jnt.c4 div.answer > div label, div.jnt.c4 div.answer > div input,
    div.jnt.c5 div.answer > div label, div.jnt.c5 div.answer > div input,
    div.jnt.c6 div.answer > div label, div.jnt.c6 div.answer > div input,
    div.jnt.c7 div.answer > div label, div.jnt.c7 div.answer > div input,
    div.answer > div label, div.answer > div input {
       display:block;
       position:absolute;
       top:0;
       left:0;
       right:0;
       bottom:0;
   } */
   

   div.answer > div {
     padding: 0;
   }

   div.jnt.c3 div.answer > div input[type="radio"],
   div.jnt.c4 div.answer > div input[type="radio"],
   div.jnt.c5 div.answer > div input[type="radio"],
   div.jnt.c6 div.answer > div input[type="radio"],
   div.jnt.c7 div.answer > div input[type="radio"],
   div.answer > div input[type="radio"],
   div.answer > div input[type="checkbox"] {
    position: absolute;
      opacity:0.01;
      z-index:100;
   }
   
   div.jnt.c3 div.answer > div input[type="radio"]:checked + label,
   div.jnt.c4 div.answer > div input[type="radio"]:checked + label,
   div.jnt.c5 div.answer > div input[type="radio"]:checked + label,
   div.jnt.c6 div.answer > div input[type="radio"]:checked + label,
   div.jnt.c7 div.answer > div input[type="radio"]:checked + label,
   div.answer div input[type="radio"]:checked + label,
   div.answer div input[type="checkbox"]:checked + label {
       color: white;
       background:#53A05A;
   }
   
   div.jnt.c3 div.answer > div label,
   div.jnt.c4 div.answer > div label,
   div.jnt.c5 div.answer > div label,
   div.jnt.c6 div.answer > div label,
   div.jnt.c7 div.answer > div label,
   div.answer > div label {
       width: 100%;
       display: flex;
       justify-content: center;
       flex-direction: column;
       padding: 5px 0;
       cursor:pointer;
       z-index:90;
   }

    div.isu_radio_nona_wrapper,
    div.isu_checkbox_wrapper
    {
        display: flex;
        align-items: center;
    }

   div.jnt div.header div.isu_radio_nona_wrapper, div.jnt div.answer div.isu_radio_nona_wrapper,
   div.jnt div.header div.isu_checkbox_wrapper, div.jnt div.answer div.isu_checkbox_wrapper {
       width: 100%;
       display: flex;
   }

   span.isu_radio_nona_text,
   span.isu_checkbox_text {
        width: 100%;
   }

   span.isu_radio_nona_tick,
   span.isu_checkbox_tick {
        display: inline-block;
        background: #fff;
        border: 1px solid #999;
        width: 15px;
        height: 15px;
        margin: 0 10px 0 10px;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 0.1s linear;
        transition: all 0.1s linear;
   }

   span.isu_radio_nona_tick {
       border-radius: 50%;
   }

   div.answer div input[type="checkbox"]:checked + label div.isu_checkbox_wrapper span.isu_checkbox_tick,
   div.answer div input[type="radio"]:checked + label div.isu_radio_nona_wrapper span.isu_radio_nona_tick {
        background: rgb(153,153,153);
        border-color: #333;
   }

   div.answer textarea {
       width: 100%;
       height: 150px;
   }

   div.answer input.txt_field_small {
       width: 100%;
       min-height: 32px;
   }

   div.jnt div.header div, div.jnt div.answer > div {
       margin: 0;
   }
}