@charset "utf-8";
/* CSS Document
*        Document Name: default.css
*        Description:
*      Color scheme:  #37517B (dark blue)
                        #acc0c7 (medium-light blue)                  #bec8d8 (light blue)
*/

@import url("html_elements.css");
@import url("common.css");
@import url("messages.css");
@import url("menus.css");
@import url("sorting.css");
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);

/* --------------------- html_elements.css Overrides -------------------- */

/* **************************************************************
   Customize below the various default elements in
   html_lements.css.

   Use the file for reference, however, it is suggested that you
   NOT edit the file itself!
   **************************************************************
*/

html, body {
   font-size: 14px;  margin: 0;  padding: 0; height: 100%;  background-color: #eeeeee;
}

body, caption, input, textarea, select, option, legend, fieldset  {
   font-family: Arial, "Open Sans", Verdana, Geneva, sans-serif;   font-size: 14px;
}

option {
}

th, td {
}

pre, code {
}

p {
   margin: 1.25em 0 1.25em 0;
}

/* Links */

a:link {
   color: #37517B;
   text-decoration: none;
}

a:visited {
   color: #37517B;
   text-decoration: none;
}

a:hover, a:focus {
   color: #0000CC;
   text-decoration: underline;
}

a:active {
   color: #0000CC;
   text-decoration: underline;
}

/** headings **/
h1 {
font-family: "Open Sans", Verdana, Geneva, sans-serif;   font-weight: 800; color: #37517B;   margin: 1em 0 1.5em 0;

}



h2 {
   font-family: "Open Sans", Verdana, Geneva, sans-serif;
   font-weight: 800;
   color: #37517B;
   margin: 1em 0 1em 0;

}



h3 {
   font-family: "Open Sans", Verdana, Geneva, sans-serif;
   font-weight: 800;
   color: #37517B;
   margin: 1em 0 1em 0;

}



h4, h5, h6 {
   font-family: "Open Sans", Verdana, Geneva, sans-serif;
   font-weight: 800;
   color: #37517B;
   margin: 1em 0 1em 0;

}



/** lists **/

ul, ol {

}



ul ul, ul ol, ol ol, ol ul {

}



li {

}



ul {

}



ul ul {

}



ul ul ul {

}



ul ul ul ul {

}



ol {

}



ol ol {

}



ol ol ol {

}



dt  {

}



dd {

}





/** tables **/

table {

}



td {
   padding: .5em 2em .5em .5em;

}



th {
   padding: 1em .5em 1em .5em;
   text-align: left;

}



/** images **/

img  {

}



/** horizontal rules **/

hr  {

}



/** forms **/

form {

}



/* ---- Inputs ---- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select {
   font-size: .97em;
   font-family: inherit;
   padding: 9px 12px;
   height: auto;
   min-height: 40px;
   border: 1.5px solid #c8d2e0;
   border-radius: 6px;
   background-color: #ffffff;
   color: #2c3e5a;
   transition: border-color 0.15s, box-shadow 0.15s;
   outline: none;
   box-sizing: border-box;
   vertical-align: middle;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
   border-color: #37517B;
   box-shadow: 0 0 0 3px rgba(55,81,123,0.12);
   background-color: #ffffff !important;
}

textarea {
   min-height: 90px;
   resize: vertical;
   line-height: 1.5;
}

select {
   cursor: pointer;
}

/* ---- Buttons ---- */
input[type="submit"],
input[type="button"],
input[type="reset"],
button,
input.button,
a.button {
   font-size: .97em;
   font-family: inherit;
   font-weight: 600;
   padding: 10px 22px;
   min-height: 40px;
   border-radius: 6px;
   border: none;
   background-color: #37517B;
   color: #ffffff;
   cursor: pointer;
   letter-spacing: 0.02em;
   transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
   vertical-align: middle;
   display: inline-block;
   line-height: 1;
}

input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
button:hover,
input.button:hover,
a.button:hover {
   background-color: #2a3f60;
   box-shadow: 0 4px 12px rgba(55,81,123,0.25);
   transform: translateY(-1px);
   color: #ffffff;
   text-decoration: none;
}

input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active,
button:active,
input.button:active {
   transform: translateY(0);
   box-shadow: none;
}

/* Input fields with class="submit" — reset to field style, not button style */
input[type="text"].submit,
input[type="email"].submit,
input[type="password"].submit,
input[type="number"].submit,
input[type="tel"].submit,
input[type="search"].submit,
input[type="date"].submit,
textarea.submit,
input[type="file"].submit {
   background-color: #ffffff;
   color: #2c3e5a;
   font-weight: normal;
   padding: 9px 12px;
   border: 1.5px solid #c8d2e0;
   border-radius: 6px;
   cursor: text;
   letter-spacing: normal;
   transform: none;
   box-shadow: none;
   min-height: 40px;
}

input[type="text"].submit:focus,
input[type="email"].submit:focus,
input[type="password"].submit:focus,
input[type="number"].submit:focus,
input[type="tel"].submit:focus,
input[type="search"].submit:focus,
input[type="date"].submit:focus,
textarea.submit:focus {
   border-color: #37517B;
   box-shadow: 0 0 0 3px rgba(55,81,123,0.12);
   background-color: #ffffff;
   transform: none;
}

input[type="reset"] {
   background-color: #6b7a99;
}

input[type="reset"]:hover {
   background-color: #556080;
}

select, optgroup, option {
}

option:hover,
option:focus,
option:checked {
   background: #37517B !important;
   color: #ffffff !important;
}

/* Fix browser autofill background override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
   -webkit-box-shadow: 0 0 0 50px #ffffff inset !important;
   -webkit-text-fill-color: #2c3e5a !important;
   background-color: #ffffff !important;
   border-color: #37517B !important;
}



/* --------------------- Messages Overrides -------------------- */

/* Base reset for all message types */
.error, .error2, .info, .help, .closed, .success {
   background-image: none !important;
   font-size: .95em !important;
   font-weight: 500 !important;
   padding: 14px 16px 14px 52px !important;
   margin: 0 0 16px 0 !important;
   border-radius: 8px !important;
   border: none !important;
   border-left: 4px solid !important;
   position: relative;
   line-height: 1.5;
}

/* Icon via ::before pseudo-element */
.error::before,
.error2::before,
.info::before,
.help::before,
.closed::before,
.success::before {
   content: '';
   position: absolute;
   left: 16px;
   top: 50%;
   transform: translateY(-50%);
   width: 22px;
   height: 22px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

/* .error — used for general/info messages in this system */
.error {
   background-color: #eef2f8 !important;
   border-left-color: #37517B !important;
   color: #1a3358 !important;
}
.error::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2337517B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
}

/* .error2 — actual error/warning */
.error2 {
   background-color: #fff5f5 !important;
   border-left-color: #c0392b !important;
   color: #922b21 !important;
}
.error2::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* .info — information */
.info {
   background-color: #eff8ff !important;
   border-left-color: #2980b9 !important;
   color: #1a5276 !important;
}
.info::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232980b9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
}

/* .help */
.help {
   background-color: #eff8ff !important;
   border-left-color: #2980b9 !important;
   color: #1a5276 !important;
}
.help::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232980b9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* .closed / .success — success */
.closed, .success {
   background-color: #f0fdf4 !important;
   border-left-color: #27ae60 !important;
   color: #1e8449 !important;
}
.closed::before, .success::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327ae60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}

/* .required field label */
.required {
   color: #c0392b !important;
   font-size: .82em !important;
   font-weight: 600 !important;
   padding: 3px 8px 3px 22px !important;
   background-image: none !important;
   position: relative;
   display: inline-block;
}
.required::before {
   content: '*';
   position: absolute;
   left: 8px;
   color: #c0392b;
   font-size: 1.1em;
   font-weight: 700;
   top: 1px;
}

/* --------------------- common.css Overrides -------------------- */

