div.dynamiccatalog {
	padding:20px;
}

div.dynamiccatalog h2 {
	margin-left:15px;
	font-size:1.571em;
	font-weight:700;
}

div.dynamiccatalog div.filters {
	padding:10px;
	border:1px solid #aaa;
}

div.dynamiccatalog div.filters input.search {
	width:100%;
	box-sizing:border-box;
}

div.dynamiccatalog div.filters div.results {
	position:relative;
	width:100%;
	height:40px;
	
	box-sizing:border-box;

	margin-top:10px;
	padding-left:7px;
	padding-right:7px;

	background-color:#aaa;
	color:white;
	text-align:left;
	line-height:40px;
}

div.dynamiccatalog div.filters div.results input.clear {
	position:absolute;

	top:5px;
	right:7px;

	margin-right:0px;
	height:30px;

	color:#333;
	font-size:14px;
	line-height:14px;
}

div.dynamiccatalog div.courses {
	display: grid;
	grid-template-columns: 100%;
	gap:10px;
	
	transition:opacity 0.5s;
	opacity:1;
}
div.dynamiccatalog div.courses.hidden {
	opacity:0;
}

div.dynamiccatalog div.courses > div {
	border:1px solid #555;
	background-color:#eee;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}

div.dynamiccatalog div.courses > div h3 {
	background-color:#555;
	color:white;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	font-size:20px;
	font-weight:700;

	border-top-left-radius:2px;
	border-top-right-radius:2px;

	line-height:50px;
	padding:0px 10px;
	
	margin-top:0px;
	margin-bottom:0px;
}

div.dynamiccatalog div.courses > div > div {
	display:block;
	
	padding:10px;
}

div.dynamiccatalog div.courses > div div.logo {
	float:left;
	
	display:block;
	height:75px;
	width:75px;
	
	border:1px solid #555;
	border-radius:3px;

	background-size:75px 75px;

	margin-right:0px;
	margin-bottom:10px;
}

div.dynamiccatalog div.courses > div div.logo.eo {
	background-image:url('/equity/public/trainingmanager/resources/logos/eo.png');
}
div.dynamiccatalog div.courses > div div.logo.hr {
	background-image:url('/equity/public/trainingmanager/resources/logos/hr.png');
}
div.dynamiccatalog div.courses > div div.logo.ac {
	background-image:url('/equity/public/trainingmanager/resources/logos/ac.png');
}
div.dynamiccatalog div.courses > div div.logo.hreo {
	background-image:url('/equity/public/trainingmanager/resources/logos/hreo.png');
}
div.dynamiccatalog div.courses > div div.logo.sv {
	background-image:url('/equity/public/trainingmanager/resources/logos/sv.png');
}


div.dynamiccatalog div.courses > div div.content {
	margin-left:80px;
}

div.dynamiccatalog div.courses > div > div th {
	vertical-align:top;
	background-color:transparent;
	color:#555;
	border-bottom:0px solid #fff !important;
	border-top-width:0px;
	width:70px;
	
	font-weight:400;
	font-size:14px;
	padding:5px;
}
div.dynamiccatalog div.courses > div > div td {
	background-color:transparent;
	border-bottom:1px solid #ddd;
	border-top-width:0px;

	font-size:14px;
	padding:5px;
}

div.dynamiccatalog div.courses > div input[type=button] {
	float:right;
	margin-bottom:10px;
	margin-right:0px;
}

div.dynamiccatalog div.filters div.results {
	text-align:center;
}


@media screen and (min-width: 980px) {
	div.dynamiccatalog div.courses {
		grid-template-columns: 50% 50%;
	}

	div.dynamiccatalog div.filters div.table {
		display:table;
		width:100%;

		margin-bottom:0px;
	}

	div.dynamiccatalog div.filters div.table div.tr {
		display:table-row;
	}

	div.dynamiccatalog div.filters div.table div.td {
		display:table-cell;

		padding:5px;
	}
}

@media screen and (min-width: 1220px) {
	div.dynamiccatalog div.courses {
		grid-template-columns: 33.3% 33.3% 33.3%;
	}

	div.dynamiccatalog div.filters div.table {
		display:table;
		width:100%;

		margin-bottom:0px;
	}

	div.dynamiccatalog div.filters div.table div.tr {
		display:table-row;
	}

	div.dynamiccatalog div.filters div.table div.td {
		display:table-cell;

		padding:5px;
	}

}