/* Buttons */
button {
	width: 100%;
    padding: 1rem;
    background-color: var(--accent);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s;
}
button:hover {
	background-color: #1e74ad;
}

button.green-button {
	background-color:#2DAB2D;
}
button.green-button:hover {
	background-color:#48BD48;
}

button.secondary-button {
	color:#000 !important;
	background-color:#effd2f !important;
}
button.secondary-button:hover {
	background-color:#fdd63c !important;
}

button.red-button {
	background-color:#FF3E3E;
}
button.red-button:hover {
	background-color:#FF595E;
}

button.grey-button,
button.gray-button {
	background-color:#666;
}
button.grey-button:hover,
button.gray-button:hover {
	background-color:#7E7E7E;
}

button.button-50 {
	min-width:40px !important;
}
button.button-50 .button-icon {
	margin:0;
}

.ripple-effect {
	position:absolute;
	border-radius:50%;
	width:30px;
	height:30px;
	background-color:#FFF;
	animation:ripple-animation 1s;
}
@keyframes ripple-animation {
	from {
		-webkit-transform:scale(1);
		transform:scale(1);
		opacity:.7;
	}
	to {
		-webkit-transform:scale(25);
		transform:scale(25);
		opacity:0;
	}
}

@media (min-width:767px){
	button {
		max-width:400px;
	}
}