body {
  background: #3b444c;
  color: white;
}
body.active {
  background-color: black;
}

body.break {
  background-color: #53bb74;
}

body.break #home-bg::before {
  display: none;
}

.hidden {
  display: none;
}

label {
  margin-bottom: 10px;
  display: block;
}

.navbar {
  min-height: 115px;
}

#navbarNav {
	align-items: center;
}

.nav-container {
	z-index: 1;
}

#loginBtnList {
	min-height: 36px;
}

#main-content{
  display: flex;
}    

#main-content.ria-main {
	background-image: url(../img/flowers.gif);
	background-repeat: no-repeat;
	background-position-x: right;
	background-size: cover;
	background-position-y: 50%;
	margin: 0!important;
	max-width: 100%;
}

#main-content.ria-main::before {
	content: '';
	width: 100%;
	height: 100%;
	position: fixed;
	background: black;
	opacity: .8;
	z-index: 0;
	top: 0;
	left: 0;
}

footer {
	z-index: 1;
}

#content-home {
	margin: auto;
	z-index: 1;
}

#exercise-active {
  color: azure;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#start-exercise {
  padding: 4rem 1rem;
}

body.break #current-exercise-name {
	margin-top: 20rem;
	transition: .5s;
}

#home-bg.break:before {
	background-color: green;
	opacity: .5;
}
#home-bg.jumping_jacks:before {
	background-image: url(/assets/img/jumping_jacks.gif);
}
#home-bg.wall_sits:before {
	background-image: url(/assets/img/wall_sits.gif);
}
#home-bg.pushups:before {
	background-image: url(/assets/img/pushups.gif);
}
#home-bg.crunches:before {
	background-image: url(/assets/img/crunches.gif);
}
#home-bg.stepups:before {
	background-image: url(/assets/img/stepups.gif);
}
#home-bg.squats:before {
	background-image: url(/assets/img/squats.gif);
}
#home-bg.chairdips:before {
	background-image: url(/assets/img/chairdips.gif);
}
#home-bg.planks:before {
	background-image: url(/assets/img/planks.gif);
}
#home-bg.lunges:before {
	background-image: url(/assets/img/lunges.gif);
}
#home-bg.pushups-rotate:before {
	background-image: url(/assets/img/pushups-rotate.gif);
}
#home-bg.side-planks:before {
	background-image: url(/assets/img/side-planks.gif);
}
#home-bg.flutter-kicks:before {
	background-image: url(/assets/img/flutter-kicks.gif);
}
#home-bg.running:before {
	background-image: url(/assets/img/running.gif);
}

.countdown-label {
  font: thin 15px Arial, sans-serif;
	color: #65584c;
	text-align: center;
	text-transform: uppercase;
	display: inline-block;
  letter-spacing: 2px;
  margin-top: 9px
}

#countdown{
	border-radius: 5px;
	box-shadow: 0 1px 2px 0 rgba(1, 1, 1, 0.4);
	height: 96px;
	margin: auto;
	text-align: center;
	width: 240px;
}

#countdown.hide {
	opacity: 0;
}


#sound-holder {
  top: 0;
	position: absolute;
}

#sound-holder label {
  display: initial;
}

#countdown #tiles{
	position: relative;
	text-align: center;
	text-shadow: 1px 1px 0px #ccc;
	z-index: 1;
  border-radius: 5px;
  color: #fff;
  display: block;
  font-family: Arial, sans-serif;
  font-size: 48px;
  padding: 8px;
}

.color-full {
  background: #53bb74;
}
.color-half {
  background: #ebc85d;
}
.color-empty {
  background: #e5554e;
}

#countdown #tiles > span{
	width: 70px;
	max-width: 70px;

	padding: 18px 0;
	position: relative;
}

.complete {
	opacity: .5;
}


#countdown .labels{
	width: 100%;
	height: 25px;
	text-align: center;
	position: absolute;
	bottom: 8px;
}

#countdown .labels li{
	width: 102px;
	font: bold 15px 'Droid Sans', Arial, sans-serif;
	color: #f47321;
	text-shadow: 1px 1px 0px #000;
	text-align: center;
	text-transform: uppercase;
	display: inline-block;
}

#current-exercise-name {
	font-size: 4em;
	text-align: center;
	margin-top: 5rem;
}

#current-exercise-description {
	font-size: 2rem;
	opacity: .5;
	padding: 1rem 0 4rem;
	text-align: center;
}

#exercises-holder {
  position: absolute;
  bottom: 0;
  width: 100%;
}

#exercises {
	display: flex;
	margin-top: 50px;
	margin-bottom: 1rem;
}

#exercises div {
	flex-grow: 1;
	text-align: center;
}

#pause {
	position: absolute;
	top: 0;
	right: 0;
}

#end {
	position: absolute;
	top: 2rem;
	right: 0;
}

/* #start {
	background: black;
	display: flex;
	height: 100vh;
	margin: auto;
	position: absolute;
	text-transform: uppercase;
	width: 100%;
	z-index: 2;
} */

#start:hover {
	cursor: pointer;
}


#start div {
	margin: auto;
}

#start div:hover {
	color: green;
}


#save {
	margin-top: 10px;
	padding: 10px 0;
	text-transform: uppercase;
	width: 100%;
}

#home-bg {
  display: none;
}

#home-bg.action {
  display: block;
}

#home-bg.action:before{
	background-size: cover;
	background-position: center;
	content: '';
	height: 100%;
	opacity: .1;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 0;
}

#feedback label {
  display: inline-block;
}

#start {
  margin: 2rem 0;
	padding: .5rem 3rem;
	width: 377px;
}

#exercise-set-name {
  text-transform: capitalize;
}

.navbar.bg-dark {
  box-shadow: 0 1px 2px 0 #13171f;
}

footer.bg-dark {
  box-shadow: 0 -1px 2px 0 #13171f;
}

#top-controls {
  padding: 1rem;
  height: 1rem;
  width: calc(100% - 20px);
  position: absolute;
  margin: 10px 10px auto 10px;
}

div#exercise-set-items li {
	display: inline-block;
	padding: 0 .5rem;
	font-size: .8rem;
	color: rgba(255,255,255,.5);
	position: relative;
}

div#exercise-set-items {
	width: 400px;
	padding-top: 1rem;
	line-height: normal;
}

#play_music, #warmup {
	vertical-align: text-top;
	margin-right: .25rem;
}

label[for="play_music"] {
	margin-top: .5rem;
}

#warmupTimer {
	text-align: center;
	border-radius: 1rem;
}

.exercise label {
	display: inline-block;
	padding: 0 1rem;
}

#dataList {
	margin-top: 2rem;
	margin: 2rem auto 0;
}

#getData {
	margin: auto;
	padding: .5rem 3rem;
	width: 377px;
	display: block;
}

#content-stats {
	margin:auto;
}

#stats {
	text-align: center;
	display: block;
	margin: 2rem 0 -1rem;
}