@CHARSET "ISO-8859-1";

/*
 * Heading styles
 */
h1.scp_heading {
}

h2.scp_heading {
}

h3.scp_heading {
}

div.scp_heading {
}

p.scp_heading {
}

img.scp_heading {
}

/*
 * Style for the <div> that contains the card images
 */
.scp_card_images {
}

/*
 * Style for individual card images (<img> elements)
 */
.scp_card_image {
    padding: 0.4em;
}

img.scp_card_image {
    width: 60px;
    height: 40px;
}

img#scp_secureLinks_mcrd_logo {
    width: 156px;
    height: 83px;
}

img#scp_secureLinks_visa_logo {
    width: 113px;
    height: 83px;
}

img#scp_secureLinks_pci_logo {
    width: 105px;
    height: 83px;
}

/*
 * Styles for a 'text field' (static text followed by a value that varies at runtime)
 */
.scp_xml_container_text {
    margin: 0.5em 0 0.5em 0;
}

.scp_text_field {
    margin: 0.5em 0 0.5em 0;
}

.scp_text_field_label {
}

.scp_text_field_value {
}

.scp_text {
}

.scp_static_text {
}

.scp_xml_text {
}

.scp_formatted_text {
}

/*
 * Style for the text that warns you you're in a test environment
 */
.scp_test_environment_warning {
    margin: 1em;
    font-weight: bold;
    font-size: 1.3em;
}

/****************************************************
 * Styles used to implement 'popup' help for 
 * individual input items, etc.
 ****************************************************/

.scp_popup_help {
    display: inline;
}

/*
 * Div that holds the help icon and (normally hidden)
 * help text
 */
.scp_popup_help_inner {
    display: inline;
    cursor: help;
}

/*
 * Help text when hidden
 */
.scp_popup_help > div.scp_popup_help_inner > div {
    display: none;
}

/*
 *  Help text when displayed
 */
.scp_popup_help > div.scp_popup_help_inner:hover > div {
    position: absolute;
    display: block;
    z-index: 999;
    margin-left: 15em;
}

.scp_popup_help_text {
    background-color: #fff;
    padding: 0.5em;
    border: 1px solid #000;
    min-width: 15em;
}

/*************************************************
 * Styles for input elements
 *************************************************/

/*
 * Div that contains all of the elements relating to
 * a particular input field 
 */
.scp_input_container {
    clear: left;
}
/*
 * Div that contains all of the elements relating to
 * a particular select field
 */
.scp_select_container {
    clear: left;
    margin-bottom: 0.5em;
}

.scp_select_select {
    max-width: 25em;
    height:1.7em;
    border: 1px solid #000;
}
/*
 * Div that contains the hidden input field
 */
.scp_input_hidden {
    display: none;
}

/*
 * Style for input field description
 */
.scp_desc_text {
}

/*
 * Style for input field label when labels are
 * configured to appear above the input fields
 */
.scp_label_block {
    display: block;
    margin: 0em;
    width: 15em;
}

/*
 * Style for input field label when labels are
 * configured to appear to the left of the input fields
 */
.scp_label_inline {
    display: block;
    float: left;
    margin: 0em;
    width: 15em;
}

/*
 * Additional styling that is to be applied to mandatory 
 * field labels
 */
.scp_mandatory {
    font-weight: bold;
}

/*
 * Style for a text input field
 */
.scp_text_input {
}

/*
 * Style for a disabled text input field
 */
.scp_text_input[disabled] {
    background-color: #DDDDDD;
}

/*
 * Style for the label that separates the month and year parts
 * of a card date input field
 */
.scp_card_date_separator {
}

/*
 * Style used to display input validation errors
 */
.scp_error_text {
    font-weight: bold;
    color: #ff0000;
}

.scp_message_text {
    font-weight: bold;
    color: #000fff;
    margin: 0.5em 0;
}
.scp_error_link_text {
    font-weight: bold;
    color: #000fff;
    text-decoration: underline;

}

.scp_schedule_link_text {
    font-weight: bold;
    color: #000fff;
    text-decoration: underline;

}
/***************************************************************
 * Other form-related styles
 ***************************************************************/

/*
 * Style for a submit button
 */
.scp_button {
}

/*
 * Div that contains a form
 */
.scp_form_container {
}

/*
 * Style for <form> elements
 */
.scp_form {
}

/*
 * Style for <fieldset> elements
 */
fieldset.scp_fieldset {
    padding-right: 1em;
    padding-left: 1em;
    padding-bottom: 0.5em;
    padding-top: 0.5em
}

/*********************************************************
 * Styles for security-related elements
 *********************************************************/

/*
 * Style for the IFrame that hosts the 3-D Secure page
 */

.scp_threeDSecure_iframe {
    width: 70%;
    height: 30em;
    visibility: hidden;
}

