/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.back
{
	background: #cfe7fa; /* Old browsers */
	background: -moz-linear-gradient(top, #cfe7fa 0%, #6393c1 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #cfe7fa 0%,#6393c1 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #cfe7fa 0%,#6393c1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=0 );
}
.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.buttonPage1
{
	font-size:40px;
	width:600px;
	height:70px;
	-webkit-border-radius: 60px;-moz-border-radius: 60px;border-radius: 60px;
	border: 2px solid darkblue;
}
.buttonPage2
{
	font-size:20px;
	width:20%;
	height:35px;
	-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;
	border: 2px solid darkblue;
}
.buttonPage3
{
	color:darkblue;
	font-size:28px;
	width:150px;
	height:60px;
	-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;
	border: 2px solid white;
}
.tcc_modalDialog {
				position: fixed!important;
				font-family: Verdana,Geneva,sans-serif!important;
				top: -80!important;
				right: 0!important;
				bottom: 0!important;
				left: 0!important;
				background: rgba(0, 0, 0, 0.6)!important;
				z-index: 99999!important;
				opacity:0;
				-webkit-transition: opacity 400ms ease-in!important;
				-moz-transition: opacity 400ms ease-in!important;
				transition: opacity 400ms ease-in!important;
				pointer-events: none;
}

.tcc_modalDialog:target {
			opacity:1!important;
			pointer-events: auto!important;
}

.tcc_modalDialog > div {
			width: 800px!important;
			position: relative!important;
			margin: 10% auto!important;
			padding: 5px 20px 13px 20px!important;
			border-radius: 10px!important;
			background: #fff!important;
			background: -moz-linear-gradient(#fff, #999)!important;
			background: -webkit-linear-gradient(#fff, #999)!important;
			background: -o-linear-gradient(#fff, #999)!important;
}
.tcc_close {
			background: #606061!important;
			color: #FFFFFF!important;
			line-height: 25px!important;
			position: absolute!important;
			right: -12px!important;
			text-align: center!important;
			top: -10px!important;
			width: 24px!important;
			text-decoration: none!important;
			font-weight: bold!important;
			-webkit-border-radius: 12px!important;
			-moz-border-radius: 12px!important;
			border-radius: 12px!important;
			-moz-box-shadow: 1px 1px 3px #000!important;
			-webkit-box-shadow: 1px 1px 3px #000!important;
			box-shadow: 1px 1px 3px #000!important;
}

.tcc_close:hover {
			background: #0083ca!important;
}

button.tcc_button{
				white-space: normal!important;
				width:100%!important;
				background: #606061!important;
				color: #FFFFFF!important;
				font-size: 40px!important;
				padding: 10px 24px!important;
				border-radius: 10px!important;
				-webkit-transition-duration: 0.4s!important; /* for Safari */
				transition-duration: 0.4s!important;
				box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12)!important;
				border: none!important;
				height:100px;
}
    
    button.tcc_buttonKeep{
				white-space: normal!important;
				width:100%!important;
				background: #606061!important;
				color: #FFFFFF!important;
				font-size: 14px!important;
				padding: 10px 24px!important;
				border-radius: 10px!important;
				-webkit-transition-duration: 0.4s!important; /* for Safari */
				transition-duration: 0.4s!important;
				box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12)!important;
				border: none!important;
}
    
    button.tcc_buttonClose{
				white-space: normal!important;
				width:100%!important;
				background: #606061!important;
				color: #FFFFFF!important;
				font-size: 14px!important;
				padding: 10px 24px!important;
				border-radius: 10px!important;
				-webkit-transition-duration: 0.4s!important; /* for Safari */
				transition-duration: 0.4s!important;
				box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.12)!important;
				border: none!important;
}
    
button.tcc_button:hover {
				background-color: #0083ca!important;
				color: white!important;
}

button.tcc_buttonKeep:hover {
				background-color: #0083ca!important;
				color: white!important;
}

button.tcc_buttonClose:hover {
				background-color: #0083ca!important;
				color: white!important;
}

hr.tcc_hr {
		border: 0!important;
		height: 0!important;
		width: 500px!important;
		border-top: 1px solid rgba(0, 0, 0, 0.1)!important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.3)!important;
}

img.tcc_icon{
			float: left!important;	
			padding: 10px 10px 0px 0px!important;
			margin: 0 auto!important;
			display:block!important;
}

img.tcc_logo{
			padding: 10px 0px 0px 0px!important;
			margin: 0 auto!important;
			display:block!important;
}

div.tcc_title{
			float:left!important;	
			margin: 0 auto!important;
			font-size: 15px;
}
div.tcc_text{
				clear:both!important;
				text-align: justify!important;
				text-justify: newspaper!important;
}

div.tcc_parent{
				overflow:hidden!important;
}

span.tcc_titleText{
				display: block!important;
				margin-top: 1.33em!important;
				margin-bottom: 1.33em!important;
				margin-left: 0!important;
				margin-right: 0!important;
				font-weight: bold!important;
				font-size:30px;
}

.tcc_buttons {
	text-align:center;
	font-size:30px!important;
}
.tcc_config {
	display:none;
}


/* Progres bar CSS from https://codepen.io/craigocurtis/pen/ZbXgyr */

#minutesInput, #secondsInput
{
    color: white;
    background: transparent;
    border: none;
    font-weight: bold;
    font-size: 24px;
	width: 45px;
}
#minutesInput
{
	text-align: right;
    
}
.container {
	height:20px;
	background: royalblue;
	border-radius: 10px;
	padding: 2rem;
	/* horizontally aligns element */
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0px 0px 100px 3px
		royalblue;
}
.displayTime
{
	position: absolute;
    z-index: 9999;
    width: 50%;
    margin: auto;
    text-align: center;
    top: 30px;
    color: white;
    background: transparent;
	margin-left: -1%;
}
.subContainer {
	margin: 0 auto;
	margin-top: -11px;
	height:45px;
}

progress {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
}
.progress_styled {
	width: 100%;
	line-height: 2;
	height: 3rem;
}
progress::-webkit-progress-bar {
background-color: transparent;
/*border-radius: 0px 0px 10px 10px; */
background-color: clear;
border: 5px solid blue;
box-shadow: inset 10px 10px 21px rgba(240,240,240,0.1);
}

progress::-webkit-progress-value {
background: #d3e2dc;
background: linear-gradient(to bottom, #d3e2dc 1%,#cde8dd 49%,#d3e2dc 100%);
background: -moz-linear-gradient(top, #d3e2dc 1%, #cde8dd 49%, #d3e2dc 100%);
background: -webkit-linear-gradient(top, white 1%,blue 49%,lightblue 100%);
background: -o-linear-gradient(top, white 1%,blue 49%,lightblue 100%);
background: -ms-linear-gradient(top, white 1%,blue 49%,lightblue 100%);
/* border-radius: 10px; */
transition: width 1s linear;
}