@import 'mixins'

#manage
  form .row
    margin: 1em 2em 0

section#manage
  padding: 1em 3.5em 0 3.5em
  overflow: auto

#user-roles-create
  font-size: 1em
  float: right
  padding: 0.5em 1.25em 0.5em 0.75em

#user-roles-create, #chat-response-create
  i
    padding-right: 0.25em
    position: relative
    top: 0.05em

#chat-response-create
  margin-left: 1em
  padding-top: 4px

#admin-user-roles-data-rows
  margin-top: -0.5em
  .help-data-row
    img
      position: absolute
      left: 2.5em
      top: 0.6em
      height: 1.75em
    [data-col='name']
      padding-left: 2em
    input[name='name']
      font-size: 1em
      padding: 0.25em
      margin: -0.15em 0 -1em 0
      border: 0
      font-size: 1em
      height: auto
      &:disabled
        margin: 0
        font-size: initial
        padding: 0
        background: transparent
    i.icon-edit
      padding-left: 1em
      font-size: 1.2em
  .controls-container
    background-color: transparent
    width: 100%
    text-align: left
    padding: 5em 0 0 0
    margin-left: -1em
    &.collapsed
      margin-top: -20em
    .row
      padding: 0
      .columns
        padding-left: 0
    input, select
      border-radius: 2em
      margin-bottom: 0
      border: 0
      box-shadow: none
      outline: none
      padding-left: 1.5em
      padding-right: 1.5em
      -webkit-appearance: none
      -moz-appearance: none
    input[type='submit']
      padding: 0.5em 2.5em
      background-color: #207ce5
      color: #fff
      float: right
      margin-top: 1em
      margin-right: 1em
  .rename
    cursor: pointer

#chat-responses-data-rows
  .help-data-row
    [data-col='keyword']
      padding-left: 1em
    input[name='keyword']
      font-size: 1em
      padding: 0.5em 0 0.5em 0.75em
      margin: -0.25em 0 -0.2em 0
      border: 0
      font-size: 1em
      height: auto
      border-radius: 2em
      &:disabled
        margin: 0
        font-size: initial
        padding: 0
        background: transparent
    .columns:first-child
      padding-left: 0.25em
    .control-button
      top: 0.5em
      left: 0.7em
  .remove-control
    color: $red
    display: none
    cursor: pointer
    font-size: 0.9em
    width: auto
    padding-left: 1.25em
    position: relative
    float: right
    .icon-close
      font-size: 1.25em
      position: absolute
      top: 0.15em
      left: 0
  .trigger-command
    font-size: 1.25em
    margin-top: -0.1em
  .controls-container
    width: 100%
    &.collapsed
      margin-top: -40em
    .row
      padding: 0
      z-index: 99
      margin: 0
      .columns:first-child
        padding-left: 0.5em
        padding-right: 0.5em
    input, select
      border-radius: 2em
      margin-bottom: 0
      border: 0
      box-shadow: none
      outline: none
      padding-left: 1.5em
      padding-right: 1.5em
      -webkit-appearance: none
      -moz-appearance: none
    textarea
      padding: 0.5em 0.75em
      box-shadow: none
      border: none
      border-radius: 1em
      -webkit-appearance: none
      -moz-appearance: none
      &:focus
        background: white
    input[type='submit']
      padding: 0.5em 2.5em
      background-color: #207ce5
      color: #fff
      float: right
      margin-bottom: 0.75em
      margin-top: 0.75em
      width: auto
.admin-user-roles
  &-rename
    cursor: pointer
  &-edit-icon
    display: inline
    margin-left: 0.5em
    position: relative
    top: 0.2em
  &-delete-user
    display: inline-block
    color: #e85834
    margin-top: 1.25em
    i
      margin-right: 0.1em
      position: relative
      top: 0.1em

#admin, #manage
  p
    margin-bottom: 0
  .chat-responses-container
    margin-top: 2em
    h5
      color: black
      font-size: 2em
      margin: 0

.help-ui-slider-header
  color: $light-gray
  li
    float: left
