<%
  background_color = '#f2f2f2'
  foreground_color = '#ffffff'
  text_color = '#324164'
  heading_color = text_color
  mixed_color = '#f9f9f9'
  border_color = '#e5e5e5'
  link_color = '#0080e6'
  positive_color = '#01c8a9'
  negative_color = '#fe7d99'
  action_background = '#0080e6'
  action_border = '#0080e6'
  mail_width = '480'
  padding = '24'
%>

table.list{
  font-family:Helvetica,Arial,Sans-Serif;
  font-size: .9em;
  border-top: 1px solid <%= border_color%>;
  border-bottom: 1px solid <%= border_color%>;
  width: 100%;
}
table.list tr:nth-of-type(odd){
  background: <%= mixed_color%>;
}
table.list tr + tr {
  border-top: 1px solid <%= mixed_color%>;
}
table.list th{
  background: <%= mixed_color%>;
  border-bottom: 1px solid <%= border_color%>;
  text-align: left;
}
table.list td,th{
  padding: 5px;
}
table.progress{
  border: 1px solid <%= border_color%>;
  border-collapse: collapse;
}
table.progress td{
  height: 5px;
  border: 1px solid <%= border_color%>;
  background: <%= mixed_color%>;
  padding: 0;
}
table.progress td.closed{
  border-color: <%= link_color%>;
  background-color: <%= link_color%>;
}
.progress-parent{
  display: flex;
  align-items: center;
  height: 100%;
}
a.wiki-anchor {
  display: none;
}
.overdue {
  color: <%= negative_color%> !important;
}

.private {
  color: <%= negative_color%> !important;
  float: right;
  line-height: 1.2;
}

.journal-details-container h4{
  font-style: italic;
}
.journal-details-container .details{
  font-size: .9em;
  margin-bottom: <%= padding%>px;
}

.attributes-wrapper{
  margin-top: 0px;
  margin-bottom: <%= padding%>px;
}

.attributes{
  font-family:Helvetica;
  font-size:14px;
  color:#505050;
  line-height: 120%;
  width: 100%;
  background-color:<%= mixed_color%>;
  border:1px solid <%= border_color%>;
}

.attribute th{
  width:  auto;
}

.attributes th, .attributes td{
  padding: 2px <%= 0.5*padding.to_f%>px;
}

.attributes th{
  width: 25%;
  font-size: 0.89em;
  font-weight: normal;
  text-align: left;
}

.separator > td{
  border: none;
  padding-top: <%= 0.5*padding.to_f%>px;
  border-bottom: 1px dashed <%= border_color%>;
}

.spacer > td{
  border: none;
  height: <%= 0.5*padding.to_f%>px;
  padding: 0;
}

.spacer + .spacer > td{
  border: none;
  border-top: 1px dashed <%= border_color%>;
}

.footerActions{
  text-align: center !important;
}

.actionButtons{
  border-collapse: separate !important;
  margin: auto;
  font-family:Helvetica;
  font-size:14px;
}
.actionButtons a{
  color: <%= foreground_color%>;
  font-weight: bold;
}
.actionButtons td{
  border: 1px solid <%= positive_color%>;
  background-color: <%= positive_color%>;
}

.actionButtons td.negative{
  background-color: <%= negative_color%>;
  border-color: <%= negative_color%>;
}

.actionButtons td a{
  font-weight: bold !important;
  display: inline-block;
  padding: <%= 0.5*padding.to_f%>px <%= padding%>px;
  text-align: left;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  text-decoration: none !important;
}

.actionButtons a:link, .actionButtons a:visited, .actionButtons a span {
  color: <%= foreground_color%> !important;
}
.attachments a{
  word-break: break-all;
  word-wrap: break-word;
}
.attachments li{
  margin-bottom: 3px;
}