survey-body{
  text-align: left !important;
}

.sq-cardsort-buckets .sq-cardsort-bucket{
  max-width: 15% !important;
}

/* Vladimir: we hide the scrollbar handlers */
.sq-cardsort-bucket {
  overflow: hidden!important;
}
.sq-cardsort{
  max-width: 924px;
}
.sq-cardsort-next.sq-cardsort-state-disabled{
  display: none;
}
.sq-cardsort-previous.sq-cardsort-state-disabled{
  display: none;
}
.sq-cardsort-cards .sq-cardsort-card{
  margin-top: 50px;
}

.survey-page {
  background-color: #d3d4d6;
}

#btn_continue {
  background-color: #aa352f;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.2s cubic-bezier(.25,.8,.25,1);
  border-radius: 25px;
}
#btn_continue:hover{
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  transform: scale(1.01);
}
#btn_goback{
  background-color: #aa352f;
  color: #ffffff;
  border-radius: 25px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.2s cubic-bezier(.25,.8,.25,1);
}
#btn_goback:hover{
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  transform: scale(1.01);
}
#btn_finish{
  background-color: #aa352f;
  color: #ffffff;
  border-radius: 25px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.2s cubic-bezier(.25,.8,.25,1);
}
#btn_finish:hover{
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  transform: scale(1.01);
}

.survey_image.fit, .fit {
  width: auto;
  max-width: 60%;
  margin: auto;
  display: block;
}
.survey-page {
  background-color: #d3d4d6;
}
.footer a {
  color: #b42527;
}
.survey-body{
  border-radius: 30px;
  box-shadow: none;
  text-align: justify;
}

html{
  font-family:Helvetica, sans-serif;
  font-size: 12pt;
}

.atm1d label{
  font-size: 1.5rem !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.2s cubic-bezier(.25,.8,.25,1);
  border-radius: 10px;
  border-style: solid;
  border-width: 1px;
}
.atm1d label:hover{
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  transform: scale(1.02)
}

fieldset.atm1d .answers>div input[type=checkbox]:checked~label, fieldset.atm1d .answers>div input[type=radio]:checked~label{
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22) !important;
  transform: scale(1.02) !important;
  background-color: #aa352f; !important;
}

fieldset.atm1d .answers>div label{
  border-radius: 7px;
}

.atm1d label{
  margin: 1px;
}

.sq-cardsort-next.sq-cardsort-state-disabled{
  display: none;
}
.sq-cardsort-previous.sq-cardsort-state-disabled{
  display: none;
}
.sq-cardsort-previous.sq-cardsort-state-disabled{
  display: none;
}
.sq-cardsort-cards-view .sq-cardsort-next{
  display: none;
}
.sq-cardsort-cards .sq-cardsort-card{
  margin-top: 50px;
}
.grid-table-mode .row-legend{
  background-color: #fff;
}

fieldset.atm1d_vertical .answers div[role=group] label>span {
  margin-bottom: 35px;
}

#question_ActivityCount {
  display: none;
}
#question_ActivityAverage {
  display: none;
}
#question_ActivityRatio {
  display: none;
}
#question_ActivityMedian {
  display: none;
}  
#question_ActivityStandardDeviation {
  display: none;
}

.comment-text {
  text-align: left; 
}

.qs-styled-message {
  display: block;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.75);
  text-align: left;
  border: solid #1c1c1c 1px;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 1em;
  color: #000000;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 6px -1px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px;
  font-size: 22px;
}


