/* Removing Common and Checklist Spaces from portal page */
.tile:is(
	[data-vp-name="Elements Documentation"], [data-vp-name="Elements Checklist"]
) {
	display: none;
}

/*START COMPONENT-BANNER CSS */
.component-banner {
	background-color: #FFFFE0;
	color: #0083d4;
	font-family: nbAkademie-bold, Helvetica, Arial, sans-serif;
  	font-weight: 400;
	padding: .5em 1.75rem .5em .75rem;
    position: relative;
  	z-index: 101;
}

@media print,
screen and (min-width:64em) {
	.component-banner {
		padding: .5em 4.5rem .5em 2rem
	}
}

@media print,
screen and (max-width:63.99875em) {
	.component-banner--control-available {
		padding-right: 3.5em
	}
}

@media print,
screen and (max-width:63.99875em) {
	.component-banner--control-available .component-banner__dismiss {
		right: 2.5rem
	}
}

.component-banner.hidden {
	display: none;
}

.component-banner__dismiss {
	transition: color .2s ease;
	color: #80869a;
	font-weight: 700;
	font-size: 1.5em;
	position: absolute;
	right: .75rem;
	top: .05em
}

@media print,
screen and (min-width:64em) {
	.component-banner__dismiss {
		right: 1rem
	}
}

.component-banner__dismiss:focus,
.component-banner__dismiss:hover {
	color: #000c34;
	cursor: pointer
}

.component-banner__content {
	margin-bottom: 0;
	position: relative
}

@media print,
screen and (min-width:64em) {
	.component-banner__content {
		overflow-x: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}
}

.component-banner a.link-arrow,
.component-banner a.link-arrow:visited {
	transition: background-size .4s ease;
	background: linear-gradient(180deg, transparent 65%, #25e9a4 0);
	background-size: 0 100%;
	background-repeat: no-repeat;
	color: #000c34;
	display: inline-block;
	font-family: nbAkademie-regular, Helvetica, Arial, sans-serif;
  	font-weight: 400;
	position: relative;
	padding-right: 30px;
	width: auto;
    text-decoration-line: none;
  	text-decoration-style: solid;
}


.component-banner a,
.component-banner a:visited {
	color: #000c34;
	display: inline-block;
	font-family: nbAkademie-regular, Helvetica, Arial, sans-serif;
}

.component-banner a.text-link:hover {
  	text-decoration: underline;
}

@media print,
screen and (min-width:64em) {
	.component-banner a.link-arrow,
	.component-banner a.link-arrow:visited {
		margin-left: 23px;
		display: inline
	}
}

.component-banner a.link-arrow:after,
.component-banner a.link-arrow:visited:after {
	transition: all .2s ease;
	background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.659 11.659'%3E%3Cg fill='none' stroke='%23000c34' stroke-linecap='round'%3E%3Cpath d='M8.379 3.253l2.573 2.573-2.666 2.666' stroke-linejoin='round'/%3E%3Cpath d='M10.951 5.826L.707 5.832'/%3E%3C/g%3E%3C/svg%3E") no-repeat
	background-position: left center;
	background-repeat: no-repeat;
	content: "";
	height: 1.5rem;
	position: absolute;
	right: .3125rem;
	width: .8125rem
}

.component-banner a.link-arrow:focus,
.component-banner a.link-arrow:hover,
.component-banner a.link-arrow.link-arrow:visited:focus,
.component-banner a.link-arrow:visited:hover {
	background-size: 100% 100%;
}

.component-banner a.link-arrow:focus:after,
.component-banner a.link-arrow:hover:after,
.component-banner a.link-arrow:visited:focus:after,
.component-banner a.link-arrow:visited:hover:after {
	right: 0
}
/*END COMPONENT-BANNER CSS */

/* FOOTER */

footer[data-vp-component="footer"] {
  position: relative;
}


.footer-image-container {
  position: absolute;
  bottom: 1rem;
  right:  2rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  z-index: 10; /* ensures it sits on top */
}
/* FOOTER */