/**/
/**/
/* control panels */
/**/
/**/

html,
body {
	height: 100%;
	overflow: hidden;
	/*-webkit-overflow-scrolling: touch;*/
	/*overflow-scrolling: touch;*/
}
html.black {
	/*background: #111;*/
	background: #000 !important;
}
html.theme-white {
	background: #fff !important;
}
html.theme-black {
	filter: invert(1);
}

html body {
	margin: 0;
	width: 100%;
	/*display: -webkit-box;*/
	/*display: -ms-flexbox;*/
	/*display: flex;*/
	/*-webkit-box-pack: center;*/
	/*-ms-flex-pack: center;*/
	/*justify-content: center;*/
	/*-webkit-box-align: center;*/
	/*-ms-flex-align: center;*/
	/*align-items: center;*/
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	/*background-size: 200px;*/
	background-size: 40vh;
	position: fixed;
	text-align: center;
}
html.black body {
	/*background: #111;*/
	background-color: #000 !important;
	/*background-image: url("bg%20logo%20white%20transparent%20redstrip.png");*/
}
html.theme-white body {
	background-color: #fff !important;
	/*background-image: url("bg%20logo%20black%20transparent%20redstrip.png");*/
}
html.nologo body {
	background-image: none;
}
@media only screen and (orientation: portrait) {
	body {
		background-size: 22.5vh;
	}
}
.clock-wrapper {
	/*width: 50vw;*/
	/*height: 50vw;*/
	width: 100%;
	height: 100%;
	/*height: 70%;*/
}
.clock-wrapper .clock-analog {
	width: 100%;
	height: 100%;

	transform: translateY(10%);
	height: 83%;

	position: absolute;
}

.row-centered {
	height: 100%;
	/*height: calc(100% - 2rem);*/
	display: grid;
	justify-content: center;
	align-content: center;
}
.row-top,
.row-bottom {
	width: 100%;
	/*height: 100px;*/
	/*height: 80px;*/
	/*height: 82px;*/
	height: 92px;
	position: absolute;
	/*background: aliceblue;*/

	/*border: solid 1px #000;*/
	font-family: sans-serif;
	font-weight: 100;
	color: #aaa;
	/*color: #eee;*/
	/* color: rgba(170, 170, 170, 0.3); */
	/*color: #e2e2e2;*/
	/*color: #828282;*/
	/*color: #929292;*/
	font-size: 8.28vh;
	/*font-size: 7vh;*/
	font-size: 5vh;
	z-index: 1000;
}
.row-top {
	top: 0;
}
.row-bottom {
	bottom: 0;
}
.row .control {
	/*margin-top: 10px;*/
	/*margin-bottom: 10px;*/
}
/* iPhone 4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
	.row-top,
	.row-bottom {
		height: 45px;
	}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
}
/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
	.row-top,
	.row-bottom {
		height: 45px;
	}
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
}
/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
	.row-top,
	.row-bottom {
		height: 45px;
	}
}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
}
/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
	.row-top,
	.row-bottom {
		height: 45px;
	}
}
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
}
/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
	.row-top,
	.row-bottom {
		height: 45px;
	}
}
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
}
/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
	.row-top,
	.row-bottom {
		height: 45px;
	}
}
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
}

/**/
/**/
/* control title */
/**/
/**/

.row-top .title {
	position: absolute;
	width: calc(100% - 8rem);
	bottom: 0;
	margin: 0 4rem;
	color: #444;
	background: #fff;
}
body[state="started"] .row-top .title {
	color: blue;
}
body.alarm .row-top .title {
	color: red;
}

/**/
/**/
/* control clock analog */
/**/
/**/

/* circle */
.clock-analog .clock {
	stroke-width: 1px;
}
html.black .clock-analog .clock {
	fill: #191919;
	fill: rgba(25, 25, 25, 0.98);
	fill: rgba(25, 25, 25, 0);
	fill: rgba(0, 0, 0, 0.82);
	fill: rgba(0, 0, 0, 0.65);
	/*stroke: #222;*/
}
html.theme-white .clock-analog .clock {
	/* fill: rgba(255, 255, 255, 0.13); */
	/*stroke: #222;*/
	/*display: none;*/
}

/* hands cross point */
.clock-analog .fulcrum {
	stroke-width: 0px;
}
html.black .clock-analog .fulcrum {
	/*fill: #333;*/
	/*stroke: #ddd;*/
	/*stroke-width: 1px;*/

	/*fill: #555;*/
	/*stroke: #fff;*/
	/*stroke-width: 1px;*/

	fill: #eee;
	stroke: #eee;
}
html.theme-white .clock-analog .fulcrum {
	/* fill: #eee;
	stroke: #eee;
	fill: #ccc;
	stroke: #ccc;
	fill: #aaa; */
	fill: #444;
}
html.theme-white body[state="started"] .clock-analog .fulcrum {
	fill: blue;
}
html.theme-white body.alarm .clock-analog .fulcrum {
	fill: red;
}

