/* widget.css */

.field
  overflow: visible
  padding: 2px 0
  line-height: 2em
  min-height: 2em
  display: block
  width: 100%
  font-size: 14px
  clear: both

.field_label
  float: left
  text-align: right
  padding-right: 10px
  line-height: 2em
  min-width: 25%
  width: 25%
  color: #666

.field_edit, .field_show
  float: left
  width: 70%
  line-height: 2em
  min-height: 2em
  margin-bottom: 0.25em

.field_show > img, .field_edit > img
  border: 1px solid #dddddd
  width: 200px

.field_edit, .field_show
  .images-field
    border-radius: 4px
    border-color: red
    background: yellow
    border: dashed thin #ccc
    background: #eee
    display: block
    .dropzone
      width: 500px
      padding: 10px
      min-height: 105px
      height: 105px
      display: table-cell
      background: none
      border: none
      .dz-preview
        margin: 10px 15px
.field_show
  .images-field
    background: none
    border: none

.field_edit
  input, select, textarea
    border: 1px solid #ccc
    height: 2em
    display: table-cell
    // margin-right: 4px
  ul.checkbox_field
    padding-left: 0
  .input-group input
    border-radius: 0
    &:first-child
      border-top-left-radius: 4px
      border-bottom-left-radius: 4px
    &:last-child
      border-top-right-radius: 4px
      border-bottom-right-radius: 4px
  .textarea
    width: 100%
    height: 8em
  .memo_field
    cols: 60
    min-height: 8em
  .edit_field
    width: 100%
    min-height: 25em
  .pulldown
    height: 2em
    min-width: 10em
  .chosen-container
    margin-right: 5px
  .chosen
    width: 300px
    margin-right: 5px
  .multiselect
    min-height: 8em
    min-width: 180px
    background: white
    border-top-right-radius: 0
    border-bottom-right-radius: 0
    border-top: 1px solid #ccc

  .image-field-image
    margin: 0
    border-color: #C0C0C0
    width: 200px
    border: 1px solid #dddddd
  .image-field-delete-link
    text-align: center
    margin: 0.5
    width: 200px

  input.checkbox_field
    margin: 0 0.5em 2px 0
    line-height: 2em
    vertical-align: middle
  ul.checkbox_field
    li
      list-style-type: none
      margin-right: 2em
    div
      display: inline
      line-height: 2em
  .images_field td
    border: 0

.field_show
  .textarea
    border: 0px solid #aaaaaa
    width: 100%
    line-height: 1.25em
    padding-top: 0.5em
  .images-field
    width: 100%
    display: table-cell
    border: 1px solid #ccc
    min-height: 400px
    width: 490px
    border-radius: 4px
    padding: 10px
    border: 0
  .textarea
    h1, h2, h3
      font-size: 1em
      font-weight: bold
      margin: 0
      padding: 0

.content .field_edit td
  border: 0
  div.range-slider
    width: 400px
    margin: 0 10px

.content .dropzone
  border-radius: 10px
  border: dashed thin #ccc
  background: #eee
  .dz-preview .dz-image
    border-radius: 10px

input
  &.decimal_field, &.float_field, &.number_field
    text-align: right

select, textarea
  border: 1px solid #ccc
  display: inline-block
  height: 30px
  padding: 2px 6px
  margin: 0
  font-size: 14px
  line-height: 20px
  color: #555
  vertical-align: middle
  -webkit-border-radius: 4px
  -moz-border-radius: 4px
  border-radius: 4px

