:root {
	
	--main-color: #1b2560;
	--main-bg-color: white;
	--main-grid-color:#e1f0ef;
	

	/* --main-bg-color:#041a3c;
	--main-color:#b1b7c1;
	--main-grid-color:#264471; */

	/* --main-bg-color:#1e310f;
	--main-color:#acb5a4;
	--main-grid-color:#475c37; */

	/* --main-bg-color:white;
	--main-color:#ff3d00;
	--main-grid-color:#ffe8e2; */

	/* --main-bg-color:white;
	--main-color:#4cb400;
	--main-grid-color:#e6ffd3; */

	--main-margin: 40px;
	--grid-margin: 5px;
	--diashow-left: 59px;
	--diashow-right:40px;
}
@font-face {
	font-family: 'Samsung';
	src: url('../font/SamsungOne-200C_v1.1.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

html,
body {
	width: 100%;
	height: 100%;
	font-family: 'Samsung', sans-serif;
	font-size: 1.5vw;
	color: var(--main-color);
	background-color: var(--main-bg-color);
}

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.menu {
	top: 0px;
	left: 0px;
	position: absolute;
	width: 33.33%;
	height: 100%;
	/* background-color: rgba(255,0,0,0.5); */
}
.menu div:first-child,
.diashow .diashow_content {
	position: absolute;
	top: var(--main-margin);
	left: var(--main-margin);
	right: var(--main-margin);
	bottom: var(--main-margin);
	/* background-color: rgba(255,255,255,0.7); */
	padding: 5px;
}
.diashow .diashow_content{
	top: var(--main-margin);
	bottom: var(--main-margin);
	left: var(--diashow-left);
	right: var(--diashow-right);
}
.menu div.point,
#folder_list,
.menu div.point div {
	position: relative;
	top: 0px;
	left: 0px;
	right: inherit;
	bottom: inherit;
	background-color: transparent;
	padding: 0px;
}
#folder_list{
	margin-top:-8px;
}
.menu div.point {
	/* margin-top: 30px; */
	/*background-image: url('../gfx/circle.svg');
    background-repeat: no-repeat;
    background-position: top left;
	background-size:3px; */
	margin-top: 44px;
    line-height: 3.0vw;
}
.menu div.point div {
	opacity: 0;
	transition: opacity 0.5s ease-out;
}
.menu div.point.visible div {
	opacity: 1;
}

.menu div.point div {
	margin-left: 10px;
}
.menu div.point div div {
	margin-left: 0px;
}
.menu div.point:first-child {
	margin-top: 0px;
}
.menu div:first-child .legend {
	position: absolute;
	bottom: 10px;
	left: 10px;
	right: 10px;
	font-size: 1.5vw;
}
.menu div.point div hr {
	border: none;
	height: 2px;
	/* Set the hr color */
	color: var(--main-color);
	background-color: var(--main-color);
	width: 75%;
	text-align: left;
	margin-left: 0;
	margin-top:1.1vw;
	margin-bottom:1.4vw;
}
.menu div.point.reduced {
	margin-top: 0px;
	/* background-image: none; */
}

.diashow {
	position: absolute;
	top: 0px;
	left: 33.33%;
	width: 66.66%;
	height: 100%;
	/* background-color: rgba(0,0,255,0.5); */
}
.selector {
	user-select: none;
	cursor: pointer;
	line-height: 2.57vw;
}
.selector.active,
.menu div.point.active {
	font-weight: bold;
}
.slideshow_image {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-flex;
	overflow: hidden;
	margin: var(--grid-margin);
	will-change: width, height, transform;
	transform: translateX(0) translateY(0);
	transition: width 0.5s ease-out, height 0.5s ease-out, transform 0.5s ease-out;
}
#time{
	line-height: 2.8vw;
}
#weekday {
	font-size: 1.5vw;
	line-height: 1.3vw;
}
#slideshow {
	position: absolute;
	top: var(--grid-margin);
	left: var(--grid-margin);
	bottom: var(--grid-margin);
	right: var(--grid-margin);
	/* width:100%;
    height:100%; */
	pointer-events: none;
	overflow: hidden;
}

#slideshow div {
	position: absolute;
	opacity: 1;
	transform: translateX(0) translateY(0);
	/* transition:transform 6.0s ease-in-out; */
}
#weather {
	display: inline-flex;
	align-items: center;
	max-height: 2.5vw;
}
#weather img {
	filter: grayscale();
	width: 5vw;
	height: 5vw;
	margin-left: 1vw;
}
#time {
	font-size: 2vw;
}
#news {
	line-height: 2.3vw;
}
audio {
	display: none;
}
.tmp{
	display:inline-flex;
	font-size:3vw;
	width:6vw;
}
.forcast{
	/* border-bottom:solid 2px var(--main-color); */
	/* border-bottom:solid 1px var(--main-color); */
	padding:20px;
	margin-top:44px;
}
.forcast:nth-child(1){
	margin-top:10.2vw;
	/* border-top:solid 2px var(--main-color); */
}
.forcast .day{
	display:inline-flex;
	width:8vw;
}
.forcast hr{
	border: none;
	height: 2px;
	/* Set the hr color */
	color: var(--main-color);
	background-color: var(--main-color);
	margin-top:42px;
}