﻿header {
    background: url(../images/gold-header.png) no-repeat top center;
    height: 250px;
}

.profilePage > .tab-nav {
    padding: 0;
    clear: both;
}

.tab-nav > .profile-id {
    margin-top: 20px;
}


.select-membership #welcome {
    color: #6E6F71 !important;
}

.select-membership #productname {
    font-weight: bold !important;
    text-align: center !important;
}

.tab-nav > .profile-id > h4 {
    margin: 0;
    font-family: Source Sans Pro;
    font-size: 16px;
    color: #6E6F71;
    background: #E1E0E0;
    padding: 15px;
    cursor: pointer;
}

    .tab-nav > .profile-id > h4:before {
        background: url(/profile.svg);
        width: 24px;
        height: 24px;
        margin-right: 10px;
        content: "";
        display: inline-block;
        vertical-align: middle;
    }

.tab-nav > .tab-navigation {
    margin-top: 1px;
}

    .tab-nav > .tab-navigation > h4 {
        font-family: Source Sans Pro;
        font-weight: bold;
        font-size: 18px;
        line-height: 16px;
        color: #6E6F71;
        text-transform: uppercase;
        margin-top: 0;
        margin-bottom: 0;
        background: #E1E0E0;
        padding: 15px;
        cursor: pointer;
    }

    .tab-nav > .tab-navigation > ul,
    .tab-nav > .profile-id > ul {
        list-style-type: none;
        margin: 0 0 20px;
        padding: 0;
        display: none;
    }

    .tab-nav > .profile-id.activated h4:after, .tab-nav > .tab-navigation.activated h4:after {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-animation: slide-down .3s ease-out;
        -moz-animation: slide-down .3s ease-out;
    }

    .tab-nav > .profile-id.activated ul, .tab-nav > .tab-navigation.activated ul {
        display: block;
        -webkit-animation: slide-down .3s ease-out;
        -moz-animation: slide-down .3s ease-out;
    }

@-webkit-keyframes slide-down {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes slide-down {
    0% {
        opacity: 0;
        -moz-transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}


aside.tab-nav.noPaymentPlan > .tab-navigation:first-child > ul > li {
    display: block;
}

    aside.tab-nav.noPaymentPlan > .tab-navigation:first-child > ul > li:last-child {
        display: none;
    }

.tab-nav > .tab-navigation > ul > li,
.tab-nav > .profile-id > ul > li {
    text-transform: capitalize;
    padding: 0 15px;
    margin-top: 8px;
}

.tab-nav > .tab-navigation > h4:after,
.tab-nav > .profile-id > h4:after {
    background: url(/up-arrow.svg) no-repeat right center;
    width: 16px;
    height: 16px;
    content: "";
    float: right;
    margin-top: 3px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.tab-nav > .tab-navigation > ul > li:first-child,
.tab-nav > .profile-id > ul > li:first-child {
    margin-top: 10px;
}

.tab-nav > .tab-navigation > ul > li > a,
.tab-nav > .profile-id > ul > li > a {
    font-family: Source Sans Pro;
    font-size: 14px;
    line-height: 18px;
    color: #6E6F71;
}

    .tab-nav > .tab-navigation > ul > li > a:hover,
    .tab-nav > .tab-navigation > ul > li > a.active-link, .tab-nav > .profile-id > ul > li > a:hover, .tab-nav > .profile-id > ul > li > a.active-link {
        font-weight: bold;
    }

.tab-content > [class*= col-] {
    padding: 0;
}

.tab-content > div > h2 {
    font-family: Source Sans Pro;
    font-size: 21px;
    color: #6E6F71;
    margin: 20px 0 !important;
    text-align: left;
}

.change-password > form > .form-group > label {
    font-family: Source Sans Pro;
    font-size: 14px;
    line-height: 18px;
    color: #6E6F71;
}

.payment-history.table-responsive {
    border: 0 none;
}

.payment-history > .table > thead {
    background: gainsboro;
}

    .payment-history > .table > tbody > tr > td,
    .payment-history > .table > tbody > tr > th,
    .payment-history > .table > tfoot > tr > td,
    .payment-history > .table > tfoot > tr > th,
    .payment-history > .table > thead > tr > td,
    .payment-history > .table > thead > tr > th {
        border-bottom: 1px solid #ddd;
        border-top: 0 none;
    }

.payment-history > .table > tbody > tr > td {
    color: black;
}

    .payment-history > .table > tbody > tr > td > time {
        display: block;
        color: grey;
    }

    .payment-history > .table > tbody > tr > td:nth-child(2) {
        color: grey;
    }

.new-card-request .form-group {
    margin-bottom: 20px;
}

    .new-card-request .form-group > select {
        border-radius: 0;
    }

    .new-card-request .form-group > label:first-child {
        display: block;
    }

    .new-card-request .form-group > label {
        color: #6E6F71;
        font-weight: normal;
    }

    .new-card-request .form-group input[type=tel] {
        width: 100%;
    }

    .new-card-request .form-group .btn-default {
        margin-right: 10px;
    }

.profilePage .crmEntityFormView .actions {
    display: none;
}

#cardExpiration #EntityFormPanel {
    margin: 0;
}

#check-validation, .newCardRequest #InsertButton {
    background: #A5C755;
    border-color: #A5C755;
    color: #FFFFFF;
    border-radius: 0;
    margin-top: 10px;
    padding: 9px 25px;
}

    #check-validation:hover, #check-validation:focus, .newCardRequest #InsertButton:hover, .newCardRequest #InsertButton:focus {
        background: #D4E2B0;
        border-color: #D4E2B0;
        color: #FFFFFF;
        border-radius: 0;
    }


