/* -------------------------------------------------- */
/* Basic Page Foundations */
/* -------------------------------------------------- */
* {
    box-sizing: border-box;
}

body {
    margin: 0 1.5em;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    height: 100vh;
    color: var(--bs-body-color);
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

textarea {
    resize: vertical;
}

ul {
    padding-left: 0;
    margin-top: 0;
    list-style-type: none;
}

.mobile-hide {
    display: none;
}

/* -------------------------------------------------- */
/* Page/Body widths for various viewport sizes */
/* -------------------------------------------------- */
.region-content {
    max-width: 100%;
    margin: 0 auto;
}

@media (min-width: 48em) {
    .region-content {
        max-width: 736px;
    }
}

@media (min-width: 64em) {
    .region-content {
        max-width: 985px;
    }
}

@media (min-width: 75em) {
    .region-content {
        max-width: 1200px;
    }
}

@media (min-width: 48em) {
    .col {
        flex: 1 0 0%;
    }
    
    .mobile-hide {
        display: revert;
    }

}

h5, /* h3,*/ h1 {
    font-family: 'Playfair Display', serif;
    color: #0076a3;
}
i, a {
    color: #0076a3;
    text-decoration: none;
}
a:not(.button):hover {
    color: #5b93c6;
    text-decoration: underline;
}

hr {
    margin: 1.5rem 0;
    color: #5b93c6;
    border: 0;
    border-top: 1px solid;
    opacity: .25;
}

img, svg {
    vertical-align: middle;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}


/* -------------------------------------------------- */
/* Header, Footer, and Content */
/* -------------------------------------------------- */
header {
    width: 100%;
    text-align: center;
    /* background-color: #e6e6e6; */
    /* padding: 2em 0; */
    padding-top: 2em;
    /* border-bottom: 5px solid #404040; */
    /* margin-bottom: 1em; */
}
header img {
    max-width: 100%;
    max-height: 100px;
    height: auto;
}
footer {
    width: 100%;
    text-align: center;
    margin-top: 2em;
    padding: 1.5em 0;
}

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}


.headerActions li {
    display: inline;
    font-size: 16px;
    text-transform: uppercase;
    margin: 0 10px;
    line-height: 1.5em;
    vertical-align: middle;
}

.headerActions ul {
    margin-top: 1em;
    margin-bottom: .25rem;
    display: flex;
    flex-flow: column wrap; /* changes to row wrap on larger screens */
    justify-content: flex-end;
    align-items: flex-end;
}
.headerActions a {
    color: #555;
    border-bottom: 3px solid transparent;
    text-decoration: none;
    transition: all .3s ease-in-out;
}
.headerActions a:hover {
    text-decoration: none;
    border-bottom: 3px solid #5b93c6;
    color: #5b93c6;
}

.center {
    text-align: center;
}

.column {
    display: flex;
    /* flex-direction: column; */
}
.column.two {
    column-gap: 2%;
}
.column.two > * {
    flex-basis: 48%;
}


.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    /* color: var(--bs-heading-color,inherit) */
}

/* Slightly scale most headings based on screen size  */
.h1, h1 { font-size: calc(1.375rem + 1.5vw); }
.h2, h2 { font-size: calc(1.325rem + 0.9vw); }
.h3, h3 { font-size: calc(1.300rem + 0.6vw); }
.h4, h4 { font-size: calc(1.275rem + 0.3vw); }
.h5, h5 { font-size: 1.25rem; }
.h6, h6 { font-size: 1rem; }

/* Do not keep scaling past 1200px */
@media (min-width: 1200px) {
    .h1, h1 {
        font-size: 2.5rem;
    }
    .h2, h2 {
        font-size: 2rem;
    }
    .h3, h3 {
        font-size: 1.75rem;
    }
    .h4, h4 {
        font-size: 1.5rem;
    }
}

/* -------------------------------------------------- */
/* Form Controls */
/* -------------------------------------------------- */
.row {
    display: flex;
    flex-flow: row wrap;
    /* column-gap: .5rem; */
    justify-content: space-between;

    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;

    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.row.inline {
    justify-content: flex-start;
}
.row.inline > * {
    width: unset;
}
.row.inline.remember-forgot {
    justify-content: space-between;
}

.row > * {
    --bs-gutter-y: 1rem;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) / 2);
    padding-left: calc(var(--bs-gutter-x) / 2);
    margin-top: var(--bs-gutter-y);
}

label.form-label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.mobile-hide {
    display: none;
}


/* All H3s are bars, but any H element can be given that style with a class */
h3, .sectionHeader {
    background-color: #5b93c6;
    border-radius: 25px;
    padding: .25em .75em;
    color: white;
    text-align: center;
}


