/* ============================================================
 * REBRAND GUARD — DO NOT MIGRATE THESE STYLES
 * ------------------------------------------------------------
 * The selectors in this file are scoped to the registration
 * rebrand (EV-14660). They are loaded ONLY by the 15 JSP
 * header chains in EV-15767 / cache-buster manifest.
 *
 * The 9 URLs in EV-15170 (registrant-facing) deliberately do
 * NOT load this file. Their styling comes from FormNormalize,
 * SiteStyleClear, NewStyle, and StepRegistration.
 *
 * DO NOT move rebrand selectors into those shared CSS files.
 * Doing so breaks the EV-15170 exclusion contract.
 *
 * For future URL exclusion: see EV-15765 analysis §5.1.
 * ============================================================ */

@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');

:root {
    --primary: #262a37;
    --primary-foreground: #fff;

    --secondary: #f3f2ec;
    --secondary-foreground: #262a37;

    --warning: #b45309;
    --warning-background: #CA8A04;
    --warning-foreground: #f7f3e0;

    --danger: #b91c1c;
    --danger-foreground: #F8E8E8;

    --success: #2a761e;
    --success-foreground: #EAF1E8;

    --info: #1e40af;
    --info-foreground: #E8ECF7;

    --muted-foreground: #6e7079;

    --accent: #F3F2EC;

    --white: #fff;
    --black: #000;

    --input: #e9eaeb;

    --rounded-sm: 2px;
    --rounded: 4px;
    --rounded-md: 6px;
    --rounded-lg: 8px;
    --rounded-xl: 12px;
    --rounded-full: 999px;

    --cadmium: #93331f;
    --lms: #7b4899;
    --eventscribe: #587d36;
    --warpwire: #486499;

    --card: var(--white);
    --border: color-mix(in srgb, black 25%, var(--secondary));

    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 28px;

    --p-1: 4px;
    --p-2: 8px;
    --p-4: 12px;
    --p-6: 16px;

    --sidebar-border: #E1E0DD;

    --shadow-color: 0deg 10% 70%;

    --shadow-sm: 1px 2px 2px hsl(var(--shadow-color) / 0.133), 0 2px 0 -1px var(--muted-foreground);
    --shadow-lg: 1px 2px 2px hsl(var(--shadow-color) / 0.133),
    2px 4px 4px hsl(var(--shadow-color) / 0.133),
    3px 6px 6px hsl(var(--shadow-color) / 0.133),
    0 2px 0 -1px var(--muted-foreground);

    --sidebar: var(--primary);
}

body {
    font-family: "Roboto", "Lato", Helvetica, sans-serif;
    margin: 0;
/*     background-color: rgb(24, 37, 49); */
    font-size: 14px;
    font-weight: 400;
    height: 100%;
    line-height: 1.5;
  
    background: color-mix(in srgb, white 40%, var(--secondary)) !important;
    color: var(--muted-foreground);
}

* {
    font-family: "Roboto", "Lato", Helvetica, sans-serif;
    font-size: 14px;    
}

*, ::after, ::before {
    box-sizing: border-box;
}

/* Form Fields */
input[type="text"], input[type="file"], input[type="number"], select, textarea { 
    padding: var(--p-1) var(--p-2);
    font-size: var(--text-sm) !important;
    line-height: 1;
    border: 1px solid color-mix(in srgb, white 60%, var(--muted-foreground));
    border-radius: var(--rounded);
    margin: 4px 0;
    background: var(--white);
}

#GoodUntil { width: 90px; } 

input[type="checkbox"] {  
  appearance: none;
  cursor: pointer;
  margin-right: 6px;
  position: relative;
  top: 2px;
}
input[type="checkbox"]::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 1px;
  outline: 1px solid var(--muted-foreground);
  outline-offset: 2px;
  background: var(--white);
}
input[type="checkbox"]:checked::before {
  content: '';  
  width: 10px;
  height: 10px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADRSURBVHgBrdI7DoJAFIXhcymsXQKNSBgLGgOx0p3oCnQH4gp0KboCWmMDlTFW7MJEg1dnEowExwyPv5ppvtx5EDpoOAqW/MQcRDtCyxwvXAMcqQ1xaqFFJUzGODSesIKBN9fzKWoE6jC5UkcWYuJ3gSlwIILtg/PE8YLE9qf9NpgCLVAxnd+732IdaoIpkHIs3heZfaOuH9pNMJl6FNcNbbY4ZqCAMqtHs0t6zOpgH1CHMmFPjJUpVgI1KOpgFVCPmmE/wSpqjv1NokKMjT980Qs29YEMwjjiKAAAAABJRU5ErkJggg==');
  background-repeat: no-repeat;
  background-size: 100%;  
  background-position: top 1px center;
  
}

input[type="radio"] {    
  appearance: none;
  -webkit-appearance: none;
  border: 0.2rem solid #fff;
  background-color: var(--bg-color);
  border-radius: 50%;    
  cursor: pointer;  
}
input[type="radio"]:focus-visible {
    outline-offset: 2px;
    outline-color: var(--primary);
}

input[type="radio"]::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  outline: 1px solid var(--muted-foreground);
  outline-offset: 2px;
}
input[type="radio"]:checked::before {    
    box-shadow: 0 0 0 -1px var(--primary);
    background-color: var(--primary);
    border-width: 0.1rem;
}

input[type="text"]:focus, select:focus, textarea:focus {
    outline: 1px solid var(--primary);
    outline-offset: 1px;
}
input[type="text"] + a { position: relative; width: 28px; height: 26px; display: inline-block; vertical-align: middle; }
input[type="text"] + a > img { display: none; }
input[type="text"] + a::after { 
  content: '';
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAXCAYAAAALHW+jAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACuSURBVHgB7ZXJDYMwEEU/KHdcgkughHSQlJIS6CBpIRUkHdBCOqCE0AHMoBlkFh8wc+DAk77YrGfLZmxgiaf8KQ/EeVIaSjn/kK80vlIc5YY4pXS8EF4wHRlTyNUF72IU0qaVjKKa0u1MowP4GMg0dSY3ZuQwxlwYrvIXwUpthP+Iuz7ohHqk49Vz/Dk8hafwCEKuZa5frcUf0tDjYtgLKthtsK9MzJX04pDOmz09xxtLlRLg0F0AAAAASUVORK5CYII=') no-repeat center center / 50% var(--secondary);
  border-top-right-radius: var(--rounded);
  border-bottom-right-radius: var(--rounded);
  border: 1px solid color-mix(in srgb, white 60%, var(--muted-foreground));
  border-left: none;
  position: absolute;
  left: -3px;
  top: -2px;
  width: 100%;
  height: 100%;
  z-index: 200;
}

/* End of Form Fields */

/* Table style - Global UI-ish 

Applies to tables similar to 'All Registrations', 'Paid Registrations', 'Unpaid Registrations'

NOTE:
- unable to style Paid Registrations and Unpaid Registrations due to lack of unique id/class identifiers. All Registrations was styled by targeting table rows with unique ID (eg: reg8429014)


RECOMMENDATION:
- We recommend add classes to these tables to allow styling customizations
- We recommend the "Edit" action to have a class of 'btn-ghost' to support styles that match with the Global UI

*/
table tbody tr[id^="reg"] > td { border-bottom: 1px solid var(--border); }
table tbody tr[id^="reg"] > td { padding: var(--p-1) 0;}
table tbody tr[id^="reg"] > td:last-child > a { text-decoration: underline; text-underline-offset: 2px; }

/* End of Table style - Global UI-ish */

/* On-demand Badge Templates */
#templateTable { border-collapse: collapse; }
#templateTable tbody tr { border-bottom: 1px solid var(--border); }
#templateTable tbody tr td:last-child {
  width: 40%;
}
#templateTable tbody tr td:last-child form label { color: var(--primary); padding: 0 4px; }
/* End of On-demand Badge Templates */

/* Unified Login Home link -- Override only */
#unifiedLoginLink {   
  position: relative;
  width: 100px;
  height: 24px;
  display: block;  
  overflow: hidden;
}
#unifiedLoginLink::after {
  content: 'Customer List';
  text-align: right;
  font-size: var(--text-base);
  position: absolute;
  left: 0;
  top: 4px;
  width: 100%;
  height: 100%;
  z-index: 2;
  color: var(--primary);
  background: color-mix(in srgb, white 40%, var(--secondary)) !important;
}
#unifiedLoginLink:hover::before {
  content: '';
  position: absolute;
  z-index: 3;
  bottom: 0px;
  left: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: var(--eventscribe);
}


table {
    border-collapse: collapse;
}

img{
    vertical-align: middle;
    border-style: none;
}

BODY.popup {
    background-color: rgb(235, 235, 235);
}

BODY.popupWhite {
    background-color: black;
}

.blockBGColor {
/*     background-color: rgb(235, 235, 235); */
  background-color: color-mix(in srgb, white 100%, var(--accent));
/*   border: 1px solid var(--border); */
}

.blockBGColorLight{
    background-color: rgb(245, 245, 245);
}

TABLE.blockBGColor {
    border-collapse: initial;
    border: 1px solid var(--border);
}

TABLE.blockBGColor td{
    text-align: left;
}

TABLE.blockBGColor th {
    padding: 7px;
}

TABLE.headerBG {
    background-image: url(../styleimages/privateheader.jpg);
}

TABLE.tabBGColor {
    /* background-color: #0d243a; */ 
    background-color: var(--white);
  
    /* ideally add a class called 'rounded' */
    overflow: hidden;
    border-top-left-radius: var(--rounded);
    border-top-right-radius: var(--rounded);
    border: none;
    box-shadow: none;
}

TABLE.ProfileBGColor {
    background-color: rgb(235, 235, 235);
}

TABLE.ResourcePlannerBGColor {
    background-color: rgb(235, 235, 235);
}

H3 {
    font-size: 14pt;
    color: #0d243a;
    font-weight: bold;
}

legend {
    color: rgb(235, 235, 235);
}

