.account-page {margin: 20px 0px}

.html-account-page .side-2 {padding-right: 20px;}

.account-page .form-fields {
    border: 1px solid #ccc;
    padding: 4rem;
    margin: 0 0 6rem;
}

input:read-only {
  text-indent: 0;
  border: none;
  box-shadow: none !important;
}

.add-more-external-records .loginBtn--facebook {
    width: auto;
    padding: 1.2rem 2rem 0 8rem;
}
.divAddPaymentMethod.form-fields fieldset .inputs > label:first-of-type {
    width: 20rem;
    text-align: right;
}

/* Info / Change Password follow the style guide's stacked form (F1): label above a
   full-width field (fullWidthStackedForm on the page wrapper owns the field styling;
   the old 20rem side-label layout is retired). The asterisks stay hidden while the
   Info page is in its read-only state — they only mean something once Edit is clicked. */
.account-page .form-fields .inputs .newPasswordWrapper input {
    width: 100%;
}

.account-page.readonly .required {
    display: none;
}

/* read-only display: the label sits IN FRONT of the value on one line
   ("First Name  David") — the stacked label-above-field layout only applies
   once Edit unlocks the form and the readonly class drops. Rows that never
   unlock (customer roles) carry .readonlyDisplay and keep this presentation
   in edit mode too. */
.customer-info-page.readonly .form-fields .inputs,
.customer-info-page .form-fields .inputs.readonlyDisplay {
    display: flex;
    align-items: baseline;
}

.customer-info-page.readonly .form-fields .inputs > label:first-of-type,
.customer-info-page .form-fields .inputs.readonlyDisplay > label:first-of-type {
    flex: 0 0 auto;
    min-width: 25%;
    text-align: right;
    margin: 0 1.5rem 0 0;
}

.customer-info-page.readonly .form-fields .inputs input,
.customer-info-page.readonly .form-fields .inputs select,
.customer-info-page.readonly .form-fields .inputs .readonly-username,
.customer-info-page .form-fields .inputs.readonlyDisplay input {
    flex: 1 1 auto;
    width: auto;
    display: inline-block;
}

/* …and the roles input never gains the edit-mode field chrome */
.customer-info-page .form-fields .inputs.readonlyDisplay input {
    height: auto;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    font-weight: 400;
}

/* the header's Edit / Save / Change Password controls are link-styled — keep
   them out of the stacked form's full-width input treatment */
.account-page .fieldsetHeaderWrapper .buttons input {
    width: auto;
}

.myAccountNav .material-icons-outlined {
    line-height: 1.4;
}

.payYourBillWrapper input[type='button'],
.payYourBillWrapper input[type='submit'] {

    --btn-width: auto;

}

.myAccountWrapper .buttons {text-align: center;}
.myAccountWrapper .buttons button {max-width: 600px;}


.divManageProductsListItemVariantsWrapper .AdminOnly {
    padding: 5px;
    background-color: rgba(173, 216, 230, 0.5);
    line-height: 1REM;
}
    .divManageProductsListItemVariantsWrapper .AdminOnly:before {
        content: "\A";
        white-space: pre;

    }

.MenuAccountNav {
    position: relative;
    z-index: 5;
    margin: 0px 20px 0px 0px;
    display: block;
    flex-wrap: unset;
    flex-direction: unset;
    align-items: unset;
    width: 100%;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    padding: 4rem 1rem 2rem 4rem;
    font-size: 1.8rem;

    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f6f6f6;
    padding: 10px;
    margin-top: 20px;

}

    .MenuAccountNav > .has-sublist {
    
    }

    .MenuAccountNav > .sectionHeader > a,
    .MenuAccountNav > .sectionHeader > a:link,
    .MenuAccountNav > .sectionHeader > a:visited,
    .MenuAccountNav > .sectionHeader > a:active,
    .MenuAccountNav > .sectionHeader > a:hover {
        font-weight: 600;
        line-height: 1.4;
        text-transform: uppercase;
        color: rgba(0,0,0,0.6);
        text-transform: uppercase;
        text-decoration: none;
        cursor: default;
    }

    .MenuAccountNav > .has-sublist > a {

    }   

        .MenuAccountNav .has-sublist > plus-button {
        }




.MenuAccountNav > li {
    flex: unset;
    padding: 8px 0;
    margin: 0px;
    height: auto;
    vertical-align: bottom;
    border-bottom: none;
}

        .MenuAccountNav > li > a {
            position: relative;
            display: block;
            color: #333333;
            text-align: left;
        }

            .MenuAccountNav > li > a > span {
                font-size: 1.6rem;
                font-weight: 700;
                display: inline-block;
                padding: 7px 0px;
                white-space: nowrap;
            }


    .MenuAccountNav .sublist-wrap {
        display: block;
    }

    .MenuAccountNav .sublist-wrap li {display: flex;
    }

        .MenuAccountNav .sublist-wrap li .material-icons-outlined {
            font-size: 18px;
            line-height: 1.6;
            margin-right: 8px;
            width: 28px;
        }

    .MenuAccountNav .sublist-wrap li > a,
    .MenuAccountNav .sublist-wrap li > a:link,
    .MenuAccountNav .sublist-wrap li > a:visited,
    .MenuAccountNav .sublist-wrap li > a:active,
    .MenuAccountNav .sublist-wrap li > a:hover {
        color: #333;
        font-size: 1.6rem;
        font-weight: 600;
    }

/* (the .divMyAccountBanner / #hbMenuIcon / .myAccountWrapper #sidebar rules and
   their 1024px/767px media blocks are deleted — that markup no longer exists
   anywhere (source, JS, DB widgets/topics); the account nav lives in the
   hamburger below 992 per mediaqueries.css) */

