/*** CUSTOM CSS ADDITIONS *****/

/***** CSS for Info boxes *****/
.info, .success, .warning, .error, .validation, .play {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('//p3.zdassets.com/hc/theme_assets/578072/200102782/information.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('//p3.zdassets.com/hc/theme_assets/578072/200102782/success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('//p3.zdassets.com/hc/theme_assets/578072/200102782/warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('//p3.zdassets.com/hc/theme_assets/578072/200102782/error.png');
}
.play {
color: #000000;
background-color: #f9f7f7;
background-image: url('//p3.zdassets.com/hc/theme_assets/578072/200102782/play.png');
}
.validation {
color: #D63301;
background-color: #FFCCBA;
background-image: url('validation.png');
}
/***** START CSS FOR BUTTONS *****/
}
source-systems-menu.ul [
color: #D63301;
background-color: #FFCCBA;
}



/***** END CSS FOR BUTTONS *****/

/***** START TABLE STYLES *****/

@import "compass/css3";

/*

RESPONSTABLE 2.0 by jordyvanraaij
  Designed mobile first!

If you like this solution, you might also want to check out the 1.0 version:
  https://gist.github.com/jordyvanraaij/9069194

*/

// Default options for table style
$table-breakpoint: 480px;
$table-background-color: #FFF;
$table-text-color: #024457;
$table-outer-border: 1px solid #167F92;
$table-cell-border: 1px solid #D9E4E6;

// Extra options for table style (parse these arguments when including your mixin)
$table-border-radius: 10px;
$table-highlight-color: #EAF3F3;
$table-header-background-color: #167F92;
$table-header-text-color: #FFF;
$table-header-border: 1px solid #FFF;

// The Responstable mixin

@mixin responstable(
  $breakpoint: $table-breakpoint,
  $background-color: $table-background-color,
  $text-color: $table-text-color,
  $outer-border: $table-outer-border,
  $cell-border: $table-cell-border,
  $border-radius: none,
  $highlight-color: none,
  $header-background-color: $table-background-color,
  $header-text-color: $table-text-color,
  $header-border: $table-cell-border) {
  
  .responstable {
    margin: 1em 0;
    width: 100%;
    overflow: hidden;  
    background: $background-color;
    color: $text-color;
    border-radius: $border-radius;
    border: $outer-border;
  
    tr {
      border: $cell-border; 
      &:nth-child(odd) { // highlight the odd rows with a color
        background-color: $highlight-color;
      }  
    }
  
    th {
      display: none; // hide all the table header for mobile
      border: $header-border;
      background-color: $header-background-color;
      color: $header-text-color;
      padding: 1em;  
      &:first-child { // show the first table header for mobile
        display: table-cell;
        text-align: center;
      }
      &:nth-child(2) { // show the second table header but replace the content with the data-th from the markup for mobile
        display: table-cell;
        span {display:none;}
        &:after {content:attr(data-th);}
      }
      @media (min-width: $breakpoint) {
        &:nth-child(2) { // hide the data-th and show the normal header for tablet and desktop
          span {display: block;}
          &:after {display: none;}
        }
      }
    }
  
    td {
      display: block; // display the table data as one block for mobile
      word-wrap: break-word;
      max-width: 7em;
      &:first-child { 
        display: table-cell; // display the first one as a table cell (radio button) for mobile
        text-align: center;
        border-right: $cell-border;
      }
      @media (min-width: $breakpoint) {
        border: $cell-border;
      }
    }
  
    th, td {
      text-align: left;
      margin: .5em 1em;  
      @media (min-width: $breakpoint) {
        display: table-cell; // show the table as a normal table for tablet and desktop
        padding: 1em;
      }
    }  
  }    
}

// Include the mixin (with extra options as overrides)

@include responstable(
  $border-radius: $table-border-radius,
  $highlight-color: $table-highlight-color,
  $header-background-color: $table-header-background-color,
  $header-text-color: $table-header-text-color,
  $header-border: $table-header-border);




/***** END TABLE STYLES *****/


/***** CUSTOM CSS ADDITIONS END *****/