/*
	CSS Stylesheet „child“
	Version 2023-11-16a
	© 2023 m-ds GmbH
*/

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

#overlay_child > .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_child > .content {
	font-size  : 4vh;
	width      : 100%;
	max-height : 100%;
	overflow   : auto;
	padding    : 4vh;
}

#overlay_child > .content table {
	border-collapse : collapse;
}

#overlay_child > .content td {
	padding        : 0.25em;
	vertical-align : top;
}

#overlay_child > .content td:nth-child(2) {
	color        : #ddd;
	padding-left : 1em;
	width        : 100%;
}

#overlay_child.visible {
	display : flex;
}

@media (hover: hover) {
	#overlay_child > .btn_close {
		cursor : pointer;
	}

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

/****************************************************************************************************
	add note
*/

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

#overlay_newNote > * {
	width  : 62%;
}

#overlay_newNote > #note {
	background  : linear-gradient(#eee, #fff 20%);
	border      : 1px solid silver;
	color       : var(--meki-blue);
	font-family : monospace;
	font-size   : 4vh;
	height      : 30%;
	margin      : 2vh 0;
	outline     : none;
	overflow    : auto;
	padding     : 0.25em;
}

#overlay_newNote > #note:focus {
	border-color : var(--meki-blue);
}

#overlay_newNote > #note_buttons {
	display         : flex;
	justify-content : space-between;
}

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

#overlay_newNote > #note_buttons > #saveNewNote {
	background : var(--meki-green-1);
	border     : 1px solid var(--meki-green-2);
	color      : var(--meki-green-3);
}

#overlay_newNote > #note_buttons > #cancelNewNote {
	background : var(--meki-red-1);
	border     : 1px solid var(--meki-red-2);
	color      : var(--meki-red-3);
}

#overlay_newNote.visible {
	display : flex;
}

@media (hover: hover) {
	#overlay_newNote > #note_buttons > * {
		cursor : pointer;
	}

	#overlay_newNote > #note_buttons > #saveNewNote:hover {
		background : var(--meki-green);
		border     : 1px solid var(--meki-green-3);
		color      : white;
	}

	#overlay_newNote > #note_buttons > #cancelNewNote:hover {
		background : var(--meki-red);
		border     : 1px solid var(--meki-red-3);
		color      : white;
	}
}

/****************************************************************************************************
	portrait
*/

@media (orientation: portrait) {
	#overlay_child > .content {
		font-size : 4vw;
		padding   : 4vw;
	}

	#overlay_newNote > #note {
		font-size : 4vw;
		margin    : 2vw 0;
	}

	#overlay_newNote > #note_buttons > * {
		border-radius : 2vw;
		font-size     : 3vw;
	}
}