@import "../../../includes/shared-assets/scss/_variables";
.app-card {
	background: #fff;
	margin: 20px;
	padding: 40px;
}

.app-card h2 {
	color: $color-text;
	font-size: 28px;
	font-weight: bold;
	line-height: 45px;
	margin-bottom: 0;
	margin-top: 0;
}

.app-card h2 a {
	color: $color-primary;
	text-decoration: none;
}

.app-card h2 a:focus,
.app-card h2 a:hover {
	color: $color-primary-hover;
}

.app-card h3 {
	font-size: 21px;
	font-weight: bold;
}

.app-card .heading {
	display: flex;
	justify-content: space-between;
	margin-bottom: 28px;
}

.app-card .heading button.options {
	min-height: 32px;
	min-width: 32px;
	padding: 5px 5px 5px 8px;
}

.card-content ul {
	margin-top: 38px;
}

.card-content li {
	border-left: 5px solid $color-highlight;
	border-radius: $radius;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
	line-height: 20px;
}

.card-content .subfield-list li {
	border-left: 5px solid #cfdde9;
}

.card-content .subfield-list li.add-item {
	border-left: none;
}

.app-card svg.add:focus circle,
.app-card svg.add:hover circle {
	fill: $color-primary-hover;
}

.app-card svg.add-small:focus circle,
.app-card svg.add-small:hover circle {
	fill: #fff;
	stroke: $color-primary;
}

.app-card svg.add-small:focus path,
.app-card svg.add-small:hover path {
	fill: $color-primary;
}