/* ==========================================================================
   AVATAR: ECLIPSE — MyAAC glue
   --------------------------------------------------------------------------
   css/eclipse.css is the design, ported verbatim from the prototype. This file
   only dresses what the prototype never had to draw, because a real site is
   not a single HTML file:

     01 the few structural additions (footer links, back to top)
     02 MyAAC page furniture: forms, tables, messages, pagination
     03 the account box, popups and tooltips
     04 admin bar and long-content typography
     05 .ae-panel — MyAAC's headline block (tables.headline.html.twig)
     06 the account area (account/manage and every account/... screen)
     07 DataTables (the pages that sort their tables)
     08 the Tibia-style boxes MyAAC still ships inside forms

   Everything here borrows the design's tokens (--gold, --panel, --border-gold,
   --text-muted, --text-dim) so it reads as part of the same theme.
   ========================================================================== */

/* ------------------------------------ 01 structural additions */

/* the prototype's footer is a single line; the real site still has to reach
   the pages MyAAC lists (who is online, houses, rules, lost account...) */
.footer-nav {
    max-width: 1180px;
    margin: 6px auto 0;
    padding: 14px 20px 0;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: .6rem;
    letter-spacing: 1.4px;
    line-height: 2;
    color: var(--text-dim);
    border-top: 1px solid rgba(101, 188, 232, .1);
}

.footer-nav a {
    color: var(--text-dim);
    text-decoration: none;
}

.footer-nav a:hover {
    color: var(--gold-bright);
}

.footer-nav .sep {
    margin: 0 9px;
    color: rgba(101, 188, 232, .35);
}

.site-credit {
    max-width: 1180px;
    margin: 0 auto;
}

.site-credit p {
    margin: 0;
}

/* a page reached by scrolling should be able to come back up */
.back-to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 60;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-gold);
    background: rgba(7, 17, 24, .82);
    color: var(--gold);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.back-to-top:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    margin: -6px 0 0 -5px;
    border-left: 1px solid currentColor;
    border-top: 1px solid currentColor;
    transform: rotate(45deg);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.back-to-top:hover {
    color: var(--gold-bright);
    border-color: rgba(101, 188, 232, .5);
}

/* the design's ticker is one line with an ellipsis: with several tickers in
   the feed we scroll the line instead of hiding them */
.ae-ticker-track {
    overflow-x: auto;
    text-overflow: clip;
    scrollbar-width: none;
}

.ae-ticker-track::-webkit-scrollbar {
    height: 0;
}

.ae-ticker-item {
    margin-right: 28px;
}

.ae-ticker-item:last-child {
    margin-right: 0;
}

/* the rail cards are real links now: keep the design's type, drop the underline */
.quick-action,
.streamer-slide {
    text-decoration: none;
    color: inherit;
}

.streamer-slide:focus-visible,
.quick-action:focus-visible,
.navbar a:focus-visible {
    outline: 1px solid rgba(189, 238, 255, .5);
    outline-offset: 2px;
}

.top-player .name a {
    color: inherit;
    text-decoration: none;
}

.top-player .name a:hover {
    color: var(--gold-bright);
}

.status-grid strong a {
    color: inherit;
    text-decoration: none;
}

/* ------------------------------------ 02 page furniture */

/* everything MyAAC renders inside a page (forms, tables, lists, guides) */
.page > p,
.page > ul,
.page > ol,
.page > blockquote,
.page > table,
.page > div,
.page > form {
    margin-bottom: 16px;
}

.page h2,
.page h3,
.page h4 {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    color: var(--gold-bright);
    letter-spacing: 1px;
    margin: 26px 0 12px;
}

.page a {
    color: var(--gold);
}

.page a:hover {
    color: var(--gold-bright);
}

.page p {
    color: var(--text-muted);
    line-height: 1.75;
}

.page img {
    max-width: 100%;
    height: auto;
}

/* news body: the design's cards keep their own rhythm */
.news-body {
    color: var(--text-muted);
    font-size: .92rem;
    line-height: 1.7;
}

.news-body p {
    margin: 0 0 12px;
    font-size: .9rem;
    color: var(--text-muted);
}

.news-body img {
    max-width: 100%;
    height: auto;
}

.news-links {
    display: inline-flex;
    gap: 16px;
    align-items: center;
}

.news-links a {
    color: var(--gold);
    text-decoration: none;
    font-style: normal;
    letter-spacing: 1px;
}