#container {
   position: relative;
   min-height: 95%;
   background-color: #ffffff;
   padding-top: 56px;
}

#content {
}

#content-inner {
   padding: 24px 28px;
}

#content-inner-no-nav {
   padding: 1em;
}

#content-inner h2 {
   font-size: 1.25em;
   font-weight: bold;
   color: #37517B;
   padding: 1em 0 .5em 0;
}

#content-inner-no-nav h2 {
   padding: 1.5em 0 .25em 0;
   font-size: 1.25em;
   font-weight: bold;
   color: #37517B;
   border-bottom: 1px solid #37517B;
}

#content-inner .menu {
   border: 1px solid #acc0c7;
   background-color: #ddd;
}

#content-inner .menu a {
   color: #394a59;
}

#content-inner .menu a.menuItem:hover,
#content-inner .menu a.menuItemHighlight {
   background-color: #acc0c7;
   color: #1C242C;
}

/* ------------------------------- Nav ------------------------------- */
#navigation {
   width: 100%;
   margin-bottom: 0;
}

#navigation-inner {
   background-color: #FFFFFF;
   border-bottom: 2px solid #37517B;
   box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* ---- Navbar bar layout ---- */
#nav-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 20px;
   height: 56px;
}

#nav-logo a {
   display: flex;
   align-items: center;
   gap: 10px;
   text-decoration: none;
}

#nav-site-name {
   font-size: 1em;
   font-weight: 700;
   color: #37517B;
   white-space: nowrap;
}

#nav {
   display: flex;
   align-items: center;
   list-style: none;
   margin: 0;
   padding: 0;
   gap: 2px;
   font-size: 1em;
}

#nav li {
   display: flex;
   align-items: center;
   list-style-type: none;
   padding: 0;
   margin: 0;
   position: relative;
}

#nav li a,
#nav li .menuButton {
   display: block;
   padding: 7px 14px;
   color: #37517B;
   text-decoration: none;
   border-radius: 5px;
   font-weight: 600;
   font-size: 1em;
   transition: background 0.15s, color 0.15s;
   white-space: nowrap;
   letter-spacing: 0.01em;
}

#nav li a:hover,
#nav li .menuButton:hover {
   background-color: #eef2f8;
   color: #1a3358;
   text-decoration: none;
}

#nav li.nav-active > a,
#nav li.nav-active > div > a {
   background-color: #37517B;
   color: #ffffff;
   border-radius: 5px;
}

#nav li.nav-active > a:hover,
#nav li.nav-active > div > a:hover {
   background-color: #2a3f60;
   color: #ffffff;
}

/* ---- Profile dropdown ---- */
.profile-li {
   position: relative;
   margin-left: 8px;
}

.profile-trigger {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 5px 12px 5px 6px;
   cursor: pointer;
   border-radius: 50px;
   border: 1.5px solid #d0d8e8;
   background: #f7f9fc;
   transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
   user-select: none;
}

.profile-trigger:hover {
   background-color: #eef2f8;
   border-color: #37517B;
   box-shadow: 0 2px 8px rgba(55,81,123,0.10);
}

.profile-avatar {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: linear-gradient(135deg, #37517B 0%, #5b7fad 100%);
   color: #ffffff;
   font-size: .82em;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   letter-spacing: 0.03em;
   box-shadow: 0 1px 4px rgba(55,81,123,0.18);
}

.profile-name {
   color: #2c3e5a;
   font-weight: 600;
   font-size: .95em;
   max-width: 150px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.profile-caret {
   color: #7a90ad;
   font-size: .6em;
   margin-left: 2px;
   transition: transform 0.2s;
}

.profile-trigger.open .profile-caret {
   transform: rotate(180deg);
}

.profile-dropdown-menu {
   display: none;
   position: absolute;
   right: 0;
   top: calc(100% + 10px);
   background: #ffffff;
   border: 1px solid #e2e8f0;
   border-radius: 10px;
   box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
   min-width: 230px;
   z-index: 1000;
   overflow: hidden;
   animation: dropdownFadeIn 0.15s ease;
}

@keyframes dropdownFadeIn {
   from { opacity: 0; transform: translateY(-6px); }
   to   { opacity: 1; transform: translateY(0); }
}

.profile-dropdown-header {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 16px 18px;
   background: #f8fafc;
   border-bottom: 1px solid #e2e8f0;
}

.profile-dropdown-header .pdh-avatar {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: #37517B;
   color: #fff;
   font-size: .85em;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   letter-spacing: 0.03em;
}

.profile-dropdown-header .pdh-info {
   min-width: 0;
}

.profile-dropdown-header .pdh-name {
   color: #1a2b45;
   font-weight: 700;
   font-size: .92em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.profile-dropdown-header .pdh-email {
   color: #6b7a99;
   font-size: .78em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   margin-top: 2px;
}

.profile-dropdown-body {
   padding: 6px 0 8px;
}

a.profile-menu-item {
   display: flex !important;
   flex-direction: row !important;
   align-items: center !important;
   gap: 12px;
   padding: 13px 18px;
   color: #2c3e5a;
   text-decoration: none;
   font-size: .92em;
   font-weight: 500;
   transition: background 0.13s, color 0.13s, padding-left 0.13s;
   white-space: nowrap;
}

a.profile-menu-item .pmi-icon {
   width: 32px;
   height: 32px;
   min-width: 32px;
   border-radius: 8px;
   background: #eef2f8;
   color: #37517B;
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: background 0.13s, color 0.13s;
}

a.profile-menu-item .pmi-icon svg {
   display: block;
}

a.profile-menu-item .pmi-text {
   display: inline;
   line-height: 1;
}

a.profile-menu-item:hover {
   background-color: #f1f5fb;
   color: #1a3358;
   padding-left: 22px;
   text-decoration: none;
}

a.profile-menu-item:hover .pmi-icon {
   background: #d6e0f5;
   color: #1a3358;
}

.profile-menu-divider {
   border: none;
   border-top: 1px solid #e2e8f0;
   margin: 6px 0;
}

a.profile-logout {
   color: #c0392b;
   font-weight: 500;
}

a.profile-logout .pmi-icon {
   background: #fdecea;
   color: #c0392b;
}

a.profile-logout:hover {
   background-color: #fff5f5;
   color: #a93226;
   padding-left: 22px;
}

a.profile-logout:hover .pmi-icon {
   background: #fbd3d0;
   color: #a93226;
}

/* ---- Override old #break ---- */
#break {
   display: none;
}

/* ---- Hover nav dropdowns ---- */
#navigation-inner div.menu {
   background: #ffffff;
   border: 1px solid #dde4ef;
   border-radius: 10px;
   box-shadow: 0 8px 28px rgba(37,60,100,0.14), 0 2px 8px rgba(0,0,0,0.06);
   padding: 6px 0;
   min-width: 210px;
   z-index: 1000;
   overflow: hidden;
}

#navigation-inner div.menu a.menuItem {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 9px 18px;
   color: #2c3e5a;
   font-size: .93em;
   font-weight: 500;
   text-decoration: none;
   white-space: nowrap;
   transition: background 0.12s, color 0.12s;
   border-left: 3px solid transparent;
}

#navigation-inner div.menu a.menuItem:hover,
#navigation-inner div.menu a.menuItemHighlight {
   background-color: #f0f4fb;
   color: #1a3358;
   border-left-color: #37517B;
   cursor: pointer;
}

#navigation-inner div.menu a.menuItem span.menuItemArrow {
   margin-left: auto;
   font-size: .75em;
   color: #7a90ad;
}

#navigation-inner div.menu div.menuItemSep {
   border: none;
   border-top: 1px solid #edf0f6;
   margin: 5px 0;
}

/* ------------------------------- Select2 Overrides ------------------------------- */

select {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2337517B' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 12px center;
   padding-right: 36px !important;
   cursor: pointer;
}

