/*  ===========================================================================  
    UTILS
    =========================================================================== */

.pad-top-small {
	padding-top: var(--groupui-sys-spacing-200);
}

.pad-top-medium {
	padding-top: var(--groupui-sys-spacing-400);
}

.pad-top-large {
	padding-top: var(--groupui-sys-spacing-600);
}

.pad-bottom-small {
	padding-bottom: var(--groupui-sys-spacing-200);
}

.pad-bottom-medium {
	padding-bottom: var(--groupui-sys-spacing-400);
}

.pad-bottom-large {
	padding-bottom: var(--groupui-sys-spacing-600);
}

.mar-top-small {
	margin-top: var(--groupui-sys-spacing-200);
}

.mar-top-medium {
	margin-top: var(--groupui-sys-spacing-400);
}

.mar-top-large {
	margin-top: var(--groupui-sys-spacing-600);
}

.visually-hidden {
	position: absolute !important;
	height: var(--groupui-sys-spacing-25);
	width: var(--groupui-sys-spacing-25);
	overflow: hidden;
	clip: rect(
		var(--groupui-sys-spacing-25) var(--groupui-sys-spacing-25)
			var(--groupui-sys-spacing-25) var(--groupui-sys-spacing-25)
	); /* IE6, IE7 */
	clip: rect(
		var(--groupui-sys-spacing-25),
		var(--groupui-sys-spacing-25),
		var(--groupui-sys-spacing-25),
		var(--groupui-sys-spacing-25)
	);
	white-space: nowrap; /* added line */
}

.show-element {
	display: inline;
}

.show-element.hide {
	display: none;
}

.clear-padding {
	padding: 0;
}

.sr-only {
	position: absolute;
	width: var(--groupui-sys-spacing-25);
	height: var(--groupui-sys-spacing-25);
	padding: 0;
	margin: calc(var(--groupui-sys-spacing-25) * -1);
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}