body {
	font-size: 20px;
	text-align: center;
	background-color:#000;
}

#tcontainer
{

	display:flex;
	justify-content:center;
	align-items:center;
	height:100vh;
	overflow: visible;
	flex-direction:column;
}

#timer-wrapper
{
	width:500px;
display: flex;
align-items: end;
overflow: visible;
}

.circle {
	width:400px;
  
    display: inline-block;
    position: relative;
    text-align: center;
	vertical-align: top;
	color:#fff;
}

#timer-container {
		position: absolute;
		height:60px;
		text-align: center;
		line-height: 45px;
		font-size:60px;
		color:#fff !important;
		z-index:1001;
		font-size:4em;
	}
	
	#cancel-button
	{
	width:80px;
	height:80px;
	background-color:#1c1c1e;	
	border-radius:40px;
	-moz-border-radius:40px;
	-webkit-border-radius:40px;
	 border:0px;
	 color:#fff;
	}
	
	#cancel-button:hover
	{
	
	background-color:#222224;	
	
	}
	
	#pause-button
	{
	 width:80px;
	height:80px;
	background-color:#1c1c1e;	
	border-radius:40px;
	-moz-border-radius:40px;
	-webkit-border-radius:40px;
	 border:0px;
	 color:#fff;
	}
	
	#pause-button:hover
	{
	background-color:#222224;	
	}
	
	#pause-button.active
	{
	background-color:rgba(225,83,139,0.2);
	color:rgb(225,83,139);
	}
	
	#timer-message
	{
	display:block;
	width:100%;
	margin-top:40px;
	color:#fff;
	font-size:1.3em;
	text-align:center;
	opacity:0;

	}
	
@media screen and (max-width:450px) and (min-width:350px)
{
	
	.circle
	{
		width:250px;
	}
	
	#timer-wrapper
{
	width:350px;

}

#timer-container {
font-size:50px !important;
}

#pause-button,#cancel-button
	{
	 width:60px;
	height:60px;
	font-size:0.8em;
}

#timer-message
	{
	display:block;
	width:100%;
	margin-top:40px;
	color:#fff;
	font-size:1.1em;
	text-align:center;
	font-weight:700;
	}
}

@media screen and (max-width:520px) and (min-width:451px)
{
	
	.circle
	{
	
		width:250px;
	}
	
	#timer-wrapper
{
	width:380px;
	font-size:10px !important;

}

#timer-container {
font-size:60px !important;
}

#pause-button,#cancel-button
	{
	 width:70px;
	height:70px;
	font-size:1.4em;
}

#timer-message
	{
	display:block;
	width:100%;
	margin-top:40px;
	color:#fff;
	font-size:1.1em;
	text-align:center;
	font-weight:700;
	}
}

#audio-permission-modal {
  position: fixed;
  background:white;
  top: 0;
  left: 0;
  width: 320px;
    height:200px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000; /* Ensure modal is on top */
  padding:10px;
  
}


#ok-button
{
	background-color:#e1538b;
	color:white;
	width:100px;
	margin:0 auto;
	border:0px;
	border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
}

.modal-content
{
	background-color:white;
	padding:10px;
	border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;

}