/* CSS general para los paneles (todas las medidas) */
/* Borde y fondo de los paneles */
#panel-notifications, #panel-user { border-radius: 5px; background-color: white; position: fixed; width: 250px; }
/* hovers de los links */
#panel-notifications > a > div:hover, #panel-user ul li a:hover{ background-color: #F2F1F1 !important; }
/* div circulares para los iconos */
.circle{ background-color: #D97941; border-radius: 50%; box-shadow: 0 0 3px #000; height: 10px; left: 25px; position: absolute; top: 25px; width: 10px; }
/* Links de usuario */
#panel-user ul li a{ display: block; padding: 2px 7px;}
/* Quitamos el padding de usuarios */
#panel-user ul{ padding: 0; }
/* Borde rayado de los links de panel-user */
.border-dashed{ border-bottom: 1px dashed #E6E6E6 }
/* estilos para los paneles */
#panel-notifications, #panel-user{ display: none; z-index: 999; }
/* estilos para la imagen de la notificacion */
#panel-notifications .avatar img{ max-height: 60px; max-width: 60px; }
/* estilos para el panel de notificaciones */
#panel-notifications .content-notifications{ overflow-y: auto; max-height: 300px; }
/* estilos para el panel de notificaciones para los items */
#panel-notifications .content-notifications li{ border-bottom: 1.8px dashed #ccc; }

#panel-notifications .content-notifications li:hover{ background-color: #F5F5F5; transition-duration: .3s; }
/* estilos para el panel de notificaciones para el ultimo item */
#panel-notifications .content-notifications li:last-child{ border-bottom: none; }