*, ::before, ::after {
	margin:0;
	box-sizing:border-box;
}

html, body {
	height:100%;
}

body {
	display:flex;
	flex-direction:column;
}

header {
	display:flex;
	flex-shrink:0;
	padding:5px 20px;
	background:#7b7b7b;
	align-items:center;
	justify-content:space-between;
}

/*header h1 {
	float:left;
	padding:5px 10px 5px 20px;
}

header button.add_task {
	float:right;
	margin:10px 20px 0 0;
}*/

main {
	flex-grow:1;
	display:flex;
	flex-shrink:0;
/*	padding:10px;*/
	flex-wrap:wrap;
	background:#ddd;
/*	align-content:start;*/
	justify-content:space-evenly;
}

main > form {
	flex-grow:0;
	display:flex;
	flex-shrink:0;
	border-radius:5px;
	flex-direction:column;
	border:1px black solid;
}

main > div.card {
	width:190px;
	margin:5px;
	padding:5px;
	display:flex;
	flex-shrink:0;
	background:#c6c6c6;
	position:relative;
	border-radius:5px;
	flex-direction:column;
	border:1px solid black;
}

main > div.card.active {
	border-color:green;
	background-color:#9fca9f;
}

main > div.card > .header, main > div.card > form > .header {
	display:flex;
}

main > div.card > .header > .hidden_btns, main > div.card > form > .header > .hidden_btns {
	flex-grow:0;
	display:none;
	flex-shrink:0;
}

main > div.card:hover > .header > .hidden_btns, main > div.card:hover > form > .header > .hidden_btns {
	display:block;
}

main > div.card > .header .del, main > div.card > .header .edit, main > div.card > form > .header .del, main > div.card > form > .header .edit {
	top:-10%;
	margin-right:5px;
	position:relative;
}

main > div.card > .header > .title, main > div.card > form > .header > .title {
	flex-grow:1;
	flex-shrink:1;
}

main > div.card > form > .header > .title input {
	width:100%;
}

main > div.card > .header > .play_stop_btn, main > div.card > form > .header > .play_stop_btn {
	flex-grow:0;
	flex-shrink:0;
}

/*main > div.card > .header .play {*/
/*main > div.card > .header .stop {*/
/*}*/
main > div.card > .header .play, main > div.card > .header .stop, main > div.card > form > .header .close {
	cursor:default;
	color:transparent;
}


main > div.card > form > .header .close::after {
	top:1px;
	right:3px;
	color:black;
	content:'X';
	position:absolute;
}

main > div.card > .header .play::after {
	top:1px;
	right:3px;
	color:black;
	content:'\25ba';
	position:absolute;
}

main > div.card > .header .stop::after {
	top:1px;
	right:3px;
	color:black;
	content:'=';
	position:absolute;
	display:inline-block;
	transform:rotate(90deg) scale(1.5);
}

main > div.card > .content, main > div.card > form > .content {
}

main > div.card > form > .content input, main > div.card > form > .content textarea {
	width:100%;
}

main > div.card > .content > .time {
}

main > div.card > .content > .desc {
	display:none;
}

main > div.card:hover > .content > .time {
	display:none;
}

main > div.card:hover > .content > .desc {
	display:block;
}

div.window {
	width:100%;
	height:100%;
	display:flex;
	position:fixed;
	background:#0008;
	align-items:center;
	justify-content:center;
}

div.window > .main {
	padding:5px;
	display:flex;
	max-height:100%;
	overflow-x:clip;
	overflow-y:auto;
	background:#ddd;
	border-radius:5px;
	flex-direction:column;
	border:1px black solid;
}

div.window > .close {
	top:10px;
	right:10px;
	position:absolute;
}