@import "bourbon@5.*"
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700")

$default-color: #02556E
$button-color: #2E2E2E
$text-color: #BDD2D9
$error-color: #fbe3e4
$success-color: #e6efc2

%flex-container
  display: flex
  flex-direction: column
  flex-wrap: wrap
  justify-content: space-evenly
  align-items: stretch
  
  @media (max-width: 768px)
    justify-content: center
  
body
  background-color: $default-color
  @extend %flex-container
  flex-direction: row
  align-items: stretch
  height: 100vh
  
  font-family: 'Open Sans', sans-serif
  color: $text-color
  
  a
    color: $text-color
    text-decoration: none
    
    &:hover
      color: tint($text-color, 80%)
  
  .footer
    @extend %flex-container
    
  .ng-invalid.ng-touched
    background-color: $error-color
    
  .container
    @extend %flex-container
    
    width: 100%
    
    @media (max-width: 768px)
      align-items: center
    
    .input,.output
      background-color: rgba(white, 0.1)
      @extend %flex-container
      
      margin: 1.5%
      padding: 2.5%
      border-radius: 15px
      
      @media (max-width: 768px)
        width: 85%
        
      .row,.button
        @extend %flex-container
      .button
        flex-direction: row
        button
          background-color: $button-color
          width: 150px
          padding: 10px
          
          margin-top: 20px
          border-radius: 10px
          border: none
          
          color: $text-color
          font-weight: 700
          
          &:hover
            background-color: tint($button-color, 5%)
          
.progress-bar-indication
  $base-border-color: gainsboro !default
  $base-border-radius: 3px !default
  $base-background-color: white !default
  $base-line-height: 1.5em !default
  $action-color: #477DCA !default
  $progress-border-color: $base-border-color
  $progress-border: 1px solid $progress-border-color
  $progress-meter-border-color: $action-color
  $progress-meter-border: 1px solid darken($progress-meter-border-color, 15%)
  $progress-meter-color: $progress-meter-border-color
  $progress-background: darken($base-background-color, 5)
  $progress-animation-duration: 0.7s
  $progress-color: white

  background-color: $progress-background
  border-radius: $base-border-radius
  border: $progress-border
  box-shadow: inset 0 0 3px 0 rgba(darken($progress-background, 50%), 0.15)
  margin: 2px auto
  width: 100%

  span.meter
    background-color: $progress-meter-color
    background-repeat: repeat-x
    background-size: 40px 40px
    border: $progress-meter-border
    border-bottom-right-radius: 0
    border-radius: $base-border-radius /1.5
    border-top-right-radius: 0
    box-sizing: border-box
    display: block
    height: $base-line-height + 0.3

    p
      color: $progress-color
      line-height: $base-line-height
      margin: 0
      padding: 0.1em 0.5em
      text-shadow: 0 0 1px black