/*
 * Style for a 3-D Secure logo (an <a href=...> element
 * whose content is the actual image)
 */
.scp_3dsecure_logo {
    margin: 0.5em;
}

/*
 * Style for a Trustwave logo (an <a href=...> element
 * whose content is the actual image)
 */
.scp_trustwave_logo {
    margin: 0.5em;
}

/**************************************************************
 * The following styles relate to the purchase details table.
 **************************************************************/

/*
 * The table itself
 */
.scp_purchase_details {
    border: solid;
    border-width: 2px;
    border-collapse: collapse;
}

/*
 * Table caption
 */
.scp_purchase_details > caption {
    text-align: left;
}

/*
 * All cells in the header row
 */
.scp_purchase_details > thead > tr > th {
    border: solid;
    border-width: 1px;
    padding: 0.2em;
    font-weight: bold;
}

/*
 * All cells in body rows
 */
.scp_purchase_details > tbody > tr > td {
    border: solid;
    border-width: 1px;
    padding: 0.2em;
}

/*
 * Right-justify amounts
 */
.scp_amount {
    text-align: right;
}

/*
 * The <tbody> section that displays the items being purchased  
 */
.scp_purchase_details_items {

}

/*
 * The <tbody> section that displays surcharge details  
 */
.scp_purchase_details_surcharge {
}

.scp_purchase_details_surcharge_summary {
    font-style: italic;
    background-color: yellow;
}

.scp_purchase_details_surcharge_label {
}

.scp_purchase_details_surcharge_value {
}

/*
 * The <tfoot> that contains the purchase total row
 */
.scp_purchase_details_total {
    font-weight: bold;
}

/*************************************************************
 * The following styles relate to the card details definition list
 *************************************************************/

/*
 * The definition list
 */

dl.scp_card_details {
}

dt.scp_card_details {
    width: 12em;
    float: left;
}

/*
 * Styling for individual definition terms
 */
.scp_card_details_cardNumber {
}

.scp_card_details_cardholderName {
}

.scp_card_details_email {
}

.scp_card_details_expiryDate {
}

.scp_card_details_startDate {
}

.scp_card_details_issueNumber {
}

/**********************************************************
 * Styling for the framework that surrounds each form
 **********************************************************/
.scp_framework {
}

.scp_framework_header {
}

.scp_framework_header_left {
    float: left;
}

.scp_framework_header_middle {
    margin: 0 auto;
}

.scp_framework_header_right {
    float: right;
}

.scp_view {
    clear: both;
}

.scp_view_inner {
    text-align: left;
}

.scp_page_container {
    margin-top: 1em;
    border: 1px solid #ddd;
    padding: 0.5em;
}

#scp_confirmationPage_purchaseDetails_container {
    margin: 0.5em;
}

#scp_confirmationPage_cardDetails_container {
    margin: 0.5em;
}

.scp_framework_footer {
}

.scp_framework_footer_left {
    float: left;
}

.scp_framework_footer_middle {
    margin: 0 auto;
}

.scp_framework_footer_right {
    float: right;
}

/**********************************************************
 * Styles relating to the modal window that displays
 * help text
 **********************************************************/

/*
 * Class for divs that hold (normally hidden) modal windows.
 */
.scp_modalPage {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

/*
 * A modal window's background. This is used to 'grey out' the 
 * part of the original form that is visible behind a modal window.
 */
.scp_modal_background {
    filter: Alpha(Opacity=40);
    -moz-opacity: 0.4;
    opacity: 0.4;
    width: 100%;
    height: 100%;
    background-color: #999999;
    position: absolute;
    z-index: 500;
}

.scp_help {
    background-color: #fff;
    border: solid 3px #777;
    position: relative;
    z-index: 1000;
    width: 70%;
    height: 70%;
    overflow: auto;
    top: 15%;
    left: 15%;
}

.scp_help div.css_inner_help span {
    display: block;
}

.scp_help_top {
    background-color: #ccc;
    color: #000;
    margin: 0.2em;
    padding: 0.5em;
}

.scp_help_top_right {
    float: right;
}

.scp_help_bottom {
    color: #000;
    margin: 0.2em;
    padding: 0.5em;
}

.scp_help_bottom_right {
    text-align: right;
}

.scp_help_title {
    font-weight: bold;
}

.scp_help_close {
    font-weight: bold;
}

.scp_help_body {
    padding: 10px;
}

.scp_delete_confirmation div.css_inner_help span {
    display: block;
}

.scp_delete_top {
    background-color: #ccc;
    color: #000;
    margin: 0.2em;
    padding: 0.5em;
}

.scp_delete_bottom {
    color: #000;
    margin: 0.2em;
    padding: 0.5em;
}

.scp_delete_title {
    font-weight: bold;
}

.scp_delete_body {
    padding: 10px;
}

.scp_success_message {
    background-color: #fff;
    border: solid 3px #777;
    position: relative;
    z-index: 1000;
    width: 30%;
    overflow: auto;
    margin: auto;
    margin-top: 29%;
}

.scp_success_message div.css_inner_help span {
    display: block;
}

.scp_success_message_top {
    background-color: #ccc;
    color: #000;
    margin: 0.2em;
    padding: 0.5em;
}

.scp_success_message_bottom {
    color: #000;
    margin: 0.2em;
    padding: 0.5em;
}

.scp_success_message_title {
    font-weight: bold;
}

.scp_success_message_body {
    padding: 10px;
}

/*******************************************
 * Default style for the busy indicator
 *******************************************/

#busy_indicator_text {
    font-size: 1.2em;
    font-weight: bold;
    border: 2px solid #666;
    background-color: #fff;
    padding: 1em 3em;

    /*
     * Don't change the following properties unless
     * you're sure you know what you're doing!
     */
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1000;
    overflow: hidden;
    width: auto;
    height: auto;
}