.button, input[type="button"], input[type="submit"], input[type="reset"],
a.back {
    background-color: #5b93c6;
    border: none;
    border-radius: 15px;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    /* max-width: 150px; */
    
    max-width: fit-content;
    box-shadow: 0 3px 4px 0 rgba(0,0,0,0.24);
}
.button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover,
a.back:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    text-decoration: none;
}

.button.secondary,
a.back {
    background-color: var(--bs-body-bg);
    border: 1px solid #5b93c6;
    color: #4688c1;
}


/* -------------------------------------------------- */
/* Floating Placeholder Labels - taken from Bootstrap */
/* -------------------------------------------------- */
.form-control, .text {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: 1px solid #dee2e6;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;

    min-width: 200px;
}

.form-control:focus,
.text:focus,
.form-select:focus,
.select:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

.form-select, .select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    /* border: var(--bs-border-width) solid var(--bs-border-color); */
    border: 1px solid #dee2e6;
    /* border-radius: var(--bs-border-radius); */
    border-radius: .375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    min-width: 200px;
}

.form-floating {
    position: relative;
}

.form-floating > .form-control,
.form-floating > .text,
.form-floating > .form-control-plaintext {
    padding: 1rem .75rem;
}

.form-floating > .form-control,
.form-floating > .text,
.form-floating > .form-control-plaintext,
.form-floating > .form-select,
.form-floating > .select {
    height: calc(3.5rem + 2px);
    min-height: calc(3.5rem + 2px);
    line-height: 1.25;
}

.form-control-plaintext {
    display: block;
    width: 100%;
    padding: .375rem 0;
    margin-bottom: 0;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: transparent;
    border: solid transparent;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* border-width: var(--bs-border-width) 0; */
}

.form-control-plaintext:focus {
    outline: 0;
}


.form-floating > .form-select,
.form-floating > .select {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}

.form-control-manual {
    position: relative;
    padding-top: 1.625rem;
}

.form-control-manual > label {
    color: rgba(33, 37, 41, .65);
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

.form-floating > label,
.form-control-manual > label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100%;
    padding: 1rem .75rem;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out,transform .1s ease-in-out;
}

/* Hide the literal placeholder, because the label element is the acting as the placeholder in practice */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .text::placeholder,
.form-floating > .form-control::placeholder {
    color: transparent;
}

/* When the placeholder is distinct from the floating label, do not hide it when the input is focused */
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control-plaintext:not(:placeholder-shown)::placeholder,
.form-floating > .form-control.custom-placeholder:focus::placeholder,
.form-floating > .form-control.custom-placeholder:not(:placeholder-shown)::placeholder,
.form-floating > .text.custom-placeholder:focus::placeholder,
.form-floating > .text.custom-placeholder:not(:placeholder-shown)::placeholder {
   color: revert;
}

.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .text:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .text:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label,
.form-floating > .select ~ label {
    color: rgba(33, 37, 41, .65);
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown),
.form-floating > .form-control:focus,
.form-floating > .text:focus,
.form-floating > .form-control:not(:placeholder-shown),
.form-floating > .text:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}


.form-text {
    margin-top: .25rem;
    font-size: .875em;
    /* color: var(--bs-secondary-color); */
    color: rgba(33, 37, 41, 0.75);
}

.form-check,
.labelContainer {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: .125rem;
}
.form-check-inline {
    display: inline-block;
    margin-right: 1rem;
    margin-bottom: 0;
}
.form-check input,
.labelContainer input {
    float: left;
    margin-left: -1.5em;
    height: 1em;
    width: 1em;
    margin-top: .25em;
    vertical-align: top;
}


/* -------------------------------------------------- */
/* Misc styles */
/* -------------------------------------------------- */
.errorForProperty,
.is-invalid:not(input):not(select) {
    color: var(--cs-invalid-color);
}

.form-control.is-invalid,
.text.is-invalid,
.form-select.is-invalid,
.select.is-invalid,
.was-validated .form-control:invalid {
    /* border-color: var(--bs-form-invalid-border-color); */
    border-color: var(--cs-invalid-color);
    /* Draw and center a little circumscribed '!' in the right of the input box: */
    padding-right: calc(1.5em + .75rem);
    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); */
    background-image: var(--invalid-icon-svg);
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.form-control.is-invalid:focus,
.text.is-invalid:focus,
.form-select.is-invalid:focus,
.select.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    /* border-color: var(--bs-form-invalid-border-color); */
    border-color: var(--cs-invalid-color);
    /* box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb),.25); */
    box-shadow: 0 0 0 .25rem rgba(220,53,69,.25);
}

