/*Copyright 2024 Sharetec Systems Inc. All Rights Reserved.*/
@import url('https://fonts.googleapis.com/css?family=Roboto');

:root {
    --main-bg-color: white;
    --disabled-color: grey;
    --default-font-weight: bold;
    --default-font-size: 1em;
}

.bold {
    font-weight: bold;
}

.hidden {
    display:none;
    visibility: hidden;
}

select:disabled {
    color: -internal-light-dark(graytext, rgb(170, 170, 170)) !important;
    opacity: 0.7 !important;
    border-color: rgba(118, 118, 118, 0.3) !important;
}
input:disabled {
    cursor: default;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzhhYWGMYAEYB8RmROaABADeOQ8CXl/xfgAAAABJRU5ErkJggg==) repeat !important;
}

* {
    margin: 0;
    font-family: "Roboto", sans-serif;
    box-sizing: border-box;
}

.btn {
    margin-right: 4px;
    margin-left: 4px;
}

.error {
    color: red !important;
    font-weight: bold;
}

.radio-group fieldset {
    width: 100%;
    border: none;
    display: flex;
}

.radio-group fieldset legend {
    display: none;
    visibility: hidden;
}

.required {
    color: red;
}

html, body {
    height: 100vh;
}

.container {
    width: min(100% - 2em, 65%);
    max-width: 1200px;
    margin: auto;
}

img {
    font-family: 'Helvetica';
    font-weight: 200;
    line-height: 2;
    text-align: center;
    width: min(100% - 3rem, 65%);
    display: block;
    position: relative;
}

    img:before {
        content: "We're sorry, the image below is broken :(";
        display: block;
        margin-bottom: 10px;
    }

    img:after {
        content: "(url: " attr(src) ")";
        display: block;
        font-size: 12px;
    }

#registration-page {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.signup-form {
    flex: 1;
    max-width: 1400px;
    background-color: white;
    border: 1px solid #999;
    border-bottom: none;
    margin-top: auto;
    margin-bottom: auto;
}

/* FORM HEADER */
.form-header {
    padding: 15px 0 0 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #EFF0F1;
    border: 1px solid #999;
    border-bottom: none;
    height: 65px;
    margin-top: 15px;
}

    .form-header h1 {
        font-size: 28px;
        text-align: center;
        color: #666;
    }

/* FORM BODY */
.form-body {
    background: white;
    padding: 5px 10px;
    font-size: 1em;
}

.row {
    display: flex;
}

.input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 10px 5px;
}

/* FORM BODY - Gender & Hobbies */
.radio-group, .checkbox-group {
    display: flex;
}

    .radio-group div, .checkbox-group div {
        flex: 1;
    }

    .radio-group label, .checkbox-group label {
        color: #666;
        cursor: pointer;
    }

/* FORM BODY - Source of Income & Income */
.range-group {
    display: flex;
}

    .range-group input {
        flex: 1;
    }

    .range-group label {
        margin-left: 10px;
        background-color: #1BBA93;
        color: white;
        border-radius: 5px;
        padding: 5px;
        font-size: 17px;
        text-align: center;
    }


/* MOBILE VIEW */
@media only screen and (max-width: 500px) {
    .form-header h1 {
        font-size: .75em;
    }

    .container {
        width: 100%;
    }

    .row {
        flex-direction: column;
    }

    .btn {
        flex: 1;
    }
}

@media only screen and (min-wdth: 500px ) and (max-width: 780px ) {
    .form-header h1 {
        font-size: .75em;
    }

    .container {
        width: 100%;
    }

    .row {
        flex-direction: column;
    }

    .btn {
        flex: 1;
    }
}

@media only screen and (max-width: 780px) {
    .form-header h1 {
        font-size: .75em;
    }

    .container {
        width: 100%;
    }

    .row {
        flex-direction: column;
    }

    .btn {
        flex: 1;
        font-size: .75em !important;
    }
}

/* FORM FOTTER */
.form-footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #EFF0F1;
    border-top: none;
    border: 1px solid #999;
    height: 60px;
    margin: 0px;
}

.btn {
    padding: 10px 20px;
    background-color: #1BBA93;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    color: black;
    cursor: pointer;
}

/* INPUT*/

label {
    color: #1BBA93 !important;
    font-size: .95em;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
input[type="number"],
input[type="date"],
select,
textarea {
    width: 100%;
    font-size: 18px;
    height: 34px;
    padding-left: 10px;
    padding-right: 10px;
    color: #666;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    background: white;
    outline: none;
}


textarea {
    resize: none;
    height: 100px;
}

legend {
    display: flex;
}

span#total-label {
    font-weight: bold;
}

.currency {
    text-align: right;
}