select:focus {
   border-color: #37517B;
   box-shadow: 0 0 0 3px rgba(55,81,123,0.12);
   background-color: #ffffff;
   outline: none;
}

/* ------------------------------- Header Banner ------------------------------- */

#header {
   background: #1e3254;
   border-bottom: 3px solid #C9A84C;
   margin-bottom: 0;
   position: relative;
   overflow: hidden;
}

#header-inner {
   position: relative;
   padding: 28px 36px 26px 160px;
   margin: 0;
}

.page-breadcrumb {
   margin: 0 0 10px 0;
   font-size: .75em;
   font-weight: 600;
   letter-spacing: 0.12em;
   color: #C9A84C;
}

.page-breadcrumb a {
   color: #C9A84C;
   text-decoration: none;
   transition: color 0.15s;
}

.page-breadcrumb a:hover {
   color: #e8c96a;
   text-decoration: none;
}

.breadcrumb-sep {
   margin: 0 8px;
   color: rgba(201,168,76,0.5);
   font-weight: 400;
}

#header-inner h1 {
   margin: 0 0 8px 0;
   padding: 0;
   font-size: 1.9em;
   font-weight: 700;
   color: #ffffff;
   border: none;
   letter-spacing: 0.01em;
   line-height: 1.2;
}

.page-subtitle {
   margin: 0;
   padding: 0;
   font-size: .92em;
   color: rgba(255,255,255,0.62);
   font-weight: 400;
   letter-spacing: 0.01em;
   line-height: 1.5;
}

/* ------------------------------- Footer ------------------------------- */

#footer {
   width: 100%;
}

#footer-inner {
   background: linear-gradient(135deg, #0f1f3d 0%, #1e3254 100%);
   border-top: 3px solid #C9A84C;
   padding: 0;
   color: rgba(255,255,255,0.70);
}

.footer-main {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1.4fr;
   gap: 40px;
   padding: 48px 40px 36px;
}

.footer-brand {
   padding-right: 20px;
}

.footer-logo {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 16px;
}

.footer-logo-name {
   font-size: 1em;
   font-weight: 700;
   color: #ffffff;
}

.footer-tagline {
   font-size: .88em;
   color: rgba(255,255,255,0.55);
   line-height: 1.65;
   margin: 0;
}

.footer-col-heading {
   font-size: .75em;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   color: #C9A84C;
   margin: 0 0 16px 0;
   padding: 0;
}

.footer-links {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.footer-links li a {
   font-size: .9em;
   color: rgba(255,255,255,0.65);
   text-decoration: none;
   transition: color 0.15s;
}

.footer-links li a:hover {
   color: #C9A84C;
   text-decoration: none;
}

.footer-contact-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.footer-contact-list li {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font-size: .88em;
   color: rgba(255,255,255,0.65);
}

.footer-contact-icon {
   font-size: 1em;
   flex-shrink: 0;
   margin-top: 1px;
}

.footer-contact-list li a {
   color: rgba(255,255,255,0.65);
   text-decoration: none;
   transition: color 0.15s;
}

.footer-contact-list li a:hover {
   color: #C9A84C;
   text-decoration: none;
}

.footer-bottom {
   border-top: 1px solid rgba(255,255,255,0.08);
   padding: 16px 40px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: .8em;
   color: rgba(255,255,255,0.35);
}

#footer-inner a {
   color: rgba(255,255,255,0.65);
   text-decoration: none;
   transition: color 0.15s;
}

#footer-inner a:hover {
   color: #C9A84C;
   text-decoration: none;
}

@media (max-width: 900px) {
   .footer-main {
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      padding: 36px 24px 28px;
   }
   .footer-brand {
      grid-column: 1 / -1;
      padding-right: 0;
   }
}

@media (max-width: 560px) {
   .footer-main {
      grid-template-columns: 1fr;
   }
   .footer-bottom {
      flex-direction: column;
      gap: 6px;
      text-align: center;
      padding: 14px 24px;
   }
}

/* ============================================================
   MY INFO & ENTRIES PAGE (section-list)
   ============================================================ */

.section-list #content-inner > p:first-of-type {
   font-size: 1em;
   color: #2c3e5a;
   margin-bottom: 8px;
}

.section-list #content-inner > h2:first-of-type {
   font-size: 1.1em;
   font-weight: 700;
   color: #1e3254;
   border-bottom: 2px solid #C9A84C;
   padding-bottom: 8px;
   display: inline-block;
   margin-bottom: 20px;
}

.section-list .adminSubNavContainer {
   background: #ffffff;
   border: 1px solid #e2e8f0;
   border-radius: 10px;
   padding: 0;
   margin-bottom: 28px;
   display: flex;
   flex-wrap: wrap;
   gap: 0;
   overflow: hidden;
   box-shadow: 0 2px 10px rgba(37,60,100,0.07);
}

.section-list .adminSubNavContainer .adminSubNav {
   display: inline-flex;
   align-items: center;
   padding: 14px 20px;
   border-right: 1px solid #edf0f6;
   transition: background 0.13s;
}

.section-list .adminSubNavContainer .adminSubNav:last-child {
   border-right: none;
}

.section-list .adminSubNavContainer .adminSubNav:hover {
   background: #f7f9fc;
}

.section-list .adminSubNavContainer .adminSubNav a {
   font-size: .9em;
   font-weight: 600;
   color: #37517B;
   text-decoration: none;
   white-space: nowrap;
}

.section-list .adminSubNavContainer .adminSubNav a:hover {
   color: #C9A84C;
   text-decoration: none;
}

.section-list .adminSubNavContainer span.icon {
   display: none;
}

.section-list .dataTable {
   width: 100%;
   border-collapse: collapse;
   background: #ffffff;
   border: 1px solid #e2e8f0;
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 2px 10px rgba(37,60,100,0.07);
   margin-bottom: 28px;
}

.section-list .dataTable tr {
   border-bottom: 1px solid #f0f4f8;
}

.section-list .dataTable tr:last-child {
   border-bottom: none;
}

.section-list .dataTable tr:hover {
   background: #fafbfe;
}

.section-list .dataTable td.dataLabel {
   font-size: .82em !important;
   font-weight: 700 !important;
   text-transform: uppercase !important;
   letter-spacing: 0.06em !important;
   color: #4a5e80 !important;
   padding: 12px 16px !important;
   width: 35% !important;
   vertical-align: middle !important;
   border: none !important;
   background: #f7f9fc !important;
}

.section-list .dataTable td.data {
   font-size: .92em;
   color: #2c3e5a;
   padding: 12px 16px !important;
   border: none !important;
   vertical-align: middle !important;
}

.section-list .dataTable td.dataLabel h3 {
   font-size: 1em;
   font-weight: 700;
   color: #1e3254;
   text-transform: none;
   letter-spacing: 0;
   margin: 0;
   padding: 0;
   border-bottom: 2px solid #C9A84C;
   display: inline-block;
   padding-bottom: 3px;
}

.section-list .dataTable tr:has(h3) td {
   background: #eef2f8 !important;
   padding: 14px 16px !important;
}

/* ============================================================
   ADMIN — Consistent input field widths
   ============================================================ */

.section-admin td.data input[type="text"],
.section-admin td.data input[type="email"],
.section-admin td.data input[type="number"],
.section-admin td.data input[type="tel"],
.section-admin td.data input[type="url"],
.section-admin td.data input[type="password"],
.section-admin td.data input[type="date"],
.section-admin td.data select,
.section-admin td.data textarea {
   width: 100%;
   box-sizing: border-box;
   min-width: 0;
}

.section-admin td.data {
   min-width: 200px;
}

.section-admin td.data input[size="2"],
.section-admin td.data input[size="3"],
.section-admin td.data input[size="5"],
.section-admin td.data input[size="6"] {
   width: auto;
   min-width: 60px;
   max-width: 100px;
}