.news-links a:hover {
    color: var(--gold-bright);
}

/* tables MyAAC prints by default (exp table, bans, houses, records...) */
.myaac-table,
.page table.nice_table,
.page table.table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border-gold);
    background: rgba(15, 12, 9, .35);
}

.myaac-table > thead > tr > td,
.myaac-table > thead > tr > th,
.page table.nice_table > thead > tr > td,
.page table.table > thead > tr > td {
    padding: 11px 14px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: .68rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-gold);
    background: rgba(101, 188, 232, .05) !important;
}

.myaac-table > tbody > tr > td,
.myaac-table > tbody > tr > th,
.myaac-table > tfoot > tr > td,
.page table.nice_table > tbody > tr > td,
.page table.table > tbody > tr > td {
    padding: 10px 14px;
    color: var(--text-muted);
    font-size: .86rem;
    border-bottom: 1px solid rgba(101, 188, 232, .08);
    background: transparent !important;
}

.myaac-table > tbody > tr:hover > td,
.page table.nice_table > tbody > tr:hover > td {
    background: rgba(101, 188, 232, .04) !important;
    color: var(--gold-bright);
}

/* forms: login, register, account management, shop, search.
   `input:not([type])` matters: MyAAC prints plenty of fields as a bare
   <input name=...> (the character search, Change Info, Change Password...),
   and an attribute selector like [type="text"] never matches those. */
.page input:not([type]),
.page input[type="text"],
.page input[type="password"],
.page input[type="email"],
.page input[type="number"],
.page input[type="search"],
.page input[type="file"],
.page select,
.page textarea,
.loginbox input:not([type]),
.loginbox input[type="text"],
.loginbox input[type="password"],
.loginbox select,
.loginbox textarea {
    width: 100%;
    max-width: 380px;
    padding: 11px 13px;
    color: var(--text-muted);
    font-family: 'EB Garamond', serif;
    font-size: .92rem;
    background: rgba(0, 0, 0, .35);
    border: 1px solid var(--border-gold);
    border-radius: 0;
}

.page input[type="checkbox"],
.page input[type="radio"] {
    width: auto;
    margin-right: 8px;
    /* the browsers paint these white by default: tint them with the design */
    accent-color: #65bce8;
    cursor: pointer;
}

.ae-panel-body input[type="checkbox"],
.ae-panel-body input[type="radio"],
#account-manage input[type="checkbox"],
#account-manage input[type="radio"] {
    accent-color: #65bce8;
}

.page input:focus,
.page select:focus,
.page textarea:focus,
.loginbox input:focus {
    outline: none;
    border-color: var(--gold);
}

.page select option {
    background: #0b151d;
    color: var(--text-muted);
}

.page label {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--gold-dim);
    font-family: 'Cinzel', serif;
    font-size: .66rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.page input[type="submit"],
.page input[type="button"],
.page button,
.page .button,
.page .nice_button.btn_gold,
.loginbox input[type="submit"] {
    display: inline-block;
    width: auto;
    padding: 12px 26px;
    color: #071521;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid #477d9b;
    background: linear-gradient(180deg, #9fe2f5, #4e9abb);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform .2s ease, box-shadow .2s ease;
}

.page input[type="submit"]:hover,
.page button:hover,
.page .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(101, 188, 232, .4);
}

/* messages: MyAAC prints these on success/error paths */
.warning,
.success,
.error,
.note,
.info {
    display: block;
    margin: 0 0 16px;
    padding: 12px 16px;
    font-size: .88rem;
    border: 1px solid var(--border-gold);
    border-left-width: 3px;
    background: rgba(101, 188, 232, .07);
    color: var(--text-muted);
}

.success {
    border-left-color: #6dd6c4;
    background: rgba(109, 214, 196, .1);
}

.error,
.warning {
    border-left-color: #e0763a;
    background: rgba(224, 118, 58, .1);
    color: #f0d3c4;
}

.note,
.info {
    border-left-color: var(--gold);
}

/* pagination and “guide” blocks */
.pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 22px 0;
}

.pagination a,
.pagination span {
    padding: 7px 12px;
    border: 1px solid var(--border-gold);
    color: var(--text-muted);
    font-family: 'Cinzel', serif;
    font-size: .68rem;
    text-decoration: none;
}

.guide_subtitle,
.post_meta_infos {
    color: var(--text-dim);
    font-size: .82rem;
}

/* ------------------------------------ 03 account box, popups, tooltips */

