/*
	CSS Stylesheet period
	Version 2023-11-16a
	© 2023 m-ds GmbH
*/

#overlay_setPeriod {
	background      : white;
	align-items     : flex-start;
	display         : none;
	height          : 100%;
	
	position        : absolute;
	top             : 0;
	width           : 100%;


}


#overlay_setPeriod > * {
	width  : 40%;
	margin: 2vh auto;
}


#overlay_setPeriod.visible {
	display : flex;
	flex-direction: column;

}
/****************************************************************************************************
	current child period
*/

#overlay_setPeriod input,
#overlay_setPeriod select
{
	font-size: 3vh;
	padding: 2px 0px;
}

#overlay_setPeriod #endPeriod {
	margin-right: 10px;
}

button.setPeriod {
	align-items     : center;
	background      : #5a0;
	border          : 1px solid #490;
	border-radius   : 50%;
	display         : inline-flex;
	color           : white;
	font-size       : 3vh;
	height          : 4vh;
	justify-content : center;
	outline         : none;
	width           : 4vh;
}



#overlay_setPeriod > #setPeriod_buttons {
	display         : flex;
	justify-content : space-between;
}

#overlay_setPeriod > #setPeriod_buttons > * {
	border-radius : 2vh;
	color         : white;
	font-size     : 3vh;
	outline       : none;
	padding       : 0.5em 1em;
}

#overlay_setPeriod > #setPeriod_buttons > #setPeriodForChild {
	background : var(--meki-green-1);
	border     : 1px solid var(--meki-green-2);
	color      : var(--meki-green-3);
}

#overlay_setPeriod > #setPeriod_buttons > #canceSetPeriod {
	background : var(--meki-red-1);
	border     : 1px solid var(--meki-red-2);
	color      : var(--meki-red-3);
}


@media (hover: hover) {

	
	button.setPeriod {
		cursor : pointer;
	}

	button.setPeriod:hover {
		background : #af0;
		border     : 1px solid #9e0;
	}
	
	#overlay_setPeriod > #setPeriod_button > * {
		cursor : pointer;
	}

	#overlay_setPeriod > #setPeriod_buttons > #setPeriodForChild:hover {
		background : var(--meki-green);
		border     : 1px solid var(--meki-green-3);
		color      : white;
		cursor : pointer;
	}

	#overlay_setPeriod > #setPeriod_buttons > #canceSetPeriod:hover {
		background : var(--meki-red);
		border     : 1px solid var(--meki-red-3);
		color      : white;
		cursor : pointer;
	}
	
}