.section-admin td.data input[size="10"] {
   width: auto;
   min-width: 120px;
   max-width: 180px;
}

.section-admin input[type="text"]:not(td.data input),
.section-admin input[type="number"]:not(td.data input) {
   min-width: 120px;
   box-sizing: border-box;
}

.section-admin td.data {
   width: auto !important;
   min-width: 200px;
   padding: 8px 0 !important;
   vertical-align: top;
}

.section-admin .dataTable td.dataLabel {
   width: 220px;
   white-space: normal;
   vertical-align: top;
   padding: 10px 16px 10px 0 !important;
   font-weight: 600;
   font-size: .9em;
   color: #1e3254;
}

.section-admin .dataTable tr {
   border-bottom: 1px solid #f0f4f8;
}

.section-admin .dataTable tr:last-child {
   border-bottom: none;
}

.section-admin td.data input[type="file"] {
   width: 100%;
   box-sizing: border-box;
   background: #ffffff;
   border: 1.5px solid #c8d2e0;
   border-radius: 6px;
   padding: 8px 12px;
   font-size: .9em;
   cursor: pointer;
}

/* ------------------------------- Data Display ------------------------------- */

#sortable {
   width: 100%;
   border-collapse: collapse;
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 2px 12px rgba(37,60,100,0.08);
   margin: 0 0 20px 0;
}

#sortable th,
#sortable .dataHeading {
   background-color: #1e3254 !important;
   color: #ffffff !important;
   font-size: .82em;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   padding: 12px 14px !important;
   border: none !important;
   white-space: nowrap;
}

#sortable td,
#sortable .dataList {
   padding: 11px 14px !important;
   border-bottom: 1px solid #edf0f6 !important;
   color: #2c3e5a;
   font-size: .93em;
   vertical-align: middle !important;
}

#sortable tr:last-child td {
   border-bottom: none !important;
}

#sortable tbody tr:hover td {
   background-color: #f7f9fc;
}

#sortable tr[style*="background-color: #ff9"] td {
   border-left: 3px solid #f39c12 !important;
}

.dataTable {
   border-collapse: collapse;
   width: 100%;
}

.dataTable th,
.dataHeading {
   background-color: #eef2f8;
   color: #1e3254;
   font-weight: 600;
   font-size: .88em;
   padding: 10px 14px;
   text-align: left;
   border-bottom: 2px solid #c8d2e0;
}

.dataTable td {
   padding: 8px 14px;
   border-bottom: 1px solid #f0f2f6;
   vertical-align: middle;
   color: #2c3e5a;
}

.dataTable tbody tr:hover td {
   background-color: #fafbfd;
}

.adminSubNavContainer {
   background: #f7f9fc;
   border: 1px solid #e2e8f0;
   border-left: 4px solid #37517B;
   border-radius: 6px;
   padding: 10px 16px;
   margin: 0 0 10px 0;
   font-size: .93em;
   color: #2c3e5a;
}

.adminSubNav {
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

#content-inner h2 {
   font-size: 1.1em;
   font-weight: 700;
   color: #1e3254;
   padding: 8px 0 6px 0;
   margin: 20px 0 12px 0;
   border-bottom: 2px solid #C9A84C;
   letter-spacing: 0.01em;
}

.dataLabel {
   font-weight: 600;
   color: #1e3254;
   font-size: .92em;
   padding-right: 16px !important;
   white-space: nowrap;
   vertical-align: middle !important;
}

#sortable .dataList a {
   color: #37517B;
   font-weight: 500;
   text-decoration: none;
   margin-right: 8px;
   transition: color 0.12s;
}

#sortable .dataList a:hover {
   color: #C9A84C;
   text-decoration: none;
}

h2 {
   color: #1e3254;
}

h3 {
   color: #1e3254;
}

/* ============================================================
   1. STATUS BADGES
   ============================================================ */
.status-badge {
   display: inline-block;
   padding: 3px 10px;
   border-radius: 20px;
   font-size: .78em;
   font-weight: 700;
   letter-spacing: 0.04em;
   white-space: nowrap;
}
.badge-paid {
   background: #e8f8f0;
   color: #1e8449;
   border: 1px solid #a9dfbf;
}
.badge-unpaid {
   background: #fff0f0;
   color: #c0392b;
   border: 1px solid #f5b7b1;
}
.badge-confirmed {
   background: #eef6ff;
   color: #1a5276;
   border: 1px solid #a9cce3;
}
.badge-pending {
   background: #fef9e7;
   color: #9a7d0a;
   border: 1px solid #f9e79f;
}

/* ============================================================
   2. LOGIN / REGISTER CARD LAYOUT
   ============================================================ */
.section-login #form1,
.section-register #form1 {
   background: #ffffff;
   border: 1px solid #e2e8f0;
   border-radius: 12px;
   box-shadow: 0 4px 24px rgba(37,60,100,0.10);
   padding: 32px 36px;
   max-width: 520px;
   width: 100%;
}

.section-login #form1 .dataTable,
.section-register #form1 .dataTable {
   box-shadow: none;
   border-radius: 0;
   margin: 0;
   background: none;
}

.section-login #form1 .dataTable thead,
.section-register #form1 .dataTable thead {
   display: none;
}

.section-login #form1 .dataLabel,
.section-register #form1 .dataLabel {
   padding: 8px 16px 8px 0 !important;
   font-size: .92em;
   border: none !important;
   background: none !important;
   color: #1e3254;
}

.section-login #form1 .dataTable td,
.section-register #form1 .dataTable td {
   padding: 6px 0 !important;
   border: none !important;
   background: none !important;
}

.section-login #form1 .dataTable tbody tr:hover td,
.section-register #form1 .dataTable tbody tr:hover td {
   background: none !important;
}

.section-login #form1 input[type="submit"],
.section-login #form1 input.button,
.section-register #form1 input[type="submit"],
.section-register #form1 input.button {
   width: 100%;
   margin-top: 8px;
   padding: 12px;
   font-size: 1em;
}

.section-login #form1 p,
.section-register #form1 p {
   font-size: .88em;
   color: #6b7a99;
   margin-top: 16px;
}

.section-login #form1 p a,
.section-register #form1 p a {
   color: #C9A84C;
   font-weight: 600;
}

/* ============================================================
   3. GOLDEN COLOR ACCENTS
   ============================================================ */

#nav li.nav-active > a,
#nav li.nav-active > div > a {
   background-color: transparent;
   color: #C9A84C !important;
   border-bottom: 2px solid #C9A84C;
   border-radius: 0;
   padding-bottom: 5px;
}

#nav li.nav-active > a:hover,
#nav li.nav-active > div > a:hover {
   background-color: transparent;
   color: #e8c96a !important;
}

.dataTable thead tr th:first-child,
.dataTable thead tr .dataHeading:first-child {
   border-left: 3px solid #C9A84C !important;
}

/* ============================================================
   4. EMPTY STATE
   ============================================================ */
.empty-state {
   text-align: center;
   padding: 48px 24px;
   color: #7a90ad;
}
.empty-state .empty-icon {
   font-size: 3em;
   margin-bottom: 12px;
   display: block;
   opacity: 0.5;
}
.empty-state p {
   font-size: 1em;
   color: #7a90ad;
   margin: 0 0 16px 0;
}
.empty-state a {
   display: inline-block;
   padding: 10px 22px;
   background: #37517B;
   color: #ffffff !important;
   border-radius: 6px;
   font-weight: 600;
   font-size: .92em;
   text-decoration: none;
   transition: background 0.15s;
}
.empty-state a:hover {
   background: #C9A84C;
   text-decoration: none;
}