/* Wallet styling */
.scp_wallet_providers {
    border: 0.2em solid #006892;
    border-radius: 0.4em;
    min-width: 16em;
    margin: 0.5em;
}

.scp_wallet_provider {
    clear: left;
    min-height: 6em;
    padding: 1em;
    border-bottom: 1px solid #006892;
    cursor: pointer;
}

.scp_wallet_provider:hover {
    background-color: #C9E4F1;
}

div.scp_wallet_image {
    float: left;
    min-width: 14em;
    border-right: 0.1em solid #006892;
    height: 100%;
    text-align: center;
}

img.scp_wallet_image {
    height: auto;
    max-width: 14em;
    border: none;
    max-height: 6em;
}

.scp_wallet_description {
    padding: 0.5em 0;
    margin-left: 16em;
}

/**************************************************************
 * The following styles relate to the Capita Wallet 
 * management styling.
 **************************************************************/
.scp_stored_wallet_card_container_cardImage {
    float: left;
    width: 6em;
}

.scp_stored_wallet_card_container_expiryDate > .scp_stored_card_label {
}

.scp_stored_wallet_card_container_cardActions {
    position: absolute;
    top: 1em;
    margin-top: 0.5em;
}

.scp_stored_wallet_card_container_expiryDate {
}

.scp_stored_wallet_card_container_cardErrors {
    min-width: 19em;
}

.scp_stored_card_label {
    float: left;
    min-width: 11em;
    font-weight: bold;
}

#scp_new_card_text {
    font-weight: bold;
}

.scp_stored_card_value {
    padding-bottom: 0.5em;
}

.scp_stored_card_value_card {
}

.scp_stored_card .scp_form {
    text-align: left;
    margin: 0.5em 0;
    position: relative;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    display:flex;
}

.scp_select_stored_card {
    padding: 1em 0 1em;
    border-radius: 6px 0 0 6px;
    order: 1;
    flex: 8 auto;
    min-height: auto;
}

.scp_delete_stored_card {
    border-left: 1px solid #ccc;
    padding: 1.5em 0;
    text-align: center;
    border-radius: 0 6px 6px 0;
    order: 2;
    flex: 2 auto;
}

.scp_new_stored_card {
    padding: 1.5em 0;
    border-radius: 6px;
    order: 1;
    flex: 1 auto;
    min-height: auto;
}

.scp_delete_confirmation {
    background-color: #fff;
    border: solid 1px #777;
    box-shadow: 0px 0px 15px #777;
    position: relative;
    z-index: 1000;
    width: 70%;
    height: 26%;
    overflow: auto;
    top: 35%;
    left: 15%;
    min-height: 15em;
    padding: 0.5em;
}

.scp_delete_confirmation div.css_inner_help span {
    display: block;
}

.scp_select_stored_card:hover, .scp_new_stored_card:hover {
    background-color: #C9E4F1;
}

.scp_delete_stored_card:hover {
    background-color: #d28686;
}

.scp_stored_card_default_image {
    position: absolute;
    top: 4px;
    left: 2px;
    width: 21px;
    height: auto;
}

.scp_stored_wallet_card_container_cardLastFourDigits {
    margin-top: 0.5em;
}

.scp_text_field_div_label {
    font-weight: bold;
    float: left;
    width: 10em;
}

.scp_card_new_button, .scp_card_selection_button, .scp_card_delete_button {
    min-width: 5em;
}

.scp_stored_card_expired, .scp_stored_card_default {
    font-weight: bold;
    color: #ff0000;
    white-space: nowrap;
    margin-top: 0.5em;
    text-align: left;
}

.scp_stored_card_image {
    margin: 0.5em 0 0 1em;
    width: 64px;
    height: 40px;
}

