 /*!
 * Style for public survey
 * This file is part of LimeSurvey API for template
 *
 * Licensed under the GPLv3
 *
 */
/**
 * Used in answers : bootsrap fix (specific single choice list)
 */

/**
 * Expression manager relevance system
 */
.js .ls-hidden{display:none}/* 3 class , and don't hide without javascript*/
.js .ls-irrelevant{pointer-events: none;} /* Without js : NEED action accepted … */
.js .ls-disabled{opacity:0.4;}


/* Some tools
 */
.js .ls-js-hidden{display: none !important;}
.no-js .ls-no-js-hidden{display: none !important;}

/* boostrap navbar-toggle is broken without js */
.no-js .navbar-toggle{display: none}

/* Using http://webaim.org/techniques/css/invisiblecontent/ technique : better with less part (to be more easily updatable by template : can use initial or inherit) */
.js .ls-js-hidden-sr{
  position:absolute;
  top:auto;
  width:1px;
  white-space: nowrap;
  height:1px;
  overflow:hidden;
  clip: rect(0, 0, 0, 0);
}

/** ls-label-xs-visibility : set visually-hidden by default : template can reinit it with initial */
.ls-label-xs-visibility{
  position:absolute;
  top:auto;
  width:1px;
  white-space: nowrap;
  height:1px;
  overflow:hidden;
  clip: rect(0, 0, 0, 0);
}

/* size or cols => set to with initial and add a max-width .... */
.answer-item .form-control[size],.answer-item .form-control[cols]{width:initial;max-width:100%}

/**
 * The answers part
 * BS use px size, use rem to easily update body font-size : @link http://caniuse.com/rem/embed/
 **/
@media (max-width: 768px) {
.ls-answers .text-end,.ls-answers .text-start {text-align:center;}
}

/**
 * .ls-input-group (prefix/sufix): near same behaviour than BS input-group / input-group-addon */
/* BUT : only with big screen : see @link https://bugs.limesurvey.org/view.php?id=11882
 * Add .suffix-prefix-force in question to force with little screen too
 **/
/* some can be out of media part */
.ls-input-group {
    border-collapse: separate;
    position: relative;
}
/**
 * Except for really little screen : show ls-input-group in same line
 * ls-input-group used for suffix/preffix (a lot of time : very little and reset button
 */
@media (min-width: 481px) {
  .ls-input-group {
      display: table;
  }
  .ls-input-group  .form-control {
      display: table-cell;
      margin-bottom: 0;
      position: relative;
      z-index: 2;
  }
  .dir-ltr .ls-input-group  .form-control {float: left;}
  .dir-rtl .ls-input-group  .form-control {float: right;}
  .ls-input-group-extra {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    display: table-cell;
    padding: 0.5rem 1.2rem;
    line-height: 1;
  }
  .ls-input-sized .ls-input-group-extra{width:initial}
  .ls-input-sized .ls-input-group{width:auto;max-width:100%;display:table;table-layout:fixed}
  /* in inline form : width need to be auto */
  .form-inline .ls-input-group{display: inline-table;vertical-align: middle;width:auto}
  .form-inline .ls-input-group .ls-input-group-extra{width: auto;white-space: initial;}
  .form-inline .ls-input-group {width: auto;white-space: initial;}
}
/* Specific class for forced */
.suffix-prefix-force .ls-input-group {
  display: table;
}
.suffix-prefix-force .ls-input-group  .form-control {
  display: table-cell;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}
.dir-ltr .suffix-prefix-force .ls-input-group  .form-control {float: left;}
.dir-rtl .suffix-prefix-force .ls-input-group  .form-control {float: right;}
.suffix-prefix-force .ls-input-group-extra {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    display: table-cell;
    padding: 0.6rem 1.2rem;
    line-height: 1;
}
/* specific for multiple number with dynamic : @todo move this to question class */
.ls-group-dynamic .control-label,.ls-group-dynamic .form-control-static{display:inline-block}

/* Survey list (home page) : break line in btn for long survey title*/
.surveytitle.btn{white-space: normal;}

/**
 * Question index : must be move to index.css ?
 **/
/* button */
.ls-index-buttons .list-group .list-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.ls-index-buttons .list-group:not(:last-child) {
    margin-bottom: -1px;
}
.ls-index-buttons .list-group:not(:last-child) .list-group-item:last-child  {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: -1px;
}
/* dropdown-sub-menu  for question index : no ls specific, then no ls- template can use it easily */
.dropdown-menu .dropdown-sub-menu{
display:block;
position:relative;
float:none;
box-shadow: 0 0 0 #fff;
}

.input-error input {border:1px solid #E75041;}
.form-inline .radio-item,.form-inline .checkbox-item {
    display: inline-block;
    vertical-align: middle;
}

/* Max width for some answer part */
@media (min-width: 768px) {
  /* See https://caniuse.com/?search=attr
   * attr() is supported for effectively all browsers for the content property
   */
  [data-column-count]{column-count:attr(data-column-count)}
  /* Add until 16 */
  .ls-column-count-1{column-count:1}
  .ls-column-count-2{column-count:2}
  .ls-column-count-3{column-count:3}
  .ls-column-count-4{column-count:4}
  .ls-column-count-5{column-count:5}
  .ls-column-count-6{column-count:6}
  .ls-column-count-7{column-count:7}
  .ls-column-count-8{column-count:8}
  .ls-column-count-9{column-count:9}
  .ls-column-count-10{column-count:10}
  .ls-column-count-11{column-count:11}
  .ls-column-count-12{column-count:12}
  .ls-column-count-13{column-count:13}
  .ls-column-count-14{column-count:14}
  .ls-column-count-15{column-count:15}
  .ls-column-count-16{column-count:16}
}
