/**
* Quick and dirty reset & wrapper set-up
*/
* { padding: 0; margin: 0; box-sizing: border-box; }
html, body { height: 100%; font-family: uniform; }
.wrapper {
   position: relative;
   width: 100%;
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 15px;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/** 
* Vista BG
*/
#vista-bg {
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
/*    background-image: url(https://www.frontendhero.dev/wp-content/uploads/2023/05/countryside-day.png);  */
	background-image: url("media/pexels-pixabay-220182.jpg");
	height: 100%;
	width: 100%;
	position: absolute;
	transition: all 0.6s ease-in-out;
}
body.rest-mode #vista-bg {
	filter: blur(5px) grayscale(0.6) brightness(0.5);
}


/** 
* Pomodoro 
*/
#feh-pomodoro {
    position: relative;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    padding: 55px 25px 25px 25px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.29);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(7.7px);
	-webkit-backdrop-filter: blur(7.7px);
	border: 1px solid rgba(255, 255, 255, 0.64);
}

#audio-player {
    margin: 0 auto;
    padding: 55px 25px 25px 25px;
	border-radius: 20px;
	backdrop-filter: blur(7.7px);
	-webkit-backdrop-filter: blur(7.7px);
	-moz-border-radius:20px 20px 20px 20px;
	-webkit-border-radius:20px 20px 20px 20px;
	border-radius:20px 20px 20px 20px;
	border: 1px solid rgba(255, 255, 255, 0.64);
}

	/** 
	* Pomodoro overlay
	*/
	#feh-pomodoro-overlay {
		background: #fff;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 20px;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease-in-out;
	}
		body.page-loaded #feh-pomodoro-overlay {
			opacity: 0;
			visibility: hidden;
		}
		#feh-pomodoro-overlay img {
			width: 150px;
			height: 150px;
		}

	/** 
	* Genric button + settings btn
	*/
	.btn-icon {
		border-radius: 20px;
		position: absolute;
		right: 0;
		width: 50px;
		display: flex;
		font-size: 24px;
		justify-content: center;
		color: #7b7b7b;
		padding-top: 10px;
		cursor: pointer;
		transition: all 0.3s ease-in-out;
	}
	#feh-toggle-settings {
		top: 20px;
		right: 20px;
		height: 50px;
	}

	/** 
	* Progress area
	*/
	#feh-timer-progress {
		display: flex;
		justify-content: center;
		margin-bottom: 40px;
	}
		.circle-timer {
			width: 270px;
			height: 270px;
		}
		.circle-background {
			stroke: #ffffff;
			stroke-width: 7;
			fill: none;
		}
		.circle-progress {
			/** stroke: #fd5252; */
			stroke: #43B7F1;
			stroke-width: 7;
			stroke-dasharray: 283;
			stroke-linecap: round;
			fill: none;
			transform-origin: 50% 50%;
			transform: rotate(-90deg);
		}
		body.rest-mode .circle-progress { 
			stroke: #fd525385;
		}
		body.timer-running .circle-progress {
			transition: all 1s linear;
		}

			#feh-timer-time {
				fill: #5c5c5c;
			}
			#feh-timer-pause,
			#feh-timer-rest {
				opacity: 0;
				transition: all 0.3s ease-in-out;
				fill: #5c5c5cd1;
			}

			/** 
			* Toggle text for pause / rest
			*/
			body.timer-paused:not(.rest-mode) #feh-timer-pause,
			body.rest-mode #feh-timer-rest,
			body.rest-mode.timer-paused #feh-timer-pause { 
				opacity: 1;
			}
			body.rest-mode.timer-paused #feh-timer-rest { 
				opacity: 0;
			}


	/**
	* Sessions completed 
	*/
	#feh-timer-sessions {
		border-radius: 50px;
		background: #fff;
		display: flex;
		color: #5c5c5cb8;
		align-items: center;
		transition: all 0.3s ease-in-out;
	}
	body.settings-active #feh-timer-sessions {
		opacity: 0;
		visibility: hidden;
	}
		#feh-timer-sessions p {
			padding: 12px;
		}
		p#feh-completed-label {
			width: 80%;
			text-align: center
		}
		p#feh-completed-sessions {
			font-weight: bold;
			color: #222;
			font-size: 20px;
		}	


	/** 
	* Timer functions
	*/
	#feh-timer-functions {
		position: relative;
		height: 145px;
	}

		/** 
		* Buttons
		*/
		#feh-timer-buttons { 
			width: 100%;
			height: 100%;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: all 0.3s ease-in-out;
		}
			#feh-timer-buttons button {
				/**  red 
				background-color: #fd5252;
				*/
				background-color: #43B7F1;
				/**  blue */
				position: absolute;
				border: none;
				border-radius: 100px;
				cursor: pointer;
				width: 60px;
				height: 60px;
				margin: 0 auto;
				display: block;
				font-size: 22px;
				color: #fff;
			}
			body.settings-active #feh-timer-buttons {
				opacity: 0;
				visibility: hidden;
			}

			/** 
			* Toggle the display of start / pause buttons
			*/
			body.timer-running #start-btn {
				opacity: 0;
				visibility: hidden;
			}
			body.timer-paused #start-btn {
				opacity: 1;
				visibility: visible;
			}


		/** 
		* Settings
		*/
		#feh-timer-settings {
			transition: all 0.3s ease-in-out;
			opacity: 0;
			visibility: hidden;
		}
		body.settings-active #feh-timer-settings {
			opacity: 1;
			visibility: visible;
		}
			#feh-close-settings {
				top: -45px;
				height: 80px;
				/**  red
				background: #d85e3a;
				*/
				background: #43B7F1;
				color: #f7ddd7;
			}
			#feh-close-settings:hover { color: #fff; }

			#feh-timer-form {
				border-radius: 20px;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				padding: 20px;
				/**  background: #d85e3a; */
				background: #43B7F1;				
				z-index: 1;
			}
				.feh-timer-line {
					display: flex;
				}
				.feh-timer-line:last-child {
					margin-top: 20px;
				}
					.feh-timer-line * {
						font-size: 18px;
					}
					.feh-timer-line label {
						width: 50%;
						color: #ffffffc7;
						padding: 10px 0px 10px 0px;
					}
					.feh-timer-line input {
						background: #fff;
						color: #5c5c5c;
						width: 50%;
						border: 0px none;
						margin-left: -2px;
						border-radius: 10px;
						text-align: center;
					}
					#feh-timer-form input::-webkit-outer-spin-button,
					#feh-timer-form input::-webkit-inner-spin-button { -webkit-appearance: none; }
					#feh-timer-form input[type=number] { -moz-appearance: textfield; }