/* ============================================================
   5. MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
   #nav-bar {
      flex-wrap: wrap;
      height: auto;
      padding: 10px 16px;
      gap: 8px;
   }
   #nav {
      flex-wrap: wrap;
      gap: 2px;
      font-size: .85em;
   }
   #nav-site-name {
      display: none;
   }
   .profile-name {
      display: none;
   }
   #container {
      padding-top: 80px;
   }
   #header-inner {
      padding: 18px 20px 16px;
   }
   #header-inner h1 {
      font-size: 1.4em;
   }
   .dataTable {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
   }
   #form1 {
      padding: 20px 16px;
      border-radius: 8px;
   }
   .dataLabel {
      display: block;
      white-space: normal !important;
   }
   #footer-inner {
      flex-direction: column;
      text-align: center;
      padding: 16px;
   }
   #content-inner {
      padding: 16px;
   }
}

@media (max-width: 480px) {
   #nav li a,
   #nav li .menuButton {
      padding: 5px 8px;
      font-size: .82em;
   }
   #header-inner h1 {
      font-size: 1.2em;
   }
   .profile-caret {
      display: none;
   }
}

/* ============================================================
   6. PNG ICONS — entries table only
   ============================================================ */
/* Only hide the PNG image, not the entire span (keeps Delete link text visible) */
#content-inner:not(.section-admin) #sortable .dataList span.icon img {
   display: none;
}
#content-inner:not(.section-admin) #sortable .dataList span.icon {
   display: inline;
}

/* Scrollable content */
#content-inner {
   overflow-x: auto;
}

.dataHeading {
}

.dataList {
}

.dataLabel {
}

/* ============================================================
   BREWER FORM — 2-column card layout
   ============================================================ */

.section-brewer #form1,
.section-step2 #form1 {
   background: #ffffff;
   border: 1px solid #e2e8f0;
   border-radius: 14px;
   box-shadow: 0 4px 24px rgba(37,60,100,0.08);
   padding: 32px 36px 40px;
   max-width: 950px;
   margin: 0 auto;
}

.section-brewer #form1 > p:first-of-type,
.section-step2 #form1 > p:first-of-type {
   margin-bottom: 28px;
}

.section-brewer .dataTable,
.section-step2 .dataTable {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0 32px;
   width: 100%;
   border: none;
   box-shadow: none;
   background: none;
}

.section-brewer .dataTable thead,
.section-brewer .dataTable tbody,
.section-step2 .dataTable thead,
.section-step2 .dataTable tbody {
   display: contents;
}

.section-brewer .dataTable tr,
.section-step2 .dataTable tr {
   display: flex;
   flex-direction: column;
   padding: 0 0 20px 0;
   min-width: 0;
}

.section-brewer .dataTable tr[hidden],
.section-step2 .dataTable tr[hidden] {
   display: none;
}

.section-brewer .dataTable tr:has(h3),
.section-brewer .dataTable tr:has(h2),
.section-step2 .dataTable tr:has(h3),
.section-step2 .dataTable tr:has(h2) {
   grid-column: 1 / -1;
   padding: 24px 0 8px 0;
   border-top: 1px solid #e8ecf2;
   margin-top: 8px;
}

.section-brewer .dataTable td[colspan="2"],
.section-step2 .dataTable td[colspan="2"] {
   grid-column: 1 / -1;
}

.section-brewer .dataTable td.dataLabel,
.section-step2 .dataTable td.dataLabel {
   font-size: .78em;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: #4a5e80;
   padding: 0 0 5px 0 !important;
   white-space: normal;
   border: none !important;
   background: none !important;
   vertical-align: bottom !important;
}

.section-brewer .dataTable td.dataLabel h3,
.section-step2 .dataTable td.dataLabel h3 {
   font-size: 1.15em;
   font-weight: 700;
   color: #1e3254;
   text-transform: none;
   letter-spacing: 0;
   margin: 0 0 2px 0;
   padding: 0;
   border-bottom: 2px solid #C9A84C;
   display: inline-block;
   padding-bottom: 4px;
}

.section-brewer .dataTable td.data,
.section-step2 .dataTable td.data {
   padding: 0 !important;
   border: none !important;
   background: none !important;
}

.section-brewer .dataTable td,
.section-step2 .dataTable td {
   width: auto !important;
   min-width: 0 !important;
}

.section-brewer .dataTable td.data input,
.section-brewer .dataTable td.data select,
.section-brewer .dataTable td.data textarea,
.section-step2 .dataTable td.data input,
.section-step2 .dataTable td.data select,
.section-step2 .dataTable td.data textarea {
   width: 100% !important;
   min-width: 0 !important;
   box-sizing: border-box !important;
   size: unset;
}

.section-brewer .dataTable td.data ~ td.data,
.section-step2 .dataTable td.data ~ td.data {
   display: none;
}

.section-brewer .dataTable td[rowspan],
.section-step2 .dataTable td[rowspan] {
   display: none;
}

.section-brewer .dataTable tr[hidden],
.section-step2 .dataTable tr[hidden] {
   display: none !important;
}

.section-brewer .dataTable tr:has(h3) td.dataLabel ~ td.dataLabel,
.section-step2 .dataTable tr:has(h3) td.dataLabel ~ td.dataLabel {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: .88em;
   text-transform: none;
   letter-spacing: 0;
   font-weight: 500;
   color: #2c3e5a;
   padding-top: 8px !important;
}

.section-brewer .dataTable tr:has(.required) td.dataLabel::after,
.section-step2 .dataTable tr:has(.required) td.dataLabel::after {
   content: ' *';
   color: #c0392b;
   font-weight: 700;
}

.section-brewer .dataTable tr:hover,
.section-step2 .dataTable tr:hover {
   background: none;
}

.upload-btn {
   background: linear-gradient(135deg, #1e3254 0%, #37517B 100%) !important;
   color: #ffffff !important;
   border: none !important;
   border-radius: 8px !important;
   padding: 11px 24px !important;
   font-size: .93em !important;
   font-weight: 600 !important;
   cursor: pointer !important;
   letter-spacing: 0.03em !important;
   transition: box-shadow 0.15s, transform 0.1s !important;
   margin-left: 0 !important;
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.upload-btn:hover {
   box-shadow: 0 4px 14px rgba(55,81,123,0.30) !important;
   transform: translateY(-1px) !important;
   background: linear-gradient(135deg, #37517B 0%, #4a6fa5 100%) !important;
}

.upload-btn:active {
   transform: translateY(0) !important;
   box-shadow: none !important;
}

.section-brewer .dataTable tr:has(.upload-btn),
.section-step2 .dataTable tr:has(.upload-btn) {
   grid-column: 1 / -1;
   padding-top: 20px;
}

@media (max-width: 768px) {
   .section-brewer .dataTable,
   .section-step2 .dataTable {
      grid-template-columns: 1fr;
   }
   .section-brewer #form1,
   .section-step2 #form1 {
      padding: 20px 16px;
   }
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

.section-login #container,
.section-login #content,
.section-login #content-inner {
   background: #f0f4f9 !important;
   min-height: calc(100vh - 140px);
}

.section-login #content-inner {
   padding: 40px 16px;
}

.section-login #form1 {
   max-width: 460px !important;
   width: 100% !important;
   margin: 32px auto 0 !important;
   display: block !important;
}

.section-login #form1 table td.data input {
   width: 100% !important;
   box-sizing: border-box !important;
}

.section-login #form1 table td {
   width: auto !important;
   border: none !important;
   background: none !important;
}

.section-login #form1 table td.dataLabel {
   padding: 0 0 5px 0 !important;
}

.section-login #form1 table td.data {
   padding: 0 0 16px 0 !important;
}

.section-login #form1 table tr:has([type="submit"]) td.data,
.section-login #form1 table tr:last-child td.data {
   padding-bottom: 0 !important;
}

.section-login #form1 p input[type="submit"],
.section-login #form1 p input.button {
   width: 100%;
   padding: 13px;
   font-size: 1em;
   border-radius: 8px;
   margin-top: 4px;
}

