.btbutton .viato_widget {
	padding: 0 17px;
	font: var(--font-normal);
	background-color: var(--color-secondary);
	cursor: pointer;
	transition: background-color 0.1s ease;
}

.btbutton .viato_widget:hover {
	background-color: var(--color-secondary-light);
}

.btbutton.btn-dark .viato_widget {
	background-color: var(--color-primary);
}

.btbutton.btn-dark .viato_widget:hover {
	background-color: var(--color-primary-light);
}

.btbutton .icon-before,
.btbutton .icon-after {
	padding: 0;
	color: var(--color-bright);
}

.btbutton .icon-before[class*="fa"] {
	padding-right: 7px;
	padding-left: 0;
}

.btbutton .icon-after[class*="fa"] {
	padding-right: 0;
	padding-left: 7px;
}

.btbutton.btn-dark .icon-before,
.btbutton.btn-dark .icon-after {
	color: var(--color-bright);
}

.btbutton .btbutton-text {
	padding: 8px 0;
	color: var(--color-bright);
}

.btbutton .btbutton-text:hover {
	text-decoration: none;
}

.btbutton.btn-dark .btbutton-text {
	color: var(--color-bright);
}

a.button {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 25px;
	color: var(--color-black);
	font: var(--font-small);
	font-weight: var(--fontweight-semibold);
	background-color: var(--color-extra-dark-snow);
	transition: background-color 0.1s ease;
}

a.button:hover {
	text-decoration: none;
	background-color: var(--color-smoke);
}

a.button[data-style="secondary"] {
	color: var(--color-bright);
	background-color: var(--color-secondary);
}

a.button[data-style="secondary"]:hover {
	background-color: var(--color-secondary-light);
}