/* Radio Button */
input[type=radio] { -webkit-appearance:none; -moz-appearance:none; appearance:none; display:inline-block; position:relative; background-color:#2FC9FF; color:#000;
   top:9px; height:25px; width:25px; border:0; cursor:pointer; margin-right:7px; margin-bottom:1px; outline:none; border-radius:40px; border:3px solid #3f3f3f;
}
input[type=radio]:checked::before { position:absolute; color:white; font-size:19px; left:5px; top:-5px; font-weight:600; content:'\02143'; transform:rotate(40deg); }

/* Checkbox */
input[type=checkbox] { -webkit-appearance:none; -moz-appearance:none; appearance:none; display:inline-block; position:relative; background-color:#2FC9FF !important; color:#000;
  top:9px; height:25px; width:25px; border:0; cursor:pointer; margin-right:7px; margin-bottom:1px; outline:none; border:3px solid #3f3f3f !important;
}
input[type=checkbox]:checked::before { position:absolute; color:white; font-size:19px; left:5px; top:-5px; font-weight:600; content:'\02143'; transform:rotate(40deg); }

.interview-question-div { float:left; color:#3f3f3f; font-size:18px; font-weight:bold; margin-top:2px; margin-right:20px; }
.interview-answer-div { float:right; }

.interview-ryghty-div { float:left; margin-left:5px; }
.interview-ryghty-img { width:30px; height:30px; margin-right:20px; }

.interview-mandant-div { float:left; margin-left:5px; }
.interview-mandant-img { width:30px; height:32px; margin-top:2px; margin-right:20px; }

.interview-answer-container { width:100%; }
.interview-answers-mandant { float:left; margin-left:10px; margin-top:15px; }
.interview-answers-button { width:105px; background-color:#2FC9FF; color:white; font-size:18px !important; font-weight:bold; margin-right:10px; margin-top:15px; }

.interview-title { width:97%; margin-top:5px; margin-left:5px; height:35px; color:#3f3f3f; font-size:1.5em; font-weight:bold; vertical-align:text-bottom; }
.answers-title { margin-top:17px; margin-left:5px; margin-bottom:2px; height:35px; color:#3f3f3f; font-size:1.5em; font-weight:bold; vertical-align:text-bottom; }
.answers-show-img { margin-top:14px; margin-right:5px; width:42px; height:42px; }

.interview-title-info { width:30px; height:30px; margin-bottom:10px; }
.interview-title-hr { margin-top:2px !important; margin-bottom:3px !important; opacity:1; height:2px !important; }
.answer_form { display: inline-block; width: 97%; }
.interview-answer-hr { margin-top:2px !important; margin-bottom:25px !important; opacity:0.5; color:#3f3f3f; height:1px !important; margin-left: 5px; }
.interview-answer-button { background-color:#25a3d1; color:white; font-size:18px !important; font-weight:bold; margin-bottom:4px; margin-left:5px; }

.interview-input-date { background-color:#3f3f3f; color:white; font-size:18px; font-weight:bold; display:inline-block; margin-right:10px; vertical-align:sub; }
.interview-input-text { background-color:#3f3f3f; color:white; font-size:18px; font-weight:bold; display:inline-block; }

.interview-head-box { text-align:center; }
.interview-head-img { height:40%; width:40%; }
.interview-head-text { font-size:1.5em; font-weight:bold; }

.answer-plain { font-size:18px; font-weight: bold; margin-top:5px; margin-left:5px; float:left; }
.answer-input { width:80%; font-size:18px; font-weight: bold; margin-left:5px; float:left; }
.answer-input-all { font-size:18px; font-weight: bold; margin-left:5px; float:left; }
.answered_questions-all { border-radius:25px 25px 25px 25px; padding:8px; margin-bottom:1px; box-shadow:10px 10px 15px silver inset; box-shadow:0px 2px 20px silver; height:85px; cursor:pointer; }
.answered_questions { border-radius:25px 25px 25px 25px; padding:8px; margin-bottom:1px; box-shadow:10px 10px 15px silver inset; box-shadow:0px 2px 20px silver; }
.current_answer_box { margin:15px 3px 3px 3px; box-shadow:10px 10px 15px silver inset; box-shadow:0px 2px 20px silver; }
.current_question { margin-top:4px; }
.interview-preview-WKK { border-radius:0px; border:2px solid #AF005F; }

.interview-preview { border-radius:25px; border:3px solid #AF005F; margin-top:15px; float:left; }
.interview-preview-head { text-align: center; margin-top:15px; }
.interview-preview-content { margin:15px 15px 15px 15px; }
.interview-analyse { margin-left:10px; margin-right:5px; }

.footer-bottom { width:100%; position:absolute; bottom:0px; }

.custom-radio-list { list-style-type:none; padding:0; margin:0; display:inline-block; }

.preview-filler { flex:0 0 auto; width:20px; }

/* For tablet */
@media only screen and (max-width:1280px) {
  .answer-input { width:70%; float:left; }
}

/* For smartphone */
@media only screen and (max-width:767px) {
  .interview-mandant-div { margin-bottom:5px; }
  .interview-mandant-img { margin-bottom:5px; }
  .interview-answer-container { margin-top:0px; width:95%; }
  .interview-answer-div { width:100%; margin-left:5px; margin-right:0px; }
  .interview-answer-button { width:100%; margin-top:15px; }
  .interview-head-text { width:100%; }
  .interview-title { width:97%; margin-top:5px; margin-left:5px; height:35px; color:#3f3f3f; font-size:1.2em; font-weight:bold; vertical-align:text-bottom; }
  .answers-title { font-size:1.2em; width: 70%; margin-top:10px; margin-left:5px; }
  .answers-show-img { margin-top:-50px; margin-right:5px; width:42px; height:42px; }
  .answer-input { width:100%; float:left; }
  .answer-plain { margin-top:10px; }
  #ryghtBody { margin-left:5px; margin-right:5px; }
  .col-1 { width:100%; }
  .col-4 { width:100%; }
  .col-5 { width:100%; }
  .col-6 { width:100%; }
  .col-11 { width:100%; }
  .preview-filler { width:0px; }
}