.help-ui-slider
  padding: 0.125em 0 0.125em 0
  margin: 0.5em 0
  background-color: $light-gray
  cursor: pointer
  .ui-slider-handle
    width: 1em
    height: 1em
    position: absolute
    background-color: #207CE5
    border-radius: 1em

#manage
  form
    .row
      margin: 1em 0

#admin-nav
  ul
    li
      &:first-child
        margin-left: 1em
      &:first-child.active ~ li:last-child::before
        -webkit-transform: translate3d(-60.5em, 0, 0)
        transform: translate3d(-60.5em, 0, 0)
        width: 7.4em
      &:nth-child(2).active ~ li:last-child::before
        -webkit-transform: translate3d(-49.9em, 0, 0)
        transform: translate3d(-49.9em, 0, 0)
        width: 6.5em
      &:nth-child(3).active ~ li:last-child::before
        -webkit-transform: translate3d(-37.95em, 0, 0)
        transform: translate3d(-37.95em, 0, 0)
        width: 2.6em
      &:nth-child(4).active ~ li:last-child::before
        -webkit-transform: translate3d(-29.6em, 0, 0)
        transform: translate3d(-29.6em, 0, 0)
        width: 5.85em
      &:nth-child(5).active ~ li:last-child::before
        -webkit-transform: translate3d(-18.3em, 0, 0)
        transform: translate3d(-18.3em, 0, 0)
        width: 3.3em
      &:nth-child(6).active ~ li:last-child::before
        -webkit-transform: translate3d(-9.4em, 0, 0)
        transform: translate3d(-9.4em, 0, 0)
        width: 5.5em
      &:last-child::before
        left: 0.2em
        width: 6.6em
      &.active
        color: #207CE5

