*{
	box-sizing: border-box;
}
html{
	position: fixed;
	width: 100%;
	height: 100%;
}
body{
	font-family: Mikhak;
	padding: 0;
	margin: 0;
	/*margin-block-start: 60px;*/
	/*overflow-x: scroll;*/
	position: absolute;
	width: 100%;
	height: 100%;
}
a{
	text-decoration: none;
}
#container{
	inset-block-end: 0px;
	inset-inline-start: 0px;
	width: 100%;
	height: calc(100% - 60px);
	position: fixed;
	/*overflow-y: hidden;*/
}
#main{
	display: grid;
	grid-template-columns: repeat(49,1fr);
	position: absolute;
	inset-block-start: 30px;
	inset-inline-start: 0px;
	width: 100%;
	height: calc(100% - 30px);
}
#main>div{
	border-inline-end: 1px solid #ddd;
	/*border-block-end: 1px solid #ddd;*/
	display: flex;
	justify-content: center;
	align-items: center;
}
#toolbar{
	position: fixed;
	width: 100%;
	height: 60px;
	inset-block-start: 0px;
	inset-inline-start: 0px;
	display: grid;
	grid-template-columns: repeat(4, auto);
	align-items: center;
	color: white;
	z-index: 3;
}
#toolbar>div{
	padding: 0px 3px;
}
#time{
	display: grid;
	grid-template-columns: repeat(49,1fr);
	position: absolute;
	/*top: 60px;*/
	inset-block-start: 0px;
	inset-inline-start: 0px;
	width: 100%;
	height: 30px;
	/*z-index: 2;*/
	border-block-end: 1px solid #ccc;
}
#time div{
	font-size: 10px;
	text-align: end;
	border-inline-end: 1px solid #ddd;
}
#time div.hour{
	display: inline-block;
	background-color: white;
	transform: translateX(-50%);
	border: none;
}
#cell-1,#cell-50,#cell-99,#cell-148,#cell-197,#cell-246,#cell-295{
	position: sticky;
	inset-inline-start: 0;
	background-color: white;
	z-index: 4;
	overflow-x: hidden;
}

#main > div:nth-child(n + 1):nth-child(-n + 49),
#main > div:nth-child(n + 99):nth-child(-n + 147),
#main > div:nth-child(n + 197):nth-child(-n + 245),
#main > div:nth-child(n + 295):nth-child(-n + 343) 
{
    background-color: #ecf0f1;
    border-block-end: 1px solid #ccc;
    border-block-start: 1px solid #ccc;
}

h1 a{
	color: white;
}

.iframe{
	width: 100%;
	min-height: 400px;
}


#tasks{

}

.task{
	/*border: 1px solid black;*/
	flex-direction: column;
	border-radius: 9px;
	position: absolute;
	text-align: center;
	overflow: hidden;
}

.task .note{
	text-overflow: ellipsis;
	max-height: 30%;
	overflow: hidden;
	/*position: absolute;
	inset-inline-end: 4px;
	inset-block-end: 2px;*/
}

@media screen and (max-width: 1024px)
{
	.task h6{
		font-size: 11px;
	}
}

@media screen and (max-width: 600px)
{
	#container{
		overflow-x: scroll;
	}
	#main,#time{
		width: 250%;
	}
}

@media screen and (max-height: 400px)
{
	.task .start-end{
		font-size: 9px;
	}
	.task{
		justify-content: flex-start !important;
	}
}