* {
	user-select: none;
}

body {
	font-family: 'Lato', sans-serif;
	/*font-size: 18pt;*/
	
	background-color: #000;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	
	font-weight: 300;
	color: #fff;

	background-image: url(../img/bg7.jpg);
	background-position: center;
	background-size: cover;

	margin: 0;
	padding: 0;
}

div#bgfilter {
	background-color: rgba(0,0,0,0.45);
	backdrop-filter: blur(5px);

	position:fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	z-index: -10;
}

div#notOnline
{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: rgba(232,0,0,0.8);
	text-align: center;
	
	padding: 12px;
	z-index: 9999;
	
}

div#notOnline.pinging
{
	background-color: rgba(255,180,0,0.8);
}

div.container,
div.container-fluid
{
	font-size: 18pt;
}

div.workout
{
	padding-bottom: 34vh;
}

div#loading
{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.66);
	
	display: none;
}

div.container .button,
div.container button,
div.container-fluid .button,
div.container-fluid button
{
	padding: 15px;
	border: none;
	border-radius: 0;
	
	width: 100%;
	display: block;
	
	font-family: sans-serif;
	font-size: 12pt;
}

div.container .button,
div.container-fluid .button
{
	color: #000;
	text-decoration: none;
	text-align: center;
	
	padding-left: 0;
	padding-right: 0;
}

button:disabled, .button:disabled
{
	background-color: #3c3c3c;
	color: #e7e7e7;
}

button.start {
	background-color: #080;
}

button.stop {
	background-color: #f80;
}

button.delete {
	background-color: #d00;
}

div.block
{
	border-left: 18px solid;
	border-bottom: 18px solid;
	
	padding-left: 12px;
	margin-bottom: 40px;
}

div.superset
{
	border-left: 9px solid;
	
	padding-left: 9px;
	margin-bottom: 16px;
}

div.superset:last-child
{
	margin-bottom: -24px;
}

p.supersetnumber
{
	color: #000;
	margin-left: -9px;
	padding-left: 9px;
}

table.exercise
{
	margin-bottom: 40px;
}

table
{
	border-left: 1px solid;
	border-right: 1px solid;
	border-bottom: 1px solid;
	
	background-color: rgba(0,0,0, 0.666);
}

th, tfoot {
	color: #000;
	padding: 15px;
}

table.exercise.disabled
{
	border-color: #c0c0c0 !important;
}

table.exercise.disabled th
{
	background-color: #c0c0c0 !important;
	color: #000 !important;
}

table.exercise.disabled td.setGroup
{
	color: #fff;
	border-color: #c0c0c0 !important;
}

th.exercise-actions
{
	min-width: 103px;
}

table.exercise.disabled th.exercise-actions button
{
	color: #c0c0c0 !important;
}

th.exercise-actions,
td.input
{
	text-align: right;
}

th .calculateOneRm
{
	background-color: #000;
	display: inline-block;
	width: auto;
	padding: 3px;
}

td {
	padding: 4px;
}

td.setGroup {
	font-weight: 400;
	border-bottom: 1px solid;
	text-align: center;
}

td.rest {
	text-align: center;
	font-size: 50%;
}

td.rest hr
{
	display: inline-block;
	
	width: 100%;
	max-width: 40%;
	border: 0.5px solid;
	
	margin: 3px;
}

td.set-notes, td.set-comment
{
	font-size: 50%;
}

tbody.set {
}

tbody.set:nth-child(odd)
{
	background-color: rgba(60,60,60,0.333);
	color: #fff;
}

tbody.set:nth-child(even)
{
	background-color: rgba(0,0,0, 0.333);
}

tbody.set small
{
	font-size: 50%;
}

tr.isExtra {
	background-color: rgba(0,0,255, 0.25) !important;
}

tr.newSubgroup td {
	border-top: 1px solid;
}

tbody.summary
{
	font-size: 75%;
}

.set-notes {
	color: #d00;
}