/* MyAAC's account pages use .loginbox around the form */
.loginbox {
    max-width: 640px;
    margin: 0 auto;
    padding: 28px;
    border: 1px solid var(--border-gold);
    border-radius: 12px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(101, 188, 232, .055), transparent 58%),
        linear-gradient(145deg, rgba(14, 29, 39, .94), rgba(6, 15, 21, .97));
}

.loginbox table {
    width: 100%;
    border: 0;
}

.loginbox td {
    padding: 6px 0;
    border: 0;
}

.loginbox .LabelV100,
.loginbox .LabelV150 {
    color: var(--gold-dim);
    font-family: 'Cinzel', serif;
    font-size: .66rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    white-space: nowrap;
    padding-right: 14px;
}

#tooltip {
    position: fixed;
    z-index: 200;
    max-width: 320px;
    padding: 10px 13px;
    color: var(--text-muted);
    font-size: .8rem;
    border: 1px solid var(--border-gold);
    background: #0b151d;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}

#tooltip table {
    border: 0;
}

#popup_bg {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: none;
    background: rgba(3, 8, 12, .78);
}

.popup {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 160;
    display: none;
    width: min(92vw, 460px);
    padding: 26px 28px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--border-gold);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(14, 29, 39, .98), rgba(6, 15, 21, .99));
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .95);
}

.popup_question,
.popup_message {
    margin: 0 0 20px;
    color: var(--gold-bright);
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.5;
}

.popup_links {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.nice_button {
    display: inline-block;
    padding: 10px 20px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: .68rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--border-gold);
    background: transparent;
}

.nice_button:hover {
    color: var(--gold-bright);
    background: rgba(101, 188, 232, .1);
}

.nice_button.green_btn {
    color: #071521;
    border-color: #477d9b;
    background: linear-gradient(180deg, #9fe2f5, #4e9abb);
}

/* ------------------------------------ 04 admin bar + long content */

#admin_bar,
.admin-bar {
    font-family: 'Cinzel', serif;
    font-size: .68rem;
    letter-spacing: 1.2px;
    background: #0b151d;
    border-bottom: 1px solid var(--border-gold);
}

#admin_bar a {
    color: var(--gold);
}

/* the design is drawn for a 1180px column: keep long comments/guides readable */
.page .guide_subtitle,
.page .news-body,
.page .comment {
    overflow-wrap: anywhere;
}

/* ------------------------------------ 05 .ae-panel */

/* every MyAAC block of content (account pages, online, world information,
   guilds, downloads, changelog...) is rendered as the design's panel by the
   theme's tables.headline.html.twig; this is what lives inside it */
.ae-panel > .panel-title {
    text-transform: uppercase;
}

.ae-panel-body > p,
.ae-panel-body > ul,
.ae-panel-body > ol {
    color: var(--text-muted);
    line-height: 1.75;
    font-size: .92rem;
}

.ae-panel-body > p {
    margin: 0 0 14px;
}

.ae-panel-body a {
    color: var(--gold);
}

.ae-panel-body a:hover {
    color: var(--gold-bright);
}

/* a two-column definition table (Change Info, Change Password, Delete
   Character, World Information...) */
.ae-panel-body table {
    width: 100%;
    border-collapse: collapse;
    background: none;
}

.ae-panel-body table td,
.ae-panel-body table th {
    padding: 9px 0;
    color: var(--text-muted);
    font-size: .9rem;
    background: none !important;
    border: 0;
    border-bottom: 1px solid rgba(101, 188, 232, .07);
    vertical-align: middle;
}

.ae-panel-body table tr:last-child > td {
    border-bottom: 0;
}

.ae-panel-body table td.LabelV,
.ae-panel-body table td.LabelV100,
.ae-panel-body table td.LabelV150,
.ae-panel-body table tr > td:first-child {
    width: 1%;
    padding-right: 18px;
    color: var(--gold-dim);
    font-family: 'Cinzel', serif;
    font-size: .66rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.ae-panel-body .LabelH,
.ae-panel-body .white,
.ae-panel-body th {
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: .68rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

/* the buttons of a panel sit in their own little layout table */
.ae-panel-body > table {
    margin-top: 4px;
}

.ae-panel-body table td > table {
    border: 0;
}

.ae-panel-body table td > table td {
    padding: 4px 8px;
    border: 0;
}

/* ------------------------------------ 06 the account area */

/* MyAAC floats a 150px menu next to the account content; the design wants a
   rail card on the left and the content beside it */
#account-manage {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    width: 100%;
    padding: 0;
}

#account-manage #one {
    float: none;
    width: auto;
}