.ui-widget-content {
max-width: 800px;
margin: auto;
}

.AutoShipNoItemsMessage {
    margin: 20px 20px 40px 0px;
}

.MyAccountBackToList {
}

    .MyAccountBackToList span {
    vertical-align: top;
    }

.fieldsetHeaderWrapper {
  display: flex;
  justify-content: space-between;
}


/* #region My Account  */

.myAccountNav .material-icons {
    color: #605E5E;
}

.myAccountNav .material-icons-outlined {
    font-size: 18px;
    line-height: 1.6;
    margin-right: 8px;
}


.myAccountWrapper {
    display: flex;
}

    .myAccountWrapper .smallerMargin {
        width: 100%;
        margin-top: 40px;
    }

/* side nav */

.leftHandNavWrapper {
    background-color: #f6f7f8;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 360px;
}

    .leftHandNavWrapper .myAccountNav {
        padding: 4rem 1rem 2rem 4rem;
        font-size: 1.8rem;
    }


    .leftHandNavWrapper .sublist {
        padding: 0;
    }

        .leftHandNavWrapper .sublist .sublist {
            padding-left: 40px;
        }


    .leftHandNavWrapper .list > li {
        margin: 0 0 4rem;
    }

        .leftHandNavWrapper .list > li.active.last > a {
            font-weight: 700;
        }

        .leftHandNavWrapper .list > li.inactive {
            display: none;
        }

.myAccountNav > li > div {
    margin-bottom: 1rem;
}

.myAccountNav .sublist > li {
    display: flex;
}

    .myAccountNav .sublist > li.selected,
    .myAccountNav .sublist > li.selected a.l4 {
        color: #005596;
    }











.center-1 {
    margin: 0 0 8rem;
}

.account-page .myAccountFormContainer {
    padding: 4rem 0;
}


.account-page.readonly .form-fields input,
.account-page .form-fields .readonly-username {
    height: auto;
    border: none;
    padding: 0;
    margin: 0;
    font-weight: 400;
}


.fieldsetHeaderWrapper {
    display: flex;
    justify-content: space-between;
}

.address-list-page .fieldsetHeaderWrapper {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
}

.fieldsetHeaderWrapper .buttons {
    margin-top: .5rem;
}

    /*.fieldsetHeaderWrapper .buttons input.border {
        border-right: 1px solid #ccc;
    }

    .fieldsetHeaderWrapper .buttons input {
        padding: .5rem 2rem;
        min-width: 0;
    }

        .fieldsetHeaderWrapper .buttons input:last-child {
            border: none;
            padding: .5rem 0 .5rem 2rem;
        }*/

#changePreferredAddressButton,
#savePreferredAddressButton {
    display: none;
}

    #changePreferredAddressButton.active,
    #savePreferredAddressButton.active {
        display: inline-block;
    }

.filterWrapper {
    display: flex;
    margin-bottom: 3rem;
}

.account-page .searchBoxWrapper {
    width: 70rem;
    display: flex;
    float: none;
    margin: 0 1rem 0 0;
}

    .account-page .searchBoxWrapper > form {
        width: 100%;
        position: relative;
    }

    .account-page .searchBoxWrapper .search-box-text {
        padding-right: 6rem;
    }

    .account-page .searchBoxWrapper .searchBoxIcon {
        right: 1.5rem;
    }
/* tables */
.myAccountTable table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 1rem;
    text-align: center;
    margin-top: 2REM;
}

.myAccountTable tr {
    width: 100%;
    transition: all 0.3s ease;
}

.myAccountTable th {
    font-weight: 700;
    padding: 0 2rem 1rem 1rem;
    text-align: left;
    text-transform: uppercase;
    line-height: 0px;
    white-space: nowrap;
}

.myAccountTable tbody tr {
    background: #f6f7f8;
    height: 10rem;
}

.myAccountTable tbody td {
    padding: 0 1rem;
    text-align: left;
}

.myAccountTable td input.linkStyling {
    font-size: 1.8rem;
}


.order-list.myAccountTable tr.order-item {
    cursor: pointer;
}