/*New Card Request CSS Starts*/
.newCard .tab-column .section tr:nth-child(4),
.newCard .tab-column .section tr:nth-child(5),
.newCard .tab-column .section tr:nth-child(6),
.newCard .tab-column .section tr:nth-child(7),
.newCard .tab-column .section tr:nth-child(8),
.newCard .tab-column .section tr:nth-child(10),
.newCard .tab-column .section tr:nth-child(n+10),
.newCard .tab-content tbody tr:nth-child(3) .clearfix .control #scg_expirymonthyear,
.newCardRequest.newCardRequestPayment .tab-column .section tr:nth-child(9) {
    display: none;
}



.newCardRequest.newCardRequestPayment .section tr:nth-child(3), .newCardRequest.newCardRequestPayment .section tr:nth-child(4) {
    width: 50%;
    float: left;
}

.newCardRequest.newCardRequestPayment .section tr:nth-child(4) {
    display: table-row;
}

.newCardRequest.newCardRequestPayment tr:nth-child(3) .clearfix .control select#month,
.newCardRequest.newCardRequestPayment .section tr:nth-child(3) .clearfix .control select#year {
    width: 40% !important;
}

.newCard .tab-column .section input[type="radio"] {
    display: inline-block;
    vertical-align: middle;
}

.newCardRequest td.boolean-radio-cell .info {
    margin-bottom: 7px;
}

.newCardRequest .crmEntityFormView .tab {
    margin-bottom: 0;
}

.newCardRequest .crmEntityFormView .actions {
    border: 0 none;
    padding: 0;
    margin: 0;
}

.newCardRequest #InsertButton {
    margin-top: 0;
}

.newCardRequest.newCardRequestPayment input#UpdateButton {
    display: none;
}

.newCard .tab-content tbody tr:nth-child(3) .clearfix .control select#month, .newCard .tab-content tbody tr:nth-child(3) .clearfix .control select#year {
    float: left;
    width: calc(20% - 5px);
    height: 35px;
    margin-right: 5px;
    background-color: #fff;
}

.newCardRequest.newCardRequestPayment .tab-column input[type="text"]#scg_cvvnumber {
    width: 100px;
}

.newCardRequest.newCardRequestPayment .tab-column:nth-child(2) {
    display: none;
}

section.profilePage .select-membership .entity-form .tab.clearfix:nth-child(2),
section.profilePage .select-membership .entity-form .clearfix .control .tab.clearfix {
    display: block;
}

section.profilePage .select-membership .entity-form .clearfix .address-picklist-container + .tab.clearfix {
    display: none !important;
}

section.profilePage .select-membership .entity-form .section colgroup + tbody > tr:nth-child(4) {
    height: 340px;
}

.select-membership .userProfile .entity-form > .tab[data-name="Tab3_summary"] > .tab-column > div > fieldset > table[data-name="Tab1_summary_section_4"] > tbody > tr:nth-child(3) {
    height: auto;
}

section.profilePage .select-membership .entity-form .section colgroup + tbody > tr tr:nth-child(3) {
    height: auto;
}

section.profilePage #check-validation {
    float: left;
    position: relative;
    bottom: 0;
}

section.profilePage #scg_physicaladdress {
    margin-bottom: 10px;
}


/*Payment History Details Page CSS*/

.orderListDetails .info {
    width: 100%;
}

.orderListDetails td.clearfix.cell.money.form-control-cell .control, .orderListDetails td.clearfix.cell.text.form-control-cell .control {
    width: 100%;
}

