/* Custom Decipher Survey CSS */
/* Generated by Opinion Survey Designer */

/* ===== Page & Background ===== */
.survey-page {
  background-color: #efefef !important;
  color: #515350 !important;
  font-weight: bold;
}

.survey-body {
  background-color: transparent !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.survey-page {
  padding: 20px 20px !important;
}

/* ===== Survey Header ===== */
.survey-header {
  display: none !important;
}

/* ===== Center all survey content ===== */
.survey-body,
.question,
.question-text,
.instruction-text,
.instructions,
.comment,
.surveyQuestion,
.survey-footer {
  text-align: center;
}

/* ===== Typography ===== */
html {
  font-family: Arial, sans-serif !important;
}

.question-text {
  color: #515350 !important;
  font-size: 20px !important;
  font-family: Arial, sans-serif !important;
  font-weight: bold !important;
  line-height: 1.4 !important;
}
h1.question-text {
  font-size: 20px !important;
}
.instruction-text, .instructions {
  color: #515350 !important;
  font-size: 16px !important;
  font-family: Arial, sans-serif !important;
  font-weight: bold !important;
}
.comment, .comment-text {
  color: #515350 !important;
  font-size: 20px !important;
  font-family: Arial, sans-serif !important;
  font-weight: bold !important;
}
.cell-text label, .answer-text {
  color: #515350 !important;
  font-size: 18px !important;
  font-family: Arial, sans-serif !important;
}

/* ===== Links ===== */
a {
  color: #1c7ca1 !important;
}
a:hover {
  color: #5bbde2 !important;
}

/* ===== Questions ===== */
.question {
  background-color: transparent !important;
}

/* ===== Tables ===== */
.grid .cell {
  border-color: #cccccc !important;
}
.row-legend, .col-legend {
  background-color: #f5f5f5 !important;
}
.row:nth-child(odd) {
  background-color: transparent !important;
}
.row:nth-child(even) {
  background-color: transparent !important;
}

/* ===== Text Inputs ===== */
input[type="text"], textarea {
  color: #515350 !important;
  background-color: #ffffff !important;
  border: 1px solid #aaaaaa !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  width: 90% !important;
  height: 36px !important;
  text-align: center !important;
}
textarea {
  height: auto !important;
  min-height: 36px !important;
}
.element input[type=text].oe,
.element .oe-inline {
  color: #515350 !important;
  text-align: center !important;
}
input[type="text"]:focus, textarea:focus {
  border-color: #5bbde2 !important;
}

/* ===== Number Inputs ===== */
input[type="number"] {
  color: #515350 !important;
  background-color: #ffffff !important;
  border: 1px solid #aaaaaa !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  width: 100% !important;
  height: 36px !important;
  text-align: center !important;
  -moz-appearance: textfield !important;
  -webkit-appearance: none !important;
  appearance: textfield !important;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
  text-align: center !important;
}
input[type="number"]:focus {
  border-color: #5bbde2 !important;
}

/* ===== Dropdown ===== */
.select .element {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
}
select.input.dropdown {
  color: #515350 !important;
  background-color: #ffffff !important;
  border: 1px solid #aaaaaa !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  width: 100% !important;
  height: 36px !important;
  text-align: center !important;
  padding: 6px 10px !important;
  appearance: auto;
}
select.input.dropdown:focus {
  border-color: #5bbde2 !important;
}

/* ===== Primary Buttons ===== */
.survey-buttons .button {
  color: #ffffff !important;
  background-color: #1c7ca1 !important;
  border-color: transparent !important;
  border-radius: 20px !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  min-height: 44px !important;
  min-width: 120px !important;
  
}
.survey-buttons .button:hover {
  color: #ffffff !important;
  background-color: #1a6f91 !important;
}
.survey-buttons .button.back {
  color: #ffffff !important;
  background-color: #1c7ca1 !important;
  border-color: transparent !important;
  border-radius: 20px !important;
}
.survey-buttons {
  text-align: center;
}

/* ===== DQ Buttons ===== */
.survey-theme-colors {
  color: #515350 !important;
  background-color: #ffffff !important;
  border-color: #cccccc !important;
  border-radius: 12px !important;
  min-height: 44px !important;
  width: 100% !important;
  margin-left: auto;
  margin-right: auto;
}
.survey-theme-colors:hover {
  color: #515350 !important;
  background-color: #5bbde2 !important;
}
.survey-theme-colors-selected {
  color: #515350 !important;
  background-color: #5bbde2 !important;
}

/* ===== Error Messaging ===== */
.survey-error {
  color: #ffffff !important;
  background-color: #ba0000 !important;
}
.question-error {
  color: #ba0000 !important;
  background-color: transparent !important;
  font-size: 16px !important;
  text-align: center;
}
.answer-error {
  background-color: #f5cccc;
}

/* ===== Error text below comment/instruction text ===== */
legend, .question {
  display: flex !important;
  flex-direction: column;
}
.question > .question-text { order: -2; }
.question > .instruction-text { order: -1; }
legend > .question-text { order: -2; }
legend > .instruction-text { order: -1; }

/* ===== Progress Bar ===== */
.progress-box-outer {
  border-color: #cccccc;
  background-color: transparent;
}
.progress-box-completed {
  background-color: #5bbde2;
}
.progress-text {
  color: #515350;
}
.progress-bar {
  background-color: transparent;
  border-color: #cccccc;
}
.progress-bar .progress-fill {
  background-color: #5bbde2;
}

/* ===== Answer List ===== */
.answers-list {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.radio .cell-sub-wrapper,
.checkbox .cell-sub-wrapper {
  display: block !important;
  width: 100%;
}
.radio .cell-sub-column,
.checkbox .cell-sub-column {
  display: block !important;
}
.radio .cell-sub-column.cell-input,
.checkbox .cell-sub-column.cell-input {
  display: none !important;
}
.radio .cell-text,
.checkbox .cell-text {
  width: 100%;
  text-align: center !important;
  padding: 0 !important;
}
.radio .cell-text label,
.checkbox .cell-text label {
  width: 100%;
  display: block;
  padding: 14px 20px;
  line-height: 1.3;
  cursor: pointer;
  font-size: 18px;
  color: #515350;
  text-align: center !important;
}
.radio .answers-list .element,
.checkbox .answers-list .element {
  background-color: #ffffff;
  border: 2px solid #cccccc;
  border-radius: 12px;
  margin-bottom: 6px;
  transition: background-color 0.15s, border-color 0.15s;
  cursor: pointer;
  text-align: center !important;
  padding: 0 !important;
}
.non-touch .radio .element:hover,
.non-touch .checkbox .element:hover {
  background-color: #5bbde2 !important;
  border-color: #5bbde2 !important;
}
.non-touch .radio .element:hover .cell-text label,
.non-touch .checkbox .element:hover .cell-text label {
  color: #fff !important;
}
.radio .element.selected,
.checkbox .element.selected,
.radio .element:has(input:checked),
.checkbox .element:has(input:checked) {
  background-color: #5bbde2 !important;
  border-color: #5bbde2 !important;
}
.radio .element.selected .cell-text label,
.checkbox .element.selected .cell-text label,
.radio .element:has(input:checked) .cell-text label,
.checkbox .element:has(input:checked) .cell-text label {
  color: #fff !important;
}
.radio .element .oe-inline,
.checkbox .element .oe-inline {
  width: calc(100% - 24px);
  box-sizing: border-box;
  margin: 0 12px 12px;
  text-align: center;
}

/* ===== FIR SVG Icons ===== */
.fir-icon {
  display: inline-block;
  width: 1.65em;
  height: 1.65em;
  cursor: pointer;
  vertical-align: middle;
}
.fir-icon svg {
  width: 100%;
  height: 100%;
}
.fir-icon .fir-base {
  fill: #cccccc;
}
.fir-icon .fir-bg {
  fill: #ffffff;
}
.fir-icon .fir-selected {
  fill: transparent;
}
.fir-icon.selected .fir-selected {
  fill: #5bbde2;
}
.fir-icon.selected .fir-base {
  fill: #cccccc;
}
.fir-icon.selected .fir-bg {
  fill: #ffffff;
}
.non-touch .fir-icon:hover .fir-base {
  fill: #cccccc;
}
.non-touch .fir-icon:hover .fir-bg {
  fill: #ffffff;
}
.non-touch .fir-icon:hover .fir-selected {
  fill: #5bbde2;
}
.non-touch .fir-icon.selected:hover .fir-selected {
  fill: #5bbde2;
}

/* ===== Navigation Buttons ===== */
#btn_continue, #btn_goback {
  background-color: #1c7ca1;
  border-radius: 20px;
  color: #ffffff;
  font-size: 16px;
  min-height: 44px;
  min-width: 120px;
  
}
#btn_continue:hover, #btn_goback:hover {
  background-color: #1a6f91;
}
#btn_continue:focus, #btn_goback:focus,
#btn_continue:active, #btn_goback:active,
.survey-buttons .button:focus,
.survey-buttons .button:active {
  box-shadow: none !important;
  outline: none !important;
}