.myAccountTable tr.order-item:hover {
    -webkit-box-shadow: 1px 5px 7px -3px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 5px 7px -3px rgba(0,0,0,0.3);
    box-shadow: 1px 5px 7px -3px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.myAccountTable .Canceled tbody td {
    color: rgba(0,0,0,.3);
}

    .myAccountTable .Canceled tbody td a {
        color: rgba(0,85,150,.3);
    }


/* info page */
/* (the change-password side-label flex rules are retired — the page follows the
   stacked form pattern, fullWidthStackedForm on the page wrapper) */

.infoAddressesWrapper .form-fields {
    display: flex;
}

/* (the old .customer-info-page .inputs margin/label-width overrides are retired —
   fullWidthStackedForm on the page wrapper owns the field spacing now) */

.customer-info-page .form-fields .customerInfoAddressTile {
    vertical-align: top;
    width: 50%;
    display: flex;
}

    .customer-info-page .form-fields .customerInfoAddressTile > div {
        vertical-align: top;
        display: inline-block;
    }

/* payment methods page */
.html-payment-methods-page .inputs {
    margin: 0 0 1rem;
}

.html-payment-methods-page .inputs label {
    display: inline-block;
    width: 200px;
    text-align: right;
    margin: 0 15px 0 0;
    font-weight: 700;
}

.html-payment-methods-page .inputs input,
.html-payment-methods-page .inputs select {
    display: inline-block;
    width: auto;
    min-width: 300px;
}

.html-payment-methods-page .inputs .field-validation-error {
    margin-left: 215px;
}

/* address edit/add pages: two-column stacked form matching the checkout's
   new-address form (the old 200px side-label layout is retired; the
   fullWidthStackedForm class on the page wrapper owns the field styling) */
.html-address-edit-page .edit-address,
.html-address-add-page .edit-address {
    display: flex;
    justify-content: space-between;
}

.html-address-edit-page .edit-address .formColumn,
.html-address-add-page .edit-address .formColumn {
    width: 47%;
}

.add-more-external-records .title {
    display: none;
}

/*pagination*/
/* tPayment Methods */

.divSavedPaymentMethods .tdUpdate span:first-child {
    padding: 0 1.5rem;
    margin-right: 1rem;
    border-right: 1px solid #ccc;
}

.date-picker-wrapper {
    width: calc(100% - 25rem);
    display: inline-block;
}

.divAddPaymentMethod .date-picker-wrapper select:last-child {
    margin-left: 2rem;
}
/* address list */
.address-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .address-list .address-item-empty,
    .address-list .address-item {
        padding: 0;
        width: 31%;
        margin: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .address-list .address-item {
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 0 0 3%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        .address-list .address-item .radioButton {
            vertical-align: top;
        }

        .address-list .address-item .p8 {
            display: inline-block;
            font-weight: 400;
            padding-left: .25rem;
            line-height: 2rem;
            vertical-align: top;
            margin: 0;
            font-size: 1.5rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .address-list .address-item ul.info {
            padding: 1.5rem 2rem 1rem;
            margin: 0;
        }

            .address-list .address-item ul.info .name {
                font-weight: 600;
            }

            .address-list .address-item ul.info .address1 {
                margin-top: .5rem;
            }


    .address-list .addressBottomContainer {
        display: flex;
        justify-content: space-between;
    }

.myAccountFormContainer.hideCheckboxes .addressBottomContainer label > *:not(.visible) {
    display: none;
}



.addressBottomContainer .inputs {
    margin: 0;
    padding: 1rem 0 1.5rem 2rem
}

    .addressBottomContainer .inputs label.customInputWrapper {
        display: block;
        margin-bottom: .5rem;
        display: flex;
    }

    .addressBottomContainer .inputs p {
        display: inline;
    }

.addressBottomContainer .buttons {
    padding: 0 1rem 1.75rem;
    text-align: right;
    display: flex;
    white-space: nowrap;
}

    .addressBottomContainer .buttons input {
        font-size: 1.6rem;
        padding: .25rem 1rem;
        align-self: flex-end;
        min-width: 0;
    }

/*.address-list .address-item .buttons input.border {
    border-right: 1px solid #ccc;
}*/

.addressBottomContainer .buttons input.hidden {
    display: none;
}


/* order history */


.order-list-page .buttons {
    display: block;
    text-align: right;
    margin: 0 1rem 2rem;
}

    .order-list-page .buttons .update-save-for-later-button {
        width: 320px;
    }

.order-list-page .form-fields label {
    width: 20rem;
}

.section.shipments,
.order-overview {
    min-height: 10rem;
    background: #f6f7f8;
    padding: 0 4rem;
    vertical-align: middle;
    border: 1px solid #ccc;
    border-width: 1px 0;
    margin: 2rem 0;
}

.order-details-area {
    display: flex;
}

    .order-details-area > div {
        margin-right: 3%;
    }

.order-overview .order-overview-content {
    padding: 0;
    display: flex;
    justify-content: space-between;
}

    .order-overview .order-overview-content label {
        display: block;
        text-transform: uppercase;
    }

    .order-overview .order-overview-content .shipping-address {
        max-width: 40%;
    }

.products .divShoppingCartWrapper {
    width: auto;
}

.section.shipments .table-wrapper {
    padding-top: 2rem;
}

.section.shipments th {
    text-transform: uppercase;
    text-align: left;
    width: 20%;
}

.order-list-page .form-fields {
    border: 1px solid #ccc;
    padding: 4rem;
    margin: 0 0 6rem;
    display: flex;
    justify-content: space-between;
}

    .order-list-page .form-fields > div {
        width: 48%;
    }

    .order-list-page .form-fields .info-list {
        padding: 0;
        margin: 0;
    }
/* authors */
.favoriteAuthorsWrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 2rem 0 0;
}

    .favoriteAuthorsWrapper .authorPhotoWrapper {
        width: 100%;
        max-width: 20%;
    }

    .favoriteAuthorsWrapper .authorPhoto {
        border-radius: 50%;
        width: 100%;
    }

    .favoriteAuthorsWrapper .authorLatestWorks {
        max-width: 30%;
        vertical-align: top;
    }

        .favoriteAuthorsWrapper .authorLatestWorks .title {
            font-family: var(--secondary-font);
            font-size: 2.4rem;
            color: var(--dark-text-color);
            margin-bottom: 2rem;
        }

        .favoriteAuthorsWrapper .authorLatestWorks .releaseYear {
            color: var(--gray-color);
        }

    .favoriteAuthorsWrapper .authorNameBio {
        vertical-align: top;
        padding: 0 4rem;
        max-width: 50%;
    }

        .favoriteAuthorsWrapper .authorNameBio .title a {
            color: #333;
        }

.favoriteAuthorsWrapper .favorite-link {
    width: 3.5rem;
    vertical-align: middle;
}







/* automatic shipments */
.update-automatic-shipment .cart tr.common-buttons {
    border: none;
}

.update-automatic-shipment .cart .common-buttons > td {
    padding: 1rem;
    border: none;
}

.autoShipDetailsWrapper {
    margin: 0;
    padding: 0;
}

    .autoShipDetailsWrapper select,
    .autoShipDetailsWrapper input[type="text"] {
        width: 100%;
    }

.largeFormWrapper.autoShipDetailsWrapper .inputs {
    margin: 1rem 0;
}

    .largeFormWrapper.autoShipDetailsWrapper .inputs.checkboxwrapper {
        margin-top: 3rem;
    }

.autoShipDetailsWrapper .inputs.checkboxwrapper .p2 {
    font-weight: 700;
    margin-left: 1rem;
    vertical-align: top;
    line-height: 3rem;
}

.automatic-shipment-button {
    width: 100%;
}

.update-automatic-shipment a.button-2 {
    font-weight: 700;
    line-height: 3.5rem;
}

.update-automatic-shipment .divCheckOutWrapper .section-title {
    display: flex;
    justify-content: space-between;
    margin: 0 0 1rem;
}

.divCheckOutWrapper .addresses .customInputWrapper {
    font-weight: 400;
    display: flex;
    width: auto;
    height: auto;
}

.divCheckOutWrapper .addresses {
    display: flex;
    margin: 0;
    padding: 0;
    flex-flow: row wrap;
}

    .divCheckOutWrapper .addresses li {
        margin: 0 10% 3rem 0%;
        width: 40%;
    }

    .divCheckOutWrapper .addresses .customInputWrapper .radioButton {
        margin: 0 3rem 0 0;
    }

    .divCheckOutWrapper .addresses .address {
        display: inline-block;
        line-height: 3rem;
    }

        .divCheckOutWrapper .addresses .address > span {
            display: block;
        }

.showMoreAddresses {
    text-align: right;
    color: #005596;
    cursor: pointer;
}

    .showMoreAddresses:hover {
        text-decoration: underline;
        color: #004686;
    }

.update-automatic-shipment .cart td img {
    max-width: 16rem;
}

.update-automatic-shipment .cart .linkStyling {
    padding: 0;
    margin-top: 4rem;
    font-size: 1.6rem;
}

.autoShipDisclaimer {
    margin-bottom: 2rem;
}

/* statements */


.divStatementsWrapper {
    display: flex;
}

.divStatementsHeaderWrapper {
    flex-basis: 70%;
}

.divStatementsContentWrapper {
    flex-basis: 70%;
}

.divStatementsAccountSummaryWrapper {
    flex-basis: 30%;
    display: inline-block;
    border: 1px solid #ccc;
    padding: 1rem 2rem;
    margin: 0 0 6rem 4rem;
}

    .divStatementsAccountSummaryWrapper .btnCokesburyAction {
        width: 100%;
    }

.divStatementsWrapper blockquote {
    margin-left: 6REM;
    display: inline-block
}

.divStatementsWrapper .divAccountInputWrapper {
    text-align: center;
}

.divStatementsWrapper .txtAccountNumber {
    width: 100%;
}

.divStatementsWrapper .divStatementsAccountSummaryWrapper label {
    white-space: nowrap;
    text-align: left;
}

.divStatementsWrapper .divStatementsAccountSummaryWrapper span {
    float: right;
}

    .divStatementsWrapper .divStatementsAccountSummaryWrapper span::after {
        content: "";
        clear: both;
        display: table;
    }

.divStatementsWrapper .divStatementsAccountSummaryWrapper hr {
    margin: 10px;
}

    .divStatementsWrapper .divStatementsAccountSummaryWrapper hr::after {
        content: none;
    }

.divStatementsWrapper .divOrderReturnsWrapper {
    margin-top: 4rem
}

.ManageStatements {
    display: block;
    border: 1px solid #ccc;
    padding: 1rem 2rem;
    margin: 0 0 2rem 0;
}

    .ManageStatements label {
        width: 25%;
    }

    /* Statement preferences panel (StatementViewer/statements_opt_in, CokesburyAccountDetails.cshtml).
       The shared ".inputs" rule sets font-size:0 to collapse inline-block whitespace; the plain value
       spans (account number, name, phone) inherit 0 and render invisible, while form controls keep the
       UA default size and still show. Restore a real size on this panel's rows, right-align the labels,
       and keep each label on one line with its value/field. */
    .ManageStatements .inputs {
        font-size: 1.6rem;
        margin: 0 0 1rem;
    }

        .ManageStatements .inputs > label {
            display: inline-block;
            width: 22rem;
            text-align: right;
            padding-right: 1rem;
            vertical-align: middle;
            box-sizing: border-box;
        }

        .ManageStatements .inputs > span {
            display: inline-block;
            vertical-align: middle;
            font-size: 1.6rem;
        }

            .ManageStatements .inputs > span input {
                display: inline-block;
                vertical-align: middle;
            }




/* pay my bill*/

.twoColumnFlex {
    display: flex;
    justify-content: space-between;
}

.leftSideFlexContainer {
    width: 100%;
}

.payYourBillSteps {
    margin: 0 0 4rem;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

    .payYourBillSteps li {
        margin: 0 2rem 0 0;
    }

    .payYourBillSteps a {
        display: flex;
        color: #333;
        font-size: 1.9rem;
        text-decoration: none;
        flex-direction: column;
        text-align: center;
    }


.stepIcon {
    width: 5rem;
    border: 2px solid #999;
    border-radius: 50%;
    display: inline-block;
    height: 5rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1rem;
    flex-shrink: 0;
    margin: 0 auto;
}

.stepIconText {
    margin-top: 1rem;
}

.stepIcon > span {
    height: 3.6rem;
    width: 3.6rem;
    border-radius: 50%;
    margin: auto;
    line-height: 1.8;
    background: #999;
    color: #fff;
    transition: all 0.3s ease;
}

    .stepIcon > span.filled {
        background: #005596;
    }


.divStatementsAccountSummaryWrapper {
    width: 360px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #eee;
    padding: 20px;
}


#js-step-1-choose-your-amount .inputs {
    margin: 2rem 0;
}

    #js-step-1-choose-your-amount .inputs .customInputWrapper {
        display: flex;
        line-height: 3.2rem;
    }

    #js-step-1-choose-your-amount .inputs .customAmountInputWrapper {
        margin-left: 4rem;
        display: block;
    }

        #js-step-1-choose-your-amount .inputs .customAmountInputWrapper .customAmountInput {
            display: block;
            max-width: 300px;
        }