.input-icon {
    position: relative;
}

    .input-icon > i {
        position: absolute;
        display: block;
        transform: translate(0, -50%);
        top: 50%;
        pointer-events: none;
        width: 25px;
        text-align: center;
        font-style: normal;
    }

    .input-icon > input {
        padding-left: 25px;
        padding-right: 0;
    }

.input-icon-right > i {
    right: 0;
}

.input-icon-right > input {
    padding-left: 0;
    padding-right: 25px;
    text-align: right;
}

table.rcfund_acfund_table {
    width: 90%;
}

table.rcfund_paymtd_table {
    width: 90%;
}

td.rcfund_paymtd_data_full {
    text-align: left;
}

.align-end {
    align-items: end;
}

.edit-btn {
    width: 25%;
}

.financial-institution-fieldset {
    width: 100%;
}
/*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
@media only screen and (max-width: 280) and (max-device-width: 320px) {
    .form-header h1 {
        font-size: .75em;
    }

    .input-group p {
        margin: 10px 10px;
    }
}

@media only screen and (max-width: 780px), (min-device-width: 768px) and (max-device-width: 1024px) {
    .align-end {
        align-items: start;
    }

    .edit-btn {
        width: 25%;
    }

    .form-header h1 {
        font-size: 1.25em;
    }

    .container {
        width: min(100% - 2em, 85%);
        max-width: 1200px;
        margin: auto;
    }

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }

        table.non-responsive-table, thead, tbody, table.non-responsive-table > tbody > tr, table.non-responsive-table > tbody > tr > td {
            width: 100%;
            display: table;
            padding-right: unset;
            padding-left: unset
        }

        table.rcfund_acfund_table, table.rcappl_applicantloaninfo_table, table.rcappl_jointloan_table, table.rcappl_primaryapplicant_table, table.rcappl_joint_table {
            display: table;
        }

    .rcappl-primaryapplicant-table > tr > td {
        position: inherit;
        padding-left: unset;
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        margin: 0 0 1rem 0;
        font-size: 1.35em;
    }

        tr:nth-child(odd) {
        }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: none;
        position: relative;
        padding-left: 50%;
    }

        tr.rcfund_acfund_header td, td.rcfund_acfund_header1, td.rcfund_acfund_header2, td.rcfund_acfund_header3,
        td.rcfund_acfund_data1, td.rcfund_acfund_data2, td.rcfund_acfund_data3,
        td.rcfund_acfund_footer1, td.rcfund_acfund_footer2, td.rcfund_acfund_footer3,
        tr.rcfund_paymtd_header td, td.rcfund_paymtd_header1, td.rcfund_paymtd_header2, td.rcfund_paymtd_header3,
        td.rcfund_paymtd_data1, td.rcfund_paymtd_data2, td.rcfund_paymtd_data3,
        td.rcfund_paymtd_footer1, td.rcfund_paymtd_footer2, td.rcfund_paymtd_footer3, td.rcfund_paymtd_data_full,
        td.rcappl_primaryapplicant_header, td.rcappl_primaryapplicant_data, td.rcappl_applicantloaninfo_header, td.rcappl_applicantloaninfo_data,
        td.rcappl_jointloan_header, td.rcappl_jointloan_data,
        td.rcappl_joint_header, td.rcappl_joint_data,
        td.selprod_table_header_3, td.selprod_table_header_4 {
            position: inherit;
            padding-left: unset;
        }

    th {
        text-align: left !important;
    }

    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 0;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    /*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
    table.shareProducts td:nth-of-type(1):before {
        content: "Select";
    }

    table.shareProducts tr.spacer td:nth-of-type(1):before {
        content: "" !important;
    }

    table.memberFunding tr.spacer td:nth-of-type(1):before {
        content: "" !important;
    }

    tr.totalrow td:nth-of-type(1):before {
        content: "" !important;
    }

    tr.totalrow td:nth-of-type(1) {
        content: "" !important;
    }

    tr.totalrow td:nth-of-type(2):before {
        content: "" !important;
    }

    tr.totalrow td:nth-of-type(2) {
        content: "" !important;
    }

    tr.totalrow td:nth-of-type(3):before {
        content: "" !important;
    }

    table.acfund td:nth-of-type(1):before {
        content: "Account"
    }


    table.acfund td:nth-of-type(2):before {
        content: "Minimum Balance"
    }


    table.acfund td:nth-of-type(3):before {
        content: "Amount"
    }

    table.shareProducts td:nth-of-type(2):before {
        content: "Account";
    }

    table.shareProducts td:nth-of-type(3):before {
        content: "Minimum";
    }

    table.shareProducts td:nth-of-type(4):before {
        content: "Rate/APY";
    }

    table.shareProducts td:nth-of-type(5):before {
        content: "Amount";
    }

    table.memberFunding td:nth-of-type(1):before {
        content: "Select";
    }

    table.memberFunding td:nth-of-type(2):before {
        content: "Account";
    }

    table.memberFunding td:nth-of-type(3):before {
        content: "Current Balance";
    }

    table.memberFunding td:nth-of-type(4):before {
        content: "Available Balance";
    }

    table.memberFunding td:nth-of-type(5):before {
        content: "Amount";
    }

    table.selact_table.loanProducts td:nth-of-type(1):before {
        content: "Select";
    }

    table.selact_table.loanProducts td:nth-of-type(2):before {
        content: "Loan";
    }

    table.selact_table.loanProducts td:nth-of-type(3):before {
        content: "Rate/APY";
    }

    table.selact_table.loanProducts td:nth-of-type(4):before {
        content: "";
    }

    table.selact_table.loanProducts td:nth-of-type(4):after {
        content: "";
        margin: 10px;
    }

    table.debitbankaccount td:nth-of-type(1):before {
        content: "Select";
    }

    table.debitbankaccount td:nth-of-type(2):before {
        content: "Name";
    }

    table.debitbankaccount td:nth-of-type(3):before {
        content: "Account Number";
    }

    table.debitbankaccount td:nth-of-type(4):before {
        content: "Routing Number";
    }

    table.debitbankaccount td:nth-of-type(5):before {
        content: "Amount";
    }

    table.otherFunding td:nth-of-type(1):before {
        content: "Select";
    }

    table.otherFunding td:nth-of-type(2):before {
        content: "Description";
    }

    table.otherFunding td:nth-of-type(3):before {
        content: "Amount";
    }

    table.loanTable td:nth-of-type(1):before {
        content: "Select"
    }

    table.loanTable td:nth-of-type(2):before {
        content: "Loans"
    }

    table.loanTable td:nth-of-type(3):before {
        content: "Rate/APY"
    }

    table.loanTable td:nth-of-type(4):before {
        content: ""
    }

    table.selprod_table td:nth-of-type(2):before {
        content: "Products/Services";
        margin-right: 5px;
    }

    table.selprod_table {
        font-size: 12px;
    }

        table.selprod_table td:nth-of-type(3):before {
            content: "Description"
        }
}

tr {
    margin: 0 0 1rem 0;
    font-size: var(--default-font-size);
}

th {
    text-align: left;
    color: #1BBA93;
}


.boxes {
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-gap: 2px;
    grid-template-areas:
        " red yellow";
}

.b1 {
    grid-area: red;
}

.b2 {
    grid-area: yellow;
    background-color: yellow;
}

.box {
    padding: 1em;
}

@media (max-width: 570px) {
    .boxes {
        grid-template-columns: 1fr;
        grid-template-areas:
            " yellow "
            " red ";
    }

    p {
        padding: 5px;
        font-size: .85em;
    }
}

.addressboxes {
    list-style-type: none;
    display: grid;
    grid-template-columns: 2fr 2fr;
    grid-gap: 2px;
    grid-template-areas:
        " logo address";
}

.a1 {
    grid-area: logo;
}

.a2 {
    grid-area: address;
}

.addressbox {
    padding: 1em;
}

@media (max-width: 570px) {
    .addressboxes {
        grid-template-columns: 1fr;
        grid-template-areas:
            " logo "
            " address ";
    }
}

p {
    padding: 5px;
    font-size: 1.25em;
}

li {
    padding: 10px;
    font-size: 1.25em;
}

.selact_table {
    width: 100%;
}

.selact_table_header_1 {
    width: 100px;
}

.selact_table_header_2 {
    width: 390px;
}

.selact_table_header_3 {
    width: 270px;
}

.selact_table_header_4 {
    width: 150px;
}

#myProgress {
    width: 100%;
    background-color: #ddd;
    border: 1px solid #000;
    border-radius: 10px;
}

#myBar {
    width: 1%;
    height: 30px;
    background-color: #04AA6D;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.a2 {
    font-size: 10px;
}

div#errorContent p > b {
    font-size: 1em !important;
}

div.input-group label {
    font-size: .95em;
}

div.input-group label a {
    font-size: .95em;
    color: blue;
}

div.radio-group {
    margin-top: 5px;
}

td.selact_table_data_2,
td.selact_table_data_3,
td.selact_table_data_4 {
    font-size: 14px;
}

p.disclosure_prompt {
    font-size: 12px;
}

p.disclosure_header {
    font-size: 12px;
}

legend > h5 {
    font-size: 14px;
}

legend {
    font-size: 12px;
}

label a {
    font-size: 1.35em;
    text-decoration: none;
    font-weight: normal;
}


.div-table {
    display: table;
    width: auto;
}

.div-table-row {
    display:table-row;
    width: auto;
    clear: both;
}

.div-table-col {
    float: left;
    display: table-column;
    width: 200px;
}

.div-table-col-5 {
    display: flex;
    width: 100%;
    text-align: right;
}

.amount {
    text-align: right;
    padding-right: 10px;
}

.mobile-label {
    visibility: hidden;
    display: none;
}

#share_total {
    text-align: left;
}

.div-table-col {
    margin: 5px 10px;
}


@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    .mobile-label {
        display: flex;
        visibility: visible;
    }

    .div-table-row.desktop-label {
        display: none;
        visibility: hidden;
    }

    .div-table-col.spacer {
        display: none;
        visibility: hidden;
    }

    .div-table {
        display: block;
        width: auto;
    }

    .div-table-row {
        display: block;
        width: auto;
        clear: both;
    }

    .div-table-col {
        float: left;
        display: block;
        margin-bottom: 10px;
    }

    #share_total {
        text-align: left;
    }

    img {
        display: none;
        visibility: hidden;
    }
}

@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
    .mobile-label {
        display: flex;
        visibility: visible;
    }

    .div-table-row.desktop-label {
        display: none;
        visibility: hidden;
    }

    .div-table-col.spacer {
        display: none;
        visibility: hidden;
    }

    .div-table {
        display: block;
        width: auto;
    }

    .div-table-row {
        display: block;
        width: auto;
        clear: both;
    }

    .div-table-col {
        float: left;
        display: block;
        margin-bottom: 10px;
    }

    #share_total {
        text-align: left;
    }

    img {
        display: none;
        visibility: hidden;
    }
}

@media screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
    .mobile-label {
        display: flex;
        visibility: visible;
    }

    .div-table-row.desktop-label {
        display: none;
        visibility: hidden;
    }

    .div-table-col.spacer {
        display: none;
        visibility: hidden;
    }

    .div-table {
        display: block;
        width: auto;
    }

    .div-table-row {
        display: block;
        width: auto;
        clear: both;
    }

    .div-table-col {
        float: left;
        display: block;
        margin-bottom: 10px;
    }

    #share_total {
        text-align: left;
    }

    img {
        display: none;
        visibility: hidden;
    }
}

@media screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .mobile-label {
        display: flex;
        visibility: visible;
    }

    .div-table-row.desktop-label {
        display: none;
        visibility: hidden;
    }

    .div-table-col.spacer {
        display: none;
        visibility: hidden;
    }

    .div-table {
        display: block;
        width: auto;
    }

    .div-table-row {
        display: block;
        width: auto;
        clear: both;
    }

    .div-table-col {
        float: left;
        display: block;
        margin-bottom: 10px;
    }

    #share_total {
        text-align: left;
    }

    img {
        display: none;
        visibility: hidden;
    }
}

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {
    .mobile-label {
        display: flex;
        visibility: visible;
    }

    .div-table-row.desktop-label {
        display: none;
        visibility: hidden;
    }

    .div-table-col.spacer {
        display: none;
        visibility: hidden;
    }

    .div-table {
        display: block;
        width: auto;
    }

    .div-table-row {
        display: block;
        width: auto;
        clear: both;
    }

    .div-table-col {
        float: left;
        display: block;
        margin-bottom: 10px;
    }

    #share_total {
        text-align: left;
    }

    img {
        display: none;
        visibility: hidden;
    }
}

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
    .mobile-label {
        display: flex;
        visibility: visible;
    }

    .div-table-row.desktop-label {
        display: none;
        visibility: hidden;
    }

    .div-table-col.spacer {
        display: none;
        visibility: hidden;
    }

    .div-table {
        display: block;
        width: auto;
    }

    .div-table-row {
        display: block;
        width: auto;
        clear: both;
    }

    .div-table-col {
        float: left;
        display: block;
        margin-bottom: 10px;
    }

    #share_total {
        text-align: left;
    }

    img {
        display: none;
        visibility: hidden;
    }
}

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {
    .mobile-label {
        display: flex;
        visibility: visible;
    }

    .div-table-row.desktop-label {
        display: none;
        visibility: hidden;
    }

    .div-table-col.spacer {
        display: none;
        visibility: hidden;
    }

    .div-table {
        display: block;
        width: auto;
    }

    .div-table-row {
        display: block;
        width: auto;
        clear: both;
    }

    .div-table-col {
        float: left;
        display: block;
        margin-bottom: 10px;
    }

    #share_total {
        text-align: left;
    }

    img {
        display: none;
        visibility: hidden;
    }
}

@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
}