.section-login #content-inner > p,
.login-helper-link {
   font-size: .88em;
   color: #6b7a99;
   text-align: center;
   margin: 12px auto 0;
   max-width: 460px;
   width: 100%;
   display: block;
}

.login-helper-link a {
   color: #37517B;
   font-weight: 600;
   text-decoration: none;
}

.login-helper-link a:hover {
   color: #C9A84C;
}

.section-login #content-inner > p a {
   color: #37517B;
   font-weight: 600;
}

.section-login #content-inner > p a:hover {
   color: #C9A84C;
}

.section-login #content-inner p span.icon {
   display: none;
}

/* ============================================================
   REGISTER PAGE
   ============================================================ */

.register-intro {
   max-width: 960px;
   margin: 0 auto 4px;
   width: 100%;
   box-sizing: border-box;
}

.register-intro h2 {
   margin-bottom: 8px;
}

.register-intro ul {
   padding-left: 20px;
}

.section-register #form1 {
   background: #ffffff;
   border: 1px solid #e2e8f0;
   border-radius: 14px;
   box-shadow: 0 4px 24px rgba(37,60,100,0.08);
   padding: 32px 36px 40px;
   max-width: 960px;
   margin: 20px auto 0;
}

/* Table grid — 2 columns */
.section-register #form1 > table {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0 28px;
   width: 100%;
   border: none;
   box-shadow: none;
   background: none;
}

.section-register #form1 > table tbody { display: contents; }
.section-register #form1 > table tr { display: flex; flex-direction: column; padding-bottom: 18px; min-width: 0; }
.section-register #form1 > table tr[hidden] { display: none !important; }

/* Hide empty spacer rows */
.section-register #form1 > table tr:not(:has(.dataLabel, h3, input, select, textarea, a, button)) {
   display: none;
}

/* Full-width rows */
.section-register #form1 > table td.data hr {
   width: 50% !important;
   margin: 10px 0 !important;
}
.section-register #form1 > table tr:has(h3),
.section-register #form1 > table tr:has(hr),
.section-register #form1 > table tr:has(input[type="checkbox"]),
.section-register #form1 > table tr:has(input[type="radio"]),
.section-register #form1 > table tr:has(textarea),
.section-register #form1 > table tr:has(input[type="submit"]) {
   grid-column: 1 / -1;
}

/* Labels */
.section-register #form1 > table td.dataLabel {
   font-size: .78em !important;
   font-weight: 700 !important;
   text-transform: uppercase !important;
   letter-spacing: 0.07em !important;
   color: #4a5e80 !important;
   padding: 0 0 5px 0 !important;
   border: none !important;
   background: none !important;
   width: auto !important;
}

/* h3 section headings */
.section-register #form1 > table td.dataLabel h3 {
   font-size: 1em;
   font-weight: 700;
   color: #1e3254;
   text-transform: none;
   letter-spacing: 0;
   margin: 4px 0 2px 0;
   padding-bottom: 4px;
   border-bottom: 2px solid #C9A84C;
   display: inline-block;
}

/* Input cells */
.section-register #form1 > table td.data {
   padding: 0 !important;
   border: none !important;
   background: none !important;
}

/* Override inline width="20%" on the Contact Person cells */
.section-register #form1 > table td.data:has(#brewerFirstName),
.section-register #form1 > table td.data:has(#brewerFirstName4) {
   width: auto !important;
}

/* Full width inputs */
.section-register #form1 > table td.data input[type="text"],
.section-register #form1 > table td.data input[type="email"],
.section-register #form1 > table td.data input[type="password"],
.section-register #form1 > table td.data select,
.section-register #form1 > table td.data textarea {
   width: 100% !important;
   box-sizing: border-box !important;
}

/* Hide required td */
.section-register #form1 > table td.data ~ td.data {
   display: none;
}

/* Required asterisk on label */
.section-register #form1 > table tr:has(.required) td.dataLabel::after {
   content: ' *';
   color: #c0392b;
   font-weight: 700;
}

/* rowspan tds — hide */
.section-register #form1 > table td[rowspan] {
   display: none;
}

/* Submit button */
.section-register #form1 input[type="submit"].button {
   min-width: 200px;
   padding: 13px 36px;
   font-size: 1em;
   border-radius: 8px;
   margin-top: 8px;
}

/* Upload button — contained, auto width */
.section-register #form1 .upload-btn,
.section-register #form1 input[type="button"].button {
   width: auto !important;
   padding: 7px 18px !important;
   font-size: .88em !important;
   margin-left: 0 !important;
   margin-top: 8px !important;
}

/* Labels — allow wrapping */
.section-register #form1 > table td.dataLabel {
   white-space: normal !important;
   word-break: break-word !important;
}

@media (max-width: 700px) {
   .section-register #form1 > table:not(.tblFiles) {
      grid-template-columns: 1fr;
   }
   .section-register #form1 {
      padding: 20px 16px;
   }
}

/* tblFiles — reset grid/flex back to normal table display */
.section-register #form1 > table.tblFiles {
   display: table !important;
   grid-template-columns: unset !important;
   margin: 12px 0 20px 0;
}
.section-register #form1 > table.tblFiles thead {
   display: table-header-group !important;
}
.section-register #form1 > table.tblFiles tbody {
   display: table-row-group !important;
}
.section-register #form1 > table.tblFiles tr {
   display: table-row !important;
   flex-direction: unset !important;
   padding-bottom: 0 !important;
   min-width: unset !important;
}
.section-register #form1 > table.tblFiles td,
.section-register #form1 > table.tblFiles th {
   display: table-cell !important;
}

/* ============================================================
   USER FORM — Change Email / Change Password
   ============================================================ */

.section-user #form1 {
   background: #ffffff;
   border: 1px solid #e2e8f0;
   border-radius: 14px;
   box-shadow: 0 4px 24px rgba(37,60,100,0.08);
   padding: 36px 40px 40px;
   max-width: 520px;
   margin: 28px auto 0;
}

.section-user #form1 table {
   width: 100%;
   border-collapse: collapse;
   background: none;
   box-shadow: none;
}

.section-user #form1 table tr {
   display: flex;
   flex-direction: column;
   margin-bottom: 20px;
}

.section-user #form1 table td {
   border: none !important;
   padding: 0 !important;
   background: none !important;
   width: auto !important;
}

.section-user #form1 table td.dataLabel {
   font-size: .78em;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: #4a5e80;
   padding-bottom: 6px !important;
}

.section-user #form1 table td.data input[type="text"],
.section-user #form1 table td.data input[type="password"],
.section-user #form1 table td.data input[type="email"] {
   width: 100% !important;
   box-sizing: border-box !important;
}

.section-user #form1 table td.data {
   font-size: .95em;
   color: #2c3e5a;
}

.section-user #form1 table td.data ~ td.data:empty,
.section-user #form1 table td.data ~ td.data:blank {
   display: none;
}

.section-user #form1 table tr:has(input[type="checkbox"]) {
   flex-direction: row;
   align-items: center;
   gap: 10px;
}

.section-user #form1 table tr:has(input[type="checkbox"]) td.dataLabel {
   font-size: .88em;
   text-transform: none;
   letter-spacing: 0;
   font-weight: 600;
   color: #2c3e5a;
   padding: 0 !important;
   order: 2;
}

.section-user #form1 table tr:has(input[type="checkbox"]) td.data {
   order: 1;
}

#msg_email, #status, #inf_email {
   font-size: .8em;
   color: #6b7a99;
   margin-top: 5px;
}

.section-user #form1 > p:last-of-type input[type="submit"] {
   width: 100%;
   padding: 12px;
   font-size: 1em;
   margin-top: 4px;
}

.section-user > p:first-of-type {
   text-align: center;
   font-size: .88em;
   color: #6b7a99;
   margin-bottom: 20px;
}

