@import "../../../css/ui.less";

.uiOnline {
	display: none;
	background-color: @blackB;
	border: 5px solid @blackB;
	text-align: center;
	width: 450px;
	height: 400px;

	> .heading {
		color: @blueA;
		width: 100%;
		height: 36px;
		background-color: @blackB;

		.heading-text {
			padding-top: 8px;
			margin: auto;
		}
	}

	.bottom {
		height: calc(100% - 35px);
		background-color: @blackC;
		padding: 10px;

		.list {
			width: 100%;
			height: 100%;
			overflow-y: auto;
			background-color: @darkGray;


			.heading {
				height: 24px;
				color: @white;

				> div {
					float: left;
					padding: 4px;
					
					&:nth-child(1) {
						width: 10%;
					}

					&:nth-child(2) {
						width: 55%;
					}

					&:nth-child(3) {	
						width: 35%;
					}
				}
			}


			.onlineUser {
				color: @grayC;
				height: 24px;
				cursor: pointer;

				> div {
					float: left;
					padding: 4px;
					
					&:nth-child(1) {
						width: 10%;
					}

					&:nth-child(2) {
						width: 55%;
					}

					&:nth-child(3) {	
						width: 35%;
					}
				}

				&:hover {
					background-color: lighten(@darkGray, 25%);
				}
			}
		}
	}
}
