﻿
input[type=text], input[type=password] {
    outline: 0;
    width: 100%;
    outline: 0;
    height: 42px;
    font: 400 14px/20px"Open Sans",sans-serif;
    line-height: 20px;
    line-height: 1.5 !important;
    color: #000;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    box-shadow: 2px 2px 4px 0 #eee;
    padding: 0 5px;
    box-sizing: border-box;
}

    input[type=text]:focus, input[type=password]:focus {
        border: 1px solid #6288b9;
    }

    input[type=text]:hover, input[type=password]:hover {
        border: 1px solid #b0b0b0;
    }

    input[type=text]:disabled {
        background: #FFF;
        border: 1px solid #FFF;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.10);
        color: #ccc;
    }

        input[type=text]:disabled:hover {
            background: inherit;
            color: #9D9E9E;
        }

input[readonly=ReadOnly] {
    background: #FFF;
    border: 1px solid #FFF;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.10);
    color: #ccc;
}

textarea {
    padding: 10px;
    width: 100%;
    font: 400 14px/20px "Open Sans", sans-serif;
    color: #454545;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.20);
    border: 1px solid #e1e0e0;
    min-height: 80px;
}

    textarea:focus {
        border: 1px solid #6288b9;
    }

    textarea:hover {
        border: 1px solid #b0b0b0;
    }

select {
    outline: 0;
    width: 100%;
    outline: 0;
    height: 42px;
    font: 400 14px/20px"Open Sans",sans-serif;
    line-height: 20px;
    line-height: 1.5 !important;
    color: #000;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    box-shadow: 2px 2px 4px 0 #eee;
    padding: 0 5px;
    box-sizing: border-box;
}

    select:focus {
        border: 1px solid #6288b9;
    }

    select:hover {
        border: 1px solid #b0b0b0;
    }

input[type=submit], button, input[type=button] {
    background: #ff7800;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: none;
    border-bottom: #b25501 solid 4px;
    color: #ffffff;
    cursor: pointer;
    font: 600 17px/26px 'Open Sans', sans-serif;
    padding: 8px 30px;
    text-decoration: none;
    margin-left: 10px;
    -webkit-appearance: none;
    text-transform: uppercase;
}

    input[type=submit]:hover, button:hover, input[type=button]:hover {
        background: #d86703;
        border-bottom: #9b4b04 solid 4px;
    }

    input[type=submit]:active, button:active, input[type=button]:active {
        position: relative;
        top: 1px;
    }

    input[type=submit]:disabled, button:disabled, input[type=button]:disabled {
        background-color: #ebebeb;
        border-bottom: #aaaaaa solid 4px !important;
        color: rgba(0,0,0,.25);
        cursor: no-drop;
    }

        input[type=submit]:disabled:hover, button:disabled:hover, input[type=button]:disabled:hover {
            background-color: #ebebeb;
            border-bottom: #aaaaaa solid 4px !important;
            color: rgba(0,0,0,.25);
        }

    input[type=submit].cancel-btn {
        background: #454545;
        border-bottom: #1e1e1e solid 4px;
    }

    input[type=submit]:hover.cancel-btn {
        background: #161616;
        border-bottom: #000 solid 4px;
    }


body {
    word-wrap: break-word;
    background: #f4f4f4;
}
/* Inner page start here */
.headerclass {
    background: #fff;
}

.membershipcate {
    float: left;
    width: 100%;
    margin-bottom: 20px;
    background: #002842;
}

    .membershipcate .app-colem {
        padding: 10px;
    }

        .membershipcate .app-colem .row {
            width: 100%;
            margin: 0;
        }

        .membershipcate .app-colem label {
            color: #fff;
            width: 30%;
            text-align: right;
            margin-right: 20px;
            font: 600 16px/40px "Open Sans", sans-serif;
        }

        .membershipcate .app-colem .requiredmemField {
            width: 50%;
            float: left;
        }

.inner-page-content {
    float: left;
    width: 100%;
}

    .inner-page-content.BatchedDocumentsSection {
        margin-top: 20px;
    }

.inner-heading-sec {
    background: #666;
    margin: 0 0 20px;
    padding: 5px 0;
    text-align: center;
}

    .inner-heading-sec h1 {
        color: #fff;
        font: 600 24px/30px "Open Sans", sans-serif;
        display: inline-block;
    }

.application-form-outer {
    margin: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: 0px 1px 4px rgba(0,0,0,.3);
    margin-bottom: 20px;
    padding-top: 0;
}

    .application-form-outer table.tableGrid_layout.MerchandiseTable {
        margin: 20px 2%;
        width: 96%;
    }

    .application-form-outer .app-btn-group {
    }

