body {
  font-family: Arial,sans-serif;
    font-weight: 400;
    background-color: #fff;
}

.customFormText,.registrationSubTitle{
  display:block!important;
  width:40%;
  margin-left: auto;
  margin-right: auto;
  text-align:left;

}

.header_container {
  height:fit-content;
  width:100%;
background-color:black;
}

.header_name {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
}

.header_container img {
  max-height: 100px;
  max-width: 400px;
  margin: 0 auto;
  display: block;
}

.headerWrapper{
/*background-image:url("https://opac.capetown.gov.za/custom/web/Adult-Page-Banner@2x.png");*/
}

.registrationIntro {
    max-width: 75%;
    margin: 0 auto;
}

#registrationContainer {
    text-align: center;
    margin: 0px auto;
    display:block;
    background-color:#fff;
    width:auto;
    padding: 10px;
}

.registrationTitle {
    text-align: center;
    margin: 15px auto;
    font-size: 24px;
    font-weight: bold;
    width: 100%;
}

.registrationRow, .registrationRowCust {
  width: 75%;
  margin: 10px auto;
}

.registrationLabel {
    float: left;
    padding-right: 10px;
    text-align: right;
    width: 45%;
}

.registrationField {
    text-align: left;
}

.registrationSubTitle{
text-align:left;
margin-left:auto;
margin-right:auto;
}

.registrationTextField {
  padding-left: 3px;
}

.registrationField select {
    width: 175px;
}

.registrationRow:after {
  content: "";
  display:table;
  clear: both;
}

.registrationInput {
  border: solid rgb(169,169,169) 1px;
  border-radius: 5px;
}

.registrationRadio {
  /*clear:both;*/
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
  float:left;
  padding-right: 5px;
}

.responsibility {
  clear:both;
  width:50%;
  margin-left:auto;
  margin-right:auto;
}

.requiredCue,.registration_requiredCue {
  color: red;
  margin-right: -5px;
}

.readonly {
  color: rgb(84, 84, 84);
  background-color: rgb(235, 235, 228);
}

.hidden{
  display:none;
}

.highlight{
  border:red;
}

.required {
  background-color: pink;
  border-color: red;
}

.fieldnote {
  font-style: italic;
  clear: both;
}

/*** Field-specific styling ***/

#patronAddress1_EMAIL_inputNoMatch, #patronAddress1_EMAIL_CONFIRM_inputNoMatch, #patron_pin_inputNoMatch {
  color: red;
}
#patronAddress1_EMAIL_inputMatch, #patronAddress1_EMAIL_CONFIRM_inputMatch, #patron_pin_inputMatch {
  color: green;
}

#patronAddress1_PHONE_input {
    box-shadow:none;
}

#smsFields {
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
  display:none;
}

#smsContact {
  display:table-cell;
  width:70%
}

/*** Responsibility Statement ***/

.responsibility {
  margin-top: 20px;
}
.statement-caption {
  font-weight: 700;
}
.responsibility p {
    text-align: left;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
/*** Registration Buttons ***/

.registrationButtons {
    clear:both;
    margin: 20px auto;
    text-align: center;
}

.button, .button:visited {
    background-color: #306D9C;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    margin-left: 3px;
    padding: 4px 8px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}

.button:hover{
    background-color:#2d4e79;
}

.disabledButton, .disabledButton:hover{
    background-color:#bbb;
}

.registrationCancel {
    margin-left: 5px;
}

.usps_dialog p, .usps_dialog h3 {
    padding:0px;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
}

#zip_warning_div {
    display:inline-block;
    margin-left:5px;
    background:url(redbadge.png);
    background-repeat:no-repeat;
    background-size:20px 20px;
    width:20px;
    height:20px;
    margin-bottom:-3px;
}

/*** Mobile styling ***/
body.mobile {
  font-size: x-large;
}

.mobile .registrationRow {
  min-height: 45px;
  width: 100%;
}

.mobile .registrationLabel {
  text-align: left;
  font-size: x-large;
  width: 100%;
}

.mobile .registrationField {
  width: 100%;
}

.mobile .registrationInput {
  width: 95%;
  border-width: 2px;
}

.mobile .registrationInput.registrationSelect {
  width: 97%;
}

.mobile input.registrationTextField,
.mobile select.registrationSelect {
  font-size: x-large;
}

.mobile input[type="checkbox"] {
  transform: scale(2);
  vertical-align: middle;
}

.mobile #ui-datepicker-div {
  width: 90%;
}

.mobile .checkboxLabel {
  margin-left: 10px;
  vertical-align: middle;
}

.mobile .requiredCue {
  vertical-align: middle;
}

.mobile input.button {
  font-size: xx-large;
}

.mobile button.button {
  font-size: x-large;
}

.mobile .ui-dialog {
  width:96% !important;
}

.mobile .usps_dialog_content {
  min-height: 0px !important;
  max-height: 300px !important;
}

.mobile .customFormText,.mobile .statement-message p,.mobile .registrationSubTitle,.mobile .responsibility{
  display:block!important;
  width:90%;
  margin-left: auto;
  margin-right: auto;
  text-align:left;

}


/* *********************************************************** */

.statement-checkbox p{
text-align:center;
}

.checkbox-section{
width:fit-content;
margin:10px auto;
}

.registrationCustRow{
text-align:right;
}