#account-manage #two {
    min-width: 0;
    margin-left: 0;
    padding-left: 0;
}

#account-manage #two > h1 {
    margin: 0 0 6px;
    color: var(--gold-bright);
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 700;
    letter-spacing: 1px;
}

#account-manage #two > h1 + p {
    margin: 0 0 26px;
    color: var(--text-dim);
    font-size: .95rem;
    font-style: italic;
    line-height: 1.7;
}

#account-manage h2 {
    position: relative;
    margin: 34px 0 14px;
    padding-bottom: 12px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(101, 188, 232, .15);
}

.vertical-menu {
    padding: 8px;
    border: 1px solid var(--border-gold);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(101, 188, 232, .055), transparent 58%),
        linear-gradient(135deg, rgba(16, 32, 43, .94), rgba(7, 16, 25, .97));
    box-shadow:
        inset 0 1px 0 rgba(101, 188, 232, .055),
        0 10px 28px rgba(0, 0, 0, .18);
}

/* the template ships an inline style painting these links with
   config.lightborder and black text; the id wins over it */
#account-manage .vertical-menu a {
    display: block;
    padding: 11px 14px;
    color: var(--text-muted);
    font-family: 'Cinzel', serif;
    font-size: .68rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    border-bottom: 1px dotted rgba(101, 188, 232, .09);
    transition: color .2s ease, background .2s ease, padding-left .2s ease;
}

#account-manage .vertical-menu a:last-child {
    border-bottom: 0;
}

#account-manage .vertical-menu a:hover {
    padding-left: 18px;
    color: var(--gold-bright);
    background: rgba(101, 188, 232, .1);
}

#account-manage .vertical-menu a.active {
    color: var(--gold-bright);
    background: rgba(101, 188, 232, .14);
}

/* the account tables carry the configuration colours inline: the design's
   rows are transparent with a hairline separator and gold labels */
#account-manage table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
}

#account-manage table > tbody > tr {
    background: transparent !important;
}

#account-manage table td,
#account-manage table th {
    padding: 11px 14px;
    color: var(--text-muted);
    font-size: .88rem;
    background: transparent !important;
    border: 0;
    border-bottom: 1px solid rgba(101, 188, 232, .07);
    vertical-align: middle;
}

#account-manage table th {
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-gold);
    background: rgba(101, 188, 232, .05) !important;
}

#account-manage table tr:hover > td {
    color: var(--gold-bright);
    background: rgba(101, 188, 232, .04) !important;
}

#account-manage table > tbody > tr > td:first-child {
    width: 1%;
    padding-right: 20px;
    color: var(--gold-dim);
    font-family: 'Cinzel', serif;
    font-size: .66rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* the forms that live on the account screens */
#account-manage form {
    margin: 0;
}

#account-manage form input[type="text"],
#account-manage form input[type="password"],
#account-manage form input[type="email"],
#account-manage form select {
    max-width: 380px;
}

#account-manage > #two > form > table,
#account-manage > #two > form > table td {
    border: 0;
    padding: 0;
}

/* ------------------------------------ 07 DataTables */

/* MyAAC loads DataTables' own stylesheet from tools/css for the pages that sort
   their tables (spells, houses...). It paints white rows and dark grey text,
   which is unreadable on the design and looks like a different site.

   That stylesheet is pulled in *after* this one, so every rule here is scoped
   with `.page` to outrank it (and repeats its `!important` where it has one). */
.page .dataTables_wrapper {
    color: var(--text-muted);
    font-size: .88rem;
}

.page .dataTables_wrapper .dataTables_length,
.page .dataTables_wrapper .dataTables_filter,
.page .dataTables_wrapper .dataTables_info,
.page .dataTables_wrapper .dataTables_processing {
    color: var(--text-dim) !important;
    font-family: 'Cinzel', serif;
    font-size: .66rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.page .dataTables_wrapper .dataTables_filter input,
.page .dataTables_wrapper .dataTables_length select {
    width: auto;
    max-width: none;
}

table.dataTable {
    width: 100%;
    margin: 6px 0 16px;
    border-collapse: collapse;
    border: 1px solid var(--border-gold);
    background: transparent;
}

table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    padding: 11px 14px !important;
    color: var(--gold) !important;
    font-family: 'Cinzel', serif;
    font-size: .68rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    background: rgba(101, 188, 232, .05) !important;
    border-bottom: 1px solid var(--border-gold) !important;
}

