/* * {
  border: 1px solid blue;
} */

body{
  margin: 0;

}



.navbar{
  margin-bottom: 2.5em;
  padding: 1rem;
  font-size: 1.1rem;
}


.navbar-brand{
  font-size: 1.6rem;
  padding-right: 1rem;
}


.nav-item{
  padding-right: 1rem;
  
}


.navbar button{
  font-size: 1.1rem;
  padding: .4rem 1.8rem;
  font-weight: bold;
}




h1{
    text-align: center;
    font-size: 3.2em;
    color: black;

}



h2{
    text-align: center;
    font-size: 2.5em;
    color: black;

}
#create-routine {
  margin: auto;
  margin-bottom: 10rem;
  border: solid black;
  padding: 3rem 5rem;
  border-radius: 2rem;

}

#user-routines{
  margin: 0 auto;

}
.form-control{
  border: solid black .05rem;
}

.form-check-input{
  border: solid black .01rem;
}

p{
  margin: auto 5rem;
}

.form-label{
  font-weight: bold;
  font-size: 1.2rem;
}
.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}



.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}



#fit_app{
padding-top: 15px;
}

#fit_app > section{
padding: 25px;
}

#fa_header{
height: 40px;
line-height: 40px;
}

#fa_header span{
font-size: 23px;
font-weight: 500;
}

#fa_header i{
height: 30px;
width: 30px;
line-height: 30px;
text-align: center;
color: #386ef4;
box-shadow: 4px 4px 8px -1px rgba(0,0,0,0.25),
      -4px -4px 8px -1px rgba(255,255,255,1);
border-radius: 50%;
}

#fa_body{
margin-top: 20px !important;
}

.fa_tile{
padding-left: 15px;
padding-right: 15px;
}

.fa_tile ul{
padding: 0;
margin-bottom: 25px;
}

.fa_tile ul li{
list-style: none;
float: left;
width: 46%;
padding: 25px;
background: #e3edf7;
box-shadow: 4px 4px 6px -1px rgba(0,0,0,0.15),
      -4px -4px 6px -1px rgba(255,255,255,1);
border-radius: 5px;
}

.fa_tile ul li:last-child{
position: absolute;
right: 0;
}

.fa_tile ul li i{
display: block;
color: #386ef4;
font-size: 30px;
font-weight: 700;
margin-bottom: 15px;
}

.fa_tile ul li span{
display: block;
}

.workout_name{
font-size: 17px;
font-weight: 600;
color: rgba(0,0,0,1);
}

.status{
font-size: 12px;
font-weight: 500;
color: rgba(0,0,0,0.4);
padding-top: 5px;
}

#fa_collection .heading{
font-size: 17px;
font-weight: 700;
margin-bottom: 18px;
}

#fa_collection img{
height: 65px;
width: 65px;
border-radius: 10px;
background: #386ef4;
}

#fa_collection div div span{
display: block;
}

.box{
margin-left: 0px;
margin-right: 0px;
padding: 10px 0;
background: #e3edf7;
box-shadow: 4px 4px 6px -1px rgba(0,0,0,0.15),
      -4px -4px 6px -1px rgba(255,255,255,1);
border-radius: 5px;
}

.box div.col-9 span:first-child{
font-size: 16px;
font-weight: 600;
margin-bottom: 5px;
}

.box div.col-9 span:last-child{
font-size: 13px;
font-weight: 400;
}

.box i{
height: 30px;
width: 30px;
line-height: 30px;
text-align: center;
color: rgba(0,0,0,0.4);
box-shadow: 4px 4px 8px -1px rgba(0,0,0,0.25),
      -4px -4px 8px -1px rgba(255,255,255,1);
border-radius: 50%;
margin-left: 65px;
}

#fa_footer{
position: absolute;
bottom: -25px !important;
}

#fa_footer ul{
padding: 0;
}

#fa_footer ul li{
list-style: none;
float: left;
width: 25%;
text-align: center;
}

#fa_footer ul li span{
color: rgba(0,0,0,0.5);
}

#fa_footer ul li i{
line-height: 50px;
text-align: center;
font-size: 20px;
}

.active i{
background: #386ef4;
height: 70px;
width: 50px;
color: #fff;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}

#create-routine {
margin: auto;
margin-bottom: 10rem;
border: solid black;
padding: 3rem 5rem;
border-radius: 2rem;
}

#user-routines{
margin: 0 auto;

}
.form-control{
border: solid black .05rem;
}

.form-check-input{
border: solid black .01rem;
}

p{
margin: auto 5rem;
}

.form-label{
font-weight: bold;
font-size: 1.2rem;
}



@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}