/******************************************
  Document Colors as CSS Variables
******************************************/

:root {
  /*--green-color: #7dc91f;*/
  --green: #84ba39;
  --greenhover: #97cc4d;
  --blue: #42BEF0;
  --bluehover: #60bbe0;
  --lightblue: #BEE8FB;
  --lightgreen: #C1DC9D;
  --red: #dd0000;
  --redhover: #ee0000;
  /*--seablue: #668da2;*/
  /*--seabluehover: #759caf;  */
  /*--brightgrey: #f8f8f8;*/
  --lightgrey: #F7F8F9;
  --grey: #7A7F85;
  --darkgrey: #37383a;
  --darkgreyhover: #555;
  --superdarkgrey: #292a2d;
  --warning: #cc0000;
	

  --shadow-dark:rgba(0,0,0,0.2);
  --shadow-green:rgba(110,184,19,0.2);

  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;


  --font-family-standard: proxima-nova, sans-serif;
  --font-family-special: 'MetronicPro', sans-serif;
}


/******************************************
  Color Classes & Backgrounds
******************************************/


.bg-green { background-color: var(--green); color:white; }
.bg-greenhover { background-color: var(--greenhover) }
.bg-blue { background-color: var(--blue); color:white;  }
.bg-bluehover { background-color: var(--bluehover) }
.bg-seablue { background-color: var(--seablue); color:white;   }
.bg-brightgrey { background-color: var(--brightgrey) }
.bg-lightgrey { background-color: var(--lightgrey) }
.bg-grey { background-color: var(--grey); color:white;   }
.bg-darkgrey { background-color: var(--darkgrey); color:white;   }
.bg-superdarkgrey { background-color: var(--superdarkgrey); color:white;  }
.bg-red { background-color: var(--red); color:white; }
.bg-redhover { background-color: var(--redhover) }

.green { color: var(--green);}
.blue { color: var(--blue);}
.seablue { color: var(--seablue);}
.grey { color: var(--grey);}
.lightgrey { color: var(--lightgrey);}
.superdarkgrey { color: var(--superdarkgrey);}
.white { color:white;}

.bg-green p,
.bg-green h1,
.bg-green h2,
.bg-green h3,
.bg-green h4 {
    color:white;
}



/******************************************
  Column charts
******************************************/

.contract-document ul li {
	margin-left: 1em;
}

.column-charts {
	width: 100%;
}

.column-charts .caption {
	color: var(--darkgrey);
	font-weight: 600;
	width: 100%;
	display: block;
	text-align: center;
}

.column-charts line {
	stroke: #D7D8D9;
}

.column-charts rect {
	fill: var(--green);
}

.column-charts rect.active {
	fill: var(--green);
}

.column-charts rect.inactive {
	fill: var(--lightgreen);
}

.column-charts rect:hover {
	fill: var(--greenhover);
}

.column-charts .hor-legend, .column-charts .ver-legend {
	fill: var(--darkgrey);
}

.column-charts .source {
	fill: var(--grey);
}

/******************************************
  Overwrite Tailwind Defaults
******************************************/

#requirement-table ol, #requirement-table ul {
	list-style-type: initial;
	padding: 0;
	margin: 1rem;
}

#requirement-table h1,
#requirement-table h2,
#requirement-table h3,
#requirement-table h4,
#requirement-table h5,
#requirement-table h6 {
	font-size: revert;
	font-weight: revert;
}

#requirement-table svg.icon {
	display: inline-block;
}

#requirement-table svg.icon {
	display: inline-block;
}

#requirement-table table tr:nth-child(odd) {
	background-color: #fbfbfb;
}

.requirement-comment th, .requirement-comment td {
	white-space: nowrap;
	padding-right: .5rem;
}

.requirement-comment table tr:nth-child(odd) {
	background-color: var(--lightgrey);
}

.requirement-comment table tr td:nth-child(1) {
	width: 40%;
}

.requirement-comment table tr th {
	background-color: white;
	/*text-align: center;*/
}