.admin-menu{
	.color{
		&.premium{background-color: #495;}
		&.trial{background-color: #c49856;}
		&.lite{background-color: #999;}
		&.soon{background-color: #d49856;}
		&.sooner{background-color: #b44;}
		&.belatedly{background-color: #495;}
		&.idle{background-color: #999;}
		&.expired{background-color: #a44;}
		&.subscription{background-color: #c49856;}
		&.running{background-color: #495;}
	}
}
.top-item{
	display: flex;
	flex-direction: row;
	height:44px;
	background-color:#122;
	color:#fff;
	padding:5px 10px;
	box-sizing: border-box;
	cursor: pointer;
	user-select: none;

	.item-icon{
		position: relative;
		font-size:24px;
		line-height: 34px;
		padding: 0 10px 0 5px;
	}

	.item-text{
		font:20px "Gravity";
		font-weight: 300;
		padding:0 5px;
		line-height: 32px;
	}
	.item-info{
		display: flex;
	}
	.info-icon{
		height:1px;flex:1 1 auto;
		position: relative;
		top:-3px;
		color:#fff;
		font-size:10px;
		line-height: 14px;
		text-align: center;
		margin:2px;
	}
}
.top-menu{
	.top-menu-item{
		text-decoration: none;
		color:#fff;
		flex:0 0 40px;
		box-sizing: border-box;
		display:flex;
		flex-direction: row;
		user-select: none;
		cursor: pointer;
		position: relative;

		.upper{
			text-transform: uppercase;
		}
		&.no-pointer{
			cursor: default;
		}
		.top-menu-item-icon{
			position: relative;
			font-size:24px;
			height:40px;
			line-height: 40px;
			flex:0 0 40px;
			text-align:center;
			background-color:#455;
		}
		.top-menu-item-text{
			font:16px "Gravity";
			font-weight: 300;
			line-height: 40px;
			padding:0 5px;
			flex:1 1 auto;
			&:hover{background-color:#366}
		}
		&:hover{
			.top-menu-item-icon{background-color:#566}
			.top-menu-item-text{background-color:#366}
		}
		.top-menu-item-button{
			font-size:20px;
			line-height: 40px;
			text-align: center;
			flex:0 0 40px;
			cursor:pointer;
		}
		.bt-off{
			background-color:#aa1d25;
		}
		.bt-off:hover{
			background-color:#0d7400;
		}
		.bt-on{
			background-color:#0d7400;
		}
		.bt-on:hover{
			background-color:#aa1d25;
		}
		.top-menu-item-label{
			font:13px "Gravity";
			font-weight: 300;
			line-height: 40px;
			padding:0 5px;
			flex:1 1 auto;
			font-weight: bold;
		}
	}
	.separator{
		border-bottom:1px solid #566;
	}

}
.notif-counter{
	position: absolute;
	width:14px;
	height:14px;
	border-radius: 7px;
	background-color:rgb(204, 92, 28);
	color:#fff;
	top:2px;right:2px;
	font:10px "Roboto";
	line-height: 13px;
	text-align: center;
}
.top-menu-grid{
	display: grid;
	grid-template-columns: 40px auto 25px;

	.top-menu-grid-leftcol{
		grid-column: 1;
		grid-row: 1 / 5;
		background-color:#455;
	}
	.top-menu-grid-value{
		font:13px "Gravity";
		font-weight: 300;
		padding:0 0 0 5px;
		height:25px;
		line-height: 23px;
	}
	.top-menu-grid-button{
		padding:0 5px 0 5px;
		height:25px;
		line-height: 23px;
		cursor: pointer;
		text-align: center;
	}
	.top-menu-grid-button.color-free{
			background-color: #666;
	}
	.top-menu-grid-button.color-ok{
		background-color: rgb(33, 102, 47);
	}
	.top-menu-grid-button.color-expire{
		background-color: rgb(170, 108, 21);
	}
	.top-menu-grid-button.color-expired{
		background-color: rgb(155, 34, 34);
	}
}
.lws-adm-notices-wrapper{
	position: absolute;
	top:0;
	right:300px;
	background-color: #566;
	display: none;
	grid-template-columns: minmax(400px, auto);
	gap:5px;
	padding:5px;
	cursor: default;
	color: #000;
	user-select: text;

	.lws-notice{
		border:none;
		border-left:10px solid #ccc;
		background-color:#eee;
		color:#000;
		margin:0;
		box-shadow: none;
		display: flex;

		&.information{
			border-color: rgb(48, 163, 71);
		}
		&.warning{
			border-color: rgb(221, 143, 35);
		}
		&.error{
			border-color: rgb(212, 30, 30);
		}
		.text{
			flex:1 1 auto;
			padding:10px;
		}
		.dismiss-btn{
			display: flex;
			justify-content: center;
			align-items: center;
			background-color:#ddd;
			transition: all 0.3s ease;
			padding:10px;
			cursor: pointer;
			user-select: none;

			&:hover{
				background-color: #016087;
				color:#fff;
			}
		}
	}
}
.start-trial-button{
	background-color: #01871e;
	color:#fff;
	display: flex;
	justify-content: center;
	align-items: center;
	padding:0 10px;
	font:20px "Gravity";
	font-weight: 300;
	text-decoration:none;
	cursor: pointer;
	user-select: none;
	transition: all 0.3s ease;

	&:hover{
		background-color :  #1baf34;
		color:#fff;
	}
}