/* Modern look for Quboxe interviews*/

.tabContainer {
  min-width: 100%;
  height: auto;
  float: left;
}

body,
html {
  overflow-x: auto;
}

div#interview {
  background-color: white;
  min-width: 95vw;
  margin-top: 15px;
  margin-bottom: 30px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  border: 1px solid #1772b9;
  padding-top: 15px;
  padding-bottom: 20px;
  padding-right: 10px;
  padding-left: 10px;
}

li.ui-widget-content,
#selectable > li,
#sortable > li {
  border-color: #d4d4d4;
  border-radius: 4px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;

  -webkit-box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.5);
}

#sortable li:before {
  position: absolute;
  font-family: "Glyphicons Halflings";
  content: "\e235";
  color: #d4d4d4;
  font-size: 20px;
  font-weight: lighter;
  line-height: 34px;
}

.item_number {
  font-size: 20px;
}

div.item_number.statement-tag {
  min-width: 0px;
  border: none;
}

#sortable li > .statement_tr {
  margin-left: 25px;
  width: 95%;
}

/* .upload_btn is the same submit control as .submit_btn under a different
   legacy class name (insurance_task, retail_planogram_task,
   custom_attributes_grid_task, attributes_grid_task, start_interview all use
   it for their submit button) -- style it identically so every submit
   button looks consistent regardless of which class the markup uses. */
.submit_btn,
.submit_btn:link,
.upload_btn,
.upload_btn:link {
  margin-top: 50px;
  max-width: 350px;
  width: 85vw;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-weight: 600;
  line-height: 43px;
  padding-top: 0;
  padding-bottom: 0;
}

/* attributes_grid_task.html's cart-checkout button also carries .upload_btn
   for legacy reasons, but it is a small dropdown-menu action (not a primary
   page submit control) -- exclude it from the full-width centered treatment
   above so the cart dropdown is not blown out. */
.cart_dropdown .upload_btn {
  width: 240px;
  max-width: 240px;
  display: inline-block;
  margin-top: 0;
  margin-left: 0;
}

/* Colored background */

div.tabContainer:before {
  content: " ";
  display: block;
  position: absolute;
  width: 98vw;
  height: 40vh;
  background-color: #205081;
  top: 0px;
}

div.tabContainer > div#interview,
div.tabContainer > div.wide-interview {
  position: relative;
  z-index: 10;
  padding-left: 5vw;
  padding-right: 5vw;
}

.option_picture {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.word-selection,
.selection-element {
  padding-left: 2px;
  padding-right: 2px;
  margin-left: -1.5px;
  margin-right: -1.5px;
}

div.demo > form > table > tbody > tr > td {
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: top;
}

div.demo > form > table > tbody > tr > td.scale-question-td {
  vertical-align: middle;
}

table td {
  padding-left: 10px;
  padding-right: 10px;
}

/* Full-cell click targets (answer-hit-td / answer-hit-cell): the shared
   fill rules -- including the override that zeroes out the
   "div.demo > form > table > tbody > tr > td" padding above for cells
   carrying answer-hit-td -- live in style.css, since style.css is loaded by
   every template that uses this pattern (respondent task templates via
   research_base.html AND the compact-answers admin tool via
   quboxe_base.html, which does not load this stylesheet). See style.css
   for the canonical rules. */

td.best_worst_option:first-child {
  text-align: left;
}

.long-text-option-text {
  padding-top: 30px;
  padding-bottom: 10px;
}

.long-text-option-control > textarea {
  width: 100%;
  height: 100px;
}

/* Best worst task styles */
table.best-worst-table {
  border: none;
  margin-top: 50px;
}

tbody > tr.best-worst-table-header > td {
  border: none;
}

table.best-worst-table > tbody > tr > td {
  border-left: none;
  border-right: none;
}

table.best-worst-table > tbody > tr > td.worst-radio {
  border-top: none;
}

table.best-worst-table > tbody > tr > td.best-radio {
  border-bottom: none;
}

table.best-worst-table > tbody > tr > td {
  border-left: none;
  border-right: none;
}

table.best-worst-table > tbody > tr > td.best_worst_option {
  border-left: 1px solid #dddddd;
}

table.best-worst-table > tbody > tr.best_worst_option_row > td:last-child {
  border-right: 1px solid #dddddd;
}

table.best-worst-table > tbody.best_worst_option_row_body:hover > tr > td,
table.best-worst-table
  > tbody.best_worst_option_row_body:hover
  > tr
  > td:last-child,
table.table-bordered.best-worst-table
  > tbody.best_worst_option_row_body:hover
  > tr
  > td {
  border-color: #1773b9;
}

/*table.best-worst-table > tbody.best_worst_option_row_body:hover > tr > td {
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}*/

.table-bordered > tbody > tr > td.td_spacing {
  border: none;
}

input.radio-control {
  width: 20px;
  height: 20px;
}

.thumbnail_overlay {
  min-width: 17vw;
}

.zoom_icon {
  top: 30%;
  left: 45%;
  background-color: black;
  padding: 10px;
  border-radius: 10px;
}

.thumbnail_overlay:hover .zoom_icon {
  opacity: 0.5;
}

img.image_display_thumbnail {
  border: 1px solid transparent;
}

td.highlighted-cell img.image_display_thumbnail,
img.image_display_thumbnail:hover,
.thumbnail_overlay:hover img.image_display_thumbnail {
  border: 1px solid #205081;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
}

.selected-number {
  z-index: 9000;
}

.feedback_messsage {
  color: #ffffff;
  float: right;
}

.feedback_messsage a {
  color: #ffffff;
}