/* Project:		gTimer
 * Version:		1.0.5
 * Author:		Grzegorz Petri
 * Contact:		gpetri13@gmail.com
 * Descripton:	Implementation of School Timers with configurable CountDownTimer helping to manage some time related tasks 
 */
html {
		font-size: 12px;
		font-family: Lato;
}
.version:after {
	content: '1.0.5';
}
.timers {
	position: relative;
	margin: 10rem auto;
	min-width: 200px;
	text-align: center;
	width: 60%;
}
.timer {
	position: relative;
	display: block;
	float: right;
	height: 7rem;
	outline: solid 0 #808080;
}
.timer > label, .timer > input, .timer > button {
	border: solid 2px #62b8e3;
	display: inline-block;
	margin: .5rem 0;
	font-size: 3rem;
	line-height: 4rem;
	padding: 0;
	height: 5rem;
	width: 33%;
	vertical-align: top;
}
.timer > label {
	/*--bgColor: rgb(180,180,180);*/
	background-image: linear-gradient(120deg, var(--bgColor) 80%, white 20%);
	border-right: unset;
	border-top-left-radius: 5% 50%;
	border-bottom-left-radius: 5% 50%;
	color: #fff;
	text-shadow: #404040 1px 1px 1px;
	text-align: center;
	line-height: 5rem;
}
.timer > input {
	border-top: solid 2px #62b8e3;
	border-bottom: solid 2px #62b8e3;
	border-left: unset;
	border-right: unset;
	font-family: Georgia;
	text-align: center;
	transition: ease-in 800ms;
}
.timer > input:focus {
	color: #0592d9;/*36a0d5*/
	font-weight: 800;
}
.timer > input:disabled {
	background-image: linear-gradient(120deg, #fff 5%, rgb(232,232,231) 95% );
	color: #606060;
	cursor: not-allowed;
}
.timer > button,
.timer > button.started:focus,
.timer > button.started:hover {
	background-image: linear-gradient(0deg, rgb(180,180,180), rgb(232,232,232));
	border-left: unset;
	border-top-right-radius: 5% 50%;
	border-bottom-right-radius: 5% 50%;
	cursor: pointer;
	font-size: 4rem;
	height: 5.3rem;
}
.timer > button.started,
.timer > button:hover,	.timer > button:focus {
	background-image: linear-gradient(0deg, rgb(232,232,232), rgb(232,232,232));
}
.NOTtimer > button:after {
	content: "▸";
}
.timer > hr {
	position: absolute;
	left: 0px;
	bottom: 2px;
	border: unset;
	border-bottom: solid 6px red;
	display: block;
	/*margin: 0px 1.2rem;*/
	width: 0;
	height: 6px;
}