:root {
	--row-back: white;		/* Light */

	--menu-back: white;

	--widget-back: white;
	--widget-border: #f16314;	/* deep orange */

	--separator-back: orange;

	--header-back: orange;
	--header-text: white;

	--item-text: #353551;		/* Grey */
	--item-back: white;
	--item-border: orange;
	--item-link: #f16314;	/* deep orange */
	--deepred: #FF4040;						/* Chinese deep red */
}

@font-face {
    font-family: 'Roboto'; /* Name your font */
    src: url('../fonts/Roboto-Thin.ttf') format('truetype');
}
@font-face {
    font-family: 'RobotoThick'; /* Name your font */
    src: url('../fonts/Roboto-Thick.ttf') format('truetype');
}

.row-background {
	background: var(--row-back);
}
.menu-block {
	width: 100%;
	height: 100%;
	background-color: var(--menu-back);
	overflow: auto;
}
.menuimage {
	min-width: 100px! important;
	min-height: 100px! important;
}
.menu-image {
    width: 100%;
    height: 100%;
    display: flex;
}
.menu-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.menu-widget {
	background-color: var(--widget-back);
	width: calc(100% - 15px);
	color: var(--widget-border);
	overflow: auto;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 8px;
	padding-bottom: 8px;
	border: 2px var(--widget-border) solid;
	border-bottom: 3px var(--widget-border) solid;
	border-top: 10px var(--widget-border) solid;
	border-top-right-radius: 10px;

	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	font-size: 17px;
	line-height: 24px;
}

.menuitemcontainer {
  display: flex;
  margin-left: 200px;
  margin-right: 20px;
}
.menuitem {
  margin: 0px;
  padding: 0px;
  padding-left: 10px;
  padding-right: 10px;
}

.minheight {
	min-height: 200px!important;
}
.widget-container {
	width: 100%;
	padding-top: 30px;
}
.widget-character {
	display: inline-block;
	width: 100%;
	font-size: 100px;
	font-weight: 800;
	color: var(--deepred);
	text-align: center;
}
.widget-pinyin {
	display: inline-block;
	width: 100%;
	font-size: 20;
	font-weight: 100;
	color: var(--deepred);
	text-align: center;
	margin-top: 20px;
}

.widgettable {
	display: table;
	border: 0px;
	border-collapse: collapse;
}
.widgetrow {
	display: table-row;
}
.widgetcell {
	display: table-cell;
	padding: 5px;
	background-color: white;
	vertical-align: top;
}
.widgetcell.left {
	width: 40px;
}
.widgetweer {
	width: 40px;
	height: 40px;
}
/* PHONE MENU */

.smallscreen {
	display: none;
}
.borderbottom {
	border-bottom: 3px var(--separator-back) solid;
}
.dashlogo {
	font-size: 24px;
	font-weight: 800;
	position: fixed;
	color: var(--nav-smallitem-color);
	background-color: white;
	padding: 15px;
	border-radius: 30px;
	top: 19px;
	left: 40px;
	opacity: 0.7;
	z-index: 1000;
}

.item-block {
	width: 100;
	margin-top: 20px;
	margin-bottom: 50px;
	margin-left: 10px;
	margin-right: 10px;
	background-color: clear;
}
.item-header {
	background-color: var(--header-back);
	width: calc(100% - 15px);
	height: 20px;
	color: var(--header-text);
	text-align: center;
	border-top-right-radius: 10px;
}
.item-text {
	background-color: var(--item-back);
	width: calc(100% - 15px);
	color: var(--item-text);
	overflow: auto;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 8px;
	padding-bottom: 8px;
	border: 2px var(--item-border) solid;
	border-bottom: 3px var(--item-border) solid;
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	font-size: 17px;
	line-height: 24px;
}
.item-image {
	width: calc(100% - 15px);
	padding-left: 5px;
	padding-right: 5px;
	object-fit: cover;
}
.item-link {
	color: var(--item-link);
	text-decoration: none;
}
.image-link {
	text-decoration: none;
}
.alarm-block {
	background-color: red;
	color: white;
	margin: 10px;
	margin-top: 25px;
	margin-bottom: 0px;
	text-align: center;
	font-weight: 800;
	font-size: 20px;
}
.alarm-text {
	color: #555555;
	background-color: #f7f7f7;
	font-weight: 400;
	border: 3px red solid;
	margin-left: 10px;
	margin-right: 10px;
	padding: 5px;
}
.chinese-character {
	font-size: 60px;
	font-weight: 800;
	text-align: center;
	color: var(--deepred);
}
.chinese-meaning {
	color: var(--deepred);
	text-align: center;
	font-weight: 800;
}
/* EXECUTED FOR SCREENSIZE SMALLER AS 950PX */

@media (max-width: 950px) {
	.row {
		background-color: white;
	}
	.dashlogo {
		display: none;
	}
	.menu-block {
		display: none;
	}
	.menu-image {
		display: none;
	}

	.rowitem.c1 { width:  100%; }
	.rowitem.c2 { width:  100%; }
	.rowitem.c3 { width:  100%; }
	.rowitem.c4 { width:  100%; }
	.rowitem.c5 { width:  100%; }
	.rowitem.c6 { width:  100%; }
	.rowitem.c7 { width:  100%; }
	.rowitem.c8 { width:  100%; }
	.rowitem.c9 { width:  100%; }
	.rowitem.c10 { width: 100%; }
	.rowitem.c11 { width: 100%; }
	.rowitem.c12 { width: 100%; }

}