.program-title {
  font-size: 20px;
  margin-bottom: 20px; }
  .program-title .separator {
    padding: 0 5px; }

.loyalty-member .row {
  overflow: hidden; }

.loyalty-member .column {
  float: left; }

.loyalty-member .left-column {
  width: 512px; }

.loyalty-member li {
  margin: 8px 0;
  overflow: hidden; }

.loyalty-member label {
  display: inline-block;
  width: 110px; }

.loyalty-member select {
  width: 172px; }

.loyalty-member select.birthday {
  width: 80px; }

.loyalty-member input[type=text],
.loyalty-member input[type=password] {
  width: 275px; }

.loyalty-member .checkbox {
  margin: 0;
  width: auto; }

.loyalty-member .checkbox-label {
  margin-left: 5px;
  width: 350px;
  vertical-align: top;
  position: relative;
  bottom: 2px; }

.loyalty-member #chkSignUpAgree {
  margin-left: 5px;
  width: auto;
  vertical-align: unset; }

.loyalty-member a {
  vertical-align: 2px; }

.loyalty-member input[type=text] {
  margin: 0; }

#loyalty-member-details button {
  margin-top: 10px; }

input#loyalty-member-postcode {
  width: 80px; }

#loyalty-member-address button {
  float: right; }

#loyalty-member-preferences {
  clear: both;
  border-top: 1px solid #4a4a4a; }

#loyalty-member-preferences .column {
  margin-top: -15px; }

#loyalty-member-preferences .title {
  display: block;
  font-size: 26px;
  font-weight: bold;
  margin-top: 20px; }

#loyalty-member-preferences ul,
#loyalty-member-preferences dl {
  clear: both; }

#loyalty-member-preferences ul {
  float: left;
  height: 216px; }

#loyalty-member-preferences li {
  margin: 0; }

#loyalty-member-preferences dl {
  height: 50px;
  line-height: 15px;
  margin-top: 5px;
  overflow: hidden;
  width: 275px; }

#loyalty-member-preferences dt {
  float: left; }

#loyalty-member-preferences dt {
  clear: left; }

#loyalty-member-preferences dd {
  display: block;
  padding-left: 5px;
  overflow: hidden; }

#loyalty-member-preferences dt:after {
  content: ':'; }

dl#loyalty-member-sites,
dl#loyalty-member-genre {
  height: 65px; }

#loyalty-member-sites dt {
  width: 105px; }

#loyalty-member-password {
  margin-bottom: 20px; }

#loyalty-member-password h2 {
  text-transform: capitalize; }

#loyalty-member-password label {
  width: 120px; }

.loyalty-member .submit {
  display: block;
  float: none;
  margin: 30px auto 10px auto; }

#loyalty-member-show {
  display: none; }

.loyalty-member .toggle-wrapper {
  height: 20px;
  line-height: 20px;
  margin: -10px 0;
  text-align: right; }

.loyalty-member .toggle-show,
.loyalty-member .toggle-hide {
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 20px;
  background-color: #1b1b1b;
  padding-left: 10px; }

.loyalty-member .toggle-show {
  background-image: url("../../Images/triangle-down.png"); }

.loyalty-member .toggle-hide {
  background-image: url("../../Images/triangle-up.png"); }

div.warning-message {
  margin-bottom: 20px;
  border: 1px solid #F6A623;
  padding: 5px; }
  div.warning-message p {
    background-image: url("../../Images/Notification_Warning.png");
    background-repeat: no-repeat;
    padding: 5px 0 0 30px;
    height: 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) {
  .loyalty-member .program-title {
    margin-bottom: 0; }
  .loyalty-member input[type=text], .loyalty-member input[type=password] {
    width: 98%;
    height: 30px;
    font-size: 1.2em;
    padding-left: 4px;
    border-radius: 5px; }
  .loyalty-member select {
    width: 99%;
    height: 39px;
    font-size: 1.2em;
    border-radius: 5px; }
  .loyalty-member label {
    font-size: 1.2em;
    margin: 0 0 0.5em;
    width: auto; }
  .loyalty-member .email-optout {
    display: block; }
  .loyalty-member #loyalty-member-postcode {
    width: 100%; }
  .loyalty-member select.birthday {
    width: 100%; }
  .loyalty-member .left-column {
    width: 100%; }
  .loyalty-member .column {
    float: none; }
  .loyalty-member li {
    margin: 0; }
  .loyalty-member hr {
    margin: 0; }
  .loyalty-member #loyalty-member-preferences .title {
    font-size: 20px; }
  .loyalty-member #loyalty-member-preferences .checkbox-list {
    width: 98%; }
    .loyalty-member #loyalty-member-preferences .checkbox-list li {
      height: auto; }
      .loyalty-member #loyalty-member-preferences .checkbox-list li label {
        padding-left: 0; }
  .loyalty-member #loyalty-member-preferences #loyalty-member-sites, .loyalty-member #loyalty-member-preferences #loyalty-member-genre {
    font-size: 1.2em;
    line-height: 1.5em;
    height: auto;
    width: auto; }
    .loyalty-member #loyalty-member-preferences #loyalty-member-sites dt, .loyalty-member #loyalty-member-preferences #loyalty-member-genre dt {
      width: 50%; }
  .loyalty-member #loyalty-member-password label {
    width: auto; }
  .loyalty-member .checkbox-label {
    width: calc((100%) - 20px); } }

@media screen and (max-width: 480px) {
  .loyalty-member .column .checkbox {
    float: left;
    width: 20px; }
  .loyalty-member .column .checkbox-label {
    float: right;
    width: calc((100%) - 25px); } }