thead tr { 
  border-top: 1px solid var(--border); 
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
/* th elements should be moved inside thead instead of being inside tbody */
table tbody tr th:first-child {   
  border-left: 1px solid var(--border);
}
table tbody tr th:last-child {   
  border-right: 1px solid var(--border);
}
table tbody tr th {
  border-top: 1px solid var(--border); 
}

th, .table-header {
    font-size: 14px;
    color: white;
    /* background-color: #0d243a; */ 
    background-color: var(--secondary);
    color: var(--primary);
    padding: 5px 4px 4px 4px;
}
th font[color="white"] { color: var(--primary); }

.table-header {
    font-weight: 700;
}

th[align=left], td[align=left] {
    text-align: left !important;
}

th[align=center], td[align=center] {
    text-align: center !important;
}

th[align=right], td[align=right] {
    text-align: right !important;
}

TH.small {
    font-size: 12px;
    /* color: white; */
    /* background-color: #0d243a; */ 
    background-color: var(--secondary);
    color: var(--primary);
}

/* Row Headline */
TH.row {
    font-size: 10pt;
    color: White;
    /* background-color: #0d243a; */ 
    background-color: var(--primary);
    text-align: left;
}

/* AccTimeline */
TH.timeline {
    font-size: 10pt;
    color: white;
    /* background-color: #0d243a; */ 
    background-color: var(--primary);
}

td.blockBGColor {
    background-color: rgb(235, 235, 235);
}

TD, td.blockBody, blockquote, li, ul {
    font-size: 10pt;    
  
  /* Table text should default to primary color */
  color: var(--primary);
}

/* In Messages Tab - <u> element is being as a decoration for a header - this should not be used as <u> denotes an underline and underlines are reserved for links */
td > u { 
  text-decoration: none; 
  color: var(--primary);   
  display: inline-block; 
  width: 100%; 
  padding: 6px 0; 
  text-align: left;
  font-size: var(--text-base);
  font-weight: bold;
  margin-top: 15px;
}

td.blockColor {
    /* background-color: #0d243a; */ 
    background-color: var(--primary);
}

/* Mailing List */
td.blockHeading {
    color: White;
    font-weight: bold;
    font-size: 10pt;
    /* background-color: #0d243a; */ 
    background-color: var(--primary);
}

/* Event Finder and Search blocks */
td.blockText {
    color: #0d243a;
    font-weight: bold;
    font-size: 10pt;
}

/* Event Finder and Search blocks */
td.blockTitle {
    color: white;
}

td.bold, td.button {
/*     font-weight: bold; */
    font-weight: 500;
}

td.boldRegPackage {
    font-weight: bold;
    color: #0d243a;
}

td.category {
    font-weight: bold;
    color: white;
    /* background-color: #0d243a; */ 
    background-color: var(--primary);
}

td.commentBlockLine {
    /* background-color: #0d243a; */ 
    background-color: var(--primary);
}

td.CompanyName {
    font-size: 24pt;
    color: white;
    font-weight: bold;
}

/* For current registration or option items */
td.currentItem {
    font-weight: bold;
    color: Black;
    background-color: rgb(235, 235, 235);
}

td.EventPageTitle {
    font-size: 15pt;
    color: Black;
    font-weight: bold;
    text-align: left;
}

td.grayOut {
    background-color: Silver;
}

/* Line color underneath the header of the column */
td.headerLineColor {
    background-color: Black;
}

td.joinTextBlock {
    font-size: 8pt;
}

td.menuColor, td.MenuColor {
/*     background-color: rgb(210, 210, 210); */
    background: var(--white);    
    border: 1px solid var(--border);
    border-top-left-radius: var(--rounded-lg) !important;
    overflow: hidden !important;
}

td.menuItem {
/*     background-color: rgb(210, 210, 210); */
/*     border-bottom: 1px solid rgba(190, 190, 190, 1); */
  
  background: var(--white);    
  border-bottom: 1px solid #bebebe;
}

td.menuItemSelected, td.menuSmall {
    background-color: white;
}

td.MenuLineColor {
    /* background-color: #0d243a; */ 
    background-color: var(--primary);
}

td.menuSeparator {
    /* background-color: #0d243a; */ 
    background-color: var(--primary);
}

/* Second line of top menu */
td.menuSmall {
    background-color: white;
}

td.menuText {
    color: White;
}

td.messageSmall, td.negativeSmall {
    font-size: 8pt;
    color: Red;
}

td.PageTitle {
    font-size: 16pt;
    color: black;
    font-weight: bold;
    text-align: left;
}

td.profile {
    font-size: 10pt;
    color: Black;
    font-weight: bold;
}

td.ProfileBGColor {
    background-color: rgb(235, 235, 235);
}

td.registrationLineColor {
    /* background-color: #0d243a; */ 
    background-color: var(--primary);
}

td.ResourcePlannerBGColor {
    background-color: rgb(235, 235, 235);
}

td.row {
    font-size: 10pt;
    color: White;
    /* background-color: #0d243a; */ 
    background-color: var(--primary);
}

td.small {
/*     font-size: 8pt; */
    font-size: var(--text-xs);    
    color: var(--muted-foreground);
}

td.tabBGColor {
/*     background-color: White; */
    background-color: var(--accent);
}

/* Line between tab and body */
td.tabLineColor {
/*     background-color: Black; */
    background-color: var(--sidebar-border);
}

/* Line between tab and body when the tab is selected*/
td.tabNoLineColor {
/*     background-color: rgb(235, 235, 235); */
    background-color: var(--white);
}

/* Selected tab */
td.tabSelBGColor {
/*     background-color: rgb(235, 235, 235); */
    background-color: var(--white);    
    position: relative;
}
td.tabSelBGColor::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: white;
  left: 0;
  bottom: -1px;
}

td.tabTitle {
    /* background-color: #0d243a; */ 
    background-color: var(--white);

    font-size: 10pt;
/*     color: White; */
    color: var(--primary);
/*     font-weight: bold; */    
}

td.tabTitle2 {
    /* background-color: #0d243a; */ 
    background-color: var(--primary);
    font-size: 9pt;
    color: White;
    font-weight: bold;
}

td.textArea {
    background-color: White;
    font-size: 10pt;
/*     color: Black; */
}

td.vendorCategory {
    font-weight: bold;
    color: #0d243a;
}

/* Background color for EventFinder and Search blocks */
TR.blockBGColor {
    background-color: rgb(235, 235, 235);
}

TR.MenuLineColor {
    /* background-color: #0d243a; */ 
    background-color: var(--primary);
}

TR.promotionCodeHighLight {
    background-color: Silver;
}

TR.tabLineColor {
/*     background-color: Black; */
  background-color: var(--sidebar-border);
}

/* Line separating title and top menu */
TR.titleMenuSeparatorColor {
    background-color: Black;
}

P EM {
    color: Red;
    font-weight: bold;
}

EM.red {
    font-size: 10pt;
    color: Red;
}

P.headline {
    font-weight: bold;
}

P.small {
    font-size: 8pt;
}

a.date:link {
    color: #09509c;
}

a.date:hover {
    color: red;
}

a.date:active {
    color: red;
}

a.forget {
    font-size: smaller;
}

span.menu{
    padding: 10px;
    font-size: 10pt;
    display: block;
    text-indent: 15px;
    letter-spacing: .6px;
    opacity: .6;
}
a.menu, a.menu:link, a.menu:visited {
    position: relative;
/*     padding: 10px;
    font-size: 10pt; */
    text-decoration: none;
    font-weight: 400;
    color: black;
    display: block;
    text-indent: 15px;
    cursor: pointer;
    letter-spacing: .6px;
  
    padding: 12px;
    font-size: var(--text-sm);
    transition: none !important;
    border-left: 6px solid transparent;
}

a.menu:hover, a.menu:Active {
/*     background-color: rgb(200, 200, 200); 
    -webkit-transition: background-color 500ms linear, border 100ms linear;
    -ms-transition: background-color 500ms linear, border 100ms linear; */
/*     transition: background-color 500ms linear, border 100ms linear; */
  
    background: var(--secondary);
    font-weight: bold;
    border-left: 6px solid var(--primary);
}

.menu.active {
/*     background-color: rgb(200, 200, 200); 
    border-left: 6px solid #09509c;
    -webkit-transition: background-color 500ms linear, border 100ms linear;
    -ms-transition: background-color 500ms linear, border 100ms linear;
    transition: background-color 500ms linear, border 100ms linear; */
  
    background: var(--secondary);
    border-color: var(--eventscribe) !important;
    font-weight: bold !important;
  
}

a.menuSelected {
    color: #0d243a;
    text-decoration: none;
    font-weight: bold;
}

a.menuTop, a.menuTop:visited {
    font-size: 10pt;
    text-decoration: none;
    font-weight: bold;
    color: Black;
}

a.menuTop:hover, a.menuTop:Active {
    color: red;
}

a.menuTopSmall, a.menuTopSmall:visited {
    font-size: 10pt;
    text-decoration: none;
    font-weight: bold;
    color: #0d243a;
}

a.menuTopSmall:hover, a.menuTopSmall:Active {
    color: red;
}

a.small {
    font-size: 8pt;
    text-decoration: none;
    font-weight: bold;
    color: Blue;
}

a.sort {
    text-decoration: none;
    font-weight: bold;
    color: Silver;
}

a.tabSelText {
    font-size: 10pt;
    text-decoration: none;
    color: #0d243a;
    font-weight: bold;
}

a.tabText {
    font-size: 10pt;
    text-decoration: none;
    color: #0d243a;
/*     font-weight: bold; */
    font-weight: 400;
}

a, a.text, .breadcrumb-link {
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
/*     color: #09509c; */
    color: var(--primary);  
}

a:hover {
/*     color: #1f61a9; */
    text-decoration: underline;
    
    color: var(--black);
}

a:active {
/*     color: #09509c; */
    text-decoration: underline;
  
    color: var(--black);
}

a.text > img { width: 60px; height: 28px; border-radius: var(--rounded); margin: 3px 0; }

.bodytext {
    font-size: 12px;
    font-style: normal;
    line-height: 15px;
    color: #3C4B5C;
}