/* Automatically add 'required' asterisks to labels */
.form-floating > *.required ~ label::after,
label.required::after {
    content: ' *';
    color: var(--cs-invalid-color);
}

.page-subhead {
    font-size: calc(1rem + .3vw);
}
@media (min-width: 75em) {
    .page-subhead {
        font-size: 20px; /* Don't infinitely grow */
    }
}

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


.mini-box {
    flex-basis: 225px;
    flex-grow: 1;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.mini-box p {
    flex-grow: 1;
    margin: .5em 0;
}


#subOptions li {
    margin-top: .75rem;
}

/* -------------------------------------------------- */
/* Account Head + Page Title */
/* -------------------------------------------------- */
#accountHead {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

#accountHead h3 {
    flex-basis: 100%;
}

#accountInfo {
    flex-grow: 1;
}
#accountInfo .row {
    /* Normal page layout assumes that rows are the only thing on a line - not true for these rows */
    margin-right: calc(.5 * var(--bs-gutter-x));
}

#pageTitle,
.pageTitle {
    font-family: Playfair serif;
    color: #0076a3;
    /* text-align: center; */
    font-size: 2.5rem;
}

/* Alert messaging shown at the bottom of masthead/top of the page */
/* Informational messages */
.globalMessages ul {
    padding: 1rem;
    margin-top: .5rem;
    margin-bottom: 1rem;
    
    color: #0a3622;
    background-color: #d1e7dd;
    border: 1px solid #a3cfbb;
    border-radius: 0.375rem;
}
/* Error messages */
.globalErrors ul {
    padding: 1rem;
    margin-top: .5rem;
    margin-bottom: 1rem;
    
    color: #58151c;
    background-color: #f8d7da;
    border: 1px solid #f1aeb5;
    border-radius: 0.375rem;
}

/* -------------------------------------------------- */
/* My Home */
/* -------------------------------------------------- */

/* Since myhome and the standard account info block are read-only, remove the margin ordinarily needed between input fields */
.myhome .row > *,
#accountInfo .row > * {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

.myhome .subscriptionDescription {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    column-gap: 1em;
}

.subscriptionsView li {
    margin-bottom: 1em;
}

.noNewsletters {
    padding: 0 var(--bs-gutter-x);
}

/* -------------------------------------------------- */
/* Subscription Center */
/* -------------------------------------------------- */
.subscriptionCenter .row {
    margin-bottom: 1.5em;
}

.subscriptionCenter .subhead {
    text-align: center;
    align-self: center;
    flex-grow: 3
}

.subscriptionCenter .subhead p {
    text-align: justify;
}

.sub-boxes-container {
    gap: 1.5rem;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 2.5em 1em 1em 1em;
    text-align: center;
    min-width: 275px;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    align-self: stretch;

    flex-basis: 275px;
    flex-grow: 1;

    position: relative;
    /* border: var(--bs-card-border-width) solid var(--bs-card-border-color); */
    border: 1px solid rgba(0, 0, 0, 0.175);
    /* border-radius: var(--bs-card-border-radius); */
    border-radius: 0.375rem;
}

.card hr {
    width: 90%;
}

.card .price {
    position: absolute;
    top: 0px;
    background-color: rgba(91, 147, 198, 0.8);
    color: white;
    padding: 5px 1em;
    border-radius: 15px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.card .price .amt {
    font-size: larger;
    font-weight: bolder;
}
.smaller {
    font-size: smaller;
}

.card .bullets {
    flex-grow: 1;
    padding: 1rem;
    padding-left: 2rem;
    /* text-align: justify; */
    text-align: left;

}
.card .bullets ul {
    list-style-type: '\2713\0020';
}
.card .bullets ul li {
    font-size: .9em;
    margin-bottom: 1rem;
}
.card .bullets ul li::marker {
    color: #a1c873;
    color: #5b93c6;
    font-weight: bold;
}

.card .disclaimer {
    font-size: smaller;
    font-style: italic;
    margin-bottom: 1em;
}

.card .img-bullet-wrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.card > img {
    /* Explicitly excludes the 'archive' image/box which flows differently */
    max-height: 200px;
    flex-basis: 200px;
}


/* -------------------------------------------------- */
/* Newsletters */
/* -------------------------------------------------- */
#newsletterContainer li {
    /* padding-left: 1.5rem; */
    /* padding-right: 1.5rem; */
    margin-top: .75rem;
    margin-left: .75rem;
}
#newsletterContainer li span {
    font-style: italic;
    padding: 0 1.5rem;
    display: block;
}

/* -------------------------------------------------- */
/* Subscription Signup Pages */
/* -------------------------------------------------- */

.term-cards .col {
    margin: 1rem 0;
}