.orderListDetails .crmEntityFormView .cell {
    padding-bottom: 0;
}

.orderListDetails td.clearfix.cell.subgrid-cell .control {
    width: 100%;
}

.orderListDetails legend {
    font-family: Source Sans Pro;
    font-size: 21px;
    color: #6E6F71;
    margin: 0;
    text-align: left;
}

.orderListDetails.orderSummary #salesorderdetailsGrid table > thead > tr > th:first-child {
    width: 22% !important;
    display: table-cell;
}

.orderListDetails.orderSummary .view-grid table > thead > tr > th {
    padding: 20px 8px;
}

.orderListDetails.orderSummary #salesorderdetailsGrid table > thead > tr > th,
.orderListDetails.orderSummary #salesorderdetailsGrid table > tbody > tr > td,
.orderListDetails.orderSummary .view-grid table > tbody > tr > td .dropdown.action {
    display: none;
}

    .orderListDetails.orderSummary #salesorderdetailsGrid table > tbody > tr > td:first-child {
        display: table-cell;
        float: left;
    }

.orderListDetails table > thead > tr > th > a {
    color: #000000;
}

.orderListDetails table > thead > tr {
    background: #DDDDDD;
}

.orderListDetails table > tbody > tr > td {
    border-top: 0 none;
}

    .orderListDetails table > tbody > tr > td > .info > label[for=Payments] {
        display: none;
    }

.orderListDetails .view-toolbar.grid-actions ul.view-select.nav.nav-pills > li > a {
    color: #000;
    padding: 0;
    margin-bottom: 10px;
}

/*Payment History Details Page CSS ends*/

/*---Start styling for Order list table---*/
.orderListDetails table > thead > tr {
    background-color: #e0e0e0;
}

    .orderListDetails table > thead > tr > th,
    .orderListDetails table > tbody > tr > td {
        font-weight: normal;
        padding: 20px;
        color: #283036;
    }

        .orderListDetails table > thead > tr > th a,
        .orderListDetails table > tbody > tr > td a {
            color: #283036;
        }

.orderListDetails .table-striped > tbody > tr:nth-of-type(even) {
    background-color: #f2f2f2;
    border: solid 1px #d9d9d9;
    border-left: none;
    border-right: none;
}

/*--Start Styling for Pagination--*/
.orderListDetails .pagination {
    margin-top: 40px;
}

    /*.sporting-events .entity-notes .note {
    border: 1px solid #E1E1E1;
    margin-top: 20px;
    padding-top: 0;
}

.sporting-events .entity-notes .note .alert-info {
        background: none;
}*/

    .orderListDetails .pagination > .active > a,
    .orderListDetails .pagination > .active > a:focus,
    .orderListDetails .pagination > .active > a:hover,
    .orderListDetails .pagination > .active > span,
    .orderListDetails .pagination > .active > span:focus,
    .orderListDetails .pagination > .active > span:hover,
    .orderListDetails .pagination > li > a:hover,
    .orderListDetails .pagination > li > span:hover,
    .orderListDetails .pagination > li:last-child > a:hover,
    .orderListDetails .pagination > li:first-child > a:hover {
        background-color: #A5C755;
        border-color: #A5C755;
        color: #FFFFFF;
        border-radius: 0px;
    }

    .orderListDetails .pagination > li > a,
    .orderListDetails .pagination > li > span {
        background: #DFDFDB;
        color: #6D6E70;
        margin-left: 1px;
    }

    .orderListDetails .pagination > .disabled > a,
    .orderListDetails .pagination > .disabled > a:focus,
    .orderListDetails .pagination > .disabled > a:hover,
    .orderListDetails .pagination > .disabled > span,
    .orderListDetails .pagination > .disabled > span:focus,
    .orderListDetails .pagination > .disabled > span:hover {
        color: #ddd;
        background-color: transparent;
        border-color: transparent;
    }

    .orderListDetails .pagination .glyphicon-play.play-backward {
        transform: rotate(180Deg);
    }

        .orderListDetails .pagination .glyphicon-play.play-backward:before {
            margin-top: -2px;
            display: block;
        }

    .orderListDetails .pagination > li > select {
        padding: 7px 5px;
        border-color: #ddd;
        margin-left: 1px;
    }
/*--End Styling for Pagination--*/

/*---End styling for Order list table---*/

.orderListDetails .remainderLink {
    position: relative;
    top: 293px;
}


/*Remainer Payment Page css starts*/
section.remainderPaymentPage.select-membership.payment h2 {
    text-align: left;
}

