﻿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, 
.newCard .tab-column .section tr td.lookup, 
.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{
    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: 370px;
    }
    
    .newCardRequest.newCardRequestPayment .tab-column input[type="text"]{
        width: 370px;
    } 

    section.profilePage #check-validation {
        float: right;
        /*bottom: 320px;*/
        bottom: 217px;
    }


    .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;
    }
}