label.customInputWrapper .labelText {
    vertical-align: top;
    margin-left: 1rem;
}

    label.customInputWrapper .labelText .hint {
        font-size: 1.6rem;
        color: #999;
        font-style: italic;
        display: block;
        font-weight: 400;
        margin-top: -.5rem;
    }

h5.title {
    margin-top: 8rem;
}

.payYourBillWrapper .title {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
}

.paymentFieldsWrapper .title > input {
    margin: 0;
}

.paymentFieldsWrapper.largeFormWrapper label {
    margin-bottom: .5rem;
}

.SaveForFutureCardWrapper p2 {
    vertical-align: top;
}

/* .multiInputLine layout moved to Cokesbury.css — the payment forms that use it render
   on checkout too, which doesn't load this file */

ul.statementsBalanceContainer {
    width: 100%;
    margin: 0;
    padding: 0;
}

    ul.statementsBalanceContainer > li,
    .statementsTypeContainer {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-between;
    }

.payYourBillReviewWrapper {
    display: flex;
    margin: 0;
    padding: 0;
}

    .payYourBillReviewWrapper li {
        margin: 0 4rem 0 0;
        padding: 0;
    }

        .payYourBillReviewWrapper li span,
        .payYourBillReviewWrapper li label {
            display: block;
        }