@media (max-width: 600px) {
   .section-user #form1 {
      padding: 24px 20px;
   }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.contact-page-wrapper {
   display: flex;
   gap: 72px;
   align-items: flex-start;
   max-width: 1060px;
   margin: 32px auto 0;
}

.contact-info-panel {
   flex: 0 0 320px;
   padding: 8px 0;
}

.contact-eyebrow {
   font-size: .92em;
   font-weight: 700;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: #A07830;
   margin: 0 0 14px 0;
}

.contact-heading {
   font-size: 2.2em;
   font-weight: 700;
   color: #1e3254;
   margin: 0 0 14px 0;
   line-height: 1.2;
   font-style: normal;
}

.contact-desc {
   font-size: 1.05em;
   color: #6b7a99;
   line-height: 1.6;
   margin: 0 0 32px 0;
}

.contact-info-items {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.contact-info-item {
   display: flex;
   align-items: flex-start;
   gap: 14px;
}

.contact-info-icon {
   width: 42px;
   height: 42px;
   border-radius: 10px;
   background: #f0f4fb;
   color: #37517B;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.contact-info-text {
   display: flex;
   flex-direction: column;
   gap: 3px;
}

.contact-info-text strong {
   font-size: 1.05em;
   font-weight: 700;
   color: #1e3254;
}

.contact-info-text span {
   font-size: 1em;
   color: #6b7a99;
   line-height: 1.4;
}

.contact-info-text a {
   color: #6b7a99;
   text-decoration: none;
}

.contact-info-text a:hover {
   color: #C9A84C;
}

.contact-form-panel {
   flex: 1;
   min-width: 0;
}

.section-contact form[name="form1"] {
   background: #ffffff;
   border: 1px solid #e2e8f0;
   border-radius: 14px;
   box-shadow: 0 4px 24px rgba(37,60,100,0.08);
   padding: 28px 32px 36px;
   width: 100%;
   box-sizing: border-box;
}

.section-contact form[name="form1"] .dataTable {
   width: 100%;
   border-collapse: collapse;
   background: none;
   box-shadow: none;
   border-radius: 0;
}

.section-contact form[name="form1"] .dataTable tr {
   display: flex;
   flex-direction: column;
   margin-bottom: 18px;
   border-bottom: 1px solid #f0f4f8;
   padding-bottom: 4px;
}

.section-contact form[name="form1"] .dataTable tr:last-child {
   border-bottom: none;
   margin-bottom: 0;
}

.section-contact form[name="form1"] .dataTable td.dataLabel {
   font-size: .78em !important;
   font-weight: 700 !important;
   text-transform: uppercase !important;
   letter-spacing: 0.08em !important;
   color: #4a5e80 !important;
   padding: 0 0 6px 0 !important;
   border: none !important;
   background: none !important;
   width: auto !important;
}

.section-contact form[name="form1"] .dataTable td.data {
   padding: 0 !important;
   border: none !important;
   background: none !important;
}

.section-contact form[name="form1"] .dataTable td.data input[type="text"],
.section-contact form[name="form1"] .dataTable td.data select,
.section-contact form[name="form1"] .dataTable td.data textarea {
   width: 100% !important;
   box-sizing: border-box !important;
}

.section-contact form[name="form1"] .dataTable td {
   width: auto !important;
   min-width: 0 !important;
}

.section-contact form[name="form1"] .dataTable td.data ~ td.data {
   display: none !important;
}

.section-contact form[name="form1"] .dataTable tr:has(.required) td.dataLabel::after {
   content: ' *';
   color: #c0392b;
   font-weight: 700;
}

.section-contact form[name="form1"] .dataTable {
   display: block;
}

.section-contact form[name="form1"] .dataTable tbody {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0 20px;
}

.section-contact form[name="form1"] .dataTable tr:nth-child(1) {
   grid-column: 1 / -1;
}

.section-contact form[name="form1"] .dataTable tr:nth-child(2) {
   grid-column: 1;
}

.section-contact form[name="form1"] .dataTable tr:nth-child(3) {
   grid-column: 2;
}

.section-contact form[name="form1"] .dataTable tr:nth-child(4),
.section-contact form[name="form1"] .dataTable tr:nth-child(5),
.section-contact form[name="form1"] .dataTable tr:nth-child(6) {
   grid-column: 1 / -1;
}

.section-contact form[name="form1"] .dataTable tr.contact-btn-row {
   grid-column: 1 / -1;
   border-bottom: none;
   margin-top: 4px;
}

.section-contact form[name="form1"] .dataTable tr.contact-btn-row td:first-child {
   display: none !important;
}

.section-contact form[name="form1"] .dataTable td.contact-btns-td {
   display: flex !important;
   flex-direction: row !important;
   gap: 14px;
   padding: 0 !important;
}

.section-contact form[name="form1"] .dataTable input[type="submit"] {
   width: auto !important;
   padding: 11px 28px !important;
}

.section-contact form[name="form1"] .dataTable input.contact-clear-btn {
   width: auto !important;
   padding: 11px 28px !important;
   background-color: #C9A84C !important;
   color: #ffffff !important;
}

.section-contact form[name="form1"] .dataTable input.contact-clear-btn:hover {
   background-color: #b8923e !important;
   box-shadow: 0 4px 12px rgba(201,168,76,0.35) !important;
   transform: translateY(-1px) !important;
}

@media (max-width: 860px) {
   .contact-page-wrapper {
      flex-direction: column;
      gap: 32px;
   }
   .contact-info-panel {
      flex: none;
      width: 100%;
   }
   .contact-info-items {
      flex-direction: row;
      flex-wrap: wrap;
   }
   .contact-info-item {
      flex: 1;
      min-width: 200px;
   }
}

@media (max-width: 600px) {
   .section-contact form[name="form1"] {
      padding: 20px 16px;
   }
   .section-contact form[name="form1"] .dataTable tbody {
      grid-template-columns: 1fr;
   }
   .section-contact form[name="form1"] .dataTable tr:nth-child(n) {
      grid-column: 1 / -1;
   }
   .contact-info-items {
      flex-direction: column;
   }
}

/* ============================================================
   BREW PAGE — 2 column layout
   ============================================================ */

.brew-page-wrapper {
   display: flex;
   gap: 40px;
   align-items: flex-start;
   margin-top: 28px;
}

.brew-form-panel {
   flex: 1;
   min-width: 0;
}

.brew-tips-panel {
   flex: 0 0 280px;
   background: #f7f9fc;
   border: 1px solid #e2e8f0;
   border-left: 3px solid #A07830;
   border-radius: 12px;
   padding: 28px 24px;
   position: sticky;
   top: 76px;
}

.brew-tips-eyebrow {
   font-size: .75em;
   font-weight: 700;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: #A07830;
   margin: 0 0 10px 0;
}

.brew-tips-heading {
   font-size: 1.1em;
   font-weight: 700;
   color: #1e3254;
   margin: 0 0 20px 0;
   padding-bottom: 12px;
   border-bottom: 1px solid #e2e8f0;
}

.brew-tip-item {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   margin-bottom: 18px;
}

.brew-tip-item:last-child {
   margin-bottom: 0;
}

.brew-tip-icon {
   width: 36px;
   height: 36px;
   border-radius: 8px;
   background: #eef2f8;
   color: #37517B;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.brew-tip-text {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.brew-tip-text strong {
   font-size: .92em;
   font-weight: 700;
   color: #1e3254;
}

.brew-tip-text span {
   font-size: .85em;
   color: #6b7a99;
   line-height: 1.5;
}

@media (max-width: 900px) {
   .brew-page-wrapper {
      flex-direction: column;
   }
   .brew-tips-panel {
      flex: none;
      width: 100%;
      position: static;
      box-sizing: border-box;
   }
}

/* ============================================================
   BREW FORM — Add / Edit Entry
   ============================================================ */

.section-brew #form1 {
   background: none;
   border: none;
   box-shadow: none;
   padding: 0;
   width: 100%;
}