.app-heading {
    background: #002842;
    color: #fff;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 5px 6px;
    align-items: center;
    min-height: 48px;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.app-required {
    padding: 10px;
    border-bottom: 1px solid #e1e0e0;
}

    .app-required span {
        color: #222222;
        font: 400 14px/18px "Open Sans", sans-serif;
    }

        .app-required span span {
            color: #f00;
        }

.app-heading h3 {
    color: #fff;
    font: 600 17px/24px "Open Sans", sans-serif;
    padding: 0 15px;
    margin: 0;
    text-transform: uppercase;
    display: inline-block;
    vertical-align: top;
}


.bttnCopyAddress input[type=submit].CopyFromResidential {
    background: #1a73e8;
    border: 0;
    font: 600 16px/26px 'Open Sans', sans-serif;
    padding: 5px 15px;
    border-radius: 3px;
}

.app-colem {
    float: left;
    width: 100%;
    padding: 0 10px;
}

    .app-colem .row {
        font: 400 14px/20px 'Open Sans', sans-serif;
        color: #454545;
        float: left;
        width: calc(100% / 4 - 20px);
        margin: 20px 10px 0;
    }

.divheight .app-colem .row {
    height: 70px;
}

.row.title-head {
    padding: 0 1%;
    font: 700 16px/40px 'Open Sans', sans-serif;
}

.row.desc-note {
    height: auto;
    padding: 10px 1%;
    width: 98%;
    font: 400 14px/22px 'Open Sans', sans-serif;
}

.app-colem.amount-desc .row {
    padding: 0 1%;
    width: 98%;
    text-align: right;
}

    .app-colem.amount-desc .row input {
        margin-left: 10px;
    }

.app-colem .row a {
    color: #454545;
    text-decoration: underline;
}

.app-colem label {
    font: 600 14px/20px "Open Sans", sans-serif;
    color: #454545;
    float: left;
    width: 100%;
    margin: 0;
}

.app-colem .row > div {
    display: inline-block;
}

    .app-colem .row > div.requiredinp {
        width: 50%;
        position: relative;
        vertical-align: top;
        margin: 0;
    }

        .app-colem .row > div.requiredinp input[type=text] {
            width: 92%;
        }

        .app-colem .row > div.requiredinp select {
            width: 92%;
        }

.app-colem label.licence-no span {
    color: #454545;
    font: 600 14px/40px 'Open Sans', sans-serif;
}

.app-colem label span {
    color: #f00;
    font: 600 14px/20px "Open Sans", sans-serif;
}

    .app-colem label span.lblmsg {
        color: #f00;
        font: 700 13px/40px "Open Sans", sans-serif;
    }

.app-colem input[type=text]:disabled {
    text-shadow: 1px 1px 0 rgba(256, 256, 256, 1);
    background: #FFF;
    border: 1px solid #FFF;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.10);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .10);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.10);
    color: #454545;
}

    .app-colem input[type=text]:disabled:hover {
        background: inherit;
        color: #9D9E9E;
    }

.app-colem input[readonly=ReadOnly] {
    text-shadow: 1px 1px 0 rgba(256, 256, 256, 1);
    background: #FFF;
    border: 1px solid #FFF;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.30);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .30);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.30);
}

.app-colem input[type=submit], .app-colem button, .app-colem input[type=button] {
    font: 700 14px/20px 'Open Sans', sans-serif;
    -webkit-border-radius: 8px 8px 8px 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #337fed;
    padding: 0px 15px;
    -webkit-box-shadow: inset 1px 1px 0px 0px #97c4fe;
    -moz-box-shadow: inset 1px 1px 0px 0px #97c4fe;
    box-shadow: inset 1px 1px 0px 0px #97c4fe;
    cursor: pointer;
    color: #ffffff;
    height: 32px;
    display: inline-block;
    background: -webkit-linear-gradient(180deg, #098fe3 5%, #6288b9 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -moz-linear-gradient(180deg, #098fe3 5%, #6288b9 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -ms-linear-gradient(180deg, #098fe3 5%, #6288b9 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: linear-gradient(180deg, #098fe3 5%, #6288b9 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#098fe3", endColorstr="#6288b9");
}

    .app-colem input[type=submit]:hover, .app-colem button:hover, .app-colem input[type=button]:hover {
        background: -webkit-linear-gradient(90deg, #098FE3 5%, #004F80 100%);
        background: -moz-linear-gradient(90deg, #098FE3 5%, #004F80 100%);
        background: -ms-linear-gradient(90deg, #098FE3 5%, #004F80 100%);
        background: linear-gradient(180deg, #004F80 5%, #098FE3 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#004F80", endColorstr="#098FE3");
    }

    .app-colem input[type=submit]:active, .app-colem button:active, .app-colem input[type=button]:active {
        position: relative;
        top: 1px;
    }

.app-colem .address-sec {
    width: 100%;
}

    .app-colem .address-sec label {
        margin-right: .5%;
        padding: 0 1%;
        width: 20.6%;
    }

    .app-colem .address-sec input[type="text"] {
        width: 70.3%;
    }

.app-colem .comment-note {
    width: 100%;
    height: 75px;
}

    .app-colem .comment-note label {
        width: 20.5%;
        vertical-align: top;
        height: 75px;
        line-height: 20px;
    }

    .app-colem .comment-note textarea {
        width: 70%;
        vertical-align: top;
    }

.app-colem .row.powered-sec {
    width: 100%;
    font: 400 12px/40px 'Open Sans', sans-serif;
    color: #222222;
}

    .app-colem .row.powered-sec label {
        width: 20.5%;
    }

.app-colem-heading {
    border-bottom: 1px solid #e1e0e0;
}

    .app-colem-heading .row label {
        color: #454545;
        display: inline-block;
        font: 600 14px/39px Arial, Verdana, Helvetica;
        height: 39px;
        margin-right: 1%;
        padding: 0 1%;
        text-align: center;
        width: 44%;
    }

.question-row {
    margin: 0px 0;
    border-top: 0px solid #e1e0e0;
}

    .question-row .app-colem .row {
        width: 100%;
        font: 400 12px/40px 'Open Sans', sans-serif;
        color: #454545;
    }

        .question-row .app-colem .row p {
            display: inline-block;
            font: 400 12px/40px 'Open Sans', sans-serif;
            color: #454545;
            margin: 0;
        }

.app-colem .row.fck-note {
    width: 100%;
    border-bottom: 1px solid #e1e0e0;
}

    .app-colem .row.fck-note label {
        width: 20.5%;
        vertical-align: top;
    }

    .app-colem .row.fck-note .cke_chrome {
        width: 72%;
        vertical-align: top;
        display: inline-block;
        margin: 5px 0;
    }

    .app-colem .row.fck-note:nth-child(2) label, .app-colem .row.fck-note:nth-child(1) label {
        line-height: 18px;
        height: 40px;
    }

    .app-colem .row.fck-note:nth-child(1) {
        height: 415px;
    }

        .app-colem .row.fck-note:nth-child(1) label {
            height: 415px;
        }

    .app-colem .row.fck-note:nth-child(6) {
        height: 415px;
    }

        .app-colem .row.fck-note:nth-child(6) label {
            height: 415px;
        }

.app-btn-group {
    text-align: center;
}

.row table {
    padding: 0;
    width: 100%;
    margin: 0;
}

    .row table td label, .row input[type="checkbox"] + label {
        width: 48%;
        display: inline-block;
        float: left;
        position: relative;
        padding-left: 9px;
    }

    .row table td input, .row input[type="checkbox"] {
        float: right;
    }

.row input[type="checkbox"], .row input[type="radio"] {
    width: 24px;
    height: 26px;
    position: relative;
    z-index: 10;
    opacity: 0;
    vertical-align: middle;
}

.row input[type="radio"] {
    height: 22px;
    width: 22px;
    float: left;
}

.row input + label:before {
    content: " ";
    background: url(../images/checkboxa.png) no-repeat left -2px;
    width: 24px;
    height: 30px;
    position: absolute;
    right: 0;
    top: 3px;
    display: inline-block;
    z-index: 1;
}

.row input[type="checkbox"] + label:before {
    top: 0px;
}

.row input[type="checkbox"] + label:before {
    background-position: 0 -3px;
}

.row table td input[type="radio"] + label:before {
    background-position: -36px -3px;
}
/* HOVER STYLES */
.row input[type="checkbox"]:hover + label:before, .row input[type="checkbox"] + label:hover:before {
    background-position: left -34px;
}

.row input[type="checkbox"]:focus + label:before {
    background-position: left -65px;
}

.row input[type="radio"]:hover + label:before, .row input[type="radio"] + label:hover:before {
    background-position: -36px -34px;
}

.row input[type="radio"]:focus + label:before {
    background-position: -36px -65px;
}
/* CHECKED STYLES */
.row input[type="checkbox"]:checked + label:before {
    background-position: left -133px;
}

.row input[type="checkbox"]:hover:checked + label:before, .row input[type="checkbox"]:focus:checked + label:before {
    background-position: left -166px;
}

.row input[type="checkbox"]:active:checked + label:before {
    background-position: left -199px;
}

.row input[type="radio"]:checked + label:before {
    background-position: -36px -133px;
}

.row input[type="radio"]:hover:checked + label:before, .row input[type="radio"]:focus:checked + label:before {
    background-position: -36px -166px;
}

.row input[type="radio"]:active:checked + label:before {
    background-position: -36px -199px;
}
/* DISABLED STYLES */
.row input[type="checkbox"]:disabled + label:before {
    background-position: left -96px;
}

.row input[type="radio"]:disabled + label:before {
    background-position: -36px -96px;
}

.row input[type="checkbox"]:checked:disabled + label:before {
    background-position: left -232px;
}

.row input[type="radio"]:checked:disabled + label:before {
    background-position: -36px -232px;
}
/* DISABLED STYLES */
.row input[type="checkbox"]:disabled + label:before {
    background-position: left -96px;
}

.row input[type="radio"]:disabled + label:before {
    background-position: -36px -96px;
}

.row input[type="checkbox"]:checked:disabled + label:before {
    background-position: left -232px;
}

.row input[type="radio"]:checked:disabled + label:before {
    background-position: -36px -232px;
}

.innerheading {
    background: #e7e7e7;
    border-bottom: 1px solid #e1e0e0;
    height: 39px;
    padding: 0 1%;
}

    .innerheading h4 {
        color: #454545;
        font: 700 18px/39px "Open Sans", sans-serif;
    }

.textarea.row {
    height: auto;
}

    .textarea.row label {
        height: 122px;
        vertical-align: top;
    }

    .textarea.row textarea {
        height: 100px;
        display: inline-block;
        width: 45%;
        vertical-align: top;
        margin: 5px 0;
    }

.row.coaches-checkbox-information input[type="checkbox"] + label {
    width: 44%;
    display: inline-block;
    float: left;
    position: relative;
}

    .row.coaches-checkbox-information input[type="checkbox"] + label::before {
        top: 6px;
        right: -38px;
    }

.row.Areyou input[type="checkbox"] + label {
    width: 43.3%;
}

.row.Areyou input + label::before {
    right: -36px;
    top: 5px;
}

/* Process payment start here */


/* Payment sectin start here */
.paymentOuter {
    padding: 1.4rem;
    margin-top: 1rem;
    border: 1px solid #dee2e6;
    background-color: #f8f9fa;
    border-radius: .25rem;
    margin-bottom: 30px;
}

.paymentLeft {
}

.paymentRight {
    position: relative;
    padding: 16px 16px 5px;
    border: 1px solid transparent;
    border-radius: .25rem;
    font: 400 14px/20px"Open Sans",sans-serif;
    clear: both;
    color: #0c5460;
    background-color: #D1ECF1;
}
.g-recaptcha {
    margin-bottom: 30px;
}

    .paymentRight img {
        max-width: 94%;
    }

.paymentLeft .app-colem .row {
    padding: .725rem 1.375rem;
    margin-bottom: 0;
    font-size: 15px;
    color: #111;
    width: 100%;
    text-align: left;
}

    .paymentLeft .app-colem .row label {
        width: 38%;
        padding-right: 15px;
        box-sizing: border-box;
        text-align: right;
        font-size: 14px;
        color: #111;
        font-weight: 600;
        padding-top: 10px;
    }

    .paymentLeft .app-colem .row > label + div {
        display: inline-block;
        width: 38%;
    }

.paymentLeft .row .expiryDate {
}

.paymentLeft .row > select > span {
    color: #f00;
    font: 300 13px/40px "Open Sans",sans-serif;
    padding: 0 .5%;
}

.paymentLeft .row label > small {
    font: 400 14px/20px "Open Sans",sans-serif;
    color: #f00;
}

.paymentLeft .app-colem .row > div.requiredinp {
    width: 75%;
}

.paymentLeft .app-colem .row span.surcharge {
    color: #f00;
    font: 300 13px/20px "Open Sans",sans-serif;
    padding: 0 .5%;
}

.checkoutbtn {
    float: left;
    width: 100%;
    text-align: center;
    margin: 20px 0;
}

    .checkoutbtn input[type=submit] {
        color: #fff;
        font: 600 18px/22px 'Open Sans', sans-serif;
        background: #ee7306;
        text-align: center;
        padding: 5px 20px;
        display: inline-block;
        border-radius: 5px;
        border: 0;
        box-shadow: 0px 0px 0 0 #97c4fe inset;
        height: auto;
    }

        .checkoutbtn input[type=submit]:hover {
            background: #9c4e08;
            text-decoration: none;
        }

.paymentsucces {
    padding: 20px 30px;
    background: url(../images/succespayment.png) no-repeat 0 23px;
    font: 600 16px/24px 'Open Sans', sans-serif;
    color: #2ab622;
}
/* Payment sectin ends here */
/* ends here*/

/* pop up message box start */

.msgpopup {
    background: #fff;
    border: 1px solid #bab9b9;
    font: 16px/24px "Open Sans",sans-serif;
}

    .msgpopup .mpHd {
        background: linear-gradient(180deg, #ffffff 12%, #b9b9b9 100%) repeat 0 0;
        background: -webkit-linear-gradient(-90deg, #ffffff 12%, #b9b9b9 100%) repeat 0 0;
        background: -moz-linear-gradient(-90deg, #ffffff 12%, #b9b9b9 100%) repeat 0 0;
        border-bottom: 1px solid #bab9b9;
        padding: 5px 10px;
        color: #454545;
        font: 400 18px/24px "Open Sans", sans-serif;
        text-transform: uppercase;
    }

    .msgpopup table {
        padding: 10px;
    }

        .msgpopup table tr td {
            font: 16px/24px "Open Sans",sans-serif;
        }

    .msgpopup .mpClose {
        text-align: center;
        padding: 10px 0;
    }

.msgpopupoverlay {
    background: rgba(0,0,0,.6);
}

.modalBackground {
    background: rgba(0,0,0,.6);
}

.modalPopup {
    background: #fff;
    border: 1px solid #bab9b9;
    font: 14px/24px "Open Sans",sans-serif;
    padding: 10px;
    text-align: center;
}

    .modalPopup p {
        font: 14px/24px "Open Sans",sans-serif;
        padding-bottom: 10px;
    }


.grdcustomField {
    padding: 20px 0 0 0;
}

    .grdcustomField > div > table {
        width: 100%;
        border-right: 0;
        float: left;
    }

    .grdcustomField > table > table {
        width: 100%;
        margin: 0;
        float: left;
    }

        .grdcustomField > table > table > tbody > tr, .grdcustomField > table > table > tbody {
            width: 100%;
            float: left;
        }

            .grdcustomField > table > table > tbody > tr > td {
                border: 0;
                background: none;
                float: left;
                width: 100%;
            }

            .grdcustomField > table > table > tbody > tr:nth-child(2n+1) > td {
                background: none;
            }

            .grdcustomField > table > table > tbody > tr > td input[type=checkbox] {
                margin-right: 5px;
            }

.tableGridmember {
    margin-top: 10px;
}

    .tableGridmember > tbody > tr {
        float: left;
        width: 100%;
        margin-bottom: 10px;
    }

        .tableGridmember > tbody > tr > td {
            float: left;
            width: 100%;
            text-align: left;
            padding: 0 20px;
        }

            .tableGridmember > tbody > tr > td:first-child {
                font: 600 14px/20px "Open Sans", sans-serif;
                color: #454545;
                margin-bottom: 5px;
            }

            .tableGridmember > tbody > tr > td input[type=text], .tableGridmember > tbody > tr > td input[type=password],
            .tableGridmember > tbody > tr > td textarea, .tableGridmember > tbody > tr > td select {
                width: 60%;
            }

            .tableGridmember > tbody > tr > td input[type=checkbox], .tableGridmember > tbody > tr > td input[type=radio] {
                margin-right: 10px;
            }

                .tableGridmember > tbody > tr > td input[type=checkbox] + label, .tableGridmember > tbody > tr > td input[type=radio] + label {
                    font: 400 14px/20px "Open Sans", sans-serif;
                    margin-right: 30px;
                }

            .tableGridmember > tbody > tr > td.customheading {
                font: 600 14px/22px "Open Sans",sans-serif;
                padding: 10px 1%;
            }

            .tableGridmember > tbody > tr > td > table.ajax__validatorcallout {
                width: auto;
            }

                .tableGridmember > tbody > tr > td > table.ajax__validatorcallout tr:last-child td {
                    border-bottom: 1px solid #000;
                }

.app-colem input[type=submit].CopyFromResidential {
    font: 400 14px/20px 'Open Sans', sans-serif;
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #92989E;
    padding: 0px 15px;
    -webkit-box-shadow: inset 1px 1px 0px 0px #c8c8c8;
    -moz-box-shadow: inset 1px 1px 0px 0px #c8c8c8;
    box-shadow: inset 1px 1px 0px 0px #c8c8c8;
    cursor: pointer;
    color: #000;
    height: 22px;
    display: inline-block;
    background: #e1e0e0;
    margin: 5px 43px 5px 0;
    float: right;
}

    .app-colem input[type=submit].CopyFromResidential:hover {
        background: #dbd9d9;
    }

.MerchandiseNote {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
    position: relative;
    padding: .75rem 1.25rem;
    margin: 20px;
    border: 1px solid transparent;
    border-radius: .25rem;
}
/* ends here */
/* member table grid start here */
.jumps-order-sec {
    margin-bottom: 20px;
}

.jump-order {
    border: 1px solid #e1e0e0;
    margin: 0;
    float: left;
    width: 100%;
    background: #fff;
}

.outer-order-table {
    display: table;
    width: 100%;
    margin: 0; /*border-bottom:1px solid #dddddd;*/
}

.order-table-head {
    display: table-header-group;
}

.order-table-row {
    display: table-cell;
    color: #000000;
    font: 400 14px/20px 'Open Sans', sans-serif;
    padding: 4px 5px;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
}

    .order-table-row a {
        color: #d9541e;
    }

    .order-table-row.delete {
        width: 20px;
        text-align: center;
        vertical-align: middle;
    }

    .order-table-row.Qty {
        width: 30px;
        text-align: center;
        vertical-align: middle;
    }

.order-table-colem .order-table-row:last-child {
    text-align: right;
    border-right: 0px solid #dddddd;
    width: 15%;
}

.familyList .order-table-row:last-child {
    width: auto;
}

.order-table-head .order-table-row {
    background: #d7d7d7;
    font: 600 14px/20px 'Open Sans', sans-serif;
}

.responsive-table {
    width: 100%;
    display: table;
}

.order-table-colem {
    display: table-row;
}

.order-table-row.number {
    width: 22px;
}

    .order-table-row.number span {
        background: #a6a6a6;
        display: block;
        width: 22px;
        height: 22px;
        text-align: center;
        color: #fff;
        font: 600 14px/22px 'Open Sans', sans-serif;
    }

.total-cost {
    background: #d7d7d7;
    padding: 5px 5px;
}

    .total-cost.nationalcolumn {
        background: none;
    }

    .total-cost span {
        color: #000000;
        font: 400 17px/27px 'Open Sans', sans-serif;
    }

    .total-cost strong {
        color: #000000;
        font: 600 22px/27px 'Open Sans', sans-serif;
        text-align: right;
        float: right;
    }

    .total-cost.nationalcolumn span {
        font: 400 14px/20px 'Open Sans', sans-serif;
    }

    .total-cost.nationalcolumn strong {
        font: 400 14px/20px 'Open Sans', sans-serif;
    }

.userinfo {
    border: 1px solid #e1e0e0;
    margin-bottom: 20px;
}

    .userinfo .app-colem label {
        width: 15.4%;
    }

    .userinfo .app-colem input[type="text"] {
        width: 30%;
    }

    .userinfo .app-colem select {
        width: 32%;
    }

    .userinfo .app-colem.address input[type="text"] {
        width: 70%;
    }

    .userinfo .row label > small {
        color: #f00;
        font: 400 14px/20px "Open Sans",sans-serif;
    }

    .userinfo .app-colem:last-child {
        border-bottom: 0;
    }

    .userinfo .app-heading {
        background: linear-gradient(180deg, #ffffff 12%, #b9b9b9 100%) repeat 0 0;
        background: -webkit-linear-gradient(-90deg, #ffffff 12%, #b9b9b9 100%) repeat 0 0;
        background: -moz-linear-gradient(-90deg, #ffffff 12%, #b9b9b9 100%) repeat 0 0;
        border-bottom: 1px solid #bab9b9;
        border-radius: 10px 10px 0 0;
        padding: 10px 0;
    }

        .userinfo .app-heading h3 {
            color: #454545;
            font: 400 18px/24px "Open Sans", sans-serif;
            padding: 0 1.5%;
            margin: 0;
            text-transform: uppercase;
        }

.front-wrap {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    margin: 30px auto;
}

.front-body {
    background: #fff;
    display: inline-block;
    padding: 20px;
    box-shadow: 2px 2px 8px rgba(29,63,158,.25);
    -moz-box-shadow: 2px 2px 8px rgba(29,63,158,.25);
    -webkit-box-shadow: 2px 2px 8px rgba(29,63,158,.25);
    -o-box-shadow: 2px 2px 8px rgba(29,63,158,.25);
    border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -khtml-box-sizing: border-box;
}

.entry-stage {
    background: #253946;
    min-height: 130px;
    color: #c0c0c0;
    text-align: center;
    margin: 0;
    padding: 20px 0;
}

    .entry-stage h2 {
        color: #eeeeee;
        font: 600 44px/70px 'Roboto';
        margin: 0;
        padding: 0;
        text-transform: uppercase;
    }

    .entry-stage h3 {
        color: #eeeeee;
        font: 600 24px/50px 'Roboto';
        margin: 0;
        padding: 0;
        text-transform: uppercase;
    }

.clientLogo {
    position: absolute;
    top: 89px;
    left: 10px;
}

.clubsname {
    margin: 0;
    padding: 0 0 20px 0;
    position: absolute;
    top: 144px;
    left: 0;
    text-align: center;
    width: 100%;
}

    .clubsname h3 {
        color: #fff;
        font: 600 38px/70px 'Roboto';
        margin: 0;
        padding: 0;
        text-transform: uppercase;
    }

.front-body .wizbreadcrumb {
    padding: 0;
    border-radius: 0;
}

.residentialadd {
    margin: 20px 0;
    border: 0px solid #e1e0e0;
}

.residentialaddlf {
    float: left;
    width: 49%;
    border: 1px solid #e1e0e0;
    border-bottom: 1px solid #e1e0e0;
}

.residentialaddrt {
    float: right;
    width: 49%;
    border: 1px solid #e1e0e0;
    border-bottom: 1px solid #e1e0e0;
}

.residentialadd .row {
    width: 100%;
}

/*ends here */
table.tableGrid_layout {
    width: 100%;
    margin: 20px 0;
    background-color: transparent;
    border: 0;
    border-left: 1px solid #dee2e6;
}

    table.tableGrid_layout tr th {
        padding: .875rem;
        vertical-align: top;
        border: 1px solid #dcdfec;
        background: #f6f6fe;
        font-weight: 600;
    }

        table.tableGrid_layout tr th:first-child, table.tableGrid_layout tr td:first-child {
            border-left: 1px solid #dee2e6;
        }

    table.tableGrid_layout tr td {
        font: 500 14px/20px"Open Sans",sans-serif;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        padding: .725rem 1.375rem;
        padding-left: 1.375rem;
        min-height: 30px;
        vertical-align: middle;
        text-align: left;
        color: #111;
        position: inherit;
    }

        table.tableGrid_layout tr td.edit_icon, table.tableGrid_layout tr td.delete_icon {
            width: 50px;
            text-align: center;
        }

    table.tableGrid_layout tr:nth-of-type(2n+1) td {
        background-color: #f9f9f9;
    }

    table.tableGrid_layout tr td.edit, table.gridtable tr th.edit, table.tableGrid_layout tr th.delete, table.tableGrid_layout tr td.delete {
        width: 50px;
        text-align: center;
    }

    table.tableGrid_layout.firsttdnone tr td:nth-child(1) {
        display: none;
    }

    table.tableGrid_layout tr th a {
        color: #d9541e;
    }

    table.tableGrid_layout tr td a {
        color: #d9541e;
    }

/* information message */
.ltrEmergencyinfo {color: #0c5460;
background-color: #d1ecf1;
border-color: #bee5eb;
padding: .5rem !important;
margin-bottom: 1rem !important;
border-radius: .25rem !important;
font-size: 0.9rem;
margin-top:20px;
}

    .ltrEmergencyinfo p {
        color: #0c5460;
        font: 400 14px/20px "Open Sans",Arial,Helvetica,sans-serif;
        padding: 5px 0;
    }
/* ends here */
.disclamerContent {
    padding: 20px 1%;
}

    .disclamerContent p {
        color: #000;
        font: 400 14px/20px 'Open Sans', sans-serif;
        margin: 0;
        margin-bottom: 10px;
    }

.termcheckbox {
    width: 98%;
    padding: 20px 1%;
}

    .termcheckbox input[type=checkbox] {
        margin: 3px 10px 0 0;
    }

    .termcheckbox label {
        color: #000;
        font: 600 14px/20px 'Open Sans', sans-serif;
    }

.entry-stage.receiptlogoheight {
    height: 190px;
}

/* Coupon code start here */
.couponamt {
    border-top: 1px solid #e1e0e0;
    background: #fff;
    border-bottom: 1px solid #e1e0e0;
    display: table;
    width: 100%;
}

    .couponamt span {
        color: #000000;
        font: 400 14px/27px 'Open Sans', sans-serif;
        padding: 5px 5px;
        border-right: 1px solid #e1e0e0;
        display: table-cell;
    }

    .couponamt strong {
        color: #000000;
        font: 600 16px/27px 'Open Sans', sans-serif;
        text-align: right;
        width: 15%;
        padding: 5px 5px 5px 0;
        display: table-cell;
    }

.cardamt {
    border-top: 0px solid #e1e0e0;
    background: #fff;
    border-bottom: 1px solid #e1e0e0;
    display: table;
    width: 100%;
}

    .cardamt span {
        color: #000000;
        font: 400 14px/27px 'Open Sans', sans-serif;
        padding: 5px 5px;
        display: table-cell;
    }

    .cardamt strong {
        color: #000000;
        font: 600 16px/27px 'Open Sans', sans-serif;
        text-align: right;
        width: 15%;
        border-left: 1px solid #e1e0e0;
        padding: 5px 5px 5px 0;
        display: table-cell;
    }

.reedemcoupon {
    border-top: 0px solid #e1e0e0;
}

    .reedemcoupon label {
        font: 600 14px/39px "Open Sans", sans-serif;
        color: #454545;
        display: inline-block;
        text-align: right;
        margin: 0;
        margin-right: 1%;
        width: 21.6%;
        padding: 0 1%;
        background: #f7f7f7;
        border-right: 1px solid #e1e0e0;
    }

    .reedemcoupon input[type=text] {
        width: 14%;
        display: inline-block;
    }

    .reedemcoupon .couponerror {
        color: #f00;
        font: 400 14px/39px "Open Sans", sans-serif;
    }

.paward {
    text-align: center;
    padding: 15px;
    border: 1px solid #92989E;
}

    .paward h3 {
        display: inline-block;
        color: #253946;
        font: 400 26px/32px "Open Sans", sans-serif;
        margin: 0;
    }

    .paward a {
        font: 700 14px/32px 'Open Sans', sans-serif;
        padding: 0px 15px;
        color: #ffffff;
        height: 32px;
        display: inline-block;
        background: #098fe3;
        margin: 0 10px;
        border-radius: 5px;
    }

        .paward a:hover {
            background: #004F80;
        }

        .paward a.cancel-btn {
            background: #92989E;
        }

            .paward a.cancel-btn:hover {
                background: #454545;
            }

.paymentfeescharge {
}

    .paymentfeescharge p {
        color: #000;
        font: 600 15px/20px "Roboto",sans-serif;
    }

    .paymentfeescharge ul {
        list-style: none;
        margin: 10px 0 0 0;
        padding: 0;
    }

        .paymentfeescharge ul li {
            margin: 5px 0;
        }

            .paymentfeescharge ul li span {
                font: 600 16px/20px Roboto, sans-serif;
                display: inline-block;
                width: 100px;
                vertical-align: top;
                color: #95cb0a;
            }

            .paymentfeescharge ul li strong {
                font: 600 20px/20px Roboto, sans-serif;
                display: inline-block;
                vertical-align: top;
                color: #568C00;
            }

/* Payment Loader start here */
.loading {
    text-align: center;
    overflow: auto;
    margin: auto;
}

    .loading p {
        color: rgba(0,0, 0, 1);
        font-size: 26px;
        padding: 0 0 0 30px;
        margin: 0;
        display: inline-block;
        line-height: 50px;
    }

.loadingsec {
    content: '';
    display: inline-block;
    font-size: 10px;
    width: 1em;
    height: 1em;
    margin-top: 24px; /*position: absolute;*/
    -webkit-animation: spinner 1500ms infinite linear;
    -moz-animation: spinner 1500ms infinite linear;
    -ms-animation: spinner 1500ms infinite linear;
    -o-animation: spinner 1500ms infinite linear;
    animation: spinner 1500ms infinite linear;
    border-radius: 0.5em;
    -webkit-box-shadow: rgba(0, 0, 0, 1) 1.5em 0 0 0, rgba(0, 0, 0, 1) 1.1em 1.1em 0 0, rgba(0, 0, 0,1) 0 1.5em 0 0, rgba(0, 0, 0, 1) -1.1em 1.1em 0 0, rgba(0, 0, 0, 1) -1.5em 0 0 0, rgba(0, 0, 0, 1) -1.1em -1.1em 0 0, rgba(0, 0, 0, 1) 0 -1.5em 0 0, rgba(0, 0, 0, 1) 1.1em -1.1em 0 0;
    box-shadow: rgba(0,0, 0, 1) 1.5em 0 0 0, rgba(0,0, 0, 1) 1.1em 1.1em 0 0, rgba(0,0, 0, 1) 0 1.5em 0 0, rgba(0,0, 0, 1) -1.1em 1.1em 0 0, rgba(0,0, 0, 1) -1.5em 0 0 0, rgba(0,0, 0, 1) -1.1em -1.1em 0 0, rgba(0,0, 0, 1) 0 -1.5em 0 0, rgba(0,0, 0, 1) 1.1em -1.1em 0 0;
}

.loadingnew {
    text-align: center;
    overflow: auto;
    margin: auto;
}

    .loadingnew p {
        color: rgba(0,0, 0, 1);
        font-size: 26px;
        padding: 0 0 0 30px;
        margin: 0;
        display: inline-block;
        line-height: 50px;
    }

    .loadingnew .loadingsec {
        content: '';
        display: inline-block;
        font-size: 10px;
        width: 1em;
        height: 1em;
        margin-top: 24px;
        position: absolute;
        -webkit-animation: spinner 1500ms infinite linear;
        -moz-animation: spinner 1500ms infinite linear;
        -ms-animation: spinner 1500ms infinite linear;
        -o-animation: spinner 1500ms infinite linear;
        animation: spinner 1500ms infinite linear;
        border-radius: 0.5em;
        -webkit-box-shadow: rgba(0, 0, 0, 1) 1.5em 0 0 0, rgba(0, 0, 0, 1) 1.1em 1.1em 0 0, rgba(0, 0, 0, 1) 0 1.5em 0 0, rgba(0, 0, 0, 1) -1.1em 1.1em 0 0, rgba(0, 0, 0, 1) -1.5em 0 0 0, rgba(0, 0, 0, 1) -1.1em -1.1em 0 0, rgba(0, 0, 0, 1) 0 -1.5em 0 0, rgba(0, 0, 0, 1) 1.1em -1.1em 0 0;
        box-shadow: rgba(0, 0, 0, 1) 1.5em 0 0 0, rgba(0, 0, 0, 1) 1.1em 1.1em 0 0, rgba(0, 0, 0, 1) 0 1.5em 0 0, rgba(0, 0, 0, 1) -1.1em 1.1em 0 0, rgba(0, 0, 0, 1) -1.5em 0 0 0, rgba(0, 0, 0, 1) -1.1em -1.1em 0 0, rgba(0, 0, 0, 1) 0 -1.5em 0 0, rgba(0, 0, 0, 1) 1.1em -1.1em 0 0;
    }

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.loaderoverlay {
    position: fixed;
    z-index: 10;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,0.3);
    width: 100%;
    height: 100%;
}



/* ends here */


/*======================== Responsive ========= ===== start  ============== ====== here ==================== ========================*/

@media only screen and (min-width:768px) {
    .app-colem .row > div.requiredinp span.requiredField {
        text-align: center;
        text-shadow: 0 1px rgba( 0, 0, 0, .5 );
        line-height: 1.5;
        color: #fff !important;
        background: #333;
        background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0, .6 ) ), to( rgba( 0, 0, 0, .8 ) ) );
        background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
        background: -moz-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
        background: -ms-radial-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
        background: -o-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
        background: linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        border-top: 1px solid #fff;
        -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
        -moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
        box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
        top: 0;
        position: absolute;
        z-index: 100;
        padding: 5px;
    }

        .app-colem .row > div.requiredinp span.requiredField:after {
            width: 0;
            height: 0;
            border-bottom: 10px solid transparent;
            border-left: 10px solid transparent;
            border-right: 10px solid rgba( 0, 0, 0, .7 );
            border-top: 10px solid transparent;
            content: '';
            position: absolute;
            left: -20px;
            right: auto;
            bottom: 0;
            margin-left: 0;
            top: 4px;
        }

    .tableGridmember > tbody > tr > td div.requiredinp span.requiredField {
        text-align: center;
        text-shadow: 0 1px rgba( 0, 0, 0, .5 );
        line-height: 1.5;
        color: #fff !important;
        background: #333;
        background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0, .6 ) ), to( rgba( 0, 0, 0, .8 ) ) );
        background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
        background: -moz-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
        background: -ms-radial-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
        background: -o-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
        background: linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        border-top: 1px solid #fff;
        -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
        -moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
        box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
        top: 0;
        position: absolute;
        z-index: 100;
        padding: 5px;
    }

        .tableGridmember > tbody > tr > td div.requiredinp span.requiredField:after {
            width: 0;
            height: 0;
            border-bottom: 10px solid transparent;
            border-left: 10px solid transparent;
            border-right: 10px solid rgba( 0, 0, 0, .7 );
            border-top: 10px solid transparent;
            content: '';
            position: absolute;
            left: -20px;
            right: auto;
            bottom: 0;
            margin-left: 0;
            top: 4px;
        }
}

/*
    Ipad, tablet 1260px above devices only
*/


@media only screen and (max-width:1240px) {
    .wrapper {
        max-width: 94%;
    }

    img {
        max-width: 100%;
        max-height: 100%;
    }

    .app-colem {
        border-bottom: 0px solid #e1e0e0;
    }

    .row {
        width: 100%;
        border-bottom: 1px solid #e1e0e0;
    }

    .grdcustomField > div > table {
        width: 99.8%;
        border-right: 0;
    }

    a[href="http://www.equestrian.org.au/sites/default/files/Social%20Media%20Policy.pdf"] {
        white-space: pre; /* CSS 2.0 */
        white-space: pre-wrap; /* CSS 2.1 */
        white-space: pre-line; /* CSS 3.0 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        white-space: -moz-pre-wrap; /* Mozilla */
        white-space: -hp-pre-wrap; /* HP Printers */
        word-wrap: break-word; /* IE 5+ */
        -ms-word-break: break-all;
        word-break: break-word;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
    }
}

/* Mobile tablet 481px devices only */
@media only screen and (max-width:767px) {
    .logo {
        padding: 10px 20px;
        width: 100%;
        text-align: center;
    }

    .outer-tabing {
        display: none;
    }

    .bread-right {
        text-align: center;
        float: none;
        width: 100%;
    }
    /* responsive table start here */

    table.tableGrid_layout, table.tableGrid_layout thead, table.tableGrid_layout tbody, table.tableGrid_layout th, table.tableGrid_layout td, table.tableGrid_layout tr {
        display: block;
    }

        table.tableGrid_layout tr.grid-header {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        table.tableGrid_layout tr {
            border: 1px solid #729ea5;
        }

            table.tableGrid_layout tr td {
                border: none;
                border-bottom: 1px solid #729ea5;
                position: relative;
                padding-left: 35%;
                text-align: left;
            }

                table.tableGrid_layout tr td:before {
                    position: absolute;
                    top: 9px;
                    left: 6px;
                    width: 45%;
                    padding-right: 10px;
                    white-space: nowrap;
                    text-align: left;
                    font: 600 14px/20px "Open Sans",sans-serif;
                }

        table.tableGrid_layout.defaulttable tr td:nth-of-type(1):before {
        }

        table.tableGrid_layout.defaulttable tr td:nth-of-type(2):before {
            content: "Club Name:";
        }

        table.tableGrid_layout.defaulttable tr td:nth-of-type(3):before {
            content: "Address:";
        }

        table.tableGrid_layout.defaulttable tr td:nth-of-type(4):before {
            content: "Suburb:";
        }

        table.tableGrid_layout.defaulttable tr td:nth-of-type(5):before {
            content: "State:";
        }

        table.tableGrid_layout.defaulttable tr td:nth-of-type(6):before {
            content: "Post Code:";
        }

        table.tableGrid_layout.defaulttable tr td:nth-of-type(7):before {
            content: "Phone:";
        }

        table.tableGrid_layout.defaulttable tr td:nth-of-type(8):before {
            content: "Email:";
        }

        table.tableGrid_layout.defaulttable tr td:nth-of-type(9):before {
            content: "Contact:";
        }

        table.tableGrid_layout.defaulttable tr td:nth-of-type(10):before {
            content: "";
        }

        table.tableGrid_layout.defaulttable tr td:nth-of-type(10) {
            padding: 5px 10%;
            text-align: center;
        }

            table.tableGrid_layout.defaulttable tr td:nth-of-type(10) a {
                text-align: center;
                width: 30%;
            }

        table.tableGrid_layout.familyListTable tr td:nth-of-type(1)::before {
            content: "Edit";
        }

        table.tableGrid_layout.familyListTable tr td:nth-of-type(2):before {
            content: "Full Name";
        }

        table.tableGrid_layout.familyListTable tr td:nth-of-type(3):before {
            content: "Date of Birth";
        }

        table.tableGrid_layout.familyListTable tr td:nth-of-type(4):before {
            content: "Email";
        }

        table.tableGrid_layout.familyListTable tr td:nth-of-type(5):before {
            content: "Delete";
        }

        table.tableGrid_layout.familyListTable tr:nth-child(1) {
            display: none;
        }

        table.tableGrid_layout.familyListTable tr th[scope=col] {
            display: none;
        }

        table.tableGrid_layout.MerchandiseTable tbody > tr > td:nth-of-type(1):before {
            content: "Item:";
        }

        table.tableGrid_layout.MerchandiseTable tbody > tr > td:nth-of-type(2):before {
            content: "Price:";
        }

        table.tableGrid_layout.MerchandiseTable tbody > tr > td:nth-of-type(3):before {
            content: "Size:";
        }

        table.tableGrid_layout.MerchandiseTable tbody > tr > td:nth-of-type(4):before {
            content: "Color:";
        }

        table.tableGrid_layout.MerchandiseTable tbody > tr > td:nth-of-type(5):before {
            content: "Quantity:";
        }

        table.tableGrid_layout.ProcessingFee {
            margin: 0;
        }

            table.tableGrid_layout.ProcessingFee tr td:nth-of-type(1) {
                display: none;
            }

            table.tableGrid_layout.ProcessingFee tr td:nth-of-type(2):before {
                content: "Card Processing Fee:";
            }

        table.tableGrid_layout tr:nth-child(2n+1) td {
            background: #e5eaeb;
        }
    /* ends here */

    .app-colem {
        border-bottom: 0px solid #e1e0e0;
    }

    .row {
        border-bottom: 1px solid #e1e0e0;
        width: 100%;
        font: 400 14px/24px "Open Sans",sans-serif;
    }

    .app-colem .row > div.requiredinp {
        width: 100%;
    }

        .app-colem .row > div.requiredinp input[type="text"] {
            width: 90%;
        }

        .app-colem .row > div.requiredinp select {
            width: 92%;
        }

    .row.mobilenone {
        display: none;
    }

    .app-colem label {
        width: 96%;
        padding: 0 2%;
        margin: 0;
        text-align: left;
        background: none;
        border-right: 0;
        font: 600 14px/24px "Open Sans",sans-serif;
        display: block;
    }

    .app-colem input[type="text"], .app-colem input[type="password"] {
        margin: 0 2% 5px;
        width: 90%;
    }

    .app-colem select {
        margin: 0 2% 5px;
        width: 92%;
    }

    .app-colem .row > div {
        margin: 0 2%;
        font: 400 14px/24px "Open Sans",sans-serif;
    }

    .grdcustomField > div > table {
        width: 100%;
        border-right: 0;
    }

    .tableGridmember > tbody > tr > td:first-child {
        width: 32.2%;
    }

    .tableGridmember > tbody > tr > td > input[type="text"] {
        width: 69%;
    }

    .tableGridmember > tbody > tr > td > select {
        width: 71%;
    }

    .app-btn-group input[type="submit"], .app-btn-group button, .app-btn-group input[type="button"] {
        min-width: 30%;
    }

    /* payment section start here */

    .paymentRight {
        float: none;
        border-bottom: 1px solid #e1e0e0;
        width: 100%;
    }

    .paymentLeft {
        float: none;
        width: 100%;
        border: 0;
    }

        .paymentLeft .row label {
            width: 96%;
            padding: 0 0 0 2%;
            margin: 0;
            text-align: left;
            background: none;
            border-right: 0;
            font: 600 14px/24px "Open Sans",sans-serif;
        }

        .paymentLeft .row select {
            width: 35%;
        }

        .paymentLeft .row input[type="text"] {
            width: 32%;
            margin: 0 0 5px 2%;
        }

        .paymentLeft .app-colem .row > div.requiredinp {
            width: 100%;
        }

            .paymentLeft .row input[type="text"], .paymentLeft .app-colem .row > div.requiredinp input[type="text"] {
                width: 90%;
            }

            .paymentLeft .row select, .paymentLeft .app-colem .row > div.requiredinp select {
                width: 92%;
            }


    /*ends here */

    .workhomelf {
        width: 100%;
        display: inline-block;
    }

    .workhomert {
        width: 100%;
        display: inline-block;
    }

    .left-tabing-sec > ul {
        display: none;
    }

    .openSlide.left-tabing-sec > ul {
        display: block;
        overflow: auto;
        height: 500px;
    }

    .left-tabing-sec {
        position: fixed;
        left: 0;
        top: 8%;
    }

        .left-tabing-sec ul ul.sub-menu {
            width: 100%;
            position: relative;
            right: 0;
            top: 0;
        }

        .left-tabing-sec ul li:nth-child(9) ul.sub-menu {
            top: 0;
        }

        .left-tabing-sec ul li ul.sub-menu {
            display: block;
        }
}



/* Mobile screen size 480px below start css here */
@media only screen and (max-width:482px) {
    .wrapper {
        width: 96%;
    }

    .outerfooter-boot p br {
        display: block;
    }

    .paymentRight img {
        width: 60% !important;
    }

    .order-outer {
        width: 100%;
        overflow: auto;
    }

    .outer-order-table {
        width: 420px;
    }

    .left-tabing-sec {
        top: 0;
    }

        .left-tabing-sec ul ul.sub-menu {
            width: 100%;
            position: relative;
            right: 0;
            top: 0;
        }

        .left-tabing-sec ul li:nth-child(9) ul.sub-menu {
            top: 0;
        }

        .left-tabing-sec > ul {
            overflow: auto;
            height: 100%;
        }
}

@media print {
    .navbar, footer, .paymentsucces, .app-btn-group {
        display: none;
    }

    .entry-stage {
        min-height: auto;
    }

    .front-body {
        margin: 0;
    }

    .clubsname {
        top: 0;
        position: relative;
    }

        .clubsname h3 {
            font: 600 30px/40px 'Roboto';
        }

    .entry-stage h3 {
        font: 600 20px/30px 'Roboto';
        color: #000;
    }

    .clientLogo {
        position: relative;
        top: 0;
        left: 0;
        text-align: center;
    }

        .clientLogo img {
            max-height: 60px;
        }

    .clubsname {
        position: relative;
        left: 0;
        top: 0;
        text-align: center;
        padding: 0;
        color: #000;
        margin-bottom: 10px;
    }

        .clubsname h3 {
            color: #000;
            font: 600 26px/32px 'Roboto';
        }
}

.event-date {
    background: #efefef;
    border: 1px solid #d4d3d3;
    margin-top: -20px;
}

    .event-date input {
        width: auto;
    }

input.txtDate {
    position: relative;
}

.g-recaptcha > div {
    margin: 0;
}
