.questionnaire_top_table{ margin: 0 auto; width:100%; }

@media (min-width:801px) {
    .questionnaire_left{ display:inline-block; width: calc(50% - 20px); vertical-align: top; }
    .questionnaire_right{ display:inline-block; width: calc(50% - 20px); vertical-align: top; }
    .questionnaire_mini_image{ max-width: calc(50vw - 60px); max-height: 60vh; cursor:pointer; }
}
@media (max-width:800px) {
    .questionnaire_left{ display:block; width: auto; }
    .questionnaire_right{ display:block; width: auto; }
    .questionnaire_mini_image{ max-width: 150px; max-height: 150px; cursor:pointer; }
}

.questionnaire_question{ font-size:20px; font-weight: 800; }
.questionnaire_radio{ display:none; }
.questionnaire_radio+label{
	display:block; cursor:pointer;
	width:calc(100% - 100px);
	margin:0 auto;
	font-size:14px;
	font-weight:bold;
	border:#F78962 2px solid;
	border-radius:15px;
	padding-top:8px;
	padding-bottom:5px;
	padding-left:10px;
	padding-right:10px;
	text-align:left;
	color:#544F40;
	background: rgb(255,255,255);
	-webkit-box-shadow: 0px 0px 5px 2px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 0px 5px 2px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 0px 5px 2px rgba(50, 50, 50, 0.75);
	margin-bottom:8px;
	}

.questionnaire_radio:checked+label{
	border:#F36633 2px solid;
	color:white;
	background: #F36633;
}

.questionnaire_subquestion{ padding:10px 0 10px 0; font-size: 18px; }

.questionnaire_hover_image_zone{
    z-index: 999;
    position:fixed; top:0px; left: 0px;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.5);
}

.questionnaire_hover_image_zone > .icon{
    color:#ffffff;
    text-shadow: 1px 1px 2px #000;
    cursor:pointer;
}
.questionnaire_hover_image_zone > .icon{ 
    position: fixed; right: 5px; font-size: 20px; width: 21px; height: 21px; 
    background: rgba(255, 255, 255, 0.7); 
    border: #000 1px solid; border-radius: 50%; 
    padding: 5px; z-index: 99999;
}
.questionnaire_hover_image_zone > .icon-remove{ top:5px; }
.questionnaire_hover_image_zone > .icon-zoom-in{ top:50px; }
.questionnaire_hover_image_zone > .icon-zoom-out{ top:90px; }
.questionnaire_hover_image_zone > .icon-refresh{ top:130px; }
.questionnaire_hover_image_zone > .icon-info-sign{ top:170px; }

.questionnaire_hover_image_zone .icon2{ color: white; position: fixed; top:5px; right: 5px; width: 15px; height: 15px; margin: 0px; padding: 0px; }

.questionnaire_hover_distance_float{ 
    position: fixed; height: 30px; width: 200px;
    top:5vh; left: calc(50vw - 100px);
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
    color:#000; border: #000 1px solid;
    border-radius: 15px; 
    font-size: 18px; line-height: 30px;
 }
#questionnaire_hover_image_div img{ /* max-width: 95vw; max-height: 95vh; */ }

.questionnaire_hover_info_float{ 
    position: fixed; width: 600px;
    top:15vh; left: calc(50vw - 300px);
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
    color:#000; border: #000 1px solid;
    border-radius: 15px;
    padding-bottom: 5px;
 }
 .questionnaire_hover_info_float *{ font-size: 18px; }

.questionnaire_hover_info_float h2{ margin: 5px; padding: 0; }
.questionnaire_hover_info_float .icon{ color:#000; }
.questionnaire_hover_info_float ul{ margin-left: 20px; }

#questionnaire_hover_image_div {
    display: block;
    border: #000 1px solid;
    position: absolute;
    margin: 0;
    padding: 0;

    max-height: 95vh;
    max-width: 95vw;
    left: 2.5vw;
    top: 2.5vh;
}