.footertext {
    font-size: 10px;
    font-style: normal;
    line-height: 14px;
    color: #02A1E2;
}

.textbox {
    font-size: 12px;
    font-style: normal;
    line-height: 12px;
    color: #02A1E2;
    border: thin solid #7F9DB9;
}

.subhead {
    font-size: 16px;
    font-style: normal;
    line-height: 17px;
    font-weight: bold;
    color: #3C4B5C;
}

TABLE.headerBGBlank {
    background-image: url(../styleimages/privateheaderblank.jpg);
}

TABLE.headerBGYesEvents {
    background-image: url(../styleimages/YesEventsHdr.jpg);
}

TABLE.headerBGExecBid {
    background-image: url(../styleimages/ExecBidHdr.jpg);
}

TABLE.headerBGMMS {
    background-image: url(../styleimages/MMSHdr.gif);
}

.striped tr { border: 1px solid var(--border); border-left: none; }
/* remove zebra stripes on tables */
/* .striped tr:nth-child(2n-1) {
    background-color: color-mix(in srgb, white 50%, var(--accent));
} */



#tabs {
    margin-top: 15px;
}

.er-menu {
    /* background-color: #0d243a; */ 
    background-color: var(--primary);
    font-weight: bold;
    font-size: 10pt;
    color: white;
    width: 100%;
    height: 25px;
}

.er-menu-title {
    float: left;
    margin-top: 5px;
    margin-left: 12px;
}

#header-link {
    margin-left: 50px;
}

.er-menu-tab {
    margin-top: 8px;
    background-color: white;
    display: inline-block;
    color: navy;
    font-weight: bold;
    border: 1px solid black;
    padding: 0px 15px 0px 15px;
    margin-left: 0;
/*     float: left; -- clash with display: inline-block */
    border-right: none;
}

.er-menu-tab a {
    color: navy;
    text-decoration: none;
}

.active-tab {
    border-bottom: 1px solid rgb(235, 235, 235);
    background-color: rgb(235, 235, 235);
    color: #0d243a;
}

.er-menu-tab:hover {
    cursor: pointer;
    transition: background-color 300ms linear;
    background-color: rgb(235, 235, 235);
}

.right {
    float: right;
}

.circle-large {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

.circle-medium {
    height: 75px;
    width: 75px;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

.circle-small {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

table.alternatingBG tr:nth-child(odd) {
    background-color: rgb(235, 235, 235);
}

table.alternatingBG tr:nth-child(even) {
    background-color: rgb(235, 235, 235);
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.er-udf-paragraph {
    width: 100%;
    height: 100px;
}

.textarea-entered-info {
    padding-left: 2px;
    font-size: .8em;
    width: 100%;
}

#controlCenterMenu td > u { margin: 0 6px; border: none; }
#controlCenterMenu ul {
    list-style-type: none;
    padding-left: 50px;
    padding-right: 50px;
    margin-top: 0;
    line-height: 1.2;
}

#controlCenterMenu ul li { padding-top: 4px; }
#controlCenterMenu ul li a {
    padding: 2px 0;
    display: inline-block;
    font-size: var(--text-sm);
/*     text-decoration: underline !important; */
    text-underline-offset: 3px;
    text-decoration-color: var(--muted-foreground) !important;
}

#controlCenterMenu table.blockBGColor {
    border: 1px solid var(--border);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

/* Side borders intentionally NOT defined on inner TDs - the card's own
   `border: 1px solid` above provides the full outline. Defining border-left
   /right on each TD as well caused them to stack at the card's right edge
   and read as a thick vertical line next to the adjacent card. */

/* Horizontal breathing room between adjacent cards in the same row.
   The JSP markup uses cellspacing="0" cellpadding="0" on the outer
   table, so without this padding adjacent cards' borders touch and
   read as a single thick vertical line in the gap. Scope to direct
   children only so inner card cells are unaffected. */
#controlCenterMenu > tbody > tr > td {
    padding: 0 8px;
}
#controlCenterMenu > tbody > tr > td:first-child { padding-left: 0; }
#controlCenterMenu > tbody > tr > td:last-child { padding-right: 0; }

#controlCenterMenu .blockBGColor u {
    font-size: 15px;
    padding-left: 5px;
    text-decoration: none;
}

#controlCenterMenu ul li ul {
    list-style-type: circle;
}

#controlCenterMenu table.blockBGColor {
    background: var(--white);
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
    border-radius: var(--rounded-lg);
}

#controlCenterMenu table.blockBGColor th {

    background: var(--secondary);
    color: var(--secondary-foreground);

    padding-left: 16px;
    font-size: var(--text-base);
    border: 0;
    border-bottom: 1px solid var(--border);
    border-top-left-radius: var(--rounded-lg);
    border-top-right-radius: var(--rounded-lg);
}

#controlCenterMenu table.blockBGColor td.headerLineColor { 
    background-color: #fff;
}

/* #controlCenterMenu table.blockBGColor > tbody > tr > td {
    border-bottom-left-radius: var(--rounded-lg) !important;
    border-bottom-right-radius: var(--rounded-lg) !important;
    border-bottom: 1px solid #bebebe;
    overflow: hidden;
  
    background: var(--white);
}
 */
#controlCenterMenu table.blockBGColor + table.blockBGColor { margin-top: 16px; }

.regometer {    
    margin-bottom: 20px;
    margin-top: 20px;
}

.regometer th {
    border: 0;
}

.regometer-inner {
    border: 1px solid #bebebe;
    border-radius: var(--rounded-full);
    overflow: hidden;
    background-color: rgb(247, 247, 247);
}

.regometer th:first-child {
    /* background-color: #3e94b7;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-size: 50px 50px;
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite; */
  
    background: var(--eventscribe) !important;
    color: var(--primary-foreground); /* EV-16322: white text inside filled (green) portion */
}

/* EV-16322: dark primary text inside the unfilled portion of the progress bar for readability */
.regometer-inner td,
.regometer th.over,
.regometer th.over font {
    color: var(--primary) !important;
}

#siteLeftMenu {
    border-right: 1px solid #bebebe;
    min-width: 270px;
    max-width: 270px;
/*   
    border-top-left-radius: var(--rounded-lg);
    border-bottom-left-radius: var(--rounded-lg);
    overflow: hidden;  */
    
}

#siteLeftMenu + .textArea {      
/*     border-top-right-radius: var(--rounded-lg);
    border-bottom-right-radius: var(--rounded-lg);
    overflow: hidden; */
}

#siteLeftMenu div {
    text-align: left;
    position: relative;
    height: 100%;
    width: 100%;
}

#content {
    width: 100%;
    position: relative;
    /* background-color: #0d243a; */     
    min-height: 100%;
  
    background: color-mix(in srgb, white 40%, var(--secondary)) !important;
    color: var(--muted-foreground);
}

#content > table {
    width: 100%;
    margin: auto;
    max-width: 1366px;
    position: relative;

    border-collapse: separate !important;
    border-spacing: 0 !important;
}


#content > table > tbody > tr.MenuColor:nth-child(2) > td {
    border-radius: var(--rounded-lg) !important;
    border: 1px solid #bebebe;
    overflow: hidden;
}

#controlCenterMenu li {
    padding-top: 6px;
}

#controlCenterMenu td {
    margin: 0;
    padding-left: 0;
}

#firstMenuItem {
    font-weight: bold;
    margin-top: 20px;
}

#firstMenuItemLink {
    text-decoration: underline;
    font-weight: normal;
}

#firstMenuItemLink:visited {
    color: #09509c;
}

.breadcrumb-link, .breadcrumb-link:visited, .breadcrumb-link:active {
    text-decoration: none;
}

.breadcrumb-link:hover {
    text-decoration: underline;
}

#headerLogo {
    height: 49px; /* This is the optimal height for this image. */
}

#topMenu {
    /* background-color: #0d243a; */ 
    background-color: var(--primary);    
    position: relative;
    display: block;    
}

a.topmenu {
/*     color: white !important; */
    color: var(--primary) !important;
    width: 100%;
    height: 100%;
    position: relative;
/*     font-size: 15px; */
    font-weight: normal;
    text-decoration: none !important;
    display: inline-block;
/*     line-height: 80px; */

    font-size: var(--text-base);
    line-height: 1;
    padding: 4px 0;
}

a.topmenu:hover {
    color: var(--black) !important;
}

#topMenuLinks > ul > li:hover {
/*     border-bottom: 2px solid #72cff5; */
    -webkit-transition: 50ms linear;
    -ms-transition: border 50ms linear;
    transition: border 50ms linear;
  
    border-bottom: 2px solid var(--eventscribe);
}

#topMenuLogo {
    float: left;
    margin: 10px 0 10px 4px;
    display: none;
}

#topMenuLinks {
    margin: 0 1px 0 1px;
    float: left;
/*     height: 67px; */
    height: auto;
    padding: 12px 0;
}

#topMenuLinks > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /* padding-top: 14px; */
    height: 100%;
}

#topMenuLinks > ul > li {
    border-bottom: 2px solid transparent; /* This matches the border applied on hover. It prevents the height from increasing causing the dropdown to jump around */
    display: inline-block;
    margin-left: 60px;
    height: 100%;
    position: relative;
}

#topMenuLinks > ul > li:first-child {
/*     margin-left: 53px; */
    margin: 0;
}

#topMenuRight {
    float: right;
    position: relative;
/*     height: 57px; */
    height: auto;
    padding: 12px 0;
  
}

#unifiedLoginSection {
    margin-right: 25px;
}

#settingsSection {
    margin-right: 5px;
}

#unifiedLoginSection, #settingsSection {
    float: left;
    height: 100%;
}

#breadcrumbs {
/*     background-color: rgb(235, 235, 235); */
    background-color: var(--accent);
    min-height: 36px;
    border-bottom: 1px solid #bebebe;
    position: relative;
    overflow: auto;
}

#breadcrumbs-left {
    float: left;
    padding: 12px 10px 12px 25px;
}

#breadcrumbs-right {
    float: right;
    padding: 10px 25px 10px 10px;
}

#content-inner {
    margin: 20px 25px 25px 25px;
}

