.tx_dbaystyleguide .downloadContainer .downloadElement .downloadButton,
.tx_dbaystyleguide .styleguideFont .fontInformations .downloadButton {
	width: 30px;
	height: 30px;
	align-self: center;
	margin-left: auto;
	opacity: 0;
	transition: opacity;
	transition-duration: .5s;
}

.tx_dbaystyleguide .downloadContainer .downloadElement:hover .downloadButton,
.tx_dbaystyleguide .styleguideFont .fontInformations:hover .downloadButton {
	opacity: 1;
	transition: opacity;
	transition-duration: .5s;
}

.tx_dbaystyleguide .downloadContainer .downloadElement .downloadButton svg,
.tx_dbaystyleguide .styleguideFont .fontInformations .downloadButton svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tx_dbaystyleguide .downloadContainer .downloadElement .downloadButton svg path,
.tx_dbaystyleguide .styleguideFont .fontInformations .downloadButton svg path {
	fill: var(--infoColor, #605F60);
	transition: fill;
	transition-duration: .5s;
}

.tx_dbaystyleguide .downloadContainer .downloadElement:hover .downloadButton:hover svg path,
.tx_dbaystyleguide .styleguideFont .fontInformations:hover .downloadButton:hover svg path {
	fill: var(--accentColor, #C40005);
	transition: fill;
	transition-duration: .5s;
}

.tx_dbaystyleguide .styleguideColor .colorInformations h4,
.tx_dbaystyleguide .styleguideFont h4 {
	margin-top: 10px;
	margin-bottom: 5px;
}

.tx_dbaystyleguide .styleguideColor .colorInformations .copyValueToClipboard,
.tx_dbaystyleguide .styleguideFont .fontInformations .copyValueToClipboard {
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 14px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	padding: 2px 5px;
	border-radius: 5px;
	background-color: transparent;
	transition: background-color;
	transition-duration: .5s;
}

.tx_dbaystyleguide .styleguideColor .colorInformations .copyValueToClipboard:hover,
.tx_dbaystyleguide .styleguideFont .fontInformations .copyValueToClipboard:hover {
	background-color: #d3d3d3;
	transition: background-color;
	transition-duration: .2s;
}

.tx_dbaystyleguide .styleguideColor .colorInformations .copyValueToClipboard .colorValue,
.tx_dbaystyleguide .styleguideFont .fontInformations .copyValueToClipboard .fontValue {
	width: 80%;
	text-overflow: ellipsis;
}

.tx_dbaystyleguide .styleguideColor .colorInformations .copyValueToClipboard .copyButton,
.tx_dbaystyleguide .styleguideFont .fontInformations .copyValueToClipboard .copyButton {
	align-self: center;
	width: 20%;
	height: 20px;
	display: flex;
	align-items: center;
}

.tx_dbaystyleguide .styleguideColor .colorInformations .copyValueToClipboard .copyButton svg,
.tx_dbaystyleguide .styleguideFont .fontInformations .copyValueToClipboard .copyButton svg {
	height: 16px;
	width: 100%;
	object-fit: contain;
}

.tx_dbaystyleguide .styleguideColor .colorInformations .copyValueToClipboard .copyButton:hover,
.tx_dbaystyleguide .styleguideFont .fontInformations .copyValueToClipboard .copyButton:hover {
	cursor: pointer;
}

.tx_dbaystyleguide .styleguideColor .colorInformations .copyValueToClipboard .copyButton svg path,
.tx_dbaystyleguide .styleguideFont .fontInformations .copyValueToClipboard .copyButton svg path {
	fill: var(--fontColor, #212121);
	transition: fill;
	transition-duration: .5s;
}

.tx_dbaystyleguide .styleguideColor .colorInformations .copyValueToClipboard .copyButton:hover svg path,
.tx_dbaystyleguide .styleguideFont .fontInformations .copyValueToClipboard .copyButton:hover svg path {
	fill: var(--accentColor, #C40005);
	transition: fill;
	transition-duration: .5s;
}