div.container button.input,
div.container-fluid button.input
{
	color: #333;
	background-color: #fff;
	
	border-radius: 50%;
	border: 4px solid #fff;
	
	display: inline-block;
	
	margin: 2px;
	padding: 2px;
	font-weight: 400;
	
	width: auto;
	min-width: 20pt;
	height: 20pt;
	margin-right: 6px;
	
	font-size: 16pt;
	
	text-align: center;
}

div.container button.action,
div.container-fluid button.action
{
	min-width: 42px;
	width: auto;
	display: inline-block;
	height: 42px;
	
	font-size: 10pt;
}

div.container select,
div.container-fluid select
{
	color: #fff;
	border: 1px solid;
	background-color: #000;
	height: 42px;
}

div.container select option,
div.container-fluid select option
{
	background-color: #000;
}

.failed
{
	color: #d00;
}

.incomplete
{
	color: #f80;
}

.complete
{
	color: #080;
}

.complete-extra-reps
{
	color: #ff0;
}

#timer, #timerProgressBar, #timerBackdrop
{
	color: #000;
	
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	
	height: 20vh;
	
	text-align: center;
}

#timerHold
{
	position: fixed;
	bottom: 2vh;
	left: 0;
	right: 0;

	height: 18vh;

	background-color: transparent;
}

#timer
{
	line-height: 20vh;
	font-size: 60px;

	padding-left: 45px;
}

/*
#timer span.time.pressToContinue
{
	line-height: 10vh;
	font-size: 8vh;
}*/

button#extendTimer
{
	background: none;
	/*border: none;*/

	z-index: 40;
}

#timerBackdrop {
	z-index: 10;
	backdrop-filter: blur(5px);
}

#timerProgressBar {
	z-index: 20;
}

#timer {
	z-index: 30;
}

#timerHold {
	z-index: 40;
}

#timer.red
{
	background-color: rgba(221, 0, 0, 0.666);
	color: #fff;
}

#extendTimer.red,
#extendTimer.green
{
	color: #fff;
}

#timer.orange
{
	background-color: rgba(255, 136, 0, 0.666);
	color: #000;
}

#timer.green
{
	background-color: rgba(0, 136, 0, 0.666);
	color: #fff;
}

#timer.blue
{
	background-color: rgba(25,130,190, 0.666);
	color: #fff;
}

#timer.gray
{
	background-color: rgba(180,180,180, 0.666);
	color: #000;
}

#timer .info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;

	height: 3vh;
	line-height: 3vh;
	font-size: 2.5vh;

	background-color: rgba(255,255,255, 0.05);
	border-top: 1px solid rgba(255,255,255, 0.66);

	text-align: center;
}

#timerProgress
{
	background-color: #fff;
	width: 0%;
	height: 100%;
}

#timerProgress.red {
	background-color: #d00;
}

#timerProgress.orange
{
	background-color: #f80;
}

#timerProgress.green {
	background-color: #080;
}

#timerProgress.blue {
	background-color: #1982C4;
}


#timerProgress.gray {
	background-color: #999;
}

#navbackground
{
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 70px;

	float: left;
}

nav.navbar
{
	backdrop-filter: blur(3px);
}

.navbar a.navbar-brand
{
	color: #000 !important;
}

button.navbar-toggler
{
	background-color: #000 !important;
}

a.disabled,
a.disabled:hover
{
	color: #c0c0c0 !important;
	text-decoration: line-through;
}

ul.navbar-nav > li,
ul.navbar-nav > li > a
{
	color: #000;
}

ul.navbar-nav > li > a:hover
{
	color: #222;
}

nav.navbar span.subname
{
	color: #999;
}

div.alert
{
	font-size: 16px;
	padding: 15px;
}

.edit-mode
{
	height: 79vh;
	overflow: auto;
	padding-right: 8px;
}

#editor
{
	width: 100%;
	min-height: 80vh;
	height: 88%;
	margin-top: 16px;

	background-color: rgba(0,0,0,.5);
	backdrop-filter: blur(5px);
}

/*
nav.navbar li.nav-item
{
	margin: -1rem 0;
	background-color: #d00;
}

nav.navbar li.nav-item a:hover
{
	background-color: #000;
}
*/