/* ===== Card Sort (slideshow) ===== */
.sq-cardsort-icon-button {
  background: none !important;
  border: none !important;
  color: #515350 !important;
  font-size: 18px !important;
  padding: 4px !important;
  height: auto !important;
  line-height: 1 !important;
}
.sq-cardsort-previous,
.sq-cardsort-next {
  font-size: 0 !important;
}
.sq-cardsort-previous i,
.sq-cardsort-next i {
  font-size: 18px !important;
}
.sq-cardsort-icon-button.sq-cardsort-state-disabled {
  opacity: 0.3 !important;
}
.sq-cardsort-previous,
.sq-cardsort-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
}
.sq-cardsort-previous {
  left: 8px !important;
}
.sq-cardsort-next {
  right: 8px !important;
}
.sq-cardsort-cards .sq-cardsort-card .sq-cardsort-card-item {
  border: 2px solid #cccccc !important;
  border-radius: 8px !important;
  color: #515350 !important;
  background-color: transparent !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  padding: 20px 40px !important;
  min-height: 50px !important;
  display: block !important;
  text-align: center !important;
  cursor: default !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}
.sq-cardsort-card-legend {
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  margin: 0 !important;
}
.sq-cardsort-cards {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  text-align: center !important;
}
.sq-cardsort-card {
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  float: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.sq-cardsort-progress {
  display: none !important;
}
.sq-cardsort-cardset {
  text-align: center !important;
  margin: 0 auto !important;
}
.sq-cardsort-cards-view {
  position: relative !important;
  text-align: center !important;
  margin: 0 auto !important;
}
.sq-cardsort-buckets-view {
  margin-top: 0.5em !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.sq-cardsort-buckets {
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}
.sq-cardsort-bucket {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 auto 6px !important;
  padding: 10px 15px !important;
  font-family: Arial, sans-serif !important;
  font-size: 18px !important;
  color: #515350 !important;
  background-color: #ffffff !important;
  border: 2px solid #cccccc !important;
  border-radius: 12px !important;
  text-align: center !important;
  min-height: 44px !important;
  cursor: pointer !important;
}
.sq-cardsort-bucket-item {
  margin: 0 !important;
}
.sq-cardsort-bucket-legend {
  margin: 0 !important;
}
.sq-cardsort-bucket-count {
  display: none !important;
}
.sq-cardsort-bucket:hover,
.sq-cardsort-bucket.sq-cardsort-state-hovered {
  color: #515350 !important;
  background-color: #5bbde2 !important;
  border-color: #5bbde2 !important;
}
.sq-cardsort-bucket.sq-cardsort-state-selected {
  color: #515350 !important;
  background-color: #5bbde2 !important;
  border-color: #5bbde2 !important;
}
.sq-cardsort-completion-item {
  font-family: Arial, sans-serif !important;
  font-size: 20px !important;
  color: #515350 !important;
}
.sq-cardsort-contents-overlay {
  display: none !important;
}

/* ===== Footer ===== */
.footer {
  color: #515350;
  font-size: 16px;
  padding-top: 1.5em !important;
}
.footer a {
  color: #1c7ca1;
}

/* ===== Exit Page ===== */
.exit-message h1 {
  color: #515350;
  font-size: 22px;
}
.exit-message p {
  color: #515350;
  font-size: 16px;
}

/* ===== Survey Logo ===== */
.survey-image-wrap {
  text-align: center !important;
}
.survey-image-wrap img {
  width: 70px !important;
  height: auto !important;
  margin: 0 !important;
}