@import 'compass/css3/animation'
@import 'screen_sizes'
@import 'layout'
@import 'card_templates'
@import 'tab_menu'
@import 'documentation'
@import 'misc'


a.entity
  display: inline-block
  max-width: 50em
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis
  vertical-align: bottom

.description.very.basic
  padding: 2px !important
  overflow: hidden
  &:hover
    overflow: visible

.input.multiple
  display: flex
  flex-wrap: wrap
  

.workflow_task
  .title
    margin-bottom: 1.5em

.action_parameters
  form > .field
    margin-bottom: 2em !important
    margin: auto
  input[type=file]
    display:inline-block
  span.file_or_text_area
    display:inline-block
    float: right

  .field.boolean
    label
      display: inline-block
    input
      float: right
      height: 22px

.content > .info
  &:hover
    z-index: 10

table > caption
  max-width: 60em
  span.title
    display: block
    font-weight: bold
  span.caption
    display: block

.filters + p
  margin-top: 2em

.link.button
  padding: 0px !important
  & > a
    padding: 11px 21px
    display: inline-block
  &.small > a
    padding: .78571429em !important
    display: inline-block

body, html
  font-size: 16px 

#modal
  & > .header
    font-size: 2em
  
.entity_card, .entity_list_card, .entity_map_card
  width: calc(100% + 2rem)
  .card_sidebar_open
    margin-left: -1em !important
    padding-left: 2em !important
  .card_sidebar
    min-width: 400px
    transition: margin-left 0.3s, margin-right 0.3s, max-height 0.3s, min-width 0.5s
    & + .column
      transition: width 0.1s
      max-width: calc(100% - 400px)
    &.hidden
      overflow: hidden
      margin-left: calc(-25% - 32px) !important
      margin-right: 32px !important
      min-width: 25% !important
      max-height: 500px
    &.hidden + .column
      //min-width: 100% !important
      transition: width 0.3s, max-width 0.5s
      max-width: 100% !important
      width: 100% !important
      margin: 0px

  .card_sidebar
    .sub.item
      margin-left: 2em

  .card_actions
    width: 100% !important

  @media only screen and (max-width: 600px)
    .card_sidebar:not(.hidden) + .column
      max-width: calc(100% + 400px) !important
      margin-right: -500px !important

.table.loading 
  tfoot
    display: none !important
  &:after
    content: "Loading..."
    line-height: 60px
    padding-left: 2em
    display: inline-block
    color: red
    font-size: 1.5em

dl > dd
  margin-left: 1em


ul.dependencies
  padding-left: 1em

$red: rgba(234, 25, 47, 1)
$yellow: rgba(240, 187, 0, 1)
$green: rgba(44, 197, 12, 1)
$cyan: rgba(50, 211, 255, 1)

.dependencies, .job_info
  .status
    color: $cyan
  .status.waiting, .status.noinfo
    color: $yellow
  .status.started
    color: $cyan
  .status.dependencies
    color: $cyan
  .status.done
    color: $green
  .status.error, .status.aborted
    color: $red
  .workflow
    font-weight: bold
  .task
    font-style: italic

.at_addr
  &:before
    content: "@"

.ui.segment.job_inputs
  max-height: 800px
  overflow: auto

.job_control
  margin-bottom: 2em

pre.error_message
  white-space: pre-wrap
  word-wrap: break-word

.job_info, .job_inputs
  max-height: 1200px
  overflow: auto