body {
  font:           normal 1em Helvetica, Arial, sans-serif;
  background:     white;
  margin: 0;
}

img {
  border:         0;
}

#header {
  background:     #9c9;;
  padding-top:    10px;
  padding-bottom: 10px;
  border-bottom:  2px solid;
  font:           small-caps 40px/40px "TimesNewRoman",serif;
  color:          #282;
  text-align:     center;
}

#columns {
  background:     #141;
}

#main{
  margin-left:    11em;
  padding-top:    4ex;
  padding-left:   2em;
  background:     white;
}

#menu{
  float:          left;
  padding-top:    1em;
  padding-left:   1em;
  padding-bottom: 1em;
  width:          10em;
  background:     #141;
  font:           small-caps 1em "TimesNewRoman",serif;
}

#menu ul {
	list-style:    none;
	margin:        0;
	padding:       0 0 10px;
	color:         white;
}

#menu a{
  color:           #bfb;
  text-decoration: none;
}

#menu a:hover {
  color:           #141;
  text-decoration: none;
  background:      #9c9;
}

#menu .version {
  color: rgb(212, 233, 212);
}

#main #title {
  font:            small-caps 1.5em "TimesNewRoman",serif;
  border-bottom:   2px dotted #77d;
}

#main #title img {
  padding-top: 5px;
  margin-left: 5px;
  float: right;
}

#main .subtitle {
  font:            small-caps 1.2em "TimesNewRoman",serif;
  margin-top:      1em;
  border-bottom:   2px dotted #77d;
}

#main .subtitle img {
  padding-top: 2px;
  margin-left: 5px;
  float: right;
}


#list table {
/*  border-spacing: 0;
	margin:        0;
	width:         100%;
/*	padding:       20px 0 10px; */
  margin:        10px 0px;
	font:          normal 0.8em Helvetica, Arial, sans-serif;
}

#list table td {
}

#list table td.name {
  white-space: nowrap;
}

#list table td.stretch {
  padding-left: 5px;
  width: 100%;
}

#list table td.date {
  text-align: center;
  white-space: nowrap;
  padding-left: 20px;
  padding-right: 20px;
}

td.serviceman {
  padding-top: 10px;
}

#list .date img {
  float: none;
}

#list ul {
	list-style:    none;
	margin:        0;
	padding:       20px 0 10px;
	font:          normal 1em Helvetica, Arial, sans-serif;
}

#list li {
  padding:        0.2em 0;
}

#list img {
  float: right;
  margin: 0.2em 0 0 5px;
}

#comment {
  border:         2px solid;
  padding:        5px;
}

#comment a {
  margin-left:    10px;
}

/*
#list table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
*/

#list .list-line-odd {
  background:     #fbfbfb;
}

#list .list-line-even {
  background:     #f1f1f1;
}

#notice {
  background:     #efe;
  border:         1px solid;
  text-align:     center;
  padding:        1em 0;
  margin:         1.5em 2em 0em;
  color:          #282;
}

#error {
  color: #D8000C;
  background-color: #FFBABA;
  border:         1px solid;
  text-align:     center;
  padding:        1em 0;
  margin:         1.5em 2em 0em;
}

/* ze scaffold */

.fieldWithErrors {
  padding: 2px;
  background-color: red;
  display: table;
}

#ErrorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#ErrorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}

#ErrorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#ErrorExplanation ul li {
  font-size: 12px;
  list-style: square;
}

#comment_edit {border: 1px solid black; }

.line_through {text-decoration: line-through;}

.green {color: rgb(14, 18, 14);}
.red {color: red;}

.product-table {
  display: table;
  .header {
    font-weight: bold;
  }

  .row{
    display: table-row;
  }

  .row:hover {
    background-color: lightgray;
  }

  .col{
    display: table-cell;
    padding-right: 2em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
  }

  /* Last two columns - no padding right */
  .col:nth-last-child(-n+2) {
    padding-right: 0em;
  }

  .col:last-child{
    background-color: white;
  }
}


/* Same class name as in Tailwind CSS */
.contents {
  display: contents;
}