.content-popup {
    margin: 20px;
}


/* Not is to prevent conflicts with bootstrap */
a.button, button.button, input.button, input[type=button], input[type=submit]:not(.btn-primary):not(.btn-danger) {
/*     padding: 6px 8px 6px 8px; */
/*     border-radius: 4px; */
/*     background-color: rgb(245, 245, 245); */
/*     border: 1px solid rgb(170, 170, 170); */
/*      color: black; */
  
    padding: var(--p-1) var(--p-4);
    font-size: var(--text-sm);
    background: var(--secondary);
    border: 1px solid var(--border);
    border-radius: var(--rounded);
    color: var(--secondary-foreground);
    font-weight: normal;
    
}

/* custom Save icon */
button[value="Save"]::before {
  content: 'Save';
  color: var(--white);
  position: absolute;
  left: 28px;
  top: 4px;
}

button[value="Save"] {   
  position: relative;
  top: 2px;
  
  cursor: pointer;
  width: 24px;
  height: 24px;
  margin-right: 50px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAD5SURBVHgBrVQBEYMwDAwwAZVQJ0MCDoaUWZgCmAIkbFOAhNUBEwB0Xw52pdc1cPTvcj1C8unnkpLWWozj2MA6mN5hb+QW5ALOaifRyoCLzZcYp1NDEQ+5IkmSEnafPpxqcgOZUSXdFv1uaveEdgDxD5/8lCIChNeohIC0CQVFwMkmHIahStP0tSHvDHm574dvbA4hdg9Xkv9BQd4Np8DwmlmTwWhmtVqz60vsvPdtKIeYPc3dC/R9X4RyuB4q15FlmQolBAlRsfC4z8QkhXrYQWK5xJoWcO+mmcOO+C35zCe7TUbyk3gI2kAGBfU0Cli5+sirPbehMVxf87YH81FF+68AAAAASUVORK5CYII=') !important;
  opacity: 0.8;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
}

button[value="SaveAndSend"]::before {
  content: 'Save and Send';
  color: white;
  position: absolute;
  left: 28px;
  top: 4px;
  width: 100px;
}

button[value="SaveAndSend"] { 
  position: relative;
  top: 3px;
  
  cursor: pointer;
  width: 24px;
  height: 24px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAWCAYAAAA1vze2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAF8SURBVHgBvVSLbYMwELWBAdigjMAIdIKyQdMN0gmaDUIngA2iTmAyQdsJYAMYgE/fVYfkUjsGlOSkk4z97t59EeM4hsMwKOi4Uk+wjcQSATDfQDBptYRIElj7bqFfwi2Jdq6llI/Q2opeGxUJcMmqjDSgEguFHFpKF5rwnrieRH3fp7cmEehLZHzQ0m1s6c5F64mis8tuPl01DErhjjiGvkJLIsHVE/yEnue1KNm37/vln2nbuhvcfGXDdF2320xCxkxQubDIar+EpAHwwJEnOOfck9yA/cR7Mb+HxMIVtfjfdNOOkLMjvVNQs2yyiySmpsPZTs+Uy1Zxr54NRNVFEtNo6g4gqW0CqXwTzrWMb4a7VsvqyBOmeGdSvie7eMJLW1k0RwXm/4zjA/TMd8qEw368EAH0oD190GO1YoRPXAplajxnNr9PiCRdQfI7kjxhzYI9ySgoyamSEdXT+e8Ctg6CoGAyyiyy4N5Rvr24hvBIKx5jWsiM/2f3lR8HfwKE3XqAxQAAAABJRU5ErkJggg==') !important;
  opacity: 0.8;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
button[value^="Save"]:hover { opacity: 1; }

input.small, input.small:not(.btn-primary):not(.btn-danger) {
/*     padding: 4px 6px 4px 6px;
    font-size: 13px; */
  
    padding: var(--p-1) var(--p-2);
    font-size: var(--text-sm);
}

a.button:hover, button.button:hover, input.button:hover, input[type=button]:hover, input[type=submit]:not(.btn-primary):not(.btn-danger):hover {
    cursor: pointer;
/*  background-color: rgb(215, 215, 215); */
    background: color-mix(in srgb, black 5%, var(--secondary));
    
}

a.button:disabled, button.button:disabled, input.button:disabled, input[type=button]:disabled, input[type=submit]:not(.btn-primary):not(.btn-danger):disabled {
    opacity: .3;
    cursor: not-allowed;
}

/* Bootstrap overrides - may need to separate this from this CSS file */
.btn-primary, a.btn-primary {
    padding: var(--p-2) var(--p-4);
    font-size: var(--text-base);
    background: var(--secondary);
    border: 1px solid var(--border);
    border-radius: var(--rounded);
    color: var(--secondary-foreground);
    font-weight: normal;
}

.btn-primary:hover, a.btn-primary:hover {
    cursor: pointer;
/*  background-color: rgb(215, 215, 215); */
    background: color-mix(in srgb, black 5%, var(--secondary));
    color: var(--secondary-foreground);
    border: 1px solid var(--border);
}

.btn-outline-primary, a.btn-outline-primary {
    padding: var(--p-2) var(--p-4);
    font-size: var(--text-base);
    background: transparent;
    border: 1px solid var(--muted-foreground);
    border-radius: var(--rounded);
    color: var(--secondary-foreground);
    font-weight: normal;
}

.btn-outline-primary:hover, a.btn-outline-primary:hover,
.btn-outline-primary:active, a.btn-outline-primary:active,
.btn-outline-primary:focus, a.btn-outline-primary:focus,
.btn-outline-primary:focus-visible, a.btn-outline-primary:focus-visible {
    background: var(--secondary) !important;
    color: var(--secondary-foreground) !important;
    border: 1px solid var(--muted-foreground) !important;  
}

.btn-outline-primary:focus, .btn-outline-primary:focus-visible,
a.btn-outline-primary:focus, a.btn-outline-primary:focus-visible {
  box-shadow: none !important;
  outline: 1px solid var(--primary) !important;
  outline-offset: 2px;
  border: 1px solid var(--primary) !important;
  
}

.btn-sm, a.btn-sm {
    padding: var(--p-1) var(--p-2);
    font-size: var(--text-sm);
}

.btn-outline-primary.disabled {
    color: var(--muted-foreground);
}

.btn-row { 
  padding-left: 12px;
}

.card-selected {
    border: 2px solid var(--primary);
}

/* End of Bootstrap Overrides */

/* Allows dropdown for erlegacy classic style buttons */
.button.dropdown-toggle::after{
    display: inline-block;
    margin-left: 0;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
/*     float: right; -- clash with display: inline-block */
    margin-top: 9px;
}

#page-header {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: normal;
    /* Normalize the heading margin so it is consistent on every page,
       regardless of whether Bootstrap 4 (and its .mb-4 utility) is loaded. */
    margin-top: 0;
    margin-bottom: 1.5rem;
}

#page-footer {
    margin: 25px;
    bottom: 0;
    position: absolute;
}

th a, th a:link, th a:visited {
    /* color: white; */
    color: var(--primary);
    font-weight: bold;
    text-decoration: underline;
    display: inline-block;
}

.er-dropdown-toggle:after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .3em;
    vertical-align: middle;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
}

.er-dropdown-toggle-content {
    display: block;
    position: absolute;
    background-color: white;
    border: 1px solid rgb(200, 200, 200);
    z-index: 999;
/*     margin-top: -18px; */
    border-radius: 4px;
    list-style-type: none;
    margin-top: 0;
}

.er-dropdown-toggle-content > li {
    margin: 0;
    padding: 0;
}

@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 50px 0;
    }
    to {
        background-position: 0 0;
    }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 50px 0;
    }
    to {
        background-position: 0 0;
    }
}

.message {
    font-weight: bold;
    color: red;
}

.message.error, .alert.alert-danger {
/*     background-color: #f2dede;
    color: #540704;
    border: 1px solid #e8acaa; */
    
    background-color: color-mix(in srgb, white 90%, var(--danger));
    color: var(--danger);
    border: 1px solid color-mix(in srgb, white 50%, var(--danger)) !important;

    font-weight: normal;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: .25rem;
}
.message.error > a, .alert.alert-danger > a { text-decoration: underline; color: inherit; }


.message.success, .alert.alert-success {
/*     background-color: #dff0d8;
    color: #3c763d;;
    border: 1px solid #b9d7ae; */
  
    background-color: color-mix(in srgb, white 90%, var(--success));
    color: var(--success);
    border: 1px solid color-mix(in srgb, white 50%, var(--success)) !important;

    font-weight: normal;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: .25rem;
}
.message.success > a, .alert.alert-success > a { text-decoration: underline; color: inherit; }

.message.warn, .alert.alert-warning {
/*     background-color: #fff2ae;
    color: #8a6d3b;
    border: 1px solid #f9dd4a; */
  
    background-color: color-mix(in srgb, white 90%, var(--warning-background));
    color: var(--warning);
    border: 1px solid color-mix(in srgb, white 50%, var(--warning-background)) !important;

    font-weight: normal;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: .25rem;
}
.message.warning > a, .alert.alert-warning > a { text-decoration: underline; color: inherit; }

.message.info, .alert.alert-info {
/*     background-color: #d9edf7;
    color: #31708f;
    border: 1px solid #a9ced6; */
  
    background-color: color-mix(in srgb, white 90%, var(--info));
    color: var(--info);
    border: 1px solid color-mix(in srgb, white 50%, var(--info)) !important;

    font-weight: normal;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: .25rem;
}

/* Fix legibility issues with links and info messages */
.message.info > a, .alert.alert-info > a {
    font-weight: inherit;
    text-decoration: underline;
    color: inherit;
}

.er-rep {
    padding: 11px;
    border-bottom: 1px solid #ebebeb;
    white-space: nowrap;
}

.er-rep-photo {
    display: inline-block;
    width: 50px;
    height: 50px;
    vertical-align: top;

    border-radius: 999px;
    overflow: hidden;
    border: 2px solid var(--muted-foreground);
}

.er-rep-info {
    display: inline-block;
    padding-left: 15px;
    vertical-align: top;
}

