$bg_color: #b9dcff
$bg_color2: #e5e7eb
$fg_color: #424345
$ot_purple: #5d308a
$body_color: white
$text_color: black
$notice_border: red

body
  min-width: 30em
  font-family: verdana, arial, helvetica, sans-serif
  background-color: $body_color
  color: $text_color
  padding: 1em
  a
    text-decoration: none
    font-weight: bold
    color: $ot_purple
  a:hover
    color: black

  .headline
    .logo
      float: right

  .index
    clear: both
    ul
      margin: 0 0 2px 0
      padding: 0
      white-space: nowrap
      list-style-type: none
    li
      margin: 0
      padding: 2px
      display: inline
      border-right: 1px solid $body_color
      border-bottom: 1px solid $body_color
      background-color: $fg_color
      padding: 0.2em 0.5em
      font-weight: bold
      a
        text-decoration: none
        color: $bg_color
        &:hover
          color: $body_color
    li.selected
      font-weight: bold
      background-color: $bg_color
      border-bottom: 1px solid $bg_color
      a
        color: $text_color

  .content
    clear: both
    background-color: $bg_color
    height: 100%
    padding: 1em
    border-top: 1px solid $body_color
    h2
      margin: 20px 3px 2px 3px
    .notice
      //clear: both
      //margin-top: 1em
      padding: 0.5em 1em 
      background-color: $body_color
      border: 1px solid
      border-color: $notice_border
    .login_info
      text-align: right
      font-size: small
    .login_notice
      //clear: both
      font-size: small
      background-color: $bg_color
      padding: 1em 0em
      //font-style: italic
    .input
      //clear: both
      text-align: left
      form
        padding: 1em
        background-color: $bg_color2
        fieldset
          //margin: 0
          padding: 0
          padding-right: 1em
          border: 0
        legend
          font-weight: bold
          color: $fg_color
        label
          //width: 28em
          //display: block
          //float: left
        br
          //clear: both
    .code
      padding: 1%
      background-color: white
      table
        display: inline-table
        border-collapse: collapse
        th
          padding: 0.5em
          border: 1px solid
          background-color: #ccd2dc
        td
          padding: 0.5em
          border: 1px solid

    .predictions
      text-align: center
      overflow: auto
      table
        border-spacing: 0
        border-collapse: collapse
        margin: 0
        th
          color: $body_color
          background-color: $fg_color
          border: 1px solid
          margin: 0.5em
        td
          border: 1px solid
          background-color: $bg_color2
          padding: 0.5em
        img
          padding: 0
          height: 100%

    .lazar-predictions
      clear: both
      margin-top: 2%
      .neighbors_navigation
        font-size: x-small
        #prev
          @extend a
          display: inline
          cursor: pointer
        #next
          @extend a
          display: inline
          cursor: pointer
        
      dt
        font-weight: bold
      table
        width: 100%
        //height: 100%
        background-color: $bg_color2
        border-spacing: 0
        border-collapse: collapse
        margin: 0
        tbody
          //height: 10em
        th
          text-align: center
          border: 1px solid
          color: $body_color
          background-color: $fg_color
          margin: 0.5em
          a
            text-decoration: underline
            font-weight: bold
            color: $bg_color

          a:hover
            color: $bg_color2
        td
          border: 1px solid
          overflow: auto
          ul
            list-style-type: none
        td.image
          padding: 0
          width: 150px
          height: 150px

          table
            font-size: x-small
            td
              border: none
            td.selected
              background-color: blue
          //overflow-y: scroll;

  .model
    padding: 0.5em 1em
    background-color: $bg_color2
    border: 0
    margin-top: 0.6em
    dl
      dt
        width: 15em
        font-weight: bold
        float: left
        clear: both
      dd
        clear: right
        margin: 0.2em 0em
        dl
          clear: both
          padding: 0em
          background-color: $bg_color2
          border: 0
          dt
            white-space: nowrap
            width: 16em
            font-weight: bold
            float: left
            clear: right
          
  .footer
    margin: 0.5em
    padding: 0.5em

.active
  color: red

.inactive
  color: green

.inconclusive
  color: yellow

.other
  color: black

dl
  dd
    td
      border: 1px dotted white
      text-align: right
      padding: 0.2em
      .blank
        border: 0
    th
      border-bottom: 1px dotted white
      text-align: center
      padding: 0.3em
    table
      border-collapse: collapse
.input_model_name
  margin: 20px 3px 2px 3px
  font-size: 1.2em
  font-weight: bold
  border: 0
  background-color: #FEFEFF

.edit_button
  font-size: 0.5em

.model_status
  float: left

.model_progress
  width: 200px
  height: 16px
  margin-left: 16px
  margin-right: 16px
  float: left