.payYourBillWrapper .buttons {
    margin-top: 4rem;
}

.payYourBillWrapper .divCheckOutWrapper {
    width: 100%;
}

.largeFormWrapper.focusedLargeForm .fieldset {
    max-width: 100%;
}

.helpIconWithTemplate {
    position: relative;
}

.popupImageWrapper {
    position: absolute;
    bottom: 12px;
    right: -255px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    background: #fff;
    box-shadow: 1px 4px 6px -2px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

.helpIconWithTemplate:hover .popupImageWrapper {
    bottom: 32px;
    opacity: 1;
    visibility: visible;
}

.popupImageWrapper > img {
    display: block;
}

.popupImageWrapper .popupArrowTop {
    position: absolute;
    left: calc(50% - 5px);
    bottom: -19px;
    margin-left: -8px;
    pointer-events: none;
    /* border-top-color: #ccc; */
    width: 10px;
    height: 10px;
    display: block;
    border: 10px solid transparent;
    border-top: 10px solid #fff;
    /* background: transparent; */
    /* border-width: 10px 0 0 0; */
    z-index: 101;
}

.popupImageWrapper .popupArrowBottom {
    border-style: solid;
    border-width: 8px;
    border-color: transparent;
    transition: all 0.3s ease;
    position: absolute;
    left: calc(50% - 5px);
    bottom: -21px;
    margin-left: -8px;
    pointer-events: none;
    width: 12px;
    height: 12px;
    display: block;
    border: 10px solid transparent;
    border-top: 10px solid #ccc;
    z-index: 100;
}


.expandableInput {
    width: 100%;
    height: 50px;
    transition: height 1s;
}

    .expandableInput:focus {
        width: 100%;
        height: 200px;
        transition: height 1s;
    }


.subscriptionmanagement-page .divSubscriptionInfoWrapper, .subscriptionmanagement-page .divSubscriptionRenewWrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

    .subscriptionmanagement-page .divSubscriptionInfoWrapper .inputs:nth-child(1) {
        max-width: 800px;
    }

    .subscriptionmanagement-page .divSubscriptionInfoWrapper .inputs:nth-child(2) {
        max-width: 400px;
    }

    .subscriptionmanagement-page .divSubscriptionInfoWrapper .inputs:nth-child(3) {
        max-width: 450px;
    }

        .subscriptionmanagement-page .divSubscriptionInfoWrapper .inputs:nth-child(3) a {
        }

.subscriptionmanagement-page .inputs {
    padding-right: 40px;
    margin: 1REM 0;
}

    .subscriptionmanagement-page .inputs label {
        white-space: nowrap;
        display: inline-block;
    }

.subscriptionmanagement-page input[type="text"], .subscriptionmanagement-page input[type="date"], .subscriptionmanagement-page select {
    width: 100%;
}

.subscriptionmanagement-page input[type='checkbox'] {
    -webkit-appearance: none;
    background-color: #fafafa;
    border: 1px solid #cacece;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
}

.subscriptionmanagement-page .checkboxLabel {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    top: 50%;
}

    .subscriptionmanagement-page .checkboxLabel input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .subscriptionmanagement-page .checkboxLabel .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
    }

    .subscriptionmanagement-page .checkboxLabel .container:hover input ~ .checkmark {
        background-color: #ccc;
    }

    .subscriptionmanagement-page .checkboxLabel input:checked ~ .checkmark {
        background-color: #2196F3;
    }

    .subscriptionmanagement-page .checkboxLabel .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    .subscriptionmanagement-page .checkboxLabel input:checked ~ .checkmark:after {
        display: block;
    }

    .subscriptionmanagement-page .checkboxLabel .checkmark:after {
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

.subscriptionmanagement-page .customInputWrapper {
    position: relative;
    top: 50%;
}



.subscriptionmanagement-page label {
    display: block;
}



.subscriptionmanagement-page .disabled input[type="text"] {
    background-color: #efefef;
}

.subscriptionmanagement-page input[type="text"]:read-only {
    background-color: #efefef;
}

.spanCheckBoxLabel {
    font-size: 1.6rem;
    color: #333;
    font-weight: 700;
    display: inline-block;
    margin-right: 1.5rem;
}




.subscriptionmanagement-page .divSubscriptionManagePaymentWrapper, .subscriptionmanagement-page .divSubscriptionManageAddressWrapper {
    width: 100%;
    max-width: 600px;
}

.subscriptionmanagement-page .addNewPaymentButton, .addNewAddressButton {
    display: flex;
    cursor: pointer;
    margin: 0 0 auto;
}

    .subscriptionmanagement-page .addNewPaymentButton .addNewIcon, .addNewAddressButton .addNewIcon {
        display: inline-block;
        width: 3rem;
        height: 3rem;
        background: linear-gradient(#005596,#005596), linear-gradient(#005596,#005596), #fff;
        background-position: center;
        background-size: 50% 2px,2px 50%;
        background-repeat: no-repeat;
        border-radius: 50%;
        border: 1px solid #005596;
        margin-right: 1rem;
        transform: rotate(0);
        transition: transform 400ms;
    }

    .subscriptionmanagement-page .addNewPaymentButton .addNewText, .addNewAddressButton .addNewText {
        color: #005596;
        font-weight: 600;
    }

/* the add-new toggles are real <button>s for keyboard access; undo atoms' bare-button
   skin (atoms loads after this file, and button:hover outranks a lone class), keeping
   the link-style flex layout above. Focus ring stays — that's the point. Mirrors the
   checkout's identical reset in onePageCheckout.css (this page loads MyAccount.css). */
.subscriptionmanagement-page button.addNewPaymentButton,
.subscriptionmanagement-page button.addNewPaymentButton:hover {
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0;
    color: inherit;
    font: inherit;
    box-shadow: none;
    text-shadow: none;
    width: auto;
    max-width: none;
    height: auto;
    text-align: left;
    text-transform: none;
}



.subscriptionmanagement-page .selectableRadioWrapper {
    margin: 10px 20px;
}

    .subscriptionmanagement-page .selectableRadioWrapper .RadioButtonInfoWrapper {
        display: inline-block;
        vertical-align: top;
    }

    .subscriptionmanagement-page .selectableRadioWrapper .CardInfoWrapper {
        display: inline-block;
        vertical-align: top;
    }

    .subscriptionmanagement-page .selectableRadioWrapper .address {
        display: inline-block;
        vertical-align: top;
    }

    .subscriptionmanagement-page .selectableRadioWrapper .CardInfoWrapper span {
        display: inline-block;
    }

.subscriptionmanagement-page .divAddPaymentMethod {
    max-width: 600px
}

.latestComments {
    margin-left: 50px;
    margin-bottom: 10px;
    list-style: disc;
}

.divParticipantInfo {
    display: flex;
    margin-bottom: 20px;
}

.participantUserTable {
    border-collapse: separate;
    border-spacing: 0 1rem;
}

.k-grid-header {
}

    .k-grid-header table {
        border-collapse: separate;
        border-spacing: 0 1rem;
    }

        .k-grid-header table thead tr {
            font-weight: 700;
            padding: 0 2rem 2rem;
            text-align: left;
            text-transform: uppercase;
        }

            .k-grid-header table thead tr th {
                padding: 0 2rem;
                text-align: left;
                white-space: nowrap;
            }

                .k-grid-header table thead tr th a {
                    font-weight: 700;
                    text-transform: uppercase;
                    color: #333 !important;
                    text-decoration: none !important;
                }

.k-grid-content {
}

    .k-grid-content table {
        border-collapse: separate;
        border-spacing: 0 1rem;
    }

        .k-grid-content table tbody tr {
            background: #f6f7f8;
            height: 5rem;
        }

            .k-grid-content table tbody tr td {
                padding: 0 2rem;
                text-align: left;
            }

.subscriptionTabWrapper {
    border-bottom: 1px solid #ddd;
    position: relative;
    margin: 6REM 0px 3REM;
}

    .subscriptionTabWrapper > .subscriptionTabs {
        display: flex;
        position: absolute;
        bottom: -1px;
    }

        .subscriptionTabWrapper > .subscriptionTabs > .subscriptionTab {
            margin-left: 20px;
        }

            .subscriptionTabWrapper > .subscriptionTabs > .subscriptionTab.active {
                border-top: 1px solid #ddd;
                border-right: 1px solid #ddd;
                border-bottom: 1px solid #fff;
                border-left: 1px solid #ddd;
            }

            .subscriptionTabWrapper > .subscriptionTabs > .subscriptionTab > div {
                margin: 10px 40px;
            }

                .subscriptionTabWrapper > .subscriptionTabs > .subscriptionTab > div > a {
                }

.k-grid-header .k-i-sort-asc-sm, .k-grid-header .k-i-sort-desc-sm, .k-grid-header .k-sort-order {
    color: #ff6358;
}

/* (the Kendo WebComponentsIcons embedded font — a 174KB base64 @font-face — and
   its .k-i-sort glyph rules are deleted: the account grids run on DataTables
   (storefront.datatables.js), whose sort icons live in Cokesbury.css) */




@media print {
    #header {
        display: none !important;
    }

    .fixedHeaderWrapper {
        display: none !important;
    }

    .titleBannerImage {
        display: none !important;
    }

    #footer {
        display: none !important;
    }
}