.er-rep-label {
    margin: 2px 5px 15px;
    font-weight: bold;
}

.er-dropdown-toggle-content ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%;
    min-width: 225px;
}

.er-dropdown-toggle-content li {
    height: 39px;
    text-align: center;
    display: inline-block;
    width: 100%;
}

.er-dropdown-toggle-content a {
    display: inline-block;
}

.er-dropdown-toggle-content li a {
    display: inline-block;
    height: 30px;
    width: 100%;
    padding-top: 9px;
}

#support-center li {
    border-bottom: 1px solid #ebebeb;
}

#onsiteMenuBar {
    margin: 20px;
    background-color: rgb(235, 235, 235);
    border-radius: 5px;    
    padding: 15px 20px 15px 15px;
}

#onsiteMenuBar table td {
    padding-left: 3px;
}

.print-batch {
    padding-left: 20px !important;
}


a.tabText:hover {
/*     background-color: #ebebeb; */
    background-color: color-mix(in srgb, black 5%, var(--accent));
    text-decoration: none;
}

a.tabText {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 4px 0px 4px 0px;
}


/* reference: https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps */
td > img[height="1"] {
    height: 1px;
    display: block !important;
}

td > img[height="2"] {
    height: 2px;
    display: block !important;
}

td > img[height="3"] {
    height: 3px;
    display: block !important;
}

td > img[height="4"] {
    height: 4px;
    display: block !important;
}

td > img[height="5"] {
    height: 5px;
    display: block !important;
}

td > img[height="6"] {
    height: 6px;
    display: block !important;
}

td > img[height="7"] {
    height: 7px;
    display: block !important;
}

td > img[height="8"] {
    height: 8px;
    display: block !important;
}

td > img[height="9"] {
    height: 9px;
    display: block !important;
}

td > img[height="10"] {
    height: 10px;
    display: block !important;
}

td > img[height="11"] {
    height: 11px;
    display: block !important;
}

td > img[height="12"] {
    height: 12px;
    display: block !important;
}

td > img[height="13"] {
    height: 13px;
    display: block !important;
}

td > img[height="14"] {
    height: 14px;
    display: block !important;
}

td > img[height="15"] {
    height: 15px;
    display: block !important;
}

td > img[height="16"] {
    height: 16px;
    display: block !important;
}

td > img[height="17"] {
    height: 17px;
    display: block !important;
}

td > img[height="18"] {
    height: 18px;
    display: block !important;
}

td > img[height="19"] {
    height: 19px;
    display: block !important;
}

td > img[height="20"] {
    height: 20px;
    display: block !important;
}

td > img[height="21"] {
    height: 21px;
    display: block !important;
}

td > img[height="22"] {
    height: 22px;
    display: block !important;
}

td > img[height="23"] {
    height: 23px;
    display: block !important;
}

td > img[height="24"] {
    height: 24px;
    display: block !important;
}

td > img[height="25"] {
    height: 25px;
    display: block !important;
}

td > img[height="26"] {
    height: 26px;
    display: block !important;
}

td > img[height="27"] {
    height: 27px;
    display: block !important;
}

td > img[height="28"] {
    height: 28px;
    display: block !important;
}

td > img[height="29"] {
    height: 29px;
    display: block !important;
}

td > img[height="30"] {
    height: 30px;
    display: block !important;
}

td > img[height="31"] {
    height: 31px;
    display: block !important;
}

td > img[height="32"] {
    height: 32px;
    display: block !important;
}

td > img[height="33"] {
    height: 33px;
    display: block !important;
}

td > img[height="34"] {
    height: 34px;
    display: block !important;
}

td > img[height="35"] {
    height: 35px;
    display: block !important;
}

td > img[height="36"] {
    height: 36px;
    display: block !important;
}

td > img[height="37"] {
    height: 37px;
    display: block !important;
}

td > img[height="38"] {
    height: 38px;
    display: block !important;
}

td > img[height="39"] {
    height: 39px;
    display: block !important;
}

td > img[height="40"] {
    height: 40px;
    display: block !important;
}

a.er-admin-only {
    color: rgb(248, 123, 76) !important;
}

input[type="button" i]:disabled, input[type="submit" i]:disabled, input[type="reset" i]:disabled, input[type="file" i]:disabled::-webkit-file-upload-button, button:disabled, select:disabled, optgroup:disabled, option:disabled, select[disabled] > option {
    color: #cbcbcb;
}

/*
    Bootstrap overrides
*/
.alert-warning {
    border-color: #d6caa5 !important;
}

.alert-warning hr {
    border-top-color: #d6caa5 !important;
}

/*
    Misc
 */
span.badge-staff {
    font-size: 95%;
    line-height: 95%;
    cursor: help;
}

.help-link {
/*     color: #007bff; */
  text-indent: -1000px;
  display: inline-block;
  position: relative;
  /* EV-17013: the visible icon is the ::before pseudo-element below (24x24,
     absolutely positioned), but this anchor itself had no width/height, so its
     own layout box only reflected its (hidden) text content - much narrower
     than 24px. Anything sitting right after it (e.g. StepBasedRegPageSetup.jsp's
     "Edit Display Rules" button) had the icon visually spill into its space
     instead of being pushed after it. Match the icon's own dimensions and clip
     the indented text so it can't affect the box size either. */
  width: 24px;
  height: 24px;
  overflow: hidden;
  /* EV-17013 follow-up: as an inline-block, this now defaults to baseline
     vertical-align, and since the 24px box is taller than the surrounding
     text's line-height, baseline alignment pushes it above the checkbox
     label / button it sits next to instead of lining up with them. */
  vertical-align: middle;
}
.help-link::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIdSURBVHgBvVVBUttAEJxZSwbf/ARfYjuGg3KJdYt4QeAFgRdAXiDzgtg/IC/AvMDKzeS0VUk5BC6bH/gSbEvlncwKi1JVVpKBKvpgaWdn2rM9syOEArS8oLmTLI6B4AMvPWKTsSOA4ofUiFeJuztWMprb4tFm7Oz3T4loAIRNKIdCgtHvX9fDUuJNlpdEEMATgAjRym0c5bPHPGk9Xkz41YPnQcb1xkFGLjKrmyzCF5AaeDvJ3zBbpBl39/1Aa5rYvLloI6xRJEikmWjUTdTC1CCw+QuBBzc/p5GTBhOEYAVe3M2mZ5aNcWfPn9jI2Wa4Iqfr+S0d2/+d8/tjftu99yEiPvhouDJdwEf9yqexEENg6uXotfYKus5kHLZ7/Y9g+phSgxI1lCkBUGErusnyUMBaVBXMeyCCUXzfeGf0M6dkw2lRAPd2y4EtcTe7TrU2l0cnesDhpZdna+LO2/4ZsgzcPcNi6XLEAkFpqvTj2w1faBtHg5qWYukux9v4mv6EGh2xgPNK30RIoaSccytFZY5mFpii3f74PubUq31vpsrZLM7LBg/veW/2/GPUOAdcB0aXYmI8T5+ZodPrX7KCh/Ai4MXtbHpi3h6H0Kq+OtkM8edCxfe7n7PFI3GqteYCIUh4OqTgWKUs8ziPds8fsLJhJZ3pEBIjPv7gv62imG6Xr20NAtb9EwHPk+wzxWQIQnJBv/HRh/ksXwX/ABv76fbhUHeNAAAAAElFTkSuQmCC') no-repeat center center / 80%;
  top: 0;
  left: 0;
}
a.help-link:link, a.help-link:visited {
    text-decoration: none;
}

.er-select {
    width: 100%;
}

.hide {
    display: none;
}
h3 small{
    font-size: 70%;
    font-weight:bold;
    opacity: .65;
}

h4 small {
    font-size: 68%;
    font-weight: bold;
    opacity: .55;
}

/* Fixes issue with flatpickr where our style overrides the default inherit. */
.numInputWrapper {
    font-size: inherit;
}

/* Bootstrap only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Fix flickering bug when Bootstrap is imported */
/* https://github.com/valor-software/ngx-bootstrap/issues/3075#issuecomment-363461060 */
.tooltip {
    pointer-events: none;
/* !important */
}

body.wide-tooltips .tooltip-inner {
    max-width: 350px;
}
.tooltip-inner ul{
    text-align: left;
    margin-left: 0;
    padding-left: 25px;
    margin-top: 5px;
}


.spacer {
    display: block;
    height: 5px;
}

.form-control::placeholder {
    color: #6c757d;
    opacity: .7 !important;
}

button[disabled] {
    cursor: not-allowed;
}

.content-popup .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #222425;
    background-color: transparent;
    border-color: #b3b3b3 #b3b3b3 #fff;
}

.content-popup .nav-tabs .nav-link:focus, .nav-tabs a.nav-link:hover {
    background-color: #f5f5f5;
    border-color: #b3b3b3;
}

.content-popup .nav-tabs .nav-link {
    font-size: 16px;
}

.content-popup .nav-tabs {
    border-color: #b3b3b3;
}

/* For use when bootstrap is utilized in tandem with old pages still using a table to layout the structure of the page */
.table-layout {
    border-collapse: initial;
    padding-left: 20px;
    padding-right: 20px;
}
form.download-report{
    margin: 0;
    display: inline-block;
}
.badge-cadmium-internal{
    background-color: rgb(248, 123, 76);
    color: white;
    font-size: 12px !important;
    line-height: 12px !important;
    display: inline;
}
span.disabled{
    cursor: not-allowed;
    opacity: .4;
}

label.required:after {
    content:" *";
    color: red;
}

.pretty-container{
    padding: 20px;
    background-color: rgb(245, 245, 245);
    border: 1px solid rgb(235, 235, 235);
}

/** TABS **/
.nav-tabs.nav-tabs-pretty a.nav-link{
    font-size: 16px;
}

.nav-tabs.nav-tabs-pretty .nav-link {
    margin-bottom: -1px !important;
    margin-top: 1px;
}

.nav-tabs.nav-tabs-pretty .nav-link.active{
    border-bottom: 2px solid white !important;
    margin-top: 0;
}