img.scp_stored_card_image_fade {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.scp_wallet_owner_name {
    font-weight: bold;
}

.scp_stored_card_select_card {
    margin-left: 24em;
}

/* Wallet Management Only */
.scp_text_input {
    padding: 5px;
    border-radius: 5px;
    box-shadow: inset 0px 3px 2px #e9e9e9;
    background-color: #fff;
    border: 1px solid #aaa;
    max-width: 20em;
}

select.scp_text_input {
    max-width: 28em;
    width: 21em;
}

.scp_stored_card_action_update {
    float: left;
    margin: 0 0.2em 0.2em 0;
}

#scp_stored_wallet_card_container_defaultCard {
    float: left;
    color: #FF0000;
}

.wallet_action_profile {
    float: left;
    margin-right: 1em;
}

.wallet_menu_account {
    float: left;
    margin-right: 2em;
}

.wallet_menu_cards, .wallet_menu_scheduling, .wallet_menu_account {
    margin-bottom: 0.5em;
}

.wallet_menu_option_link {
    width: 250px !important;
    height: 125px !important;
}

.wallet_menu_option_link img {
    padding: 0.2em;
    background-color: #04476f !important;
}

.wallet_menu_option_link img:hover {
    cursor: pointer;
    background-color: #ccc !important;
}

.wallet_menu_option.wallet_menu_planned {
    display: inline-block;
}

.wallet_menu_text {
    width: 250px;
}

/* */
.wallet_stored_card {
    min-height: 3em;
    margin-bottom: 1em;
}

.wallet_selected_card_details {
    text-align: left;
}

#wallet_selected_card_image {
    float: left;
    width: 7em;
    margin-left: 0;
    height: 6em;
    position: relative;
    padding-top: 0.5em;
}

.wallet_selected_card_label {
    font-weight: bold;
    float: left;
    width: 12em;
}

.wallet_selected_card_value {
    padding-bottom: 0.5em;
}

/* Billing Address */
.wallet_billing_addresses_container {

}

.wallet_billing_addresses {
}

.wallet_billing_address .scp_form {
    text-align: left;
    margin: 0.5em 0;
    position: relative;
    border: 1px solid #ccc;
    border-radius: 6px;
    display:flex;
}

.wallet_select_billing_address {
    padding: 0.8em;
    order:1;
    flex: 8 auto;
    min-height:auto;
}

.wallet_delete_billing_address {
    border-left: 1px solid #ccc;
    padding: 5em 0 0;
    text-align: center;
    border-radius: 0 6px 6px 0;
    min-height:auto;
    order:2;
    flex:2 auto;
}

.wallet_billing_new_address .scp_form {
    min-height: 4.5em;
    padding: 0.7em;
    flex:2 auto;
}

.wallet_select_billing_address:hover, .wallet_billing_new_address:hover {
    background-color: #C9E4F1;
    border-radius: 6px 0 0 6px;
}

.wallet_billing_new_address:hover {
    border-radius: 6px;
}

.wallet_delete_billing_address:hover {
    background-color: #d28686;
}

.wallet_billing_address_container {
    clear: left;
}

.wallet_billing_address_label {
    float: left;
    min-width: 12em;
    padding-bottom: 0.5em;
    font-weight: bold;
}

.wallet_billing_address_value {
    padding-bottom: 0.5em;
}

.wallet_billing_address_action {
    margin-left: 24em;
    width: 14em;
}

.scp_billing_address_image {
    height: 40px;
    width: auto;
}

#wallet_billing_address_container_addressActions {
    position: absolute;
    top: 1em;
    width: 0em;
    margin: 0.5em 0;
}

#wallet_billing_address_action_update {
    float: left;
    margin-right: 0.2em;
}

#scp_accountManagementPage_walletOwnerName {
    margin-top: 0.5em;
    border-top: 1px solid #D5E6F2;
    padding-top: 0.5em;
}

/* Landing page */
#scp_landingPage_container {
    border: 1px solid #ccc;
    border-radius: 14px;
    padding: inherit;
    background: url("../images/landingPage.png") no-repeat;
    background-position: left bottom;
    background-size: 20em;
    background-color: #fff;
}

#scp_landingPage_title {
    font-size: 2em;
    font-weight: bold;
    color: #fff;
    padding: 0.5em;
    text-align: center;
    background-color: #04476f;
}

#scp_landingPage_description {
    line-height: 1.5em;
    padding: 1.5em 0.5em 1.5em 20em;
    position: relative;
    z-index: 0;
    min-height: 10em;
}

#scp_landingPage_buttons_login_button {
    border: none;
    font-size: 2em;
    background-color: #04476f;
    border-radius: 6px;
    color: #fff;
    padding: 0.3em 2em;
    cursor: pointer;
}

#scp_landingPage_buttons_login_button:hover {
    background-color: #00bbce;
}

#scp_landingForm_container {
    padding: 1em;
    text-align: right;
    border-radius: 0 0 11px 11px;
}

