/* style.css */
body {
  padding-top:20px;
  color: #000;
}

/* form styling */
#form-container {
  background:#fff;
  font-weight: bold;
  margin-bottom:20px;
  border-radius:5px; border: 2px solid #4f4e4e;
}

#form-container .page-header {
  background: #9aa4a5;
  margin:0; padding:30px;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  border-bottom: 1px solid #4f4e4e;
}

/* numbered buttons */
#status-buttons {
}

#status-buttons a {
  color:#FFF;
  display:inline-block;
  font-size:12px;
  margin-right:10px;
  text-align:center;
  text-transform:uppercase;
}

#status-buttons a:hover {
  text-decoration:none;
}

/* we will style the span as the circled number */
#status-buttons span {
  background:#2c3e50;
  display:block;
  height:30px;
  margin:0 auto 10px;
  padding-top:5px;
  width:30px;
  border-radius:50%;
}

/* active buttons turn light green-blue*/
#status-buttons a.active span{
  background:rgba(0,148,170,.95);
}

/*    #bootstrapoverrides     */
.depown {
  padding: 10px;
}

#shlogo {
background-color: #fff;
max-width: 75%;
border-radius: 5px;
border: 1px solid #4f4e4e;
margin: auto;
padding: 5%;
}

#firstName, #lastName, #companyName {
  padding-left: 5px;
}

#cardName {
  width: 300px;
  padding-left: 5px;
}

#cardNumber {
  width: 200px;
  padding-left: 5px;
}

#cardMonth, #cardYear {
  width: 35px;
  padding-left: 5px;
}

#cardCVC {
  width: 40px;
  padding-left: 5px;
}

#cardZip {
  width: 60px;
  padding-left: 5px;
}

/* STYLES THE PRE TAG ON FORM.HTML PAGE*/
pre {
  white-space: pre-wrap;
}

#datepicker{
padding-left: 15px;
}

#datepickerbox {
  margin-left: 5px;
}

/* ANIMATION STYLINGS
============================================================================= */
#signup-form {
  position:relative;
  min-height:300px;
  overflow:hidden;
  padding:30px;
}

#form-views {
  width:auto;
}

/* basic styling for entering and leaving */
/* left and right added to ensure full width */
#form-views.ng-enter, #form-views.ng-leave {
  position:absolute;
  left:30px;
  right:30px;
  transition:0.5s all ease;
  -moz-transition:0.5s all ease;
  -webkit-transition:0.5s all ease;
}

/* enter animation */
#form-views.ng-enter {
    -webkit-animation:slideInRight 0.5s both ease;
    -moz-animation:slideInRight 0.5s both ease;
    animation:slideInRight 0.5s both ease;
}

/* leave animation */
#form-views.ng-leave {
    -webkit-animation:slideOutLeft 0.5s both ease;
    -moz-animation:slideOutLeft 0.5s both ease;
    animation:slideOutLeft 0.5s both ease;
}

/* ANIMATIONS
============================================================================= */
/* slide out to the left */
@keyframes slideOutLeft {
  to {
    transform: translateX(-200%);
  }
}

@-moz-keyframes slideOutLeft {
  to {
    -moz-transform: translateX(-200%);
  }
}

@-webkit-keyframes slideOutLeft {
  to {
    -webkit-transform: translateX(-200%);
  }
}

/* slide in from the right */
@keyframes slideInRight {
  from {
    transform:translateX(200%);
  }
  to {
    transform: translateX(0);
  }
}

@-moz-keyframes slideInRight {
  from {
    -moz-transform:translateX(200%);
  }
  to {
    -moz-transform: translateX(0);
  }
}
@-webkit-keyframes slideInRight {
  from {
    -webkit-transform:translateX(200%);
  }
  to {
    -webkit-transform: translateX(0);
  }
}