.blockBGColor .nav-tabs.nav-tabs-pretty .nav-link.active{
    border-bottom: 2px solid rgb(235, 235, 235) !important;
}

.blockBGColorLight .nav-tabs.nav-tabs-pretty .nav-link.active{
    border-bottom: 2px solid rgb(245, 245, 245) !important;
}

.drag-handle {
    cursor: pointer;
    width: 25px;
}

.text-red{
    color: red;
}

/* try to add some padding inside the #content-inner tables */
table[width="95%"] { margin-left: 12px; }

/* not in this file */
.cke_editable { background: #fff !important; }

.reg-edit {
  background-color: color-mix(in srgb, white 50%, var(--accent));
}

.dropdown-menu { padding: 4px; }
.dropdown-item { margin-bottom: 2px; }
.dropdown-item:last-child { margin-bottom: 0; }
.dropdown-item:hover {
  border-radius: var(--rounded);
  background: var(--secondary) !important;
  color: var(--primary);
}

.modal-footer { border-top: none; }
.modal-footer .btn-primary {
  padding: var(--p-1) var(--p-4);
  font-size: var(--text-base);
  background: var(--primary) !important;
  border: 1px solid var(--border);
  border-radius: var(--rounded);
  color: var(--primary-foreground);
  font-weight: normal;  
}
.modal-footer .btn-primary:hover,
.modal-footer .btn-primary:active,
.modal-footer .btn-primary:focus {
  background: var(--black) !important;
}

.modal-footer .btn-default {
  padding: var(--p-1) var(--p-4);
  font-size: var(--text-base);
  background: var(--secondary) !important;
  border: 1px solid var(--border);
  border-radius: var(--rounded);
  color: var(--secondary-foreground);
  font-weight: normal;  
}

.modal-header {
  border-bottom: none;
}
.modal-title { 
  font-family: 'Roboto', sans-serif;
  color: var(--primary);
  margin: 0;
  line-height: 1;
}

.modal-footer .btn-default:hover,
.modal-footer .btn-default:active,
.modal-footer .btn-default:focus {
  background: color-mix(in srgb, black 5%, var(--secondary)) !important;
}

button.close {
  text-indent: -1000px;
  position: relative;
  opacity: 1;
}
button.close::before {
  content: '';
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFOSURBVHgBjZO/boMwEMbvTCDNUClLq0ZdWKpGyuIMlaJOYeyYR+FJ8gidO/EIMHXpUHdg95iRqSQQcG1UlOAYnG/yn9PPd/edcUFf6LEkWwHAC3cScpZkYJFP19NxmUdqPQInxOfFKhZCrP/vWeFNgiGQAnhFHsslVXtESIgWQ1WACrwGoCQEcnJw9xtAYDaQCdBk/nsTEs5YVriHwASa05U/DJCl8yTD00t06pXjGEQnkLvobEpRvfcBmr50UzaCdHUAF5ArQBcAI0TpafFKUVTf+rksbZmmn0w/1y0G1UwiqsjABtmbqG12L0S5UBciktPrg1m+utftJ+cAg43SnXppmyMyAGCkxiBNv1jfHLUgtA3SKVOja81fI16Zb22Apq6eyVa/maBMxgawgMB5uJ/9CCRzROQS8NYHaJXtdvvbx7sP5+jOkGA2gjr8Aw8w3IxTBjxqAAAAAElFTkSuQmCC') no-repeat center center / 45%;
  width: 24px;
  height: 24px;  
  position: absolute;
  right: 4px;
  top: 4px;    
}

/* EV-16256: Lay out the Cadmium-meeting label + product pills (Website/App,
   Ed Harvester, Expo Harvester) as a flex row so they sit inline with
   consistent spacing and wrap cleanly on narrow viewports. The earlier
   absolute-style positioning (top: -3px on .no-icon, left: 14px on the
   ::after pill, negative margin on the hidden image) caused the pills to
   overlap once more than one was present. */
#cadmiumMeeting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
#cadmiumMeeting > div.no-icon {
  background: var(--eventscribe);
  color: var(--white);
  font-size: 14px;
  padding: 4px 11px;
  border-radius: 50px;
}
#cadmiumMeeting > div:not(.no-icon)::after {
  content: 'Website/App';
  display: inline-block;
  margin-left: 14px;
  font-size: 14px;
  padding: 4px 11px;
  border-radius: 50px;
  background: var(--eventscribe);
  color: var(--white);
}
#cadmiumMeeting img {
  display: none;
}

/* === LOGIN / LOGOUT (Stylus section 2) === */

#header > a {
  display: block;
  width: 381px;
  height: 64px;
  margin: 0 auto 25px;
  
  background: url('data:image/png;base64,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') no-repeat center center / contain;
  
}

#header-logo {
  display: none;
}

body.er-login #content {
  border-radius: var(--rounded-xl);
  background: var(--white) !important;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

#content #inner-content h2 {
  font-size: var(--text-xl);
  color: var(--primary);
}

#content #inner-content form div.section:nth-child(1) {
  margin-bottom: 15px;
}

#content #inner-content input[type='submit'] {
  background: var(--primary);
  color: var(--primary-foreground);
  padding: var(--p-2) var(--p-4) !important;
  font-size: var(--text-base);
  border: 1px solid var(--primary);  
}

#content #inner-content input[type='submit']:hover {
  background: var(--black);
}

#content #inner-content input[type='text'],
#content #inner-content input[type='password']{
  height: auto;
  padding: var(--p-2) var(--p-2);
  border-radius: var(--rounded);
  border: 1px solid var(--border);
  
}

#content #inner-content .forgot-password a { 
  text-decoration: underline;
}

#content #footer {
  background: transparent;  
  text-align: center;
  padding-bottom: 15px;
  height: auto;
}

#content #footer a {
  color: var(--primary);
  text-decoration: underline;
  
}

#content #footer ul li {
  color: var(--muted-foreground);
}

/* === UNIFIED LOGIN (Stylus section 5) === */
/* Most rules deferred to working session (Q2 scoping decision). */
/* Hide left menu only on UnifiedLoginHomeSearch.jsp via :has() — scoped by the page's unique form action. */
body:has(form[action*="UnifiedLoginHomeSearch.jsp"]) #siteLeftMenu {
  display: none;
}


/* === SHARED UTILITY === */
/* td a.text underline rule (Stylus §2.3 item A) — was originally URL-scoped to
   PlanList/Report/Messages. Re-added here scoped via body.er-emarketing-list,
   set on PlanList.jsp + Report.jsp. Message.jsp (MeetingWizard, Stylus section 11)
   still pending and will get the same scope when section-11 lands. */
body.er-emarketing-list td a.text {
  text-decoration: underline;
  padding-left: var(--p-2);
}

/* === EMARKETING / PLAN TAB (Stylus section 8) === */
#content-inner table.blockBGColor tr:nth-child(3) td table { border-collapse: collapse; }
#content-inner table.blockBGColor tr:nth-child(3) td table tr:first-child { border: none; }
#content-inner table.blockBGColor tr:nth-child(3) td table tr { border-bottom: none; }

#content-inner table.blockBGColor tr:nth-child(3) td table tr:nth-child(2) td { padding: 0; }
#content-inner table.blockBGColor tr:nth-child(3) td table tr td { padding: var(--p-1); }
#content-inner table.blockBGColor tr:nth-child(3) td table tr td:first-child { padding-left: var(--p-2); }

/* Suppress section-8 nested-table styling on selected MeetingWizard tab pages.
   Narrow scope per dev request. Broader fix (rescope section-8 to PlanList +
   Report only via body.er-plan-list) deferred. */
body.er-meeting-tab #content-inner table.blockBGColor tr:nth-child(3) td table tr {
  border-bottom: 0;
}
body.er-meeting-tab #content-inner table.blockBGColor tr:nth-child(3) td table tr td,
body.er-meeting-tab #content-inner table.blockBGColor tr:nth-child(3) td table tr td:first-child {
  padding: 0;
}

/* === EMARKETING / REPORT TAB (Stylus section 9) === */
/* All section-9 rules are byte-identical to section-8 (or to the shared td a.text utility). */
/* Section-8's #content-inner-scoped rules cover section-9's URL via the same wrapper. */

/* === EMARKETING / MESSAGE LIBRARY (Stylus section 10, scoped to body.er-message-library) === */
/* MessageLibrary.jsp has a different table structure than PlanList/Report - content
   nested table is at row 2 (not row 3), and the actual message list is 3 levels deep
   (tr:nth-child(2) > table > tr:nth-child(5) > table). Section-10 was deferred because
   several of these selectors (table.blockBGColor, div[align="center"], table[width="95%"])
   would leak globally if merged unscoped. Each rule is prefixed with body.er-message-library. */
body.er-message-library div[align="center"] { border: 1px solid var(--border); }
body.er-message-library form > table.blockBGColor { border: none; }
body.er-message-library table.blockBGColor { border: none; }
body.er-message-library table[width="95%"] { width: 100% !important; margin: 0; }

body.er-message-library #content-inner table.blockBGColor tr:nth-child(2) table tr:nth-child(5) table { border-collapse: collapse; width: 100%; border: 1px solid var(--border); }
body.er-message-library #content-inner table.blockBGColor tr:nth-child(2) table tr:nth-child(5) table tr:first-child { border: none; }
/* :not(:nth-last-child(2)) skips the LAST message row so the table's own bottom
   border closes the listing instead of stacking a second line. Each message emits
   a row + a trailing 2px spacer row, so the final child is a spacer and the last
   message row is the second-to-last child. (Same approach as the EV-16193
   meeting-row `:not(:last-of-type)` fix above.) */
body.er-message-library #content-inner table.blockBGColor tr:nth-child(2) table tr:nth-child(5) table tr:nth-child(odd):not(:nth-last-child(2)) { border-bottom: 1px solid var(--border); }
body.er-message-library #content-inner table.blockBGColor tr:nth-child(2) table tr:nth-child(5) table tr:nth-child(odd) td { padding: var(--p-1) var(--p-2); }