.managesubs-page {
}

    .managesubs-page .tab-section {
        margin-top: 5px;
    }

        .managesubs-page .tab-section .step-title {
        }

            .managesubs-page .tab-section .step-title .number {
                font-size: 2.5REM;
                width: 4REM;
            }

            .managesubs-page .tab-section .step-title .accordianTitle {
                font-size: 2.5REM;
            }

            .managesubs-page .tab-section .step-title .checkoutEditText {
            }

    .managesubs-page .totalsWrapper.fixed, .managesubs-page .totalsWrapper, .managesubs-page .CartStickyRight {
        width: 300px;
    }

        .managesubs-page .totalsWrapper .totals {
            padding: 10px;
        }

    .managesubs-page .cart-total .cart-total-row td span {
        font-size: 2REM;
    }

    .managesubs-page .cart-total .cart-total-row td.cart-total-right span, .managesubs-page .order-total td.cart-total-right span {
        font-size: 2REM;
        font-weight: 700;
    }

    .managesubs-page .divCheckOutWrapper {
        width: calc(96% - 300px);
    }

.divManageProductsListWrapper {
}



.divManageProductsListItems {
    display: grid;
    grid-template-columns: 72px auto;
    grid-template-rows: auto auto;
    background-color: #f6f7f8;
    margin-top: 10px;
    padding: 10px;
}

    .divManageProductsListItems .product-picture {
        grid-row-start: 1;
        grid-row-end: span 2;
    }

        .divManageProductsListItems .product-picture img {
            max-width: 72px;
        }

    .divManageProductsListItems .product {
        margin: 0px 10px;
    }


    .divManageProductsListItems .material-icons-outlined {
        font-size: 16px;
        cursor: pointer;
    }

        .divManageProductsListItems .material-icons-outlined.recommended {
            color: #771c23;
        }

        .divManageProductsListItems .material-icons-outlined.cloud {
            color: #1B7B86;
        }

    .divManageProductsListItemVariantsWrapper {
        text-align: right;
    }

