:root
{
	--ofcc-logo-light-blue: #6caddf;
	--ofcc-logo-green: #c1d82f;
	--ofcc-logo-navy-blue: #014764;
	--ofcc-logo-bluish-gray: #6d6c6f;
	--ofcc-yellow: #ffbe0e;
	--ofcc-red: #ef1217;
	--ofcc-dark-red: #700017;
	--ofcc-silver: #a1a1a1;
	--ofcc-black: black;
}

.font-serif
{
	font-family: Serifa, Rockwell;
}

.font-sans-serif
{
	font-family: Univers, Calibri, Arial;
}

.title
{
	text-align: center;
	font-weight: bold;
	font-size: large;
	background-color: var( --ofcc-logo-green );
	margin-bottom: 0.25em;
}

/* flexbox */
.items
{
	display: flex;
	flex-wrap: wrap;
	margin-left: -10px;
	margin-top: -10px;
	position: relative;
}
.items .item
{
	flex: 1 0 200px;
	box-sizing: border-box;
	color: #171e42;
	padding: 10px;
	margin-left: 10px;
	margin-top: 10px;
	text-align: center;
}

.button
	,input[type=submit]
{
	display: block;
	border-style: outset;
	text-decoration: none;
	background: var( --ofcc-logo-light-blue );
	border-color: var( --ofcc-logo-light-blue );
	font-weight: bold;
	padding-left: 0.25em;
	padding-right: 0.25em;
}

.disabled.button
	,.disabled.button:active
{
	border-style: dashed;
	box-shadow: none;
	background-color: inherit;
}

.button
	,.button:active
	,.button:link
	,.button:visited
	,.button:hover
{
	color: #171e42;
}

.sdCreatedBuilding:before
	,.sdCreatedBuilding:after
{
	content: "''";
	position: absolute;
	margin-top: -13px;
	width: 1em;
	color: var( --ofcc-logo-navy-blue );
	font-size: small;
}
.sdCreatedBuilding:before
{
	margin-left: -1em;
}

input[type=submit]
{
	display: inline-block;
}

input[type=submit]:disabled
{
	background-color: var( --ofcc-silver );
	border-color: var( --ofcc-silver );
	color: var( --ofcc-dark-red );
}

input[type=submit]:active
	,.button:active
{
	border-style: inset;
	box-shadow: 0 0 1em black inset;
}

.staticLink
{
	background: var( --ofcc-logo-green );
	border-color: var( --ofcc-logo-green );
}

.byCxA
{
	display: block;
	font-weight: lighter;
	font-style: italic;
}

.approvalDate
{
	display: block;
}

.amended
{
	display: block;
	font-weight: lighter;
}

.noResults
{
	font-style: italic;
}

.linkList
{
	display: block;
	flex-wrap: wrap;
	margin-left: -10px;
	margin-top: -10px;
}

.linkList > a
	,.linkList > .unavailable
{
	flex: 1 0 200px;
	box-sizing: border-box;
	color: #171e42;
	padding: 10px;
	margin-left: 10px;
	margin-top: 10px;
	text-align: center;
}

.unavailable
	,.linkList > .unavailable
{
	background-color: var( --ofcc-logo-bluish-gray );
	border-color: var( --ofcc-logo-bluish-gray );
	color: white;
	border-style: groove;
}

.linkList > .unavailable:active
{
	border-style: groove;
	box-shadow: none;
}

.warning
{
	color: var( --ofcc-dark-red );
	font-size: small;
}

.error
{
	color: black;
	background-color: #ffc0c0;
	padding: 2px;
	border: solid 2px #404080;
	margin: 2px;
}

input[type=text]
	,select
	,textarea
{
	width: calc( 100% - 4em );
	padding: 0.25em;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	resize: vertical;
}

input[type=text].short
	,input[type=text].number
	,select.short
{
	width: 25%;
	min-width: 5em;
}

input[type=text].number
{
	text-align: right;
}

label
{
	padding: 12px 12px 12px 0;
	display: inline-block;
}

/*
input[type=submit]
	,input[type=file]
{
	background-color: #4CAF50;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	float: right;
}
*/

.formContainer
{
	border-radius: 5px;
	background-color: #f2f2f2;
	padding: 20px;
}

.uploadFormContainerContainer
{
/*
	max-width: 20em;
	margin-left: calc( ( 100% - 20em ) / 2 );
*/
	text-align: center;
}

.uploadFormContainerContainer label.button
{
	padding: 0;
}

.uploadFormContainerContainer .filesSelected
{
	text-align: left;
	margin-left: 0.1em;
	font-size: small;
}

.uploadFormContainerContainer .filesSelected .file .name
{
	font-weight: bold;
}

.colLabel
{
	float: left;
	width: 25%;
	margin-top: 6px;
}

.colInput
{
	float: left;
	width: 75%;
	margin-top: 6px;
}

.row:after
{
	content: "";
	display: table;
	clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px)
{
	.colLabel
		,.colInput
	{
		width: 100%;
		margin-top: 0;
	}
}

.assetListCategory
  ,.total
{
  font-weight: bold;
}

.assetListCategory .nameAndUpload > span.name
{
  text-decoration: underline;
  text-decoration-color: #6caedf;
}

.assetListSystemType span.categoryAlternateKey
{
  color: #6caedf;
}

.assetListComponent span.quantity
{
  font-weight: normal;
}

.assetListSystemType
  ,.assetListComponent
  ,.assetListAsset
  ,.assetListAssetDetail
{
  font-weight: normal;
  font-style: normal;
}

.assetListComponent
  ,.assetListAsset
  ,.assetListAssetDetail
{
  margin-left: 1em;
}

.assetListAssetDetail
{
  margin-left: 2em;
}

.editAsset
  ,.addAsset
{
  margin-left: 2em;
}

.assetListSystemType
{
  font-weight: normal;
  font-style: italic;
}

.assetListComponent
{
  font-weight: bold;
}

.assetListAsset
  ,.assetListAssetDetail
{
  display: none;
}

.assetListAssetDetail .data
{
  font-weight: bold;
}

.assetListAssetDetail .comment
{
  font-style: italic;
}

.iconExpand:before
{
	content: "\002b";
}
.iconContract:before
{
	content: "\2212";
}
.iconExpandContract
{
	float: left;
	text-shadow: 0 0 2px;
	color: var( --ofcc-logo-light-blue );
	margin-right: 0.5em;
}

.assetListCategory .utility.button
  ,.utility.new.button
{
	display: inline-block;
	font-size: small;
}

.editAsset .utility.button
  ,.utility.edit.button
{
	display: inline-block;
	font-size: small;
}

.copyAsset .utility.button
  ,.utility.copy.button
{
	display: inline-block;
	font-size: small;
}

.breadcrumbs
{
	display: flex;
}

.breadcrumbs .crumb
{
	display: inline-block;
	color: var( --ofcc-silver );
	padding: 2px;
	overflow: hidden;
	white-space: nowrap;
	margin-left: -1px;
	margin-right: -5px;
}

.breadcrumbs .crumb a
{
	border: 2px outset var( --ofcc-silver );
	border-radius: 0.5em;
	background-color: var( --ofcc-silver );
	text-decoration: none;
	color: black;
	padding-left: 5px;
	padding-right: 5px;
}

.breadcrumbs .crumb:after
{
	content: "\25c0";
	text-shadow: 1px 1px 2px white
		,-1px 1px 2px white
		,-1px -1px 2px white
		,1px -1px 2px white
		,-2px 0px 2px white
		;
	margin-left: -7px;
}

.footnote
{
	text-align: center;
	font-size: small;
	margin-top: 1em;
}