body {
	-webkit-appearance: none;
	appearance: none;
}

@font-face {
	font-family: 'JhengheiRegular';
	font-style: normal;
	font-weight: normal;
	src: url('msjhrg.woff') format('woff');
}

button {
	border: none;
	cursor: pointer;
}

.WindowsXAML {
	padding: 0.5vw 1.9vw;
	font-family: 'JhengheiRegular';
	font-size: 4vh;
	color: black;
	margin: 2px 6px;
	border-radius: 15px;
	background: rgb(254, 254, 254);
	box-shadow: 0px 1px 3px 0px #4a4a4a;
	border: 1px solid #4a4a4a;
	transition: 0.2s;
	opacity: 0.9;
}

.WindowsXAML:hover {
	background: rgb(250, 250, 250);
	border: 1px solid #5a5a5a;
	color: #444;
	opacity: 1;
}

.WindowsXAML:active {
	background: rgb(250, 250, 250);
	box-shadow: none;
	border: 1px solid #6a6a6a;
	color: #888;
	opacity: 1;
}

.WindowsXAMLDark {
	padding: 0.5vw 1.9vw;
	font-family: 'JhengheiRegular';
	font-size: 4vh;
	color: #eee;
	margin: 2px 6px;
	border-radius: 15px;
	background: rgb(55, 55, 55);
	box-shadow: 0px 1px 3px 0px rgb(43, 43, 43);
	border: 1px solid rgb(77, 77, 77);
	transition: 0.2s;
	opacity: 0.95;
}

.WindowsXAMLDark:hover {
	background: rgb(60, 60, 60);
	border: 1px solid rgb(60, 60, 60);
	color: white;
	opacity: 1;
}

.WindowsXAMLDark:active {
	background: rgb(50, 50, 50);
	box-shadow: none;
	border: 1px solid rgb(60, 60, 60);
	color: #aaa;
	opacity: 1;
}

input {
	border-radius: 10px;
	padding: 5px 10px;
	border: none;
	background: rgba(255, 255, 255, 0.5);
}

select {
	border-radius: 10px;
	padding: 5px 10px;
	border: none;
	background: rgba(255, 255, 255, 0.5);
}

