.cp-mgrid {
	border: none;
	padding: .1rem;
}
.cp-mgrid .gt {
	display: block;
	padding: .5rem 1rem;
	font-weight: 700;
	color: #fff;
	background-color: #777;
	margin-bottom: .25rem;
}
.cp-mgrid .gd {
	margin-bottom: 2rem;
}
.cp-mgrid .acl:hover {
	background-color: transparent;
}
.cp-mgrid__label {
	width: 135px;
	font-weight: bolder;
}
.cp-mgrid__grid {
	display: grid;
	grid-template-columns: .13fr 1fr;
	gap: 1rem;
	position: relative;
	padding: 1.2rem 0;
	border-bottom: 1px solid #eee;
	/*min-height: 50px;*/
}
.cp-mgrid__grid--colspan {
	grid-column: span 2;
}
.cp-mgrid__checks {
	display: flex;
	flex-direction: column;
}
.cp-mgrid__check {
	display: grid;
	grid-template-columns: .13fr 1fr;
	gap: 1rem;
	padding: .25rem 0;
}
.cp-mgrid__actions > a {
	margin-right: .5rem;
}
.cp-mgrid__actions > a > span {
	display: none;
}
.cp-mgrid .acl > div {
	margin-top: .5rem;
	display: flex;
	align-items: center;
	background-color: #eee;
	border: 1px solid #ccc;
	padding: .5rem;
	margin-right: .5rem;
	border-radius: .35rem;
}
.cp-mgrid .acl > div > img {
	margin-right: .5rem;
}
.cp-mgrid .acl > div:hover {
	background-color: #ccc;
	border-color: #aaa;
}
.cp-mgrid__button {
	margin-left: 0;
	background-color: #ddd;
	border-color: #ddd;
	color: #333;
	font-size: 1.2rem;
	padding: 1rem 1.5rem;
}
.cp-mgrid__button:hover {
	background-color: #333;
	border-color: #333;
	color: #fff;
}

@media screen and (max-width: 850px) {
	.cp-mgrid__check {
		flex-basis: 33%;
		margin-right: 0;
	}
}


@media screen and (max-width: 767px) {
	.cp-mgrid .gt {
		margin-bottom: 0;
	}
	.cp-mgrid__actions {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: .5rem;
	}
	.cp-mgrid__actions > a {
		flex-basis: 45%;
		padding: .5rem;
		text-align: center;
		height: auto;
		font-size: 1.1rem;
		font-weight: 700;
	}
	.cp-mgrid__actions > a.cp-mgrid__actions--edit {
		background-color: #f26722;
		border: 3px solid #f26722;
		color: #fff;
	}
	.cp-mgrid__actions > a.cp-mgrid__actions--edit:hover {
		background-color: #333;
		border: 3px solid #333;
	}
	.cp-mgrid__actions > a.cp-mgrid__actions--delete {
		background-color: transparent;
		border: 3px solid #f26722;
		color: #f26722;
	}
	.cp-mgrid__actions > a.cp-mgrid__actions--delete:hover {
		border-color: #333;
		color: #333;
	}
	.cp-mgrid__actions > a > img {
		display: none;
	}
	.cp-mgrid__actions > a > span {
		display: block;
	}
	.cp-mgrid__button {
		width: 100%;
	}
}

@media screen and (max-width: 500px) {
	.cp-mgrid__check {
		flex-basis: 50%;
		margin: .15rem 0;
	}
	.cp-mgrid__actions > a {
		flex-basis: 40%;
		font-size: 1rem;
	}
}