.divManageProductsListItemVariants {
    display: flex;
    font-size: 1.5REM;
    justify-content: flex-end;
    margin-left: 20px;
    border-top: 1px solid #999;
    padding: 10px;
}

    .divManageProductsListItemVariants:last-child {
        border-bottom: 1px solid #999;
    }

    .divManageProductsListItemVariants .product {
        text-align: left;
        flex-grow: 2;
    }

    .divManageProductsListItemVariants .unit-price {
        min-width: 50px;
        text-align: right;
    }

    .divManageProductsListItemVariants .quantity {
        min-width: 60px;
        text-align: center;
    }

        .divManageProductsListItemVariants .quantity input {
            width: 50px;
            height: 30px;
            line-height: 30px;
            margin: 0px auto;
        }

    .divManageProductsListItemVariants .subtotal {
        min-width: 50px;
        text-align: right;
    }




.divSubTotalsDisclaimerWrapper {
    padding: 10px;
}

    .divSubTotalsDisclaimerWrapper span {
        font-size: 1.25REM;
        line-height: normal;
        font-style: italic;
        display: block;
        margin-top: 10px;
        text-align: justify;
    }

    .divSubTotalsDisclaimerWrapper .button {
        font-weight: 400;
        font-size: 1.625REM;
        margin: 10px auto;
        width: 240px;
        display: block;
        background: none;
        border: none;
        color: #005596;
    }
        .divSubTotalsDisclaimerWrapper .button:hover {
            font-weight: 400;
            font-size: 1.625REM;
            margin: 10px auto;
            width: 240px;
            display: block;
            background: none;
            border: none;
            color: #005596;
            text-decoration: underline;
        }


/* 2021 MY ACCOUNT SECTION STRUCTURE */

.divMyAccountBanner {
    width: 100%;
    height: 10REM;
    background: url('/Themes/Cokesbury/Content/images/headers/SearchBackground.jpg') no-repeat left top;   /* was /images/BannerCategory/... — a path with no such file, even on production */
    overflow: hidden;
}

    .divMyAccountBanner > h1 {
        color: #fff;
        line-height: 10REM;
        text-align: center;
        font-size: 4.8REM;
        text-shadow: 2px 2px 2px #000;
    }

.myAccountWrapper {
    display: flex;
}

    .myAccountWrapper #sidebar {
        width: 330px;
        min-width: 330px;
        background-color: rgba(246, 247, 248, 1);
        flex-grow: initial;
        flex-shrink: initial;
        flex-basis: initial;
        border-left: 2px solid rgba(246, 247, 248, 1)
    }

        .myAccountWrapper #sidebar.sidebar-collapsed {
            width: 32px !important;
            min-width: 32px !important;
            overflow: hidden;
            background-color: rgba(246, 247, 248, 0) !important;
            border-left: 2px solid rgba(246, 247, 248, 1)
        }

#myAccountNav {
    position: relative;
}

#sidebar .SideBarToggle {
    left: 290px;
    position: absolute;
    top: 5px;
    font-size: 23px;
    color: #333 !important;
    cursor: pointer;
    text-align: center;
    width: 30px;
}

#sidebar.sidebar-collapsed .SideBarToggle {
    left: 0px;
    background-color: #ddd;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

#sidebar, .SideBarToggle {
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
}

.myAccountWrapper #content {
}

#divstreamingVideoModalContent {
    width: 90%;
    max-width: 1000px;
    margin: auto;
}