#scp_landingPage_loggedOut, #scp_landingPage_ssoError {
    text-align: center;
    padding: 1em;
    background-color: #ff0000;
    color: #fff;
    margin: 0;
    border-radius: 11px 11px 0 0;
}

#scp_landingPage_footer {
    background-color: #fff;
    border-radius: 0 0 11px 11px;
    padding: 0.5em;
}

.scp_text_field_label {
    width: 15em;
    display: inline-block;
    font-weight: bold;
}

#scp_accountManagementPage_update_status {
    font-weight: bold;
    color: #000fff;
    margin: 0.5em 0;
}

/* Scheduled payments styles */
.wallet_interval_container {
    display: block;
}

.wallet_menu_continuous {
    float: left;
    margin-right: 30px;
    width: 34%;
}

.wallet_menu_continuous, .wallet_menu_planned {
    margin-bottom: 0.5em
}

.wallet_menu_continuous {
    float: left;
    margin-right: 2em;
    display: inline-block;
    width: 250px;
}

div#scp_scheduleSetupPage_paymentPlan_P, div#scp_scheduleSetupPage_paymentPlan_C {
    display: block;
    font-size: 1em;
    font-weight: bold;
}

#scp_scheduleSetupPage_userInterval {
}

div#scp_scheduleSetupPage_planned_end_payments_choice_description {
    display: inline-block;
    width: 14em;
    float: left;
    font-weight: bold;
}

#scp_scheduleSetupPage_planned_end_payments_choice_1,
#scp_scheduleSetupPage_planned_end_payments_choice_2,
#scp_scheduleSetupPage_planned_end_payments_choice_3 {
    display: inline-block;
    float: left;
    width: 100%;
}

#scp_scheduleSetupPage_endPaymentDate_label {
    /*  width: 100%; */
}

#scp_scheduleSetupPage_endPaymentDate,
#scp_scheduleSetupPage_numberOfPayments,
#scp_scheduleSetupPage_scheduleAmount,
#scp_scheduleSetupPage_userScheduleAmount
{
    display: block;
    margin-left: 2.55em;
    text-align: left;
    width: 35%;
}

#wss_optional_container {
    width: 8em;
    float: left;
    padding-bottom: 0em;
}

#scp_scheduleSetupPage_amount_label {

}

span#scp_scheduleSetupPage_amount_span,
span#scp_scheduleSetupPage_initialAmount_span,
span#scp_scheduleSetupPage_balanceAmount_span{
    display: inline-block;
    width: inherit;
    margin-left: auto;
    margin-right: auto;
}

#scp_scheduleSetupPage_initialAmount_label,
#scp_scheduleSetupPage_balanceAmount_label{
    display: inline-block;
}

div#scp_scheduleSetupPage_plannedEndPaymentsChoice {
    width: 60%;
    display: inline-block;
    margin-top: auto;
}

div#scp_scheduleSetupPage_plannedEndPaymentsContainer {
    vertical-align: top;
}

#scp_scheduleSetupPage_plannedEndPaymentsChoice_1_container,
#scp_scheduleSetupPage_plannedEndPaymentsChoice_2_container,
#scp_scheduleSetupPage_plannedEndPaymentsChoice_3_container {
    margin-top: 0.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border: none;
    margin-bottom: 0.5em;
    border: none;
}

.scp_scheduleSetupPage_plannedEndPaymentsChoice_selected {

}

label#scp_scheduleSetupPage_planned_end_payments_choice_1_label,
label#scp_scheduleSetupPage_planned_end_payments_choice_2_label,
label#scp_scheduleSetupPage_planned_end_payments_choice_3_label
{
    display: inline-block;
    margin-left: 1.25em;
    width: 10em;
    text-align: left;
}

input#scp_scheduleSetupPage_planned_end_payments_choice_1_input,
input#scp_scheduleSetupPage_planned_end_payments_choice_2_input,
input#scp_scheduleSetupPage_planned_end_payments_choice_3_input
{
    display: inline-block;
    float: left;
}

#scp_scheduleSetupPage_userScheduleAmount_input {
    font-weight: normal;
}

div.planned-payment-dates {
    width: inherit;
}

div.planned_payment_date_header {
}

.payment_date_value {
    width: 5.5em;
    display: inline-block;
    font-weight: bold;
}

.planned_payment_date_footer {
    margin-top: 1em;
    border-top: 1px solid #ddd;
    padding-top: 0.5em;
}

.planned_payment_date_header {
    border-bottom: 1px solid #ddd;
}

.payment_2 {
    height: 16px;
    width: 16px;
    background: url(../images/paymenttaken.gif) 0 0 ;
}

.payment_1 {
    height: 16px;
    width:16px;
    background: url(../images/paymenttaken.gif) 50px 0;
}

