/* Buttons */
.btn-primary {
    width:100%;
    border:none;
    border-radius:2px;
    background-color:#FB3F1F;
    padding:10px 5px;
    font-weight:700;
    font-size:16px;
    -webkit-transition:background-color 0.2s;
    -moz-transition:background-color 0.2s;
    -o-transition:background-color 0.2s;
    transition:background-color 0.2s;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus
{
    background-color:#FF6600;
    -webkit-transition:background-color 0.2s;
    -moz-transition:background-color 0.2s;
    -o-transition:background-color 0.2s;
    transition: background-color 0.2s;
}
.btn-primary.disabled,
.btn-primary.disabled:hover,
.btn-primary.disabled:active,
.btn-primary.disabled:focus,
.btn-primary.disabled:active:focus {
    background-color:#FC816C;
}
.container {
    min-width: 270px;
}
/* Hub Sections */
.hub-hr {
    margin:0;
}
.hub-section {
    padding:15px 0;
}
.hub-section .hub-title {
    display:inline-block;
    font-weight:400;
    line-height:30px;
    margin:0 -41px 0 0;
    text-align:left;
}
.hub-section .hub-toggle {
    background:#FF4020;
    display:inline-block;
    float:right;
    font-size:20px;
    font-weight:normal;
    height:30px;
    line-height:30px;
    margin:0;
    padding:0;
    position:relative;
    text-align:center;
    text-decoration:none;
    width:30px;
    z-index:2;
}
.hub-toggle:after {
    content: "\f068";
    font-family:FontAwesome;
    font-size:16px;
    height:30px;
}
.hub-toggle.collapsed:after {
    content: "\f067";
}

toggle-add-another-credential:after {
    content: "\f068";
    font-family:FontAwesome;
    font-size:24px;
    height:30px;
}
toggle-add-another-credential.collapsed::after {
    content: "\f067";
}

/* Helper Image */
.helper-image {
    margin:15px;
}
.helper-image .img,
.helper-image .helper-image-wrapper img {
    display:block;
    margin:15px auto;
    width:200px;
}
/* Registration Page */
.login-link {
    display:block;
    text-align:right;
}
.both-rfid-types {

}
#gtag_id {
    text-transform:uppercase;
}
.checkbox-label {
    font-weight: normal;
}

    /* Welcome Alert */
.welcome-alert {
    margin:0 0 15px 0;
    text-align:left;
}
/* Balance Section */
.balance-amount {
    display: inline-block;
    float: right;
    font-weight:400;
    margin:10px 0;
    text-align: right;
    line-height:30px;
}
.nonref-balance {
    margin:10px 0 0 0;
    color:#5d5d5d;
}
.balance-section .balance-amount {
    margin:0;
}
/* Topup Section */
.select-amount {
    display:none;
}
/* Transactions Section */
.order-details-total {
    padding-bottom:-5px;
}
.order-details-total hr {
    display:none;
}
/* Tag ID Section */

#show-ticket .hub-tag-id {
    font-size:14px;
    color: gray;
    font-family: 'Roboto Mono', monospace;
    margin: 0;
}

#show-ticket .hub-tag-add-id {
    font-size:24px;
    color: #FF6600;
    font-family: 'Roboto Mono', monospace;
    margin: 0;
}

#show-ticket .credential-container {
    width: 100%;
    margin: 10px auto;
    text-align: center;
    background-color: #f2f2f2;
    border-radius: 10px;
    border: 4px solid gray;
    padding: 15px 5px 15px 5px;
    vertical-align: middle;
}

#show-ticket .add-credential-container {
    border: 4px solid #FF4020;
    cursor: pointer;
}

#show-ticket .add-credential-container .hub-tag-id {
    color: #FF4020;
}

#show-ticket .add-credential-container {
    cursor: pointer;
}

.hub-section {
    cursor: pointer;
}

/* Payment Section */
#payment-button-wrapper,
#topup-slider-wrapper {
    padding-bottom:15px;
}
/* Pay Page */
.back-button-spacer {
    display:none;
}
/* Footer */
footer {
    padding-top: 10px;
}

@media screen and (min-width: 767px) {
    footer {
        height: 38px;
        padding: 10px;
    }
}

/* Helper Image */
#helper-image {
    text-align:center;
}

#helper-image img {
    max-width:100%;
    padding:0 0 15px 0;
    width:200px;
}

#helper-image p {
    text-align:left;
}

/* Transactions */
#show-transactions .two-methods {
    margin:0 0 15px 0;
}

#show-transactions .order-details-table {
    margin:-5px 0 5px 0;
    padding-top:5px;
}

.order-wrapper {
    border:1px solid #eaeaea;
    border-radius:3px;
    margin-bottom:15px;
    padding:5px 5px 0 5px;
}

.order-heading {
    margin: 0;
}