.divCurriculumAutoShipListpanel, .AutomaticShipmentsListing .panel-group.card {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 20px 0px;
    padding: 20px;
}

    .divCurriculumAutoShipListpanel .card-header {
        display: flex;
        flex-flow: row wrap;
    }

        .divCurriculumAutoShipListpanel .card-header .divShipDateWrapper {
            flex-grow: 1;
        }

        .divCurriculumAutoShipListpanel .card-header .divShipPaymentWrapper {
            flex-grow: 1;
        }

        .divCurriculumAutoShipListpanel .card-header .divShipAddressWrapper {
            flex-grow: 2;
        }

        .divCurriculumAutoShipListpanel .card-header .break {
            flex-basis: 100%;
            height: 10px;
        }

        .divCurriculumAutoShipListpanel .card-header .label {
            font-weight: bold;
            margin-right: 5px;
        }

.tableDollarAmount {
    text-align: right !important;
}

.divCurriculumAutoShipListpanel .card-footer {
    display: flex;
    justify-content: space-between
}

    .divCurriculumAutoShipListpanel .card-footer .divDisclaimerWrapper {
        flex-basis: 73%;
        margin: 10px 20px;
    }

        .divCurriculumAutoShipListpanel .card-footer .divDisclaimerWrapper p {
            font-size: 1.4REM;
            line-height: normal;
            font-style: italic;
        }

    .divCurriculumAutoShipListpanel .card-footer .divSubTotalWrapper {
        flex-basis: 27%;
    }

        .divCurriculumAutoShipListpanel .card-footer .divSubTotalWrapper .row {
            display: flex;
            justify-content: space-between
        }

            .divCurriculumAutoShipListpanel .card-footer .divSubTotalWrapper .row div {
                margin: 5px 10px;
            }

            .divCurriculumAutoShipListpanel .card-footer .divSubTotalWrapper .row .label {
            }

            .divCurriculumAutoShipListpanel .card-footer .divSubTotalWrapper .row .tableDollarAmount {
            }



.divCurriculumNextShipDateWrapper {
    display: flex;
    justify-content: flex-start;
    border: 1px solid rgb(204, 204, 204);
    border-radius: 5px;
    padding: 0px 10px 0px 15px;
}

    .divCurriculumNextShipDateWrapper .inputCurriculumShipDate {
        width: auto;
    }

    .divCurriculumNextShipDateWrapper .checkboxwrapper {
        white-space: nowrap;
        margin-top: 15px;
    }

    .divCurriculumNextShipDateWrapper .inputCurriculumShipDate {
    background-color: #fff;
    }

.divCurriculumCheckboxQuartersWrapper {
    display: flex;
    justify-content: space-between;
    margin-top: -1REM;
    padding-left: 2REM;
}

    .divCurriculumCheckboxQuartersWrapper label {margin-right: 1REM
    }


.Canceled .CurrListManage {display: none;
}

.AutomaticShipmentsListing {}
    .AutomaticShipmentsListing .ui-widget-content {max-width: 100%}
    .AutomaticShipmentsListing .AutomaticShipmentsTabMenu {height: 40px;}

    .AutomaticShipmentsListing #tabsWrapper > div {
        margin: -13px 0px 0px 0px;
        padding: 0px;
    }

    .ui-tabs .ui-tabs-nav {
        margin: 0;
        padding: .2em .2em 0 2em;
    }

    .ui-tabs .ui-tabs-nav li {
        list-style: none;
        float: left;
        position: relative;
        top: 0;
        margin: 1px .2em 0 0;
        border-bottom-width: 0;
        padding: 0;
        white-space: nowrap;
    }

    .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
        float: left;
        padding: .5em 1em;
        text-decoration: none;
    }

    .ui-tabs .ui-tabs-nav li.ui-tabs-active {
        margin-bottom: -1px;
        padding-bottom: 1px;
    }

        .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
        .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
        .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
            cursor: text;
        }

.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
    cursor: pointer;
}

.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 1em 1.4em;
    background: none;
}

/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl,
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr,
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl,
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
    border-bottom-right-radius: 0px;
}
/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
    font-weight: normal;
    color: #454545;
}

    .ui-state-default a,
    .ui-state-default a:link,
    .ui-state-default a:visited,
    a.ui-button,
    a:link.ui-button,
    a:visited.ui-button,
    .ui-button {
        color: #454545;
        text-decoration: none;
    }

        .ui-state-hover,
        .ui-widget-content .ui-state-hover,
        .ui-widget-header .ui-state-hover,
        .ui-state-focus,
        .ui-widget-content .ui-state-focus,
        .ui-widget-header .ui-state-focus,
        .ui-button:hover,
        .ui-button:focus {
            border: 1px solid #cccccc;
            background: #ededed;
            font-weight: normal;
            color: #2b2b2b;
        }

            .ui-state-hover a,
            .ui-state-hover a:hover,
            .ui-state-hover a:link,
            .ui-state-hover a:visited,
            .ui-state-focus a,
            .ui-state-focus a:hover,
            .ui-state-focus a:link,
            .ui-state-focus a:visited,
            a.ui-button:hover,
            a.ui-button:focus {
                color: #2b2b2b;
                text-decoration: none;
            }

.ui-visual-focus {
    box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border: 1px solid var(--main-color);
    background: var(--main-color);
    font-weight: normal;
    color: #ffffff;
}

    .ui-icon-background,
    .ui-state-active .ui-icon-background {
        border: #003eff;
        background-color: #ffffff;
    }

    .ui-state-active a,
    .ui-state-active a:link,
    .ui-state-active a:visited {
        color: #ffffff;
        text-decoration: none;
    }