/* Mitar: Dark Theme Styles */
@media (prefers-color-scheme: dark) {
  
  /* Survey */
  .survey-page{
    background-color: #2b2b2b;
    color: rgba(255, 255, 255, 0.87);
  }
  .survey-body{
    background: #000000;
    color: rgba(255, 255, 255, 0.87);
  }
  .survey-error {
    background-color: #CF6679;
  }
  .survey-error-text {
    color: #000000;
    text-align: left; 
  }
  .cell.hasError,
  .cell.hasError .cell-legend-above .cell-text,
  .answers-list .element.hasError,
  .element.hasError:hover,
  .rowLegendErr .oe,
  .colLegendErr .oe {
    color: #000000;
    background-color: #CF6679;
  }

  /* Progress Bar */
  .progress-box-outer {
    background-color: #000000;
  }
  .progress-text{
    color: rgba(255, 255, 255, 0.87);
  }

  /* HTML Tag | Question Title | Q. Comment | Pre/Post Text | Error Message */
  .comment-text, 
  .question-text, 
  .instruction-text, 
  .element.even.groupingRows.OneColumnEl {
    color: rgba(255, 255, 255, 0.87);
    text-align: left; 
  }
  .question-error {
    color: #CF6679;
  }

  /* CardSort */
  .sq-cardsort-card-legend, 
  .sq-cardsort-card-legend-left, 
  .cell-legend-above, .cell-text {
    color: rgba(255, 255, 255, 0.87);
  }
  .devContainer .sq-cardsort-card-legend, 
  .devContainer .sq-cardsort-card-legend-left, 
  .devContainer .cell-legend-above, .cell-text {
    color: #000000;
  }

  /* Exit Messages */
  .exit-message-header,
  .exit-message-text {
    color: rgba(255, 255, 255, 0.87);
    text-align: left;
  }

  /* OEs | DropDown Menu */
  input[type=text], 
  input[type=number], 
  .input.text-input:focus, 
  .input.text-input:hover, 
  .input.number-input:focus, 
  .input.number-input:hover, 
  textarea, 
  textarea:focus, 
  textarea:hover, 
  .dropdown, 
  html:not(.lte-ie9) .fir-select .input.dropdown {
    background: #000000 !important;
    border-color: rgba(255, 255, 255, 0.87);
    color: rgba(255, 255, 255, 0.87);
  }

  /* Autofill */
  input:autofill,
  input:autofill:hover, 
  input:autofill:focus, 
  input:autofill:active,
  input:-webkit-autofill,
  input:-webkit-autofill:hover, 
  input:-webkit-autofill:focus, 
  input:-webkit-autofill:active {
      -webkit-text-fill-color: rgba(255, 255, 255, 0.87);
      transition: background-color 600000s 0s, color 600000s 0s;
  }
  input[data-autocompleted] {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.87);
  }

  /* NoAnswer Box */
  .non-touch .fir-icon .rounded .fir-bg, 
  .non-touch .fir-icon .square .fir-bg, 
  .non-touch .fir-icon:focus .rounded .fir-bg, 
  .non-touch .fir-icon:focus .square .fir-bg, 
  .non-touch .fir-icon:hover .rounded .fir-bg, 
  .non-touch .fir-icon:hover .square .fir-bg {
    fill: #000000 !important;
  }
  .non-touch .fir-icon, 
  .non-touch .fir-icon:hover .rounded .fir-selected, 
  .non-touch .fir-icon:hover .square .fir-selected, 
  .non-touch .grid-table-mode .clickableCell:hover .fir-icon .rounded .fir-selected, 
  .non-touch .grid-table-mode .clickableCell:hover .fir-icon .square .fir-selected {
    fill: #000000;
  }
  .fir-icon .rounded .fir-selected, 
  .fir-icon .square .fir-selected {
    fill: #000000;
  }
  .cell-text, 
  .cell-sub-column, 
  .answers, 
  .fir-select2-dropdown {
    color: rgba(255, 255, 255, 0.87);
  }

  /* QA Codes - Hidden */
  .devContainer .question-text, 
  .devContainer .instruction-text, 
  .devContainer .cell-legend-above, 
  .devContainer .cell-legend-above .cell-sub-column,
  .qaTab,
  .qaInfo,
  .qaCode {
    color: #000000; 
  }

  /* Hyperlinks */
  a {
    color: #CF6679;
  }
  a:hover {
    color: rgba(255, 255, 255, 0.87);
    text-decoration-color: transparent;
  }

  /* Footer */
  .footer:hover, 
  .footer:hover a {
    color: rgba(255, 255, 255, 0.87);
    text-decoration-color: transparent; 
  }

  /* QA Codes - Grid */
  .grid.grid-table-mode .cell {
    background-color: #2b2b2b;
  }
  .grid-table-mode .row-legend,
  .grid-table-mode .col-legend {
    background-color: #000000;
  }
  .grid-table-mode .legend {
    color: rgba(255, 255, 255, 0.87);
  }
  .devContainer {
    color: #000000; 
  }
  .qaTab group {
    color: #000000; 
  }
  .info blockquote {
    color: #000000;
  }

  /* Text Highlighter */
  .sq-hottext-container .sq-hottext-header,
  .sq-hottext-container .sq-hottext-footer {
    background: #2b2b2b !important;
  }

  /* Div Style */
  .qs-styled-message {
    background-color: rgba(255, 255, 255, 0.87);
    border: rgba(255, 255, 255, 0.87) 1px;
    box-shadow: rgba(255, 255, 255, 0.87) 0px 4px 6px -1px, rgba(255, 255, 255, 0.87) 0px 2px 4px -1px;
  }
}


/*
  Vladimir: we are overriding default qaCode (r1, r2 ...) with z-index 10.
  That way even when answer is focused or selected, qaLabel will NOT be covered with answer label.
*/
fieldset.atm1d .answers>div .qaCode {
  position: absolute;
  z-index: 10 !important;
}

.sq-atmrating-row-legend {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

.tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
    color: #085280;
  }

  /* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #e9e9e9;
    color: #05314d;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
  }

  /* Make the text within the hover visible */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }