@import "font-awesome";

$font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
$header-font: "GillSansLight";

$black: #000;
$white: #FFF;
$error-color: #CC0000;
$error-background: #FFE6E6;
$dark-grey: #333;
$medium-grey: #827D7E;
$light-grey: #CCC;

$primary-color: #F49700;
$primary-admin-color: #0057A7;
$disabled-button-color: #CCC;
$cancel-button-color: #827D7E;
$reverse-text: #FFF;

/* See `.combobox-clear-button` for an example of this mixin in use */
@mixin icon($icon) {
  @extend .fa;
  @extend .fa-#{$icon}:before;
}

/* This class will ensure that the item is hidden for sighted users and that it does not take up space */
/* For example:  <h2 aria-hidden="false" class="aria-only"><%= _('Create account') %></h2> */
.aria-only {
  visibility: hidden;
  height: 0;
  width: 0;
}

.primary-color {
  color: $primary-color;
}

/* Used to override standard h2,h3,h4,etc. sizing */
.small-header {
  font-size: 20px;
}

.main_header {
  margin-bottom: 20px;
}

.content {
  width: 98%;
  background-color: $white;
  border-radius: 3px;
  margin-top: 25px;
  padding: 10px 20px;
}

.content-two-column {
  width: 98%;

  .column-left {
    display: inline-block;
    width: 55%;
  }
  .column-right {
    display: inline-block;
    width: 40%;
    margin-left: 35px;
    vertical-align: top;
  }
}

.inline {
  display: inline-block;
}
.centered {
  text-align: center;
}

table.dmp_table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  border-bottom: 0px;
  margin-bottom: 20px;
  table-layout: fixed;
}

div.three-column {
  ul li {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  
  ul li.separator {
    background-color: $medium-grey;
    color: $white;
    font-weight: bold;
    padding: 4px 12px;
  }
}