/* app css stylesheet */

html{
    height:100%;
}

body {
    padding: 108px 15px 20px 15px;
    min-height: 100%;
    font-size: 13px;
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 400;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* styles for validation helpers - start*/
.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}
/* styles for validation helpers - end */

/*styles for top nav bar - start*/
.navbar-default.top-navbar {
    background-color: #4eaded;
    border-color: #4eaded;
}
.navbar-default .second-top-nav{
    background-color: #0088dc !important;
    height:43px;
}
    .navbar-default .second-top-nav a {
        color: white !important;
    }
.navbar-default.top-navbar h1 {
    color: white;
    margin-top: 15px;
    margin-bottom: 15px;
}
/*styles for top nav bar - end*/

/*styles for left nav bar - start*/
.left-nav-bar {
    background-color: #1ba2db;
    min-height: 100%;
    position: fixed;
    margin-top: -14px;
    margin-left:-15px;
}
.left-nav-bar a{
    color:white;
    text-align:center;
    width:100%;
}
/*styles for left nav bar - end*/

/*styles for container - start*/
.workout-display-div {
    text-align: center;
    padding: 40px;
}
.workout-display-div .img-responsive{
    margin: 25px auto;
    width:540px;
    height:360px;
    cursor:pointer;
}
.workout-display-div .time-progress{
    margin-top:40px;
}
/*styles for container - end*/

/*Styles for start page - start*/
.text-center{
    color:#4eaded;
}
.action{
    text-align:center;
    margin-top:25px;
}
.action a {
    text-decoration: none;
    font-size: 50px;
    color:#4eaded;
}
.action a:hover{
    color:#005E9E;
}
.action a .glyphicon {
    top:8px;
}
/*Styles for start page - end*/

/*Styles for workout page - start*/
.workout-app-container{
    padding-top:15px;
}

#video-panel .panel-body{
    max-height:650px;
    overflow:auto;
}
#pause-overlay {
    position:absolute;
    top:0px;
    width:100%;
    height:100%;
    opacity:0;      /*Comment this line to try our mouse event based pause and resume. */
    z-index:10; 
 
}

/*Comment this style to try our mouse event based pause and resume. */
#pause-overlay:hover {
    opacity:.8;     
}
#pause-overlay .pause{
    font-size:120pt;
    width:140px;
    height:140px;
    color:#4eaded;
}
.absolute-center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

#play-video-overlay {
    position:absolute;  
    top:0px;
    width:100%;
    height:100%;
    opacity:0;
    z-index:10; 
 
}
#play-video-overlay:hover {
    opacity:.6;     
}
#play-video-overlay .video {
    font-size:80pt;
    width:100px;
    height:100px;
    color:#4eaded;
}
/*Styles for workout page - end*/

/*Animation effects workout*/
div[ng-view] {
    position: absolute;
    width: 100%;
    height: 100%;
}
div[ng-view].ng-enter,
div[ng-view].ng-leave {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
div[ng-view].ng-enter {
    left: 100%;     /*initial css for view transition in*/
}
div[ng-view].ng-leave {
    left: 0%;        /*initial css for view transition out*/
}
div[ng-view].ng-enter-active {
    left: 0%;        /*final css for view transition in*/
}
div[ng-view].ng-leave-active {
    left: -100%;    /*final css for view transition out*/
}

.video-image.ng-enter,
.video-image.ng-move {
    -webkit-animation: bounceIn 1s;
    -moz-animation: bounceIn 1s;
    -ms-animation: bounceIn 1s;
    animation: bounceIn 1s;
}
.video-image.ng-leave {
    -webkit-animation: bounceOut 1s;
    -moz-animation: bounceOut 1s;
    -ms-animation: bounceOut 1s;
    animation: bounceOut 1s;
}



/*Animation effects Workout- end*/

/*Workout Builder Styles*/
#left-nav-exercises button {
    margin-bottom:4px;
}
#left-nav-exercises button .glyphicon {
    margin-left:6px;
}
.exercise-item.ng-enter,
.exercise-item.ng-move {
    -webkit-animation: zoomIn 0.5s;
    -moz-animation: zoomIn 0.5s;
    -ms-animation: zoomIn 0.5s;
    animation: zoomIn 0.5s;
}
.exercise-item.ng-leave {
    -webkit-animation: fadeOut 0.25s;
    -moz-animation: fadeOut 0.25s;
    -ms-animation: fadeOut 0.25s;
    animation: fadeOut 0.25s;
}
/*Workout Builder Styles - end*/


/*styles for tile - start*/
.exercise.tile {
    width:320px;
    height:226px;
    color:white;
    margin-bottom:10px;
    background:#61b9ff;

}

.exercise.tile .title {
    width:inherit;
    background:#9d4a9c;
    font-size:14pt;
    padding:5px;
}
.exercise.tile .index{
    width:40px;
    float:left;
    font-size:20pt;
    text-align:center;
    padding-top:10px;
}
.exercise.tile .order{
    width:53px;
    float:right;
}
.exercise.tile .main {
    width:225px;
    float:left;
    padding:4px;
}
.exercise.tile img{
    width:100%;
    height:120px;
}

.workout.tile {
    width: 300px;
    height: 80px;
    background: #5bc0de;
    color: white;
    padding:10px;
    margin-bottom:10px;
}
.workout.tile:hover{
    background:#1D89CF;
}

.workout .title{
    font-size: 20pt;
    text-align: center;
}
.workout .stats{
    font-size: 12pt;
    padding:0 10px 0 10px;
}

.exercise-tile {
    width: 300px;
    height: 50px;
    background: #5bc0de;
    color: white;
    padding:5px;
    margin-bottom:10px;
    font-size: 18pt;
    text-align: center;
}
.exercise-tile:hover {
    background:#1D89CF;
}
/*styles for tile- end*/

/*styles for spinner- start*/
.spin {
    -webkit-animation: spin .8s infinite linear;
    -moz-animation: spin 1s infinite linear;
    -o-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*styles for spinner- end*/