#loyalty-activate-card {
  text-align: right;
  width: 370px; }

#loyalty-activate-card p,
#loyalty-activate-card ul {
  text-align: left; }

#loyalty-activate-card p {
  line-height: 1.2em; }

#loyalty-activate-card li {
  line-height: 30px;
  height: 30px; }

#loyalty-activate-card label {
  display: inline-block;
  width: 150px; }

#loyalty-activate-card input {
  width: 190px; }

#loyalty-activate-card h3 {
  text-align: left;
  margin-top: 10px; }

#loyalty-activate-card button {
  margin-right: 20px;
  margin-top: 15px; }

/*The code for responsiveness can be found below. If you're including the responsiveness code in your custom CSS files, you may need to tweak the responsiveness code or the other CSS code in your files to ensure that responsiveness works correctly.*/
@media screen and (max-width: 767px) {
  h3 {
    font-size: 20px; }
  #loyalty-activate-card {
    width: 100%; }
    #loyalty-activate-card p {
      font-size: 16px; }
    #loyalty-activate-card ul {
      margin-top: 15px; }
      #loyalty-activate-card ul li {
        height: auto;
        line-height: 0; }
        #loyalty-activate-card ul li label {
          font-size: 16px;
          margin: 0em 0 1em 0; }
        #loyalty-activate-card ul li input {
          margin-left: 0;
          width: 100%;
          height: 30px;
          font-size: 16px;
          border-radius: 5px; }
    #loyalty-activate-card #UsernameDisplay, #loyalty-activate-card #Password, #loyalty-activate-card #PasswordConfirm {
      margin-bottom: 15px; } }