.sso-max-width {
	max-width: 1400px;
}

.sso-patch-element:hover {
	background-color: #f1f1f1;
	cursor: pointer;
}

/* GRID STYLING */
.sso-patch-grid-6, .sso-patch-grid-8, .sso-patch-grid-10, .sso-patch-grid-12, .sso-patch-grid-16, .sso-patch-grid-24, .sso-patch-grid-25 {
	display: grid;
	grid-gap: 10px;
	text-align: center;
	width: auto;
	padding: 4px;
	border-style: solid;
	border-width: 3px;
	border-color: #333333;
	border-radius: 8px;
}

.sso-patch-grid-6 {
	grid-template-columns: auto auto auto auto auto auto;
}

.sso-patch-grid-8 {
	grid-template-columns: auto auto auto auto auto auto auto auto;
}

.sso-patch-grid-10 {
	grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
}

.sso-patch-grid-12 {
	grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
}

.sso-patch-grid-16 {
	grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
}

.sso-patch-grid-24 {
	grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
}

.sso-patch-grid-25 {
	grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
}

/* RESPONSIVE */
@media screen and (max-width: 1200px) {
	html, .sso-patch-grid-6, .sso-patch-grid-8, .sso-patch-grid-10, .sso-patch-grid-12, .sso-patch-grid-16, .sso-patch-grid-24, .sso-patch-grid-25 {
		overflow-x: scroll;
	}
}