.Timerstart {
	color: white;
	font-size: 8.3vh;
	font-family: Segoe UI;
	border-radius: 15px;
	background: linear-gradient(#18E53E, #127524);
	padding: 10px 20px;
}

.Timerstart:active {
	background: linear-gradient(0deg, #18E53E, #127524);
}

.Timerstart1 {
	color: #18E53E;
	font-size: 80px;
	font-family: '7Seg';
	border-radius: 10px;
	background: none;
	padding: 10px 20px;
}

.Timerstart1:active {
	color: #0D8123;
}

.Timercancel {
	color: #f00;
	font-size: 4.1vw;
	font-family: '7Seg';
	border-radius: 10px;
	background: none;
	padding: 10px 20px;
}

.Timercancel:active {
	color: #a00;
}

.Timerpause {
	color: #FF7B00;
	font-size: 4.1vw;
	font-family: '7Seg';
	border-radius: 10px;
	background: none;
	padding: 10px 20px;
}

.Timerpause:active {
	color: #9E4D00;
}

.inputTimer {
	font-size: 9.2vh;
	font-family: HelvBold;
	background: none;
	color: #E0EAFF;
	text-align: center;
	width: 10.4vw;
	transition: 0.2s;
	border: 2px solid #fff;
}

.buttonclose {
	font-size: 54px;
	color: #000;
	background: linear-gradient(#ffdb00, #8B7800);
	margin: 2px 6px;
	font-family: Segoe UI;
	border-radius: 10px;
	padding: 5px 25px;
}

.buttonclose:active {
	color: #ffdb00;
	background: linear-gradient(0deg, #666, #000);
}

.buttonmenu {
	font-size: 54px;
	color: black;
	margin: 2px 6px;
	font-family: Segoe UI;
	border-radius: 10px;
	padding: 5px 25px;
}

.buttonnum {
	background-image: linear-gradient(#666666, #000000);
	border-radius: 15px;
	font-size: 5vw;
	padding: 0vw 1.8vw;
	font-family: HelvBold;
	color: white;
}

.buttonnum:active {
	background-image: linear-gradient(#000000, #666666);
}

.buttoncall {
	background-image: linear-gradient(#FF0000, #7B0000);
	font-size: 5.5vh;
	color: white;
	margin: 2px 6px;
	padding: 1vh 2vh;
	font-family: Segoe UI;
	border-radius: 10px;
	padding: 1vh 1.5vh;
}

.buttoncall:active {
	background-image: linear-gradient(0deg, #FF0000, #7B0000);
}

.buttoncall2 {
	background-image: linear-gradient(#33C51F, #1A6310);
	font-size: 5.5vh;
	color: white;
	margin: 2px 6px;
	padding: 1vh 2vh;
	font-family: Segoe UI;
	border-radius: 10px;
	padding: 1vh 2vh;
}

.buttoncall2:active {
	background-image: linear-gradient(0deg, #33C51F, #1A6310);
}

.buttoncall3 {
	background-image: linear-gradient(#395CAB, #1C2D53);
	font-size: 5.5vh;
	color: white;
	margin: 2px 6px;
	padding: 1vh 2vh;
	font-family: Segoe UI;
	border-radius: 10px;
	padding: 1vh 2vh;
}

.buttoncall3:active {
	background-image: linear-gradient(0deg, #395CAB, #1C2D53);
}

.buttoncall4 {
	background-image: linear-gradient(#F1C20C, #A7870C);
	font-size: 5.5vh;
	color: black;
	margin: 2px 6px;
	padding: 1vh 2vh;
	font-family: Segoe UI;
	border-radius: 10px;
	padding: 1vh 2vh;
}

.buttoncall4:active {
	background-image: linear-gradient(0deg, #F1C20C, #A7870C);
}

.buttonclear {
	border-radius: 15px;
	font-size: 5vw;
	padding: 0vw 0.8vw;
	font-family: Segoe UI;
	background-image: linear-gradient(#FF859C, #E3002C);
	color: white;
}

.buttonclear:active {
	background-image: linear-gradient(#E3002C, #FF859C);
}

@font-face {
	font-family: '7Seg';
	font-style: normal;
	font-weight: normal;
	src: url('dseg7.woff') format('woff');
}

@font-face {
	font-family: 'HelvBold';
	font-style: normal;
	font-weight: normal;
	src: url('hbold.woff') format('woff');
}

.bulletinboard {
	font-family: Segoe UI Bold;
	font-size: 13vh;
	color: #E0EAFF;
}

.timernum {
	font-family: '7Seg';
	font-size: 15vw;
	color: #EF1717;
	opacity: 1;
}

.buttonsel {
	font-family: Segoe UI;
	font-size: 4vh;
	color: black;
	border-radius: 8px;
	padding: 0.5vh 2vh;
	background: #aaa;
}

.buttonchange {
	font-family: Segoe UI;
	font-size: 48px;
	color: black;
	border-radius: 5px;
	background: #77bc1f;
}

.imgdetract {
	opacity: 0.3;
	height: 8vh;
	z-index: 3;
	transition: 0.3s;
}

.imgdetract:hover {
	opacity: 0.8;
}

.butdetract {
	font-size: 36px;
	opacity: 0.01;
	transition: 0.3s;
}

.butdetract:hover {
	opacity: 0.8;
}

/* Color Picker 2x Properties */

.colorpicker.colorpicker-2x {
	width: 238px;
}

.colorpicker-2x .colorpicker-saturation {
	width: 200px;
	height: 200px;
}

.colorpicker-2x .colorpicker-hue,
.colorpicker-2x .colorpicker-alpha {
	width: 30px;
	height: 200px;
}

.colorpicker-2x .colorpicker-alpha,
.colorpicker-2x .colorpicker-preview {
	background-size: 20px 20px;
	background-position: 0 0, 10px 10px;
}

.colorpicker-2x .colorpicker-preview,
.colorpicker-2x .colorpicker-preview div {
	height: 30px;
	font-size: 16px;
	line-height: 160%;
}

.colorpicker-saturation .colorpicker-guide {
	height: 10px;
	width: 10px;
	border-radius: 10px;
	margin: -5px 0 0 -5px;
}

/* Top Menu Buttons*/
.ImgShow {
	color: white;
	background: linear-gradient(#C48C31, #7B5921);
}

.ImgShow:active {
	background: linear-gradient(0deg, #C48C31, #7B5921);
}

.CurrentTime {
	color: white;
	background: linear-gradient(#E3002C, #94001D);
}

.CurrentTime:active {
	background: linear-gradient(0deg, #E3002C, #94001D);
}

.PickerMenu {
	background: linear-gradient(#008659, #005337);
	color: white;
}

.PickerMenu:active {
	background: linear-gradient(0deg, #008659, #005337);
}

.Notice {
	background: linear-gradient(#F8B61C, #966F15);
	color: white;
}

.Notice:active {
	background: linear-gradient(0deg, #F8B61C, #966F15);
}

.TimerCss {
	background: linear-gradient(#0070BD, #003D67);
	color: white;
}

.TimerCss:active {
	background: linear-gradient(0deg, #0070BD, #003D67);
}

.imgid {
	opacity: 0.3;
	transition: 0.3s;
}

.imgid:hover {
	opacity: 1;
}


/*switch*/
/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 56px;
	height: 26px;
}

/* Hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: none;
	border: 1px solid #222;
	-webkit-transition: .1s;
	transition: .1s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 15px;
	width: 15px;
	left: 5px;
	bottom: 5px;
	background-color: #222;
	-webkit-transition: .1s;
	transition: .1s;
}

input:checked+.slider {
	background-color: #2196F3;
	border: 1px solid #2196F3;
}

input:active+.slider {
	box-shadow: 0 0 1px #333;
	background-color: white;
}


input:checked+.slider:before {
	-webkit-transform: translateX(30px);
	-ms-transform: translateX(30px);
	transform: translateX(30px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 80px;
}

.slider.round:before {
	border-radius: 50%;
}