@import 'mixins'
#priority-slider-header
  &:after
    content: ''
    display: block
    clear: both
  li
    width: 20%
    text-align: center
    font-size: 0.8em
    cursor: pointer
    &:first-child
      text-align: left
    &:nth-child(2)
      right: 3%
      position: relative
    &:nth-child(4)
      left: 3%
      position: relative
    &:last-child
      text-align: right
#priority-slider
  width: 94%
  float: left
  margin: 0.75em
  float: left
  border-radius: 1em
  position: relative
  .ui-slider-handle
    top: -0.4em
    margin-left: -0.4em

.custom-icon-vertical-dots.ui-handle
  width: 1.75em
  margin-top: -0.15em
  margin-left: -0.15em

.survey-questions-container
  background-color: #f2f2f2
  padding: 1.5em 2em 3.5em 4.5em
  +transition(background-color 0.2s ease)
  min-height: 40em
  &.ui-state-highlight
    background-color: #f9f9f9
  .save-survey
    position: absolute
    bottom: 1em
    right: 2em
    font-size: 1em
.survey-question-types,
.survey-question-types-predefined
  label
    color: #004e7d
    font-size: 1em
    float: left
  .desc-icon
    width: 1.1em
    display: block
    float: right
    margin: 0.1em 0.5em -0.5em
    &.custom-icon-slider
      width: 1.3em
    &.custom-icon-dropdown
      width: 0.9em
      margin-right: 0.7em
    &.custom-icon-checkbox
      width: 1.3em
.survey-questions
  .controls
    float: right
    line-height: 1.6
    i, [class^='custom-icon-']
      display: inline-block
      cursor: pointer
      padding-right: 0.5em
    [class^='custom-icon-']
      width: 1.325em
  i
    cursor: pointer
    &.icon-close
      color: red
      font-weight: bold
  &> li
    margin-bottom: 1em
    border-radius: 1.5em
    overflow: hidden
    &:after
      content: ''
      display: block
      clear: both
    label
      color: $dark-blue
      font-weight: bold
      float: left
      margin-top: 0.1em
      cursor: default
    .divider
      margin-left: 0.5em
    .question-text
      color: #b3b3b3
      float: left
      margin-left: 0.5em
    .active-container, .inactive-container
      background-color: white
      border-radius: 1.5em
      position: relative
      z-index: 100
      padding: 0.5em 0.5em 0.5em 1em
      &:after
        content: ''
        display: block
        clear: both
    .inactive-container
      background-color: #e0e0e0
      color: #999999
      font-weight: bold
      display: none
      .controls
        float: left
      .undo
        padding: 0 0.5em 0 0.25em
      label
        color: #999999
    &.inactive
      .inactive-container
        display: block
      .active-container
        display: none
    .details-container
      +transition(margin 0.25s ease-out)
      margin: -3em 0 0 0
      width: 90%
      float: right
      top: 0
      padding-top: 3.5em
      padding-left: 0.75em
      padding-right: 0.75em
      z-index: 99
      background-color: white
      border-radius: 1.5em
      line-height: 1
      &:after
        content: ' '
        display: table
        clear: both
      &.collapsed
        +transition(margin 0.5s ease-out)
        margin-top: -50em
      .survey-row
        z-index: 99
      input
        color: #4d4d4d
        width: 100%
        background-color: #f2f2f2
        box-shadow: none
        padding: 0.75em 1em
        margin-bottom: 0.75em
        border: 0
        outline: none
        -webkit-appearance: none
        -moz-appearance: none
      a.help-button
        margin: 0.5em 0
        font-size: 0.9em
        padding: 0.5em 2em
      .options-title.title
        font-weight: bold
        margin: 0.25em 0 0.75em 1em
        font-size: 0.9em
      .option-name
        color: #4d4d4d
        font-weight: normal
      li.add-option
        background-color: white
        margin-left: 0.25em
        margin-bottom: 0
        .row
          background-color: white
          .option-input
            border: 2px dashed #b3b3b3
            border-radius: 2em
            width: 95%
            input
              background-color: white
              margin-bottom: 0
              margin-left: 0.5em
              padding: 0.5em
          .icon-add
            position: absolute
            top: 0.65em
            left: 0.65em
            font-weight: bold
            color: #b3b3b3

.ui-handle
  display: block
  float: left
  cursor: pointer

.survey-row
  background-color: #f2f2f2
  color: $dark-blue
  border-radius: 2em
  padding: 0.5em 0.5em 0.5em 0.75em
  margin-bottom: 1em
  position: relative
  z-index: 100
  width: 100%
  &:after
    content: ''
    display: block
    clear: both

.question-type-details
  .option-container
    margin-bottom: 0.25em
    width: 96%
  .option-remove
    width: 4%
    padding: 0 0.4em
    .icon-close
      line-height: 1.8
      font-size: 1.3em
  ul.options
    margin: 0
    li
      margin-bottom: 0.25em
      .row
        margin-left: 0
        margin-right: 0