body.er-message-library tr td[align="right"] .small { color: var(--primary); text-decoration: underline; }
body.er-message-library tr td > hr { display: none; }

/* === MESSAGES / UDF TAB (Stylus section 12) === */
#content-inner table.blockBGColor table[width="95%"] tbody#udfs {
  border-left: 1px solid var(--border);
}

.udf.gu-transit {
  background: color-mix(in srgb, black 20%, var(--secondary)) !important;
}

.gu-mirror {
  display: table;
  outline: 2px dashed var(--muted-foreground);
  outline-offset: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  background: #fff;
  border-radius: var(--rounded);
}

/* === REBRAND FOLLOW-UP: Program/Setup.jsp checkbox border overlap ===
   Section 1 added `border: 1px solid var(--border)` to TABLE.blockBGColor.
   On Setup.jsp the leftmost checkbox sits flush against that border.
   Scoped via body.er-program-setup to avoid touching other pages. */
body.er-program-setup TABLE.blockBGColor > tbody > tr > td:has(> label > input[type="checkbox"]) {
  padding-left: var(--p-2);
}

/* === EV-16102: Eventscribe Admin top header (new application brand strip) ===
   Sits above the existing #topMenu row in iHeaderPrivate.jsp /
   iHeaderPrivateMembership.jsp. Namespaced .es-* so it does not override
   any existing selectors. Uses --primary and --eventscribe already in :root.
   Customer name renders only when User.getFirmID() > 0 (handled in JSP). */
.es-header {
  background-color: var(--primary);
  border-bottom: 5px solid var(--eventscribe);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 14px 16px;
  width: 100%;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  /* Also pin horizontally so the bar keeps covering the viewport when a wide
     page (e.g. the Fee Schedule grid) is scrolled sideways - without this the
     sticky header only sticks vertically and scrolls away horizontally, leaving
     a gap on the right. */
  left: 0;
  z-index: 10;
}

.es-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1366px;
  width: 100%;
}

.es-logo-wrapper {
  display: flex;
  gap: 12px;
  align-items: center;
}

.es-logo-icon-img {
  height: 36px;
  width: 36px;
  display: block;
}

.es-logo-wordmark-img {
  height: 23px;
  width: auto;
  display: block;
}

.es-logo-admin-text {
  font-family: 'Messina Serif', Georgia, serif;
  font-style: italic;
  font-size: 28.777px;
  color: #ffffff;
  line-height: 1;
}

.es-vertical-separator {
  width: 1px;
  align-self: stretch;
  background-color: #9b9da3;
}

.es-customer-name {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #ffffff;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 600px;
}

/* EV-16102 follow-up: restore intrinsic icon size for Onsite toolbar.
   Section-1 rule `a.text > img { width: 60px; height: 28px }` (line 843)
   was distorting the 22x22 toolbar icons inside iMenuBarRegistrant /
   iMenuBarRegistrantState. Scope the reset to #onsiteMenuBar so we do
   not undo wherever else the section-1 author intended the 60x28 sizing. */
#onsiteMenuBar a.text > img {
  width: auto;
  height: auto;
  border-radius: 0;
  margin: 0;
}

/* EV-16193: horizontal separator + cell padding for meeting rows on
   Workflow/MeetingsActive.jsp and Workflow/MeetingArchives.jsp.
   Class `meeting-row` is added to each data <tr> in the JSP loop so header
   rows and spacer rows don't pick up these styles. `:not(:last-of-type)`
   on the border rule skips the last meeting-row so the table's own bottom
   border provides the closure instead of stacking two lines. The padding
   rule applies to ALL meeting-row cells (including the last) so the right-
   aligned ActivityID column doesn't sit flush against the table's right
   border. */
.meeting-row > td {
    padding: 0 8px;
}
.meeting-row:not(:last-of-type) > td {
    border-bottom: 1px solid var(--border);
}

/* EV-16195: Message Library template row Edit links are plain unclassed <a>
   elements that sit flush against the right edge of their <td>. Add cell
   right-alignment and padding so the text has visible breathing room.
   :not(.text) avoids picking up the template-name links, which use class="text". */
body.er-message-library td:has(> a[href="javascript://"]:not(.text)) {
    text-align: right;
    padding-right: 12px;
}

/* EV-16193 + EV-16298 + EV-16306: hide the empty 270px left rail (#siteLeftMenu) on
   the meeting-listing pages (MeetingsActive / MeetingArchives /
   MeetingActiveCatRestrict / MeetingArchiveCatRestrict) and the Home page (Workflow/index.jsp).
   These pages don't populate the rail with any menu items, so the reserved
   column reads as a blank strip on the left. */
body.er-meeting-listing #siteLeftMenu,
body.er-home #siteLeftMenu {
    display: none;
}

/* EV-16262: Add text-decoration underlines back to clickable links inside the
   main content area so the page meets accessibility requirements (links must
   be distinguishable beyond colour alone). Excludes the Meeting Wizard tab
   strip's text variants which already render as styled tab labels. The
   #controlCenterMenu cards opt back out via !important because those cards
   already use container styling to indicate interactivity. CSS provided
   verbatim by design (John Imperio + Jen Symms). */
#content-inner a:not(.tabText):not(.tabSelText),
#content-inner .text {
  text-decoration: underline;
}
#controlCenterMenu .blockBGColor ul > li > a,
#controlCenterMenu .blockBGColor ul > li > form > a { text-decoration: none !important; }

/* EV-16262 follow-up: don't underline placeholder links that wrap just an
   <img> (e.g. the empty Maximum Capacity / Promotion Code / Option Price
   boxes on Fee.jsp). The underline served no accessibility purpose on a
   wordless link and rendered as a stray dash next to the placeholder box.
   Matches the EV-16262 base rule's :not(.tabText):not(.tabSelText) part so
   specificity (1,3,2) wins over the competing (1,2,1) underline rule for
   non-.text links too. */
#content-inner a:not(.tabText):not(.tabSelText):has(> img:only-child),
#content-inner a.text:has(> img:only-child) {
  text-decoration: none;
}

/* EV-16192: Customer List page (UnifiedLoginHomeSearch.jsp) — rework the
   search box, autocomplete dropdown, and Accounts list to match the
   pre-rebrand design.
   - Search input fills its column; the typeahead wrapper matches so the
     dropdown is the same width as the input.
   - The Go! button stays inline-right (it lives in a separate <td>; the
     browser auto-sizes that column to fit the button).
   - Autocomplete suggestions left-align with comfortable padding.
   - "Accounts" <th> renders as a header bar; account rows get 1px borders. */
body.er-customer-list #firm-search,
body.er-customer-list #scrollable-dropdown-menu,
body.er-customer-list .twitter-typeahead,
body.er-customer-list .tt-hint {
  width: 100% !important;
  box-sizing: border-box;
}
body.er-customer-list #scrollable-dropdown-menu {
  display: block;
}

/* Stretch the search <td> so the input occupies the full available width.
   Centering the cell was leaving the input pinned at 450px previously.
   padding-right gives the input a gap before the adjacent Go! button cell
   (the input is box-sizing: border-box so it shrinks to respect padding). */
body.er-customer-list #frm > table > tbody > tr > td:has(#scrollable-dropdown-menu) {
  text-align: left;
  width: 100%;
  padding-right: 8px;
}

/* Autocomplete dropdown — full width matching the input, items left-aligned
   with breathing room. */
body.er-customer-list .tt-menu,
body.er-customer-list .tt-dropdown-menu {
  width: 100% !important;
  text-align: left;
}
body.er-customer-list .tt-suggestion {
  text-align: left;
  padding: 6px 12px;
}

/* "Accounts" header row — header-bar styling. */
body.er-customer-list #frm > table th {
  text-align: left;
  padding: 8px 12px;
  background-color: var(--accent);
  color: var(--primary);
  border: 1px solid var(--border);
}

/* Account rows — each <tr> contains a single <td> with the account link
   plus the firm-id suffix. Give the cell padding and 1px borders so the
   list reads as a bordered table. */
body.er-customer-list #frm > table > tbody > tr:has(> td > a[href*="UnifiedLoginHome.jsp"]) > td {
  padding: 8px 12px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* EV-16315: Fee Schedule data tables — design refinement.
   The thick black separator under each data table's column headers was an
   extra <tr><td class="headerLineColor"> hack (9px-tall row that looked like
   a thick border). Those markup rows were removed from iFee.jsp; replace
   the visual separation with proper CSS borders so the column header is
   still delineated from the data rows and the table has a clear outer
   boundary. Scoped to body.er-fee-schedule so other pages using the same
   section-8 nested-table selector are unaffected. !important is needed to
   override the section-8 rules above that explicitly strip borders
   (tr:first-child { border: none } and tr { border-bottom: none }). */
/* Border ONLY around the inner data tables — the ones with <th> column
   headers: Meeting Registration (Item / Max Capacity / Promotion Code /
   Good Until), Options (Item / Cut-off / Promotion Code / Good Until),
   and Refund Policy (Penalty / Until). The outer section wrappers
   (Fees Expire alert, section titles + descriptions, button rows) stay
   unbordered so each section reads as a clean header + bordered data
   block + buttons. */
body.er-fee-schedule #content-inner table.blockBGColor tr:nth-child(3) td table:has(> tbody > tr > th) {
  border: 1px solid var(--border) !important;
}
/* The Refund Policy section wraps its content in an outer <table border="1">
   (legacy markup). The user wants the "Refund Policy:" label/section
   unbordered — only the inner Penalty/Until data table should carry the
   border. Suppress the wrapper's default browser-drawn 1px border. */
body.er-fee-schedule #content-inner table.blockBGColor tr:nth-child(3) td table[border="1"] {
  border: none !important;
}
/* Header/data separator is inlined on the last header <tr> in iFee.jsp
   itself (style="border-bottom: 1px solid var(--border);"). Inline
   styles win against the section-8 `tr { border-bottom: none }` rule
   for the Meeting Registration / Options data tables because those
   inlines land on row 2 (the dates row, i.e. nth-child(2)). Refund
   Policy's Penalty/Until table has only one header row, so its inline
   lands on tr:first-child — which the section-8 rule
   `tr:first-child { border: none }` neutralizes in border-collapse
   mode. Force it here: target the single-header-row table (no rowspan
   th) and re-apply the border-bottom with !important. */