#questionnaire_hover_image_div { cursor: default; }
.ui-draggable-dragging { cursor: grab !important; }
    
#questionnaire_hover_image_div > span {
    display:block;
    width:0px;
    height:0px;
    border:#ff0000 3px solid;
    position: absolute;
}
#questionnaire_hover_image_div > span.prev { border:#0000ff 3px solid; }

.questionnaire_hover_bottom_float{ 
    width: 100vw; display: block; background: rgba(255,255,255, 0.5); 
    position:fixed; bottom:0px; left: 0px; height: 70px;
}

#countdown{ font-size:25px; font-style: 800; }
.btn{ cursor:pointer; border: #000 1px solid; }
.btn .icon{ position: relative; top: 3px; }
.btn.left{ float:left; }
.btn.right{ float:right; margin-right: 20px;}

.div_questions{ border:#000 1px solid; margin: 5px 0px; padding: 0px 5px; }
.div_question{ border:#000 1px solid; margin: 5px 0px; }
.div_question input[type="text"]{ border:#000 1px solid; background: #ffffff; }
.div_question .preview_img{ max-width: 150px; max-height: 150px; }
.question_float_title{ display:inline-block; margin: 0; padding: 10px 5px 10px 0; float:left; }
.question_sub_add{ float:right; }
.question_del{ float:right; }
.question_save{ float:right; }

.questionnaire_edit_hover{
    z-index: 999;
    position:fixed; top:0px; left: 0px;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.5);
}

.questionnaire_edit_image{
    z-index: 999;
    position:fixed; 
    top:5vh; left: 5vw;
    width: 90vw; height: 90vh;
    background: #fff;
    border: #000 1px solid;
}
.questionnaire_edit_image h2{ margin: 10px; padding:0; font-size: 25px; line-height: 25px; }
.questionnaire_edit_image table{ display:block;height:calc(90vh - 45px); }
.questionnaire_edit_image tbody{ height: inherit; }
.questionnaire_edit_hover_l1{ height: 50px; }
.questionnaire_edit_hover_l3{ height: 50px; }
.questionnaire_edit_image_list{ border: #000 1px solid; height: calc(calc(calc(90vh - 40px) - 50px) - 50px); }
#questionnaire_edit_image_cancel{ float:left; margin: -14px 0 0 0; padding: 11px 5px 11px 5px !important; }
#questionnaire_edit_image_validate{ float:right; margin: -14px 0 0 0; padding: 11px 5px 11px 5px !important; }

:root{
    --questionnaire_edit_img_blockSize: 150px;
}

.questionnaire_edit_img_block{
    display: inline-block;
    width: var(--questionnaire_edit_img_blockSize); height: var(--questionnaire_edit_img_blockSize);
    min-width: var(--questionnaire_edit_img_blockSize); min-height: var(--questionnaire_edit_img_blockSize);
    max-width: var(--questionnaire_edit_img_blockSize); max-height: var(--questionnaire_edit_img_blockSize);
    border: #000 1px solid; margin: 10px;
}

.questionnaire_edit_img_block .checkbox{
    float:left; position:absolute;
}

.questionnaire_edit_img_block img{
    display: inline-block;
    width: var(--questionnaire_edit_img_blockSize); height: var(--questionnaire_edit_img_blockSize);
    min-width: var(--questionnaire_edit_img_blockSize); min-height: var(--questionnaire_edit_img_blockSize);
    max-width: var(--questionnaire_edit_img_blockSize); max-height: var(--questionnaire_edit_img_blockSize);
}

.questionnaire_warning{
    display: inline-block;
    font-size: 15px;
}

.questionnaire_top_btn{
    float: right;
    margin: 0;
    padding: 0 !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
}
a.questionnaire_top_btn{
    font-size: 1em !important;
    cursor: pointer;
    display: inline-block;
    cursor: pointer;
    font-size: 23px;
    line-height: 27px;
    text-align: center;
    background-color: var(--formInputBack);
    color: var(--formInputFore);
    border: var(--formInputBorderColor) var(--formInputBorderWidth) var(--formInputBorderStyle);
    vertical-align: middle;
}
.questionnaire_top_btn span{
    font-size: 30px;
}
a.questionnaire_top_btn span{
    line-height: 48px;
}


:root{
    --timeline_btn_blockSize: 20px;
}

@media (min-width:801px) {
    .timeline_block{
        display: inline-block;
        min-height: var(--timeline_btn_blockSize);
        height: var(--timeline_btn_blockSize);
        max-height: var(--timeline_btn_blockSize);
        padding-left: 10px;
        padding-right: 10px;
        text-align: center; position: relative;
        margin-top: 7px;
    }
    .timeline_block:before {
        content: '';
        position: absolute;
        top: calc(50% - 2px);
        left: 0;
        border-top: 6px solid #193570;
        background: #193570;
        width: 100%;
      }
      .timeline_block .links {
        display: flex;
        justify-content: space-between;
        position: relative;
      }
    .timeline_btn{
        background-color: #193570;
        color: #ffffff;
        display: inline-block;
        min-width: var(--timeline_btn_blockSize); min-height: var(--timeline_btn_blockSize);
        width: var(--timeline_btn_blockSize); height: var(--timeline_btn_blockSize);
        max-width: var(--timeline_btn_blockSize); max-height: var(--timeline_btn_blockSize);
        border: var(--formInputBorderColor) 1px solid;
        text-align: center; text-decoration: none;
        line-height: var(--timeline_btn_blockSize);
        font-size: calc(var(--timeline_btn_blockSize) - 4px);
        margin-left: 3px;
        margin-right: 3px;
        border-radius: 50%;
    }
    .timeline_btn.disabled{
        background-color: #7384a9;
    }
    .timeline_btn.active{
        background-color: #1275e5;
    }
    .timeline_btn.error{
        background-color: #e53912;
    }
}
@media (max-width:800px) {
    :root{
        --timeline_btn_blockSize: 25px;
    }

    .timeline_block{
        display: inline-block;
        min-height: var(--timeline_btn_blockSize);
        height: var(--timeline_btn_blockSize);
        max-height: var(--timeline_btn_blockSize);
        padding-left: 10px;
        padding-right: 10px;
        text-align: center; position: relative;
        margin-top: 7px;
    }
    /*
    .timeline_block:before {
        content: '';
        position: absolute;
        top: calc(50% - 4px);
        left: 0;
        border-top: 10px solid #193570;
        background: #193570;
        width: 100%;
      }
      */
      .timeline_block .links {
        display: flex;
        justify-content: space-between;
        position: relative;
      }
    .timeline_btn{
        background-color: #193570;
        color: #ffffff;
        display:none;
        min-width: var(--timeline_btn_blockSize); min-height: var(--timeline_btn_blockSize);
        width: var(--timeline_btn_blockSize); height: var(--timeline_btn_blockSize);
        max-width: var(--timeline_btn_blockSize); max-height: var(--timeline_btn_blockSize);
        border: var(--formInputBorderColor) 1px solid;
        text-align: center; text-decoration: none;
        line-height: var(--timeline_btn_blockSize);
        font-size: calc(var(--timeline_btn_blockSize) - 8px);
        margin-left: 3px;
        margin-right: 3px;
    }
    .timeline_btn.disabled{
        background-color: #7384a9;
    }
    .timeline_btn.disabled:last-child{
        display: inline-block;
        margin-left: 30px;
    }
    .timeline_block:last-child:before{
        content: '/ ';
        position: absolute;
        font-size: 20px;
        text-align: left;
        right: 50px;
        top: 1px;
    }
    .timeline_btn.active{
        background-color: #1275e5;
        display: inline-block;
    }
}

.questionnaire_bottom{ position: fixed; left:0px; bottom:0px; height: 40px; width: 100vw; padding:10px 10px 5px 10px; }