.admin
  position: fixed
  .row
    max-width: none
  .container
    position: absolute
    bottom: 0
    top: 3.7em
    left: 0
    right: 0
    padding: 1.5em 3.5em 0 3.5em
    overflow: auto
    h2, h3, h4, h5
      font-weight: bold
      margin: 0
    h2
      font-size: 2em
    .title
      color: #004e7d
      margin: 1.5em 0 0
    .header-row
      padding-bottom: 0.75em
      h2
        line-height: 1
    &.container-columns
      position: absolute
      bottom: 0
      top: 3.7em
      left: 0
      right: 0
      padding: 0
      overflow-x: hidden
      overflow-y: auto
      .header-row
        padding: 1.5em 0 1.5em 0
        margin-left: 3.5em
      .container-body

        overflow-y: auto
        > .columns
          height: 100%
        h5
          margin: 0.25em 0 0.75em
  .container-full-width
    position: absolute
    bottom: 0
    top: 5.2em
    left: 0
    right: 0
    background-color: #f2f2f2
    .header-row
      padding-bottom: 1.5em
      padding-left: 3.5em
      background-color: white
    .container-body
      width: 100%
      height: calc(100% - 8em)
      overflow-y: auto
      padding: 1em 3.5em 0 3.5em
  .chat-tags-container.organization-chat-tags, .banned-ips-container
    margin: 1.5em 0
  .group-controls
    max-width: 30em
    margin-left: 0.35em
    margin-top: 0.75em
    .help-button
      padding: 0.75em 4em
      font-weight: bold
      font-size: 0.9em
      width: 48%
      text-align: center
      &:first-child
        margin-right: 0.5em
      &:last-child
        margin-left: 0.5em
  #department-group-form
    .search-select-selected-list
      max-width: 30em
    .selectize-control.plugin-remove_button .remove:after
      top: 0.8em
    .selectize-input
      width: 100%
      border-radius: 3em
      border: none
      padding: 8px 15px
      &.focus
        box-shadow: none
      &> input
        height: 2em
        color: #222222
        float: left
        padding-top: 0.5em !important
      &> div.item
        font-weight: 300
        font-size: 1.1em
        font-weight: bold
        color: #808080
        padding: 0.675em 0.25em 0.45em 0.25em
        background-color: transparent
        position: relative
        float: left
        display: inline-block
      &.has-items
        padding: 3px 8px 3px 12px
    .selectize-dropdown
      border: none
      box-shadow: none
      border-radius: 1em
      margin-top: 1em
      font-size: 0.9em
      font-weight: bold
      color: $light-gray
      .option
        padding: 0.75em 1em
        &.active
          font-weight: bold
          color: $dark-gray
        &:first-child
          border-top-right-radius: 1em
          border-top-left-radius: 1em
        &:last-child
          border-bottom-right-radius: 1em
          border-bottom-left-radius: 1em
      &:before
        content: ''
        display: block
        width: 0
        height: 0
        border: inset 0px
        border-color: transparent transparent white transparent
        border-width: 0 1.25em 1.25em 1.25em
        position: absolute
        top: -12px
        right: 4px
        z-index: -1
  .search-select-selected-list li
    background-color: white
    border-radius: 3em
    display: inline-block
    width: 100%
    margin-bottom: 0.5em
    position: relative
    img, div, i
      display: inline-block
    .portrait
      height: 2em
      width: 2em
      margin: 0.325em
    .name
      font-weight: bold
      color: $dark-gray
      margin-left: 0.25em
    i
      position: absolute
      top: 35%
      color: $light-gray
      font-size: 0.8em
      font-weight: bold
      right: 2%
      cursor: pointer
  .ampersand-search-select
    margin: 1em 0
    &:after
      font-family: 'icomoon'
      content: '\e610'
      position: absolute
      font-size: 1.5em
      color: $light-gray
      top: 0.1em
      left: 0.4em
      font-weight: bold
      z-index: 1
    &-glass
      top: 0.25em
      left: 0.75em
      display: none
      &-circle, &-line
        stroke: #d0d0d0
        stroke-width: 0.2em
        fill: none
    &-bar
      width: 100%
      border: 0px solid #000
      border-radius: 3em
      padding: 1.5em 0.5em 1.5em 3em
      box-sizing: border-box
      font-size: 0.9em
      outline: none
      background-color: #fff
      box-shadow: none
      margin: 0.5em 0
    &-list-item
      display: block
      margin: 0.5em 0
      margin: 0.5em auto
      width: 97%
      &-image
        border-radius: 50%
        height: 2em
        width: 2em
      &-text
        font-weight: bold
        font-size: 0.9em
        vertical-align: top
        margin-left: 0.75em
        line-height: 2em
        color: $dark-gray
      &-add, &-check
        float: right
        cursor: pointer
        opacity: 0.75
        &:hover
          opacity: 1
        &-line
          stroke: #fff
          stroke-width: 0.2em
          stroke-linecap: round
      &-add
        &:hover
          opacity: 1
        &-circle
          fill: #e85834
      &-check
        cursor: pointer
        opacity: 0.75
        &-circle
          fill: #22B573
#admin-integrations
  .salesforce-container .title, .zendesk-container .title
    margin-bottom: 1em
  .help-text
    margin: 1.5em 0 0.5em
.admin-form-group
  .row
    padding-bottom: 1em
  label
    padding-bottom: 1em
    padding-top: 0.25em
    font-size: 1em
    color: $dark-gray

#admin-chat
  .row
    margin-left: 0

#get-postchat-questions
  border-radius: 3em
  background-color: #242933

#create-postchat-question
  border-radius: 3em
  background-color: #207CE5

#delete-postchat-question
  border-radius: 3em

#create-postchat-question-option
  border-radius: 3em
  background-color: #207CE5

#delete-postchat-question-option
  border-radius: 3em

#get-suggestions
  border-radius: 3em
  background-color: #207CE5

#update-suggestion
  border-radius: 3em
  background-color: #242933
  color: #fff

#create-suggestion
  border-radius: 3em
  background-color: #207CE5
  padding-left: 0

#delete-suggestion
  border-radius: 3em

#reload-css
  border-radius: 3em
  background-color: #207CE5

#update-css
  border-radius: 3em
  background-color: #242933

#reload-quick-links
  border-radius: 3em
  background-color: #207CE5

#update-quick-links
  border-radius: 3em
  background-color: #242933

#reload-custom-chat-plugin-text
  border-radius: 3em
  background-color: #207CE5

#update-custom-chat-plugin-text
  border-radius: 3em
  background-color: #242933