body.er-fee-schedule #content-inner table.blockBGColor tr:nth-child(3) td table:has(> tbody > tr > th):not(:has(> tbody > tr > th[rowspan="2"])) > tbody > tr:first-child {
  border-bottom: 1px solid var(--border) !important;
}

/* EV-16321: in the last "Good Until" column, the price/entry box and the
   trailing (D)/(DM) fee-description link share one right-aligned cell and wrap
   - so the (D)/(DM) drops below the box. Keep the price cells from wrapping so
   box + (D)/(DM) stay on one line. Targets only the right-aligned price cells,
   so the left-aligned Item column still wraps normally (no table widening from
   long item names). No display:block, so the table stays full width (no gap). */
body.er-fee-schedule #content-inner table.blockBGColor tr:nth-child(3) td table:has(> tbody > tr > th) td[align="right"] {
  white-space: nowrap;
}

/* === MAIN CONTENT EDGE PADDING (EV-16321, Stylus section 13) ===
   Across several admin pages, content (links/buttons, listings, labels)
   inside the blockBGColor "card" runs flush to the left/right edge of the
   main content area. Add a 16px (--p-6) left/right gutter to the card's
   own content cells so nothing touches the edge.

   Scoped to body.er-content-pad (set on the EV-16321 pages):
     E-Marketing PlanList / Report / Message Library; Meeting Wizard
     Menu / Details / UDF; and the Fee Schedule sub-tabs (Discounts, Rules,
     Filters, Registration Categories, Group Discounts, Revenue Codes,
     Fee Sections, Set Membership Category - Fee Map).

   Only the cells that DIRECTLY hold a data table get the gutter
   (td:has(table)), so the inner listing is inset as a block (bands + rows
   together) without double-padding its inner cells. Deliberately scoped to
   table cells only: the tab-strip cell (iTab.jsp -> table.tabBGColor) is
   excluded via :not() so the tab bar and its full-width divider line stay
   edge-to-edge. NOTE the [class~="tabbgcolor" i] case-insensitive match:
   MeetingWizard/iTab.jsp uses class "tabBGColor" but CommunicationPlan/iTab.jsp
   uses "TabBGColor" - a plain table.tabBGColor selector misses the latter and
   the E-Marketing tab strip wrongly gets the gutter. Standalone spacer /
   message / label rows are left alone
   so any full-width lines above the table are not pulled inward. A dedicated
   class is used (rather than reusing er-meeting-tab / er-fee-schedule) so this
   purely-spacing rule does not interact with the section-8 / EV-16315 styling
   scoped to those classes. */
body.er-content-pad #content-inner table.blockBGColor > tbody > tr > td:has(table):not(:has(table[class~="tabbgcolor" i])):not(:has(.tabLineColor)) {
  padding-left: var(--p-6);
  padding-right: var(--p-6);
}
/* Catch-all gutter: the rule above only pads cells that contain a table, so
   non-table content rows (form-control rows like FeeMemCatMap "Map By:", label
   rows, message rows, right-aligned action links) still ran flush to the card
   edge - hence the piecemeal td.message / td[align=right] rules below. Give
   EVERY top-level content cell the 16px gutter, excluding only the tab-strip
   cell (the full-width tab bar) and headerLineColor dividers, which must span
   the full width. Padding the (transparent) spacer cells is harmless. */
body.er-content-pad #content-inner table.blockBGColor > tbody > tr > td:not(.headerLineColor):not(:has(table[class~="tabbgcolor" i])):not(:has(.tabLineColor)) {
  padding-left: var(--p-6);
  padding-right: var(--p-6);
}
/* Normalize the legacy width attributes (e.g. width="98%"/"95%") on the inner
   content table so the 16px padding above is the ONLY left/right gutter.
   Without this the table is also centered at <100% width, so the gutter is
   wider than 16px and the header underline / <HR> stop short of the cell edge
   (the "incomplete line" effect). 100% makes the gutter an exact, symmetric
   16px and lets internal lines span the full inset width. (Mirrors the
   section-10 95% -> 100% normalization already used elsewhere in this file.) */
body.er-content-pad #content-inner table.blockBGColor > tbody > tr > td:has(table):not(:has(table[class~="tabbgcolor" i])) > table {
  width: 100%;
  /* Neutralize the global, LEFT-ONLY `table[width="95%"] { margin-left: 12px }`
     rule (and any stray asymmetric margin). Without this, forcing width:100%
     leaves the 12px left margin in place, so the table is pushed right and
     clips on the right edge while the left gains extra space (asymmetric
     gutter). margin:0 makes the 16px cell padding the only gutter -> exactly
     symmetric on both ends. Same approach section 10 uses for 95% tables. */
  margin: 0;
}
/* Right-aligned action links/cells that sit DIRECTLY in the card table (e.g.
   FeeDiscount.jsp "Discount Codes Report" / "Load Discounts from CSV File") are
   not td:has(table), so the gutter rule above skips them and they run flush to
   the right card edge. Give them the same 16px right gutter. Scoped to top-level
   cells (> tbody > tr >) so right-aligned cells inside nested listings are
   unaffected. */
body.er-content-pad #content-inner table.blockBGColor > tbody > tr > td[align="right" i],
body.er-content-pad #content-inner table.blockBGColor > tbody > tr > td[style*="text-align: right" i] {
  padding-right: var(--p-6);
}
/* Standalone instruction/message rows (td.message - the red helper text on
   FeeFilters / FeeSections / FeeRules / FeeRevenueCodes, etc.) are not
   td:has(table), so the gutter rule skips them and the text runs flush to the
   card edge. Give them the same 16px left/right gutter so the instructions
   align with the inset table below. */
body.er-content-pad #content-inner table.blockBGColor > tbody > tr > td.message {
  padding-left: var(--p-6);
  padding-right: var(--p-6);
}
/* Section band headers in nested content listings (e.g. FeeRules.jsp
   "Registration Fees" / "Options") are <th> rows with no following
   headerLineColor divider, so the band has a top edge but no bottom line
   separating it from its rows. Add a 1px bottom border. Scoped to <th> in
   nested tables that are NOT .er-card-table, so the Message Library TEMPLATES
   band and Detail.jsp EdgeReg band (which already carry their own divider /
   border) are not double-lined. The :not(:has(+ tr > td.headerLineColor))
   guard skips bands that ALREADY have a headerLineColor divider row right after
   them (e.g. UDF.jsp "Choice Lists"), so we don't stack a second line. */
body.er-content-pad #content-inner table.blockBGColor > tbody > tr > td table:not(.er-card-table) > tbody > tr:not(:has(+ tr > td.headerLineColor)) > th {
  border-bottom: 1px solid var(--border);
}

/* "Complete table" (EV-16321): listing rows use bottom-borders only, so without
   an outer box the dividers float and stop short of the edges (the "incomplete
   line" look). border-collapse + a full 1px border makes every row divider
   connect to the outer border so the listing reads as a proper bordered table.
   Applied ONLY to tables explicitly tagged .er-card-table (not every content
   table) so action-button / form rows are NOT boxed in - those stay outside
   the bordered listing. */
body.er-content-pad #content-inner table.blockBGColor .er-card-table {
  border-collapse: collapse;
  /* Minimal style: top border only - no left/right verticals and no bottom
     line. The listing is inset 16px from the card; the top border + header
     divider + row dividers define the table without a boxed-in bottom/sides. */
  border: none;
  border-top: 1px solid var(--border);
}
/* The legacy header separator (td.headerLineColor = solid Black) reads as a
   heavy black bar inside the rebranded listings. Match the thin grey --border
   used everywhere else so it's a clean 1px divider. Scoped to all er-content-pad
   pages (not just .er-card-table) so listings like Message Library, which keep
   the black separator, get the lighter divider too. */
body.er-content-pad #content-inner table.blockBGColor td.headerLineColor {
  background-color: var(--border);
  /* The cell only holds a 1px spacer image. On tables with cellpadding (e.g.
     MeetingWizard/UDF.jsp Choice Lists table, cellpadding="5") that padding
     inflates the coloured cell into a thick bar. Collapse it to a true 1px
     divider regardless of the table's cellpadding. */
  padding: 0;
  line-height: 0;
  font-size: 0;
}
/* FORM pages (e.g. Detail.jsp): the content is a form whose fields live
   DIRECTLY in a blockBGColor table - not a nested listing - so the cell-padding
   gutter above never reaches it and the fields sit flush against the card
   border. When .er-card-table is set ON the blockBGColor table itself (compound
   selector, vs. the descendant rule above for nested listings), give its edge
   cells a 16px internal gutter so labels/fields aren't flush. The blockBGColor
   border is the visible bordered table. */
body.er-content-pad #content-inner table.blockBGColor.er-card-table > tbody > tr > td,
body.er-content-pad #content-inner table.blockBGColor.er-card-table > tbody > tr > th {
  padding-left: var(--p-6);
  padding-right: var(--p-6);
}
/* The <th> section band (e.g. Detail.jsp "EdgeReg API") spans the full table
   width, so its grey background otherwise bleeds into the 16px gutter at the
   left/right card edges. Inset only the left/right edges (keep full band height):
   replace the 16px side padding with 16px transparent side borders and clip the
   background to the padding box, so the card shows through the gutter on each
   side while the grey band stays full height. The inset box-shadow draws a
   complete 1px border around the band (all four sides of the padding box), and
   border-top:0 removes the legacy full-width top line (from `table tbody tr th`)
   that otherwise overhangs into the gutter. */
body.er-content-pad #content-inner table.blockBGColor.er-card-table > tbody > tr > th {
  /* 16px transparent side borders = the outer gutter; 8px padding = the gap
     between the band's border and its text so the label isn't flush. */
  padding-left: var(--p-2);
  padding-right: var(--p-2);
  border-top: 0;
  border-left: var(--p-6) solid transparent;
  border-right: var(--p-6) solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--border);
}