section.remainderPaymentPage.select-membership.payment .paymentOption {
    display: block;
    transform: none;
    left: 15px;
}

section.remainderPaymentPage.select-membership.payment table {
    margin: 40px 0 0;
}

section.remainderPaymentPage.select-membership.payment #cardExpiration {
    float: left;
}

section.remainderPaymentPage.select-membership.payment #bpaymessage {
    margin: 20px 0 40px;
    text-align: left;
}

section.remainderPaymentPage.select-membership.payment label[name=Status] {
    text-align: left;
    font-size: 16px;
    color: #6E6F71;
    text-transform: capitalize;
}

section.remainderPaymentPage.select-membership.payment .actionButton {
    clear: both;
    margin: 0;
}

.orderConfirmationPayment .membershipStatus {
    text-align: left;
}

body.profileSCG .select-membership.orderConfirmationPayment .alert.status,
body.profileGold .select-membership.orderConfirmationPayment .status.alert,
body.profilePlatinum .select-membership.orderConfirmationPayment .status.alert,
body.profileSAGold .select-membership.orderConfirmationPayment .status.alert,
body.profileSAPlatinum .select-membership.orderConfirmationPayment .status.alert,
body.profileLifestyle .select-membership.orderConfirmationPayment .status.alert,
body.profileSport .select-membership.orderConfirmationPayment .status.alert,
body.profilePremier.select-membership.orderConfirmationPayment .status.alert,
body.profileSapphire .select-membership.orderConfirmationPayment .status.alert {
    margin: 20px 0 !important;
}

.select-membership.orderConfirmationPayment .alert.alert-danger label.failed {
    max-width: none;
    background: none;
    padding: 0;
    margin: 0;
    font-weight: normal;
}

.select-membership.orderConfirmationPayment small.percent100 {
    display: none;
}

/*Remainer Payment Page css ends*/

.profilePage label#birthdate_label,
.profilePage label#mobilephone_label,
.profilePage label#scg_physicaladdress_label,
.profilePage label#telephone1_label {
    text-align: left;
}


@media (min-width: 768px) {
    .profilePage > .tab-nav {
        padding: 0 15px;
    }

    .tab-nav > .profile-id,
    .tab-nav > .tab-navigation {
        border: 1px solid #dedede;
        padding: 15px;
        margin-top: 20px;
    }

        .tab-nav > .profile-id > h4, .tab-nav > .tab-navigation > h4 {
            background: none;
            padding: 0;
            cursor: default;
        }

            .tab-nav > .tab-navigation > h4:after,
            .tab-nav > .profile-id > h4:after {
                background: none;
            }

        .tab-nav > .tab-navigation > ul,
        .tab-nav > .profile-id > ul {
            display: block;
            margin-bottom: 0;
        }

            .tab-nav > .tab-navigation > ul > li {
                background: none;
                padding: 0;
            }

                .tab-nav > .tab-navigation > ul > li:after {
                    background: none;
                    width: 0;
                    height: 0;
                    content: "";
                    float: none;
                }

            .tab-nav > .tab-navigation > ul > li,
            .tab-nav > .profile-id > ul > li {
                padding: 0;
            }

                .tab-nav > .tab-navigation > ul > li > a {
                    font-family: Source Sans Pro;
                    font-size: 14px;
                    line-height: 18px;
                    color: #6E6F71;
                }


    .userProfile input#emailaddress1 {
        width: 381px;
    }

    .newCardRequest .tab-column select, .newCardRequest .tab-column #scg_policereportnumber {
        width: 550px;
    }
    .newCardRequest .tab-column select, .newCardRequest .tab-column ##scg_printedcardsrequired {
        width: 550px;
    }

    .newCardRequest.newCardRequestPayment .tab-column input[type="text"] {
        width: 370px;
    }

    section.profilePage #check-validation {
        float: center;
        /*bottom: 320px;*/
        bottom: 50px;
    }


    .orderListDetails .info {
        width: 18%;
    }

    .orderListDetails td.clearfix.cell.money.form-control-cell .control, .orderListDetails td.clearfix.cell.text.form-control-cell .control {
        width: 80%;
    }

    .orderListDetails .remainderLink {
        top: 165px;
    }

    section.remainderPaymentPage.select-membership.payment .paymentOption {
        left: 0;
        top: 20px;
    }

    .newCardRequestPayment .crmEntityFormView {
        width: 370px;
    }
}

@media (min-width: 991px) {
    .orderListDetails .remainderLink {
        top: 155px;
    }
}