.planned-payment-dates-toggler {
    float: left;
    margin-right: .5em;
    height: 20px;
    width: 17px;
    cursor: pointer;
}
div#planned-payment-dates_toggle {
    background: url("../images/ui-icons_444444_256x240.png") 0px 48px;
    /* background: red; */
    height: 14px;
    margin-left: -20px;
    position: relative;
    width: 15px;
    margin-top: -30px;
}
div#planned-payment-dates_toggle2 {
    background: url("../images/ui-icons_444444_256x240.png") -16px 48px;
    /* background: red; */
    height: 14px;
    margin-left: -20px;
    position: relative;
    width: 15px;
    margin-top: -30px;
}
div#completed_payments_header, div#planned_payments_header {
    padding-left: 2em;
    padding-bottom: 0.5em;
}

.toggle-inactive {
    background: #ddd;
    cursor: pointer;
}

.toggle-active {
    background: #faf2cc;
    cursor: pointer;
}

.planned_payment_date:nth-child(odd) {
    border-bottom: 2px dotted #ddd;
    border-top: 2px dotted #ddd;
}

#scp_scheduleSetupPage_narrative_totalAmount_label {
}

#scp_scheduleSetupPage_narrative_totalAmount {
}

img.scp_stored_card_icon {
    margin-bottom: -7px;
    width: 30px;
    vertical-align: top;
}

.wallet_schedule_setup_managers .scp_form {
    text-align: left;
    margin: 0.5em 0;
    position: relative;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    display: flex;
    align-items: stretch;
}

.wallet_schedule_setup {
    padding: 0.5em 0em 0em 0.5em;
    text-align: left;
    order:1;
    flex: 9;
    min-height: auto;
}

.wallet_delete_schedule_setup {
    border-left: 1px solid #ccc;
    padding: 5em 0 0 0;
    text-align: center;
    border-radius: 0 6px 6px 0;
    order: 2;
    flex: 2;
    min-height: auto;
}

.wallet_delete_schedule_setup:hover {
    background-color: #d28686;
    cursor: pointer;
}

.wallet_schedule_setup:hover {
    background-color: #C9E4F1;
    cursor: pointer;
}

.wallet_schedule_setup_manager_container {
    clear: left;
}

.wallet_schedule_setup_manager_label {
    float: left;
    min-width: 12em;
    padding-bottom: 0.5em;
    font-weight: bold;
}

#wallet_schedule_setup_manager_container_scheduleSetupManagerActions {
    position: absolute;
    top: 5em;
    width: 0em;
    margin: 0.5em 0;
}

.wallet_schedule_setup_manager_action {
    margin-left: 24em;
    width: 14em;
}

div#wallet_schedule_setup_manager_action_update {
    float: left;
    margin-right: 0.2em;
}

div#wallet_schedule_setup_manager_action_update,
div#wallet_schedule_setup_manager_action_delete,
div#wallet_billing_address_button_update,
div#wallet_billing_address_button_delete {
    width: 6em;
    float: left;
    margin-right: 1em;
}

div.wallet_menu_options {
    text-align: left;
    display: inline-block;
    width: 100%;
}

select#scp_scheduleSetupPage_firstPaymentDate_day_select,
select#scp_scheduleSetupPage_endPaymentDate_day_select {
    width: 4em;
}

select#scp_scheduleSetupPage_firstPaymentDate_month_select,
select#scp_scheduleSetupPage_endPaymentDate_month_select {
    width: 10em;
}

select#scp_scheduleSetupPage_firstPaymentDate_year_select,
select#scp_scheduleSetupPage_endPaymentDate_year_select {
    width: 5em;
}

select#scp_scheduleSetupPage_scheduleIntervalType_select {
    width: 8em;
}

#scheduleAmount_value, #paymentAmount_value, #paymentDate_value, #paymentStatus_value {
    font-weight: normal;
}

div#scheduleAmount_header, div#surchargeAmount_header, div#paymentAmount_header, div#surchargeAmount_value,
#scheduleAmount_value, #paymentAmount_value, #amount_footer, #paymentAmount_footer, #scheduleAmount_footer,
div#surchargeAmount_footer
{
    text-align: right;
}

div#paymentStatus_footer {
    width: 2em;
}
.key {
    float: left;
    margin-right: .5em;
    font-size: small;
}

div#paymentStatus_header, div#paymentStatus_value {
    margin-left: 1em;
    width: 1em;
}

span#scp_scheduleSetupPage_narrative_totalAmount_value {
}

#scp_scheduleSetupPage_narrative_totalAmount_label {
}

div#scp_scheduleSetupPage_paymentPlan_C_container .scp_stored_card {
    min-height: 6em;
}

div#scp_scheduleSetupPage_paymentPlan_P_container .scp_stored_card {
    min-height: 6em;
}

div#scp_scheduleSetupPage_paymentPlan_C_container .scp_select_stored_card {
    width: 100%;
}