div.dropdown-menu
{
	background-color: #000;
}

div.modal-content
{
	border-radius: 0;
	background-color: #000;
}

div.modal-content .modal-header
{
	border-radius: 0;
	border: none;
}

div.modal-content .modal-header,
div.modal-content .modal-header button span
{
	color: #000;
}

@media (max-width: 992px) {
	div.container
	{
		max-width: 100%;
	}
}

.form-control, .form-control:focus
{
	color: #fff;
	border: 1px solid;
	background-color: #000;
	border-radius: 0;
}

.form-control:disabled
{
	background-color: #000;
	color: #444;
}

.input-group-text
{
	color: #000;
	border-radius: 0;
}

div.dropdown-menu
{
	max-height: 66vh;
	overflow-y: auto;
}

/* SCROLLBAR */

::-webkit-scrollbar
{
	width: 8px;
}

::-webkit-scrollbar-track-piece
{
	background-color: #1a1a1a;
}

::-webkit-scrollbar-thumb
{
	background-color: #444;
}

/* style.php fallback */

nav.navbar,
div.modal-header,
button, .button,
.btn-primary,
button#prepare-workout,
#signInTop, #setsTop, #weightsTop,
th,
.startCountdown,
.input-group-text
{
	background-color: #fff;
}

tbody.summary
{
	background-color: rgba(255,255,255, 0.666);
}

tbody.add-set
{
	border-top: 1px solid;
	text-align: center;
}

tr.isCurrent
{
	background-color: rgba(255,255,255, 0.250) !important;
}

p#invalid,
div.comment,
table,
td.rest hr,
td.setGroup,
tr.newSubgroup td,
div.container select,
div.container-fluid select,
.startCountdown,
.footer hr,
div.dropdown-menu,
div.modal-content,
td.rest span:before,
td.rest span:after,
.form-control, .form-control:focus
{
	border-color: #fff;
}

button.navbar-toggler span.navbar-toggler-icon
{
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
}

div.comment,
th .calculateOneRm,
td.rest,
td.setGroup,
#workoutSelection optgroup,
.footer a
{
	color: #fff;
}

#timer,
#recommendation
{
	background-color: rgba(255,255,255, 0.666);
}

tr.continueAt {
	background-color: rgba(255,255,255, 0.666) !important;
}

span.exercise-name, span.comment {
	line-break: anywhere;
}

/* SCROLLBAR */

::-webkit-scrollbar-button
{
	background-color: #fff;
}

::-webkit-scrollbar-thumb:hover
{
	background-color: #fff;
}

#tempo
{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 100px;

	background: green;
}

/**********************/

#announcement {
	position: absolute;

	opacity: 0;
	font-size: 2rem;
	font-weight: bold;
	color: #333;
	background-color: #fff;
	padding: 20px 40px;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	transform: scale(0);
	/*animation: zoomBounce 2s ease-in-out forwards;*/
  }
  
  @keyframes zoomBounce {
	0% {
	  transform: scale(0);
	  opacity: 0;
	}
	20% {
	  transform: scale(1.2);
	  opacity: 1;
	}
	40% {
	  transform: scale(0.9);
	}
	60% {
	  transform: scale(1.05);
	}
	80% {
	  transform: scale(0.95);
	}
	100% {
	  transform: scale(1);
	  opacity: 0;
	}
  }
  

#extendTimer,
#mute-sound,
#mute-tts
{
	color: #fff;
	font-size: 25px;

	height: 45px;
	width: 45px;

	border-radius: 50%;
	border: 1px solid #fff;

	text-align: center;
	line-height: 45px;

	z-index: 9999999;
	position: fixed;
}

#mute-sound,
#mute-tts
{
	background-color: #008800;
}

#mute-sound,
#mute-tts,
#extendTimer
{
	bottom: calc(3vh + 5px);
}

#mute-sound
{
	left: 5px;
}

#mute-tts
{
	left: 52px;
}

#extendTimer
{
	right: 5px;
}

#mute-sound.muted,
#mute-tts.muted
{
	background-color: #666;
}

#mute-tts.unavailable
{
	background-color: #d00;
}