.userbox {
	background-color: rgba(240,240,240,1);
	position: absolute;
	right: 25px;
	margin-top: -10px;
	z-index: 9999;
	
}
.userbox .user a {
	padding: 12px;
	font-weight: 500;
	display: block;
	text-decoration: none;
	transition: 0.25s ease-in-out;
	z-index: 9999;
	
}
.userbox .user a:hover img {
	filter: none;
}
.userbox .user a:hover {
	background-color: rgba(192,57,43,1);
	background-color: var(--main_color);
	color: rgba(255,255,255,1);
}
.userbox .sub_userbox {
	display: block;
	height: 0px;
	overflow: hidden;
	transition: 0.25s ease-in-out;
}
.userbox .sub_userbox ul li:hover {
	cursor: pointer;
}
.userbox:hover .sub_userbox {
	
	height: auto;
	
}
.userbox .sub_userbox ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}
.userbox .sub_userbox li a {
	text-decoration: none;
	color: rgba(0,0,0,1);
	padding: 0px;
	margin: 0px;
	display: block;
	padding: 12px;
	transition: 0.25s ease-in-out;
}
.userbox .sub_userbox li:hover a{
	color: rgba(255,255,255,1);
}
.userbox .sub_userbox ul li {
	transition: 0.25s ease-in-out;
}
.userbox .sub_userbox ul li img, .userbox .user a img {
	max-width: 20px;
	max-height: 20px;
	float: left;
	margin-right: 10px;
	filter: invert(100%);
		transition: 0.25s ease-in-out;
	

}
.userbox .sub_userbox ul li:hover {
	background-color: rgba(192,57,43,1);
	background-color: var(--main_color);
	color: rgba(255,255,255,1);
	
}
.userbox .sub_userbox ul li:hover img {
	filter: none;
}

.userbox img.rotate_left {
	-webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}