/*
	CSS Stylesheet „groups“
	Version 2023-11-14a
	© 2023 m-ds GmbH
*/

#overlay_groups {
	background      : white;
	align-items     : flex-start;
	display         : none;
	height          : 100%;
	justify-content : center;
	position        : absolute;
	top             : 0;
	width           : 100%;
}

#overlay_groups > .btn_close {
	align-items     : center;
	background      : orange;
	border          : 2px solid white;
	border-radius   : 50%;
	box-shadow      : 0 0 8px rgba(0, 0, 0, 0.2);
	color           : white;
	display         : flex;
	font-size       : 4vh;
	font-weight     : bold;
	height          : 8vh;
	justify-content : center;
	position        : absolute;
	right           : 16px;
	top             : 16px;
	width           : 8vh;
}

#overlay_groups > .content {
	font-size  : 4vh;
	width      : 100%;
	max-height : 100%;
	overflow   : auto;
}

#overlay_groups > .content table {
	border-collapse : collapse;
	width           : 100%;
}

#overlay_groups > .content tr {
	background : linear-gradient(#fff, #eee);
}

#overlay_groups > .content tr.selected {
	color : lime;
}

#overlay_groups > .content td {
	padding : 0.25em;
}

#overlay_groups.visible {
	display : flex;
}

@media (hover: hover) {
	#overlay_groups > .btn_close, #overlay_groups > .content tr {
		cursor : pointer;
	}

	#overlay_groups > .btn_close:hover {
		background : red;
	}

	#overlay_groups > .content tr:hover {
		background : linear-gradient(#fff, #ddf);
	}
}