form { display: inline-block; width: 100%; }

.stem-member { display: inline-block; width: 100%; margin: 0 auto; }

    .stem-member .field-validation-error { bottom: 40px; }

    .stem-member h1,
    .stem-member h4 { margin: 0; padding: 0; width: 100%; line-height: normal; }


    /*Sign Up and Profile display*/
    .stem-member .stem-member-container { display: flex; flex-direction: column; width: 100%; max-width: 650px; margin: 0 auto; padding: 20px; }
        .stem-member .stem-member-container div { width: 100%; position: relative; margin-bottom: 5px; }
        .stem-member .stem-member-container .editor-label { display: block; }

        .stem-member .stem-member-container label { float: left; margin: 2px 0; padding: 0; width: 100%; text-align: left; color: #7d7d7d; line-height: 30px; }
        .stem-member .stem-member-container input[type=text],
        .stem-member .stem-member-container input[type=date],
        .stem-member .stem-member-container input[type=password],
        .stem-member .stem-member-container input[type=email],
        .stem-member .stem-member-container input[type=color],
        .stem-member .stem-member-container input[type=datetime-local],
        .stem-member .stem-member-container input[type=file],
        .stem-member .stem-member-container input[type=image],
        .stem-member .stem-member-container input[type=search],
        .stem-member .stem-member-container input[type=tel],
        .stem-member .stem-member-container input[type=time],
        .stem-member .stem-member-container input[type=url],
        .stem-member .stem-member-container input[type=week],
        .stem-member .stem-member-container select { padding: 10px 5px; width: 100%; min-height: 46px; }


        .stem-member .stem-member-container textarea { padding: 10px 5px; width: 100%; height: 150px; }

        .stem-member .stem-member-container a { display: inline-block; margin: 10px; }

    .stem-member .captcha { margin-bottom: 10px; width: 100%; text-align: center; }

    /*.stem-member .btn,
    .stem-member a.btn { display: inline-block; padding: 7px 5px; border: 1px solid #ccc; background-color: #eee; cursor: pointer; text-decoration: none; color: #000; outline: none; font-size: 18px; line-height: 18px; }
        .stem-member .btn[type=submit] { position: relative; top: 0; }*/


    .stem-member .btn.delete { background-color: rgba(255, 0, 0, 0.20); color: #f00; font-weight: 600; border: 1px solid #cc1c1c; padding: 4px 5px; }


    .stem-member .validation-summary-errors { border: none; padding: 10px 0; margin: 0; }
        .stem-member .validation-summary-errors ul { list-style: none; margin: 0; padding: 0; }


.stem-member-container.verification { margin-top: 20px; width: 100%; max-width: 600px; border: none; background: transparent; }


.stem-member-container .requestCompleted { width: 100%; text-align: center; }


.stem-member .member-messages { margin-bottom: 10px; }






/*Profile Navigation*/
.stem-member .memberNavigation,
.stem-member-directory .memberNavigation { width: 100%; list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; background-color: #e1e1e1; }

    .stem-member .memberNavigation li,
    .stem-member-directory .memberNavigation li { margin: 0; padding: 0; }

        .stem-member .memberNavigation li a,
        .stem-member-directory .memberNavigation li a { display: inline-block; list-style: none; text-decoration: none; border-right: 1px solid #fff; margin: 0; padding: 10px; font-size: 24px; }

        .stem-member .memberNavigation li:last-of-type a,
        .stem-member-directory .memberNavigation li:last-of-type a { border-right: 0; }

        .stem-member .memberNavigation li a:hover,
        .stem-member-directory .memberNavigation li a:hover { background-color: #ccc; }

@media only screen and (max-width: 768px) {
    .stem-member .memberNavigation li,
    .stem-member-directory .memberNavigation li { width: 100%; }

        .stem-member .memberNavigation li a,
        .stem-member-directory .memberNavigation li a { font-size: 18px; width: 100%; border-right: 0; border-bottom: 1px solid #fff; }
}







/*My Orders Display List*/
.stem-member .stem-member-orders { display: flex; flex-direction: column; width: 100%; margin: 0 auto; padding: 20px; }

    /*Order Grid*/
    .stem-member .stem-member-orders table { width: 100%; margin: 20px auto; }
        .stem-member .stem-member-orders table th,
        .stem-member .stem-member-orders table td { padding: 10px; border-bottom: 1px solid #ccc; text-align: left; font-size: 16px; }

        .stem-member .stem-member-orders table th { background: none; padding-bottom: 5px; }
            .stem-member .stem-member-orders table th:hover { cursor: pointer; color: #045779; }

        .stem-member .stem-member-orders table td { border-right: 1px solid #ccc; vertical-align: middle; width: auto; position: relative; }
            .stem-member .stem-member-orders table td p { display: none; width: 100%; margin: 0; padding: 5px 0; }
            .stem-member .stem-member-orders table td span { width: 100%; display: inline-block; }

            .stem-member .stem-member-orders table td a,
            .stem-member .stem-member-orders table td mat-icon { cursor: pointer; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; text-decoration: none; color: #333; }

                .stem-member .stem-member-orders table td a span { font-size: 30px; }

            .stem-member .stem-member-orders table td:nth-of-type(1) { width: 45px; text-align: center; }
            .stem-member .stem-member-orders table td:nth-of-type(2) { min-width: 80px; }

            .stem-member .stem-member-orders table th:last-of-type,
            .stem-member .stem-member-orders table td:last-of-type { border-right: 0; width: auto; text-align: right; }


        .stem-member .stem-member-orders table tr:nth-of-type(odd) td { background-color: #f7f7f7; }

        .stem-member .stem-member-orders table tr:hover td,
        .stem-member .stem-member-orders table tr:nth-of-type(odd):hover td { background-color: #e6e6e6; }


@media only screen and (min-width: 1024px) {
    .stem-member .stem-member-orders table tr:hover td a,
    .stem-member .stem-member-orders table tr:hover td mat-icon { color: #000; }
}

@media only screen and (max-width: 1600px) {
    .stem-member .stem-member-orders table th,
    .stem-member .stem-member-orders table td { font-size: 14px; padding: 5px }
}

@media only screen and (max-width: 1280px) {
    .stem-member .stem-member-orders table td { font-size: 12px; padding: 2px 5px }
}

@media only screen and (max-width: 1024px) {
    .stem-member .stem-member-orders table { }

        .stem-member .stem-member-orders table th { display: none; }
        .stem-member .stem-member-orders table tr { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 30px; border: 1px solid #ccc; border-bottom: none; }

            .stem-member .stem-member-orders table tr:hover td,
            .stem-member .stem-member-orders table tr:nth-of-type(odd):hover td { background-color: #eee; }


        .stem-member .stem-member-orders table td { width: 50%; font-size: 16px; display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 10px; }
            .stem-member .stem-member-orders table td:last-of-type { width: 50%; justify-content: center; text-align: center; }

            .stem-member .stem-member-orders table td:nth-of-type(1) { width: 130px; padding: 10px; }
            .stem-member .stem-member-orders table td:nth-of-type(2) { width: calc(50% - 130px) }
            .stem-member .stem-member-orders table td:nth-of-type(3) { width: 50%; border-right: 0; }
            .stem-member .stem-member-orders table td:nth-of-type(5) { border-right: 0; }

            .stem-member .stem-member-orders table td a { border: 1px solid #808080; padding: 5px; background-color: #fff; }
                .stem-member .stem-member-orders table td a:hover { box-shadow: 0 10px 10px -10px #000; background-color: #fff; }

            .stem-member .stem-member-orders table td p { display: block; font-weight: bold; }
}

@media only screen and (max-width: 768px) {
    .stem-member .stem-member-orders table td,
    .stem-member .stem-member-orders table td:last-of-type { width: 100%; }

        .stem-member .stem-member-orders table td:nth-of-type(4),
        .stem-member .stem-member-orders table td:nth-of-type(6) { border-right: 0; }
}

@media only screen and (max-width: 600px) {
    .stem-member .stem-member-orders table td:nth-of-type(2) { width: calc(100% - 130px); border-right: 0; }
    .stem-member .stem-member-orders table td:nth-of-type(3) { width: 100%; }
}












/*Member Addresses*/
.stem-member .stem-member-container.addressDetails { display: flex; justify-content: flex-start; flex-wrap: wrap; flex-direction: row; max-width: 1280px; }

    .stem-member .stem-member-container.addressDetails .addAddress { width: 32%; margin: 10px 0.5%; padding: 20px; display: flex; justify-content: center; align-items: center; border: 1px solid #ccc; border-radius: 10px; }
        .stem-member .stem-member-container.addressDetails .addAddress a span { color: #000; opacity: 0.5; font-size: 72px; }
        .stem-member .stem-member-container.addressDetails .addAddress a:hover span { opacity: 1; }

    .stem-member .stem-member-container.addressDetails .editAddress { width: 32%; margin: 10px 0.5%; padding: 20px; display: flex; justify-content: center; align-items: center; border: 1px solid #ccc; border-radius: 10px; }
        .stem-member .stem-member-container.addressDetails .editAddress div { margin-bottom: 0; }

        .stem-member .stem-member-container.addressDetails .editAddress .selectAddress { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin: 10px 0 20px; }
            .stem-member .stem-member-container.addressDetails .editAddress .selectAddress p { width: 100%; margin: 0; padding: 0; }

        .stem-member .stem-member-container.addressDetails .editAddress .shippingCheck,
        .stem-member .stem-member-container.addressDetails .editAddress .billingCheck { width: 50%; }

            .stem-member .stem-member-container.addressDetails .editAddress .shippingCheck label,
            .stem-member .stem-member-container.addressDetails .editAddress .billingCheck label { color: #333; text-align: center; }

                .stem-member .stem-member-container.addressDetails .editAddress .shippingCheck label input,
                .stem-member .stem-member-container.addressDetails .editAddress .billingCheck label input { width: 20px; height: 20px; position: relative; top: 5px; }


        .stem-member .stem-member-container.addressDetails .editAddress .userInput { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; }
            .stem-member .stem-member-container.addressDetails .editAddress .userInput .btn { width: 40%; margin: 5px 5%; }
            .stem-member .stem-member-container.addressDetails .editAddress .userInput div { margin-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; }

            .stem-member .stem-member-container.addressDetails .editAddress .userInput .btn.defaultShipping,
            .stem-member .stem-member-container.addressDetails .editAddress .userInput .btn.defaultBilling { width: 100%; }

                .stem-member .stem-member-container.addressDetails .editAddress .userInput .btn.defaultShipping + span,
                .stem-member .stem-member-container.addressDetails .editAddress .userInput .btn.defaultBilling + span { width: 90%; text-align: center; background-color: rgba(32, 255, 43, 0.5); margin: 5px auto; color: #2a692d; font-weight: 600; border: 1px solid rgba(42, 105, 45, 0.5); padding: 4px 5px; }


@media only screen and (max-width: 1280px) {
    .stem-member .stem-member-container.addressDetails .addAddress,
    .stem-member .stem-member-container.addressDetails .editAddress { width: 48%; margin: 10px 0.5%; }
}

@media only screen and (max-width: 1024px) {
    .stem-member .stem-member-container.addressDetails .addAddress,
    .stem-member .stem-member-container.addressDetails .editAddress { font-size: 14px; }
}

@media only screen and (max-width: 768px) {
    .stem-member .stem-member-container.addressDetails .addAddress,
    .stem-member .stem-member-container.addressDetails .editAddress { width: 100%; margin: 10px auto; }
}







/*Add New Address*/
.stem-member .stem-member-container.addressDetails.addNewAddress { max-width: 650px; }
    .stem-member .stem-member-container.addressDetails.addNewAddress .editAddress { width: 100%; }






/*Edit Profile*/
.stem-member-container.edit-profile { max-width: 100%; }


.stem-member-container .profile-basics { display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; padding: 20px; }

    .stem-member-container .profile-basics > div:nth-of-type(1) { width: 350px; padding: 0 20px 20px; text-align: center; }
    .stem-member-container .profile-basics > div:nth-of-type(2) { width: calc(100% - 350px); padding-top: 20px; }

    .stem-member-container .profile-basics > div:nth-of-type(1) h4 { margin: 0; padding: 0; width: 100%; text-align: center; }

.stem-member-container.edit-profile .profile-image { width: 25%; display: flex; justify-content: flex-start; flex-wrap: wrap; text-align: left; }
    .stem-member-container.edit-profile .profile-image img { margin: 10px auto 20px; width: 100%; }
        .stem-member-container.edit-profile .profile-image img + div { margin-bottom: 20px; }

.stem-member-container.edit-profile .member-quicksave { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }

    .stem-member-container.edit-profile .member-quicksave .btn[type=submit] { margin-top: 0; }

.stem-member .stem-member-container.edit-profile .member-custom { display: flex; flex-wrap: wrap; }

    .stem-member .stem-member-container.edit-profile .member-custom > div { width: 24%; padding: 0 10px; min-width: 300px; }
        .stem-member .stem-member-container.edit-profile .member-custom > div.text-area { width: 100%; margin-bottom: 40px; }

@media only screen and (max-width: 992px) {
    .stem-member-container .profile-basics > div:nth-of-type(1) { width: 100%; max-width: 400px; margin: 0 auto; }
    .stem-member-container .profile-basics > div:nth-of-type(2) { width: 100%; margin: 0 auto 40px; }
    .stem-member .stem-member-container.edit-profile .member-custom > div { width: 100%; margin: 0 auto; }

    .stem-member-container.edit-profile .profile-image { text-align: center; }
        .stem-member-container.edit-profile .profile-image img { margin: 10px auto 20px; }
}








/*Live Profile*/
.stem-member-container.live-profile { max-width: 100%; display: flex; flex-wrap: wrap; }
    .stem-member-container.live-profile h1 { text-align: left; margin: 0; padding: 0; }

    .stem-member-container.live-profile .profile-image { width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; text-align: left; }
        .stem-member-container.live-profile .profile-image img { margin: 10px auto 20px; width: 100%; }
            .stem-member-container.live-profile .profile-image img + div { margin-bottom: 10px; }

    .stem-member-container.live-profile > div.text-area { width: 100%; margin-bottom: 40px; }

        .stem-member-container.live-profile > div.text-area .editor-label + div { min-height: 150px; }

    .stem-member-container.live-profile > div label + div,
    .stem-member-container.live-profile .editor-label + div { display: inline-block; padding: 10px; background-color: #f9f9f9; border: 1px solid #dedede; width: 100%; }

    .stem-member-container.live-profile .member-custom-element { width: 33.3333%; padding: 5px; }


@media only screen and (max-width: 992px) {
    .stem-member-container.live-profile .member-custom-element { width: 48%; }
    .stem-member-container.live-profile h1 { text-align: center; }
}

@media only screen and (max-width: 768px) {
    .stem-member-container.live-profile .member-custom-element { width: 100%; margin: 5px auto; }
}