table.dataTable > tbody > tr,
table.dataTable > tbody > tr.odd,
table.dataTable > tbody > tr.even {
    background: transparent !important;
}

table.dataTable > tbody > tr > td {
    padding: 10px 14px;
    color: var(--text-muted) !important;
    font-size: .86rem;
    background: transparent !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(101, 188, 232, .07) !important;
}

table.dataTable > tbody > tr:hover > td {
    color: var(--gold-bright) !important;
    background: rgba(101, 188, 232, .04) !important;
}

/* the sort arrows are light gifs from tools/images: draw them in the design's
   ink instead so they stay visible on a dark row */
table.dataTable > thead > tr > th.sorting,
table.dataTable > thead > tr > th.sorting_asc,
table.dataTable > thead > tr > th.sorting_desc {
    position: relative;
    padding-right: 26px !important;
    background-image: none !important;
    cursor: pointer;
}

table.dataTable > thead > tr > th.sorting:after,
table.dataTable > thead > tr > th.sorting_asc:after,
table.dataTable > thead > tr > th.sorting_desc:after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid rgba(101, 188, 232, .35);
}

table.dataTable > thead > tr > th.sorting_asc:after {
    margin-top: -3px;
    border-bottom: 0;
    border-top: 5px solid var(--gold);
}

table.dataTable > thead > tr > th.sorting_desc:after {
    border-bottom: 5px solid var(--gold);
}

.page .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 11px;
    color: var(--text-dim) !important;
    font-family: 'Cinzel', serif;
    font-size: .68rem;
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none !important;
}

.page .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.page .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #071521 !important;
    border: 1px solid #477d9b !important;
    background: linear-gradient(180deg, #9fe2f5, #4e9abb) !important;
}

.page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.page .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: #3f5561 !important;
    background: transparent !important;
    border-color: transparent !important;
}

.page .dataTables_wrapper .dataTables_processing {
    background: rgba(7, 17, 24, .9) !important;
}

/* ------------------------------------ 08 Tibia-style boxes inside forms */

/* account/create and the guild forms are still built with the old box frames:
   the theme carries none of the gifs they point at, so the frames are folded
   into the design's panel instead of showing up as empty furniture */
.TableContainer,
.Table1,
.Table2,
.Table3,
.Table5,
.InnerTableContainer,
.TableContentContainer,
.TableContent {
    width: 100%;
    border: 0 !important;
    background: none !important;
}

.TableContentAndRightShadow,
.TableShadowContainerRightTop,
.TableShadowRightTop,
.TableShadowLeftTop,
.TableShadowLeftBottom {
    border: 0 !important;
    background: none !important;
}

.CaptionContainer,
.CaptionInnerContainer {
    border: 0;
}

.CaptionEdgeLeftTop,
.CaptionEdgeRightTop,
.CaptionEdgeLeftBottom,
.CaptionEdgeRightBottom,
.CaptionBorderTop,
.CaptionBorderBottom,
.CaptionVerticalLeft,
.CaptionVerticalRight {
    /* these are empty spans whose only content was a background gif */
    display: none;
}

.CaptionInnerContainer .Text {
    display: block;
    padding: 10px 0 14px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: .85rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* form-level feedback MyAAC prints on its own */
.FormFieldError,
.form-error {
    color: #e0763a;
    font-size: .8rem;
    font-style: italic;
}

.page .red,
#account-manage .red {
    color: #e0763a !important;
}

.page .green,
#account-manage .green {
    color: #6dd6c4 !important;
}

#SuggestAccountNumber {
    margin-top: 6px;
    color: var(--text-dim);
    font-size: .72rem;
    font-style: italic;
}

/* the account pages are laid out in one column on a phone: menu first */
@media (max-width: 860px) {
    #account-manage {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    #account-manage .vertical-menu {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 8px;
    }
}

@media (max-width: 700px) {
    .footer-nav {
        padding: 12px 14px 0;
        font-size: .56rem;
        letter-spacing: 1px;
    }

    .footer-nav .sep {
        margin: 0 6px;
    }

    .loginbox {
        padding: 20px 16px;
    }

    .page input[type="text"],
    .page input[type="password"],
    .page select,
    .loginbox input[type="text"] {
        max-width: 100%;
    }
}