/* 여기에 스타일을 구현해 주세요 */

/* reset style */
html,body{margin: 0;padding: 0;}

/* screen reader only */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* avatars css */
.avatars{
	.avatars_layout{
		width: 400px;
		margin: auto;
		text-align: center;
	}

	ul.user_access_list{
		margin: 0;
		padding: 10px;

		>li{
			position: relative;
			display: inline-block;
			margin: 10px;
			font-size: 0;
			list-style: none;
		}

		.user_img{
			border-radius: 50%;
			object-fit: cover;
			background-color: #ddd;
		}

		.access_state{
			position: absolute;
			right: 0;
			bottom: 0;
			display: inline-block;
			width: 18px;
			height: 18px;
			border: 1px solid #fff;
			border-radius: 50%;
			background-color: #fff;

			&[data-state-type="on"]{background-color: #dbdbdb;}
			&[data-state-type="off"]{background-color: #4CFE88;}
		}
	}
}