div#scp_scheduleSetupPage_paymentPlan_P_container .scp_select_stored_card {
    width: 100%;
}

div#scp_scheduleSetupPage_paymentPlan_C_container .scp_new_stored_card {
    min-height: 6em;
}

div#scp_scheduleSetupPage_paymentPlan_P_container .scp_new_stored_card {
    min-height: 6em;
}

div#scp_scheduleSetupPage_paymentdates_container {
    margin-bottom: 1em;
}

/* Style the list */
ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {
    float: left;
}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/**************************************************************
 * The following styles relate to resolutions up to 640px. 
 **************************************************************/
@media screen and (min-device-width: 1px) and (max-device-width: 640px), screen and (min-width: 1px) and (max-width: 640px), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dppx) {


    div.scp_wallet_image {
        float: none !important;
        border-right: none !important;
    }

    .scp_wallet_description {
        margin-left: 0 !important;
    }

    .scp_stored_wallet_card_container_expiryDate, .scp_stored_wallet_card_container_defaultCard {
        float: none !important;
    }

    .scp_stored_wallet_card_container_cardActions, #wallet_billing_address_container_addressActions {
        position: inherit !important;
        top: inherit !important;
        margin-top: 0px !important;
        margin-left: 0em;
        clear: left;
    }

    .scp_stored_card_select_card, .wallet_billing_address_action {
        margin-left: 0 !important;
    }

    .scp_stored_card_action_container {
        margin-left: 0em !important;
    }

    .wallet_menu_account {
    }

    .scp_text_input {
        max-width: 20em;
    }

    .scp_delete_confirmation {
        min-height: 18em;
    }

    #scp_landingPage_title {
        font-size: 1.4em;
    }

    #scp_landingPage_buttons_login_button {
        font-size: 1.7em;
    }

    #scp_landingPage_description {
        padding-left: 1em;
    }

    #scp_landingPage_container {
        background-size: 22em;
    }

    .scp_label_inline {
        float: inherit;
    }

    .scp_help {
        width: inherit;
        z-index: 2000;
        top: 0;
        left: 0;
        height: 100%;
        border-radius: 0px;
    }

    .scp_help_top {
        width: 100% !important;
        position: fixed;
    }

    .scp_help_top_right {
        margin-right: 1.5em;
    }

    .scp_help > .scp_help_body {
        margin-top: 5em;
    }

    .scp_popup_help > div.scp_popup_help_inner:hover > div {
        margin-left: 0em;
    }

    .scp_delete_confirmation {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

    .wallet_schedule_setup_manager_label, .wallet_billing_address_label {
        width: 7.5em !important;
        padding-bottom: 0.5em;
        overflow-wrap: break-word;
        min-width: 7.5em;
        font-weight: bold;
    }

    #wallet_schedule_setup_manager_container_nextPaymentDate {
        float: none !important;
    }

    .wallet_schedule_setup {

    }

    div.wallet_schedule_setup_manager_action_container {
        margin-top: 2em;
    }

    #wallet_schedule_setup_manager_container_scheduleSetupManagerActions {
        top: 5.5em;
    }

    .wallet_schedule_setup_managers {
        #min-height: 15em;
    }

    .wallet_schedule_setup {
        #min-height: 15em;
    }

    .wallet_delete_schedule_setup {
        #min-height: 15em;
    }

    .wallet_delete_schedule_setup {
        #padding: 7em 0 0 0;
        #height: 6em;
    }
}

@media screen and (min-width: 500px) and (orientation: landscape) {
    div#paymentStatus_header, div#paymentStatus_value,
    div#attemptedPaymentDate_value, div#attemptedPaymentDate_header {
        display: inline-block !important;
    }

    .scp_text_field_value {
        min-width: 55%;
    }

    span#scp_scheduleSetupPage_itemDescription_label,
    span#scp_scheduleSetupPage_reference_number_label,
    span#scp_scheduleSetupPage_subReference_number_label,
    span#scp_scheduleSetupPage_narrative_firstPaymentDate_label,
    span#scp_scheduleSetupPage_narrative_interval_label,
    span#scp_scheduleSetupPage_narrative_scheduleId_label,
    span#scp_scheduleSetupPage_narrative_paymentMethod_label,
    span#scp_scheduleSetupPage_narrative_amountOf_label,
    span#scp_scheduleSetupPage_balance_amount_label,
    label#scp_scheduleSetupPage_balanceAmount_label,
    label#scp_scheduleSetupPage_amount_label,
    span#scp_scheduleSetupPage_amount_label,
    label#scp_scheduleSetupPage_initialAmount_label,
    span#scp_scheduleSetupPage_initialAmount_label,
    span#scp_scheduleSetupPage_endPaymentDate_static_label,
    span#scp_scheduleSetupPage_numberOfPayments_static_label,
    span#scp_scheduleSetupPage_narrative_surchargedAmount_label,
    span#scp_scheduleSetupPage_narrative_totalAmount_label {
        min-width: 10em;
    }
}

