﻿.add-accession-to-shopping-cart { transition: transform .2s ease-in-out; transform: scale(1); display: inline-block; font-size: 1.2em; }
.add-accession-to-shopping-cart:hover { transform: scale(1.5) rotate(-5deg); }
.remove-from-shopping { color: #22CC22; cursor: pointer; text-shadow: none; text-shadow: 0px 0px 2px rgba(200,200,0,0.5); }
.add-to-shopping { color: #808080; cursor: pointer; text-shadow: 0px 0px 2px rgba(0,0,0,0.2); }

.shopping-cart { font-size: 1.5em; display: inline-block; position: relative; color: #000000; }
.shopping-cart:hover { color: #000000; }
.shopping-cart:hover i { transform: scale(1.2) rotate(-5deg); }
.shopping-cart i { transition: transform .2s ease-in-out; transform: scale(1); display: inline-block; }
.shopping-cart span.shopping-cart-count { background: rgba(200, 0, 0, 1); color: white; position: absolute; right: -0.8em; top: 0; padding: 0px 9px; font-size: 0.6em; font-weight: bold; border-radius: 1em; }


@keyframes slideIn {
	from { top: -100px; }
	to { top: 10px; }
}

@keyframes slideOut {
	from { top: 10px; }
	to { top: -100px; }
}

.shoppng-cart-alert { position: fixed !important; right: 10px; background-color: #FFFFAA; /* Color de fondo de la alerta (personalizable) */ border-color: #F0F0A0; /* Borde de la alerta (personalizable) */ padding: 10px; border-radius: 5px; animation-duration: 1s; box-shadow: 1px 1px 10px rgba(0,0,0,0.5); }

.alert-slide-in { animation-name: slideIn; animation-fill-mode: forwards; }
.alert-slide-out { animation-name: slideOut; animation-fill-mode: forwards; }