.brew-form-panel {
   background: #ffffff;
   border: 1px solid #e2e8f0;
   border-radius: 14px;
   box-shadow: 0 4px 24px rgba(37,60,100,0.08);
   padding: 32px 36px 40px;
   margin-top: 0;
}

.section-brew #form1 h2 {
   font-size: 1.05em;
   font-weight: 700;
   color: #1e3254;
   text-transform: none;
   border-bottom: 2px solid #C9A84C;
   padding-bottom: 8px;
   margin: 0 0 20px 0;
   display: inline-block;
}

.section-brew #form1 table {
   width: 100%;
   border-collapse: collapse;
   background: none;
   box-shadow: none;
   border-radius: 0;
   table-layout: auto !important;
}

.section-brew #form1 table td.dataLabel {
   font-size: .78em !important;
   font-weight: 700 !important;
   text-transform: uppercase !important;
   letter-spacing: 0.07em !important;
   color: #4a5e80 !important;
   padding: 14px 16px 6px 0 !important;
   vertical-align: top !important;
   white-space: normal !important;
   width: 35% !important;
   border: none !important;
   background: none !important;
}

.section-brew #form1 table td.data {
   padding: 14px 0 6px 0 !important;
   border: none !important;
   background: none !important;
   vertical-align: top !important;
}

.section-brew #form1 table tr {
   border-bottom: 1px solid #f0f4f8;
}

.section-brew #form1 table tr:last-child {
   border-bottom: none;
}

.section-brew #form1 table tr:hover {
   background: #fafbfe;
}

.section-brew #form1 table td.data select {
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
}

.section-brew #form1 table td.data textarea {
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
   resize: vertical;
}

.section-brew #form1 table td.data input[type="text"]:not([style*="width:1px"]),
.section-brew #form1 table td.data input[type="number"],
.section-brew #form1 table td.data input[type="email"] {
   width: 100%;
   box-sizing: border-box;
}

.section-brew #form1 table td.data {
   width: 48%;
   min-width: 0;
}

.section-brew #form1 table td:not(.dataLabel):not(.data) {
   font-size: .78em;
   color: #c0392b;
   vertical-align: top;
   padding: 14px 0 6px 8px !important;
   width: 17%;
}

.section-brew #form1 table td.data > span.required {
   display: none;
}

.section-brew #form1 table tr:has(.required) td.dataLabel::after {
   content: ' *';
   color: #c0392b;
   font-weight: 700;
}

.section-brew #form1 table td.data:empty {
   display: none;
}

.section-brew #form1 p:has(.brew-submit-btn) {
   text-align: center;
}

.brew-submit-btn {
   display: inline-flex !important;
   align-items: center !important;
   gap: 10px !important;
   min-width: 200px !important;
   padding: 14px 36px !important;
   font-size: 1.05em !important;
   font-weight: 700 !important;
   background: linear-gradient(135deg, #1e3254 0%, #37517B 100%) !important;
   border-radius: 50px !important;
   border: none !important;
   letter-spacing: 0.03em !important;
   box-shadow: 0 4px 16px rgba(37,60,100,0.25) !important;
   transition: transform 0.15s, box-shadow 0.15s, background 0.15s !important;
   color: #ffffff !important;
   cursor: pointer !important;
}

.brew-submit-btn:hover {
   background: linear-gradient(135deg, #37517B 0%, #4a6fa5 100%) !important;
   box-shadow: 0 6px 22px rgba(37,60,100,0.35) !important;
   transform: translateY(-2px) !important;
}

.brew-submit-btn:active {
   transform: translateY(0) !important;
   box-shadow: 0 2px 8px rgba(37,60,100,0.20) !important;
}

.brew-upload-btn {
   display: inline-flex !important;
   align-items: center !important;
   gap: 7px !important;
   background: transparent !important;
   color: #37517B !important;
   border: 1.5px solid #37517B !important;
   border-radius: 6px !important;
   padding: 6px 16px !important;
   font-size: .88em !important;
   font-weight: 600 !important;
   min-height: unset !important;
   height: auto !important;
   cursor: pointer !important;
   transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s !important;
   margin-left: 12px !important;
   margin-top: 10px !important;
   box-shadow: none !important;
   line-height: 1.4 !important;
}

.brew-upload-btn svg {
   flex-shrink: 0;
   transition: stroke 0.15s;
}

.brew-upload-btn:hover {
   background: #37517B !important;
   color: #ffffff !important;
   box-shadow: 0 3px 10px rgba(37,60,100,0.20) !important;
   transform: translateY(-1px) !important;
}

.section-brew #form1 #errorDiv {
   margin-bottom: 12px;
}

.section-brew #form1 table tr:first-of-type td.data {
   font-size: .95em;
   color: #2c3e5a;
   font-weight: 500;
}

@media (max-width: 768px) {
   .section-brew #form1 {
      padding: 20px 16px;
   }
   .section-brew #form1 table td.dataLabel {
      width: auto !important;
      display: block !important;
      padding-bottom: 2px !important;
   }
   .section-brew #form1 table td.data {
      display: block !important;
      padding-top: 2px !important;
      width: 100% !important;
   }
}

.data {
}

.data-left {
}

.icon {
}

.dataTableCompact  {
}

.dataTableCompact td {
}

.dataTableCompact th {
   background-color: #bec8d8;
}

/* ------------------------------- Forms ------------------------------- */

.button {
   border: 1px solid #aaaaaa;
   font-weight: bold;
}

.button:hover {
   border: 1px solid #aaaaaa;
   background-color: #bec8d8;
}

.paypal {
}

/* ------------------------------- Collapse jquery ------------------------------- */

.trigger {
}

.trigger a {
}

.trigger a:link, .trigger a:visited, .trigger a:hover, .trigger a:active {
}

.toggle_container {
/* Use the following for accordian */
/* display: none */
}

.toggle_container a {
/* Use the following for accordian */
/* display: block */
}

/* ------------------------------- Admin ------------------------------- */

.admin {
}

.admin_default {
   margin: 0 0 1.5em 0;
   padding: 0 .5em 0 0;
}

.admin_default ul {
   display: inline;
}

.admin_default li {
   display: inline;
   list-style-type: none;
   padding: 0 1.5em 0 0;
   margin: 0;
}

.admin_default li li {
   display: inline;
   list-style-type: none;
   padding: 0 1.5em 0 0;
   margin: 0;
}

.admin_default_header {
   font-size: 1em;
   font-weight: bold;
   margin: 1.5em 0 .5em 0;
   padding: 0 0 .5em 0;
}

/* -- Admin Menu -- */
.menu {
}

/* -- Admin Sub-Navigation -- */
.adminSubNavContainer {
}

.adminSubNav {
}

/* ------------------------------- Sponsor Display ------------------------------- */

#sponsor {
}

#sponsor li {
}

.looper {
}

.looper_large {
}

.looper_large th {
}

.looper_large .location {
}

.looper_large .logo {
}

.looper_large .info {
}

/* ------------------------------- Setup ------------------------------- */

.setupTitle {
}

/* ------------------------------- Colors ------------------------------- */

.red {
}

.green {
}

.yellow {
}

.orange {
}

.blue {
}

/* ------------------------------- Borders ------------------------------- */

.bdr1 {
   border: 1px solid #394a59;
}

.bdr1T {
   border-top: 1px solid #394a59;
}

.bdr1B {
   border-bottom: 1px solid #394a59;
}

.bdr1B_dashed {
}

.bdr1T_dashed {
}

/* --------------------- messages.css Overrides -------------------- */

.info {
}

.closed {
}

.error {
}

.required {
}

.judge-alert {
}

.bos {
}

.at-a-glance {
}

/* --------------------- menus.css Overrides -------------------- */

/* --------------------- sorting.css Overrides -------------------- */