@media screen and (max-width: 400px) {
    div#paymentDate_header, div#paymentDate_value, div#paymentDate_footer {
        display:none;
    }
}

/**************************************************************
 * The following styles relate to resolutions up to 480px. 
 **************************************************************/
@media screen and (min-device-width: 1px) and (max-device-width: 480px), screen and (min-width: 1px) and (max-width: 480px), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dppx) {
    .scp_stored_wallet_card_container_cardImage {
        float: none !important;
        width: 100%;
        height: 4em;
    }

    .scp_card_selection_button {
        width: 90%;
    }

    .scp_stored_card_label {
        float: left;
    }

    .scp_stored_card {
    }

    .scp_select_stored_card {
    }

    .scp_new_stored_card {
    }

    .scp_delete_stored_card {
        padding: 4em 0 0 0;
    }

    .wallet_select_billing_address {
    }

    .wallet_delete_billing_address {
        #height: 6.5em;
        #margin-left: 79%;
    }

    .scp_stored_card_select_card {
        text-align: center;
    }

    .scp_stored_wallet_card_container_cardLastFourDigits, .scp_stored_wallet_card_container_expiryDate, .scp_stored_wallet_card_container_cardErrors {
        padding-left: 0.5em;
    }

    .scp_card_selection_button {
        width: 90%;
    }

    #wallet_selected_card_image {
        float: none !important;
    }

    #scp_landingPage_title {
        font-size: 1.2em;
    }

    #scp_landingPage_buttons_login_button {
        font-size: 1.5em;
        width: 95%;
    }

    #scp_landingPage_container {
        background-size: 20em;
        background-position: left bottom 3em;
    }

    .scp_text_field_label {
        width: inherit;
        display: block;
    }

    .scp_text_input {
        max-width: 15em;
    }

    select.scp_text_input {
        max-width: 16em;
    }

    .payment_date_value {
        width: 4.5em;
        display: inline-block;
        font-weight: bold;
        font-size:small;
    }

    .planned_payment_date_header {
        border-bottom: 1px solid #ddd;
    }

    span#scp_scheduleSetupPage_itemDescription_label,
    span#scp_scheduleSetupPage_reference_number_label,
    span#scp_scheduleSetupPage_subReference_number_label,
    span#scp_scheduleSetupPage_narrative_firstPaymentDate_label,
    span#scp_scheduleSetupPage_narrative_interval_label,
    span#scp_scheduleSetupPage_narrative_scheduleId_label,
    span#scp_scheduleSetupPage_narrative_paymentMethod_label,
    span#scp_scheduleSetupPage_narrative_amountOf_label,
    span#scp_scheduleSetupPage_balance_amount_label,
    label#scp_scheduleSetupPage_amount_label,
    span#scp_scheduleSetupPage_amount_label,
    label#scp_scheduleSetupPage_initialAmount_label,
    span#scp_scheduleSetupPage_initialAmount_label,
    span#scp_scheduleSetupPage_endPaymentDate_static_label,
    span#scp_scheduleSetupPage_numberOfPayments_static_label,
    span#scp_scheduleSetupPage_narrative_totalAmount_label,
    span#scp_scheduleSetupPage_narrative_surchargedAmount_label {
        overflow-wrap: break-word;
        display: inline-block;
        vertical-align: baseline;
    }

    span#scp_scheduleSetupPage_itemDescription_value,
    span#scp_scheduleSetupPage_reference_number_value,
    span#scp_scheduleSetupPage_subReference_number_value,
    span#scp_scheduleSetupPage_narrative_firstPaymentDate_value,
    span#scp_scheduleSetupPage_narrative_interval_value,
    span#scp_scheduleSetupPage_narrative_scheduleId_value,
    span#scp_scheduleSetupPage_narrative_paymentMethod_value,
    span#scp_scheduleSetupPage_narrative_amountOf_value,
    span#scp_scheduleSetupPage_balance_amount_value,
    label#scp_scheduleSetupPage_amount_value,
    label#scp_scheduleSetupPage_initialAmount_value {
        display: inline-block;
    }

    .wallet_schedule_setup_managers {
        min-height: 16em;
    }

    .wallet_schedule_setup {
        min-height: 15.5em;
    }

    .wallet_delete_schedule_setup {
        min-height: 9em;
    }

    .wallet_schedule_setup_manager_value {
        margin-left: 6.5em;
    }

    #wallet_schedule_setup_manager_container_itemDescription .wallet_schedule_setup_manager_value {
        min-width: 45%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    div#scp_scheduleSetupPage_plannedEndPaymentsChoice {
        width: 95%;
    }

}