input
  &[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"]
    border: 1px solid #ccc
    display: inline-block
    height: 30px
    padding: 2px 6px
    margin: 0
    // margin-right: 4px
    font-size: 14px
    line-height: 20px
    color: #555
    vertical-align: middle
    -webkit-border-radius: 4px
    -moz-border-radius: 4px
    border-radius: 4px

.uneditable-input
  border: 1px solid #ccc
  display: inline-block
  height: 30px
  padding: 2px 6px
  margin: 0
  font-size: 14px
  line-height: 20px
  color: #555
  vertical-align: middle
  -webkit-border-radius: 4px
  -moz-border-radius: 4px
  border-radius: 4px

.content
  div
    &.field_show p
      margin: 0
      padding: 0
    &.field_edit ul
      margin: 0
  form
    margin: 0
    padding: 0

input, textarea
  font-size: 14px
  font-family: Arial
  width: auto

select.multiselect
  margin-top: 0.2em

div
  input
    padding-right: 5px
    padding-left: 5px
  textarea
    padding: 0 5px

span.radio
  margin-right: 10px
  display: inline
  padding: 0

.content span.radio input[type="radio"]
  display: inline
  float: none
  height: 1em
  border: 0
  margin: 2px
  vertical-align: middle
  position: relative

select.pulldown
  height: 29px
  line-height: 2em
  font-size: 14px

.content
  fieldset
    border: 1px solid #ccc
    padding: 1em
  legend
    font-size: 1em
    padding: 0px 1em
    color: #444
    width: auto
    height: 1.5em
    line-height: 1.5em
    margin: 0
    border-bottom: none


// Search
// ==========================

div
  &.search
    position: relative
    display: inline
    float: right
    margin-right: 3px
    form
      display: block
      width: 400px
    input
      display: inline
      line-height: 25px
      // for IE
      &.text_field
        width: 200px
  &.content input.search_button
    height: 37px
    margin-left: 5px
    margin-right: 5px
    display: inline
  &.search span.clear
    position: absolute
    right: 80px
    top: 5px
    a
      display: inline

@media (max-width: 560px)
  .search
    input.text_field
      width: 40%


// Actions
// ====================

.actions
  display: inline
  margin: 0
  ul
    list-style-type: none
    display: inline
    margin: 0
    li
      list-style-type: none
      display: inline
      margin: 0

.action
  margin-left: 2px
  margin-right: 2px


// Misc
//==========================

.meta
  color: #555
  font-size: 0.8em

.wrong
  color: red
  font-size: 0.8em
  margin-right: 1em

.hint
  color: #555
  font-size: 1em
  line-height: 1.2em
  margin-top: 0.42em
  margin-left: 0px
  font-size: 0.9em
  padding-left: 5px

// Alerts
//==========================
.content
  .alert
    padding: 0
    margin: 0
    border: 1px solid transparent
    border-radius: 4px
    margin-top: 5px

  .alert ul
    padding: 0.5em
    margin: 0

  .alert li
    list-style-type: none
    padding: 0.25em
    margin: 0

  .alert.success
    color: #3c763d
    background-color: #dff0d8
    border-color: #d6e9c6

  .alert.warning
    color: #8a6d3b
    background-color: #fcf8e3
    border-color: #faebcc

  .alert.danger
    color: #a94442
    background-color: #f2dede
    border-color: #ebccd1


// Tables
// ==========================

.content
  table
    border-collapse: collapse
    border-top: 1px solid #ccc
    border-bottom: 1px solid #ccc
    background: white
  th, td
    padding: 0.4em 12px 0.4em
    border-top: 1px solid #ccc
    border-bottom: 1px solid #ccc
  th
    background-color: #f2f2f2
    border-bottom: 1px solid #ccc
    color: #999
    font-weight: normal
    font-size: 0.9em
    background: #f2f2f2
  .transparent
    border: none
    background: none
    color: none
    padding: 0
    margin: 0
    vertical-align: top
    th, td
      border: none
      background: none
      color: none
      padding: 0
      margin: 0
      vertical-align: top


// Lists (like tables but for data records)
// ==========================

.baselist
  overflow-x: auto
  table
    width: 100%
    border-spacing: 0
    margin: 0
    padding: 0
    border-top: 1px solid #ccc
    border-bottom: 1px solid #ccc
    border-spacing: 0px
    thead
      th
        line-height: 25px
        text-align: left
        // padding: 0.3em 0.5em
        margin: 0
        white-space: nowrap
        vertical-align: top
      > tr > td:first-child
        white-space: nowrap
    tbody
      tr
        line-height: 25px
        &:hover
          background-color: #ecf7ff
        p
          line-height: 1em
        a
          color: #284a80
          text-decoration: none
          &:visited
            color: #284a80
            text-decoration: none
          &:hover
            color: #4d84bd
            text-decoration: underline

  div
    &.header
      display: inline-block
      width: 100%
      color: #555
      font-size: 16px
      line-height: 1em
      font-weight: bold
      margin: 5px 0
      margin-bottom: 5px
      div
        &.title
          display: inline-block
          padding: 10px 0 0px
        &.actions
          float: right
    &.footer
      background: none
      line-height: 1em
      height: auto
      color: #555
      font-size: 0.8em
      margin: 5px
      padding: 0

  h1, h2, h3
    font-size: 1em
    font-weight: bold
    margin: 0
    padding: 0

  a.action
    cursor: pointer
    text-decoration: none
    font-weight: normal
    color: #787b7c
    margin: 0 2px
    padding: 0px 10px
    background: #f1f1f1
    background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1)
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f1f1f1))
    -moz-border-radius: 3px
    -webkit-border-radius: 3px
    border-radius: 3px
    border: 1px solid #cacaca
    text-shadow: 0 0 0
    &:link, &:focus
      cursor: pointer
      text-decoration: none
      font-weight: normal
      color: #787b7c
      margin: 0 2px
      padding: 0px 10px
      background: #f1f1f1
      background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1)
      background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f1f1f1))
      -moz-border-radius: 3px
      -webkit-border-radius: 3px
      border-radius: 3px
      border: 1px solid #cacaca
      text-shadow: 0 0 0
    &:hover
      text-decoration: none
      background: #424242
      background: -moz-linear-gradient(top, #424242 0%, #000)
      background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#000))
      color: #fff
      border-color: #000
  img
    width: 120px

.login_box
  -webkit-border-radius: 1em
  -moz-border-radius: 1em
  background-color: rgb(245, 250, 250)
  border: 10px solid rgb(157, 157, 157)
  color: black
  margin: 10px
  line-height: 1em
  width: 350px
  H1
    font-size: 20px
  li
    display: inline
    color: red
#login-panel input
  &[type='text'], &[type='password']
    padding: 1em 0.6em
    height: 3em

#title_bar
  width: 100%
  .actions
    ul
      margin: 0
      padding: 0
    float: right
    sborder: 1px solid blue
  .search
    sborder: 1px solid purple
    form
      width: auto
  #title_bar_left
    width: auto
    overflow: auto
  #title_bar_right
    width: auto
    float: right
    margin-top: 1.5em
  @media only screen and (max-width: 768px)
    #title_bar_left
      width: 100%

.content div.group_relationships_list table
  line-height: 1.5em
  border: 0
  td
    padding: 0 5px

.activity
  margin-bottom: 0.75em

.jqstooltip
  width: auto !important
  height: auto !important