/* hand cursors */
.clock-analog .hand-seconds,
.clock-analog .hand-minutes,
.clock-analog .hand-hours,
.clock-analog [class^="face"] {
	-webkit-transform-origin: 100px 100px;
	transform-origin: 100px 100px;
}
.clock-analog .hand-seconds {
	stroke-width: 1px;
}
html.black .clock-analog .hand-seconds {
	stroke: #ddd;
	stroke: #fff;
}
html.theme-white .clock-analog .hand-seconds {
	stroke: #ddd;
	stroke: #fff;
}
.clock-analog .hand-minutes {
	stroke-width: 4px;
}
html.black .clock-analog .hand-minutes {
	stroke: #aaa;
	stroke: #ccc;
	/*stroke: #ddd;*/
	/*stroke: #eee;*/
}
html.theme-white .clock-analog .hand-minutes {
	stroke: #aaa;
	/* stroke: #ccc; */
	/*stroke: #ddd;*/
	/*stroke: #eee;*/
	/* stroke: #c6c719; */
}
.clock-analog .hand-hours {
	stroke-width: 4px;
}
html.black .clock-analog .hand-hours {
	stroke: #aaa;
	stroke: #ccc;
	/*stroke: #ddd;*/
	/*stroke: #bbb;*/
}
html.theme-white .clock-analog .hand-hours {
	stroke: #444;
	/* stroke: #666; */
	/* stroke: #aaa; */
	/*stroke: #ccc;*/
	/*stroke: #ddd;*/
	/*stroke: #bbb;*/
	/* stroke: #9a9b13; */
	/* opacity: 0.6; */
}
html.theme-white body[state="started"] .clock-analog .hand-hours {
	stroke: blue;
}
html.theme-white body[state="started"].alarm .clock-analog .hand-hours {
	stroke: red;
}
html.theme-white .clock-analog .hand-cutout {
	/* opacity: .4; */
	/* stroke-width: 1px; */
}
html.theme-white .clock-analog .cutout-start {
	stroke: green;
}
html.theme-white .clock-analog .cutout-end {
	stroke: red;
}
body[state] .clock-analog .hand-cutout,
body[state] .clock-analog .cutout-start,
body[state] .clock-analog .cutout-end {
	display: none;
}
body .clock-analog .cutout-start,
body .clock-analog .cutout-end {
	display: none;
}
body[state="started"] .clock-analog .cutout-start,
body[state="started"] .clock-analog .cutout-end {
	display: block;
	display: none !important;
}
/* body[state="started"] .clock-analog .hand-minutes.cutout-start,
body[state="started"] .clock-analog .hand-minutes.cutout-end {
	display: block !important;
	stroke: lime;
} */

/* circle stops */
.clock-analog [class^="face"] {
	stroke-width: 1px;
}
html.black .clock-analog [class^="face"] {
	stroke: #000;
	/*stroke: #444;*/
	/*stroke: #666;*/
	/*stroke: #aaa;*/
	/* stroke: #ccc; */
}
html.theme-white .clock-analog [class^="face"] {
	stroke: #000;
	stroke: #444;
	/*stroke: #666;*/
	/*stroke: #aaa;*/
	/* stroke: #ccc; */
}
.clock-analog .face-0 {
	stroke-width: 4px;
}
.clock-analog .face-1 {
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
}
.clock-analog .face-2 {
	-webkit-transform: rotate(60deg);
	transform: rotate(60deg);
}
.clock-analog .face-3 {
	-webkit-transform: rotate(15deg);
	transform: rotate(15deg);
}
.clock-analog .face-4 {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.clock-analog .face-5 {
	-webkit-transform: rotate(75deg);
	transform: rotate(75deg);
}
body.ch-12 .clock-analog .face-3,
body.ch-12 .clock-analog .face-4,
body.ch-12 .clock-analog .face-5 {
	display: none;
}
body.ch-24 .clock-analog .hand-minutes {
	display: none;
}

/**/
/**/
/* control countdown digital */
/**/
/**/

.countdown-digital {
	/* color: black; */
	/* color: blue; */
}
.countdown-digital .input {
	background: #444;
	color: white;
}
body[state="started"] .countdown-digital .input {
	background: blue;
	color: white;
}
body.alarm .countdown-digital .input {
	background: red;
	color: white;
}
.countdown-digital > * {
	vertical-align: middle;
}
.countdown-digital,
.countdown-digital input {
	font-size: 7.34vh;
}
.countdown-digital input {
	width: 11vh;
	text-align: center;
	border: none;
	background: none;
	padding: 0;
}
.countdown-digital .time-spitter {
	position: relative;
	top: -4px;
	margin: 0 0.1rem;
}

.container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	gap: 0px 0px;
	grid-auto-flow: row;
	grid-template-areas: "menu-top--left menu-top--right";
}

.menu-top--left {
	grid-area: menu-top--left;
}

.menu-top--right {
	grid-area: menu-top--right;
}

.button--switch-1224 {
	position: relative;
	top: 1rem;
	cursor: pointer;
}

.button-dot {
	width: 2.2rem;
	display: inline-block;
	cursor: pointer;
	font-size: 5vh;
}
.countdown-digital[state="started"] .button-startstop {
	color: limegreen;
}
.countdown-digital[state="stopped"] .button-startstop {
	/*color: red;*/
	color: #444;
	color: #aaa;
}
.countdown-digital .button-dot.button-empty {
	color: #fff;
}

.button-reset {
	color: #aaa !important;
}

.button--cache-clear {
	position: absolute;
	right: 0;
	padding: 1rem;
	color: #aaa;
}
.button--cache-clear:hover {
	color: red;
}

canvas#pie {
	width: 100%;
	/* height: 100%; */
	max-height: 100vh;
}