/* CUSTOM CSS - ACESSADOS RECENTEMENTE */

div.recentaccess { z-index: 888; position: fixed; top: 0; right: -100%; width: 450px; height: 100vh; padding-bottom: 10px; background-color: #fafafa; box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.6); transition: 0.4s; }

div.recentaccess.active { right: 0px; transition: 0.3s; }


div.recentaccess > span.title { font-weight: 450; font-size: 16px; display: block; width: 100%; padding: 15px 15px 0px 15px; }
div.recentaccess > hr.separator-title { margin: 6px 0px 24px 15px; border: none; border-top: 1px solid rgba(0, 0, 0, 0.1); width: 100px; }

div.recentaccess > span.user { cursor: pointer; display: block; width: 100%; float: left; padding: 15px 25px; transition: 0.4s; }
div.recentaccess > span.user:hover { background-color: rgba(0, 0, 0, 0.05); transition: 0.2s; }

div.recentaccess > span.user > img.picture { width: 60px; height: 60px; box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.15); margin: 0px; float: left; border-radius: 100%; }
div.recentaccess > span.user > img.picture.default { border: 1px solid #fff; }
div.recentaccess > span.user > span { display: block; width: 80%; font-size: 14px; margin: 0 auto; float: left; padding-left: 20px; }
div.recentaccess > span.user > span.name { margin-top: 6px; font-size: 18px; }

div.recentaccess.slideon { animation: slideon-recentaccess 0.4s; }
div.recentaccess.slideoff { animation: slideoff-recentaccess 0.4s; }


@keyframes slideon-recentaccess {
	0% { right: -100%; }
	100% { right: 0%; }
}


@keyframes slideoff-recentaccess {
	100% { right: -100%; }
	0% { right: 0%; }
}


/* TELA PRETA ATRÁS DO PAINEL DO PERFIL DO USUÁRIO */
div.recentaccess-background { opacity: 0; visibility: hidden; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.01); z-index: 887; transition: 0.15s; transition-timing-function: ease-in; }

div.recentaccess-background.active { visibility: visible; opacity: 1; transition: 0.3s; background-color: rgba(0, 0, 0, 0.7); transition-timing-function: ease-out; }



/* CSS CONTENT - TELA MOBILE */
@media only screen and (max-width: 600px) {
	div.recentaccess, div.recentaccess-background { display: none !important; }
}