@media (min-width: 48em) {
    .term-cards > * {
        flex-basis: 45%;
    }
}
@media (min-width: 75em) {
    .term-cards > * {
        flex-basis: 20%;
    }
}

.term-card {
    position: relative;
    border-radius: .5em;
    display: flex;
    flex-flow: column nowrap;
    /* border: var(--bs-card-border-width) solid var(--bs-card-border-color); */
    border: 1px solid rgba(0, 0, 0, 0.175);
    padding: 10px 20px;
    cursor: pointer;
    transition: transform .2s ease-in-out;
}

.term-card:hover,
.term-card:has(input[type=radio]:checked) {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
}
.term-card:has(input[type="radio"]:checked) {
    border-color: #5b93c6;
    transform: scale(1.05);   
}

.term-card input[type="radio"] {
    position: absolute;
    /* right: calc(var(--card-padding) + var(--radio-border-width)); */
    right: calc(1em + 2px);
    /* top: calc(var(--card-padding) + var(--radio-border-width)); */
    top: calc(1em + 2px);
}

.term-card .term-duration {
    color: #5b93c6;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.5rem;
}

.term-card .term-cost {
    font-size: 2.5rem;
    font-weight: bold;
    padding: 0.5rem 0;
}

#printSubscriberHeader p {
    font-size: larger;
}


/* -------------------------------------------------- */
/* Global Variables */
/* -------------------------------------------------- */

:root {
    --bs-body-color: #212529;
    --bs-body-bg: #fff;

    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;

    --password-svg-padding: 1em;

    --cs-invalid-color: #dc3545;
    
    --invalid-icon-svg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    --hide-password-svg: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z'/%3E%3Cpath fill-rule='evenodd' d='M13.646 14.354l-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E");
    --show-password-svg: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z'/%3E%3Cpath fill-rule='evenodd' d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E");
    
}

/* -------------------------------------------------- */
/* Password Hide/Show Toggle Buttons */
/* -------------------------------------------------- */

::-ms-reveal {
  display: none; /* Hide the default version of this feature in Edge */
}

button#toggle-password {
    padding: var(--password-svg-padding);
    
    position: absolute;
    top:  calc((100% - 2 * var(--password-svg-padding)) / 2);
    left: calc(100% - (2 * var(--password-svg-padding)) - .375em);
    
    z-index: 9;
    background: 0;
    border: 0;
}

button#toggle-password:active,
button#toggle-password:focus,
button#toggle-password:hover {
  cursor: pointer;
}

button#toggle-password:focus {
  outline: none !important;
}

.input-password {
    --password-svg-size-x: calc(.75em + 0.375rem);
    --password-svg-size-y: var(--password-svg-size-x);
    --password-svg-padding-right: calc(0.375em + 0.1875rem);
    --password-svg-gutter: .1875rem;

    padding-right: calc(var(--password-svg-padding) + var(--password-svg-size-x)) !important;
    background-repeat: no-repeat;
    background-position: right var(--password-svg-padding-right) center;
    background-size: var(--password-svg-size-x) var(--password-svg-size-y);
}

.input-password[type="text"] {
    background-image: var(--hide-password-svg) !important;
}

.input-password[type="password"] {
    background-image: var(--show-password-svg) !important;
}

/* When the password field has an error (ie required), show both the warning icon and the button icon */
.input-password[type="text"].is-invalid {
    background-image: var(--invalid-icon-svg), var(--hide-password-svg) !important;
}
.input-password[type="password"].is-invalid {
    background-image: var(--invalid-icon-svg), var(--show-password-svg) !important;
}

.input-password[type="text"].is-invalid,
.input-password[type="password"].is-invalid {
    background-position: right calc(var(--password-svg-size-x) + var(--password-svg-gutter) + var(--password-svg-padding-right)) center,
                         right var(--password-svg-padding-right) center;
    padding-right: calc(var(--password-svg-padding) + var(--password-svg-size-x) + var(--password-svg-gutter) + 1em) !important;
}



/* Force shared styles to mimic site styles */
.newsletterbox ul li #newsletters > *
{
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) / 2);
    padding-left: calc(var(--bs-gutter-x) / 2);
    /* margin-top: 0; */
    margin-top: 1rem;
}


/* Misc unrelated media queries at the bottom, so they have higher precedence */

/* Styles for everything but mobile */
@media (min-width: 576px) {
    body {
        margin: 0 5%;
    }

    #content,
    .headerActions {
        width: 80%;
        margin: auto;
        flex-grow: 1;
    }

    .mobile-hide {
        display: revert;
    }

    .headerActions ul {
        flex-flow: row wrap;
    }

    /* indent 'sections' on larger screens */
    ul,
    .section-indent {
        padding: 0 var(--bs-gutter-x);
    }

}