/* Global Styles */
 
*{
    padding: 0; /* Reset all padding to 0 */
    margin: 0; /* Reset all margin to 0 */
}

:root {
    --font-body: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    --font-heading: Georgia, "Times New Roman", serif;
    --font-size-base: 15px;
    --font-size-sm: 0.85em;
    --font-size-md: 1em;
    --font-size-lg: 1.5em;
    --line-height-base: 1.5;
    --color-text: #464646;
    --color-text-muted: #6b6b6b;
    --color-link: darkblue;
    --color-link-accent: #004a00;
    --color-link-hover: #a07f00;
    --color-bg: #f6f4ee;
    --color-surface: #f9f8f3;
    --color-surface-soft: #f2f0e6;
    --color-surface-muted: #f6f6f6;
    --color-surface-hover: #eef8ee;
    --color-surface-alt: #F0F0F0;
    --color-surface-subtle: #DDD;
    --color-border: #b9b3a6;
    --color-border-muted: #b0b0b0;
    --color-border-strong: #888;
    --color-border-light: #DFDFDF;
    --color-border-subtle: #ced4da;
    --color-primary: #007bff;
    --color-primary-strong: #0069d9;
    --color-success: #28a745;
    --color-success-strong: #218838;
    --color-danger: #dc3545;
    --color-danger-strong: #bd2130;
    --color-accent: #114508;
    --color-accent-bright: #108250;
    --color-warning: #a07f00;
    --color-highlight: yellow;
    --color-carpool-bg: rgba(0,100,255,0.25);
    --color-carpool-link: blue;
    --color-carpool-text: gray;
    --color-carpool-hover: orange;
    --color-donation-bg: rgba(0,255,100,0.25);
    --color-donation-link: green;
    --color-donation-text: gray;
    --color-donation-hover: orange;
    --color-header-bg: #464646;
    --color-header-text: #FFFFF3;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-light: #eee;
    --color-gray: #999;
    --color-gray-dark: #888;
    --color-home-border: #73AD21;
    --color-home-bg: rgba(150, 255, 150, 0.75);
    --color-input-bg: rgba(255, 255, 255, 0.5);
    --color-banner-text: #ffffff;
    --color-banner-shadow: darkgreen;
    --color-button-bg: #f4f3ef;
    --border-width-sm: 1px;
    --border-width-md: 2px;
    --size-input-height: 38px;
    --size-checkbox: 1.5em;
    --size-checkbox-offset: -0.5em;
    --size-calendar-column: 3em;
    --size-banner-height: 300px;
    --size-popup: 800px;
    --size-log-popup-top: 10px;
    --size-log-popup-padding: 10px;
    --size-outing-image: 300px;
    --size-header-padding: 10px;
    --size-wrap-padding: 10px;
    --size-banner-padding: 5em;
    --size-spacing-md: 10px;
    --size-paragraph-margin: 10px;
    --size-popup-close-top: 15px;
    --size-popup-close-right: 20px;
    --size-banner-margin: 0.8em;
    --size-input-padding: 8px;
    --size-button-padding: 8px;
    --size-button-padding-inline: 14px;
    --size-radius-pill: 50%;
    --size-switch-height: 1.4em;
    --size-switch-padding-y: 0.3em;
    --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.12);
    --shadow-card: 0 6px 16px rgba(38, 33, 20, 0.08);
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --space-xs: 0.25em;
    --space-sm: 0.5em;
    --space-md: 1em;
    --space-lg: 1.5em;
    --space-xxs: 0.1em;
    --line-height-banner: 1.5em;
}
/*
html {
    width: 100%;
    height: 100%;
}
*/
body{
    /*
    background: var(--color-bg);
*/
    font: var(--font-size-base) var(--font-body);  /* Set global font size & family */
    color: var(--color-text); /* Set global text color */
    line-height: var(--line-height-base);
	padding: var(--space-md);
    width: 100%;
    height: 100%;
}

html.page-height-auto,
body.page-height-auto {
    height: auto;
}

body.page-padding {
    padding: var(--space-sm);
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.whole {
    padding: var(--space-sm);
    margin: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    /*
    background-color: var(--color-surface-soft);
*/
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='92' viewBox='0 0 112 92'%3E%3Cg fill='%23248e35' fill-opacity='0.05'%3E%3Cpath fill-rule='evenodd' d='M72 10H40L16 20H0v8h16l24-14h32l24 14h16v-8H96L72 10zm0-8H40L16 4H0v8h16l24-6h32l24 6h16V4H96L72 2zm0 84H40l-24-6H0v8h16l24 2h32l24-2h16v-8H96l-24 6zm0-8H40L16 64H0v8h16l24 10h32l24-10h16v-8H96L72 78zm0-12H40L16 56H0v4h16l24 14h32l24-14h16v-4H96L72 66zm0-16H40l-24-2H0v4h16l24 6h32l24-6h16v-4H96l-24 2zm0-16H40l-24 6H0v4h16l24-2h32l24 2h16v-4H96l-24-6zm0-16H40L16 32H0v4h16l24-10h32l24 10h16v-4H96L72 18z'/%3E%3C/g%3E%3C/svg%3E");
}

.whole table,
.whole label,
.whole h4 {
    margin-top: var(--space-md);
}

.checkbox-field {
    margin-top: var(--space-xs);
}

.checkbox-field .form-check-input {
    margin: 0;
}

.radio-set .form-check-input {
    margin-top: 0;
}

.radio-set .form-check-label {
    margin-top: 0;
}

.whole hr,
hr.standard-rule {
    border-top: var(--border-width-sm) solid var(--color-border-strong);
}

.rule-muted {
    border-top: var(--border-width-sm) solid var(--color-border-muted);
    width: 98%;
    margin: var(--space-md) auto;
    text-align: center;
}

.whole td,
.whole th,
table.data-table td,
table.data-table th {
    vertical-align: middle !important;
}

.table .item,
.table .item th,
.table .item td,
.table th.item,
.table td.item {
    text-align: center;
}

.highlight {
    font-weight: bold;
}

.calendar-column {
    max-width: var(--size-calendar-column);
}

.calendar-cell {
    padding: 0;
}

.calendar-center {
    display: flex;
    width: 100%;
    justify-content: center;
}

.mail-page input.btn {
    margin-bottom: var(--space-xs);
}

.mail-fields {
}

.mail-infobox {
    width: 30em;
    max-width: 80%;
    height: 22em;
    max-height: 80%;
    left: 50%;
    transform: translateX(-50%);
    top: 30px;
    position: fixed;
    display: none;
    text-align: center;
    vertical-align: middle;
    z-index: 99;
    overflow: auto;
}

.mail-infobox .infocontent {
    margin-top: 0;
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-lg);
}

.mail-infobox p {
    text-align: right;
    font-weight: bold;
    font-size: 1.3em;
    margin-bottom: 0;
}

.mail-infobox p a {
    border: var(--border-width-sm) solid var(--color-link);
    position: fixed;
    top: 2px;
    right: 20px;
}

.mail-top-spacing {
    margin-top: var(--space-md);
}

.mail-how-options {
    margin-bottom: var(--space-md);
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: center;
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.mail-how-options .form-check-inline {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    align-items: stretch;
}

.mail-how-options .form-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mail-how-options .form-check-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border: 0;
    background-color: var(--color-surface-alt);
    color: var(--color-text);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    width: 100%;
    height: 100%;
}

.mail-how-options .form-check-inline + .form-check-inline .form-check-label {
    border-left: var(--border-width-sm) solid var(--color-border);
}

.mail-how-options .form-check-inline:first-child .form-check-label {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.mail-how-options .form-check-inline:last-child .form-check-label {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.mail-how-options .form-check-input:checked + .form-check-label {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary-strong);
    box-shadow: none;
}

.mail-how-options .form-check-input:focus + .form-check-label {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
}

.mail-test-label {
    margin-left: var(--space-sm);
}

.mail-test-input {
    display: inline;
    width: 25em;
    margin-left: var(--space-sm);
}

.mail-bcc-block {
    border-bottom: var(--border-width-sm) solid var(--color-gray-dark);
    margin-bottom: var(--space-sm);
}

.mail-placeholder-note {
    font-style: italic;
    font-size: var(--font-size-sm);
    text-align: center;
}

.mail-placeholder-list {
    padding: var(--space-md);
}

.mail-placeholder-empty {
    width: 100%;
    text-align: center;
    margin: auto;
}

.send-test-group {
    border: var(--border-width-sm) solid var(--color-gray-dark);
    background-color: var(--color-surface-alt);
    border-radius: var(--radius-sm);
}

.send-test-input {
    background-color: var(--color-surface-subtle);
    margin: var(--space-xs);
    border: var(--border-width-sm) solid var(--color-gray);
}

save-to-dropbox-container {
    display: none;
}

.form-check-inline {
    display: inline;
    margin-right: var(--space-md);
}

.form-check-input {
    margin-left: 0;
    vertical-align: middle;
    margin-bottom: 0.4em !important;
}

.select2-container .select2-selection--single {
    height: var(--size-input-height) !important;
    padding: 5px;
    border: var(--border-width-sm) solid var(--color-border-subtle);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}

div.tox-tinymce {
    height: 30em !important;
}

.btn {
    display: inline-block;
    padding: var(--size-button-padding) var(--size-button-padding-inline);
    margin: 2px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: var(--border-width-sm) solid;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: var(--shadow-soft);
}

.btn-delete,
.btn-makeactive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 70px;
    padding: 0 6px;
    line-height: 1.1;
}

.btn-delete {
    color: var(--color-danger);
    background-color: var(--color-white);
    border-color: var(--color-danger);
}

.btn-delete:hover {
    color: var(--color-white);
    background-color: var(--color-danger);
    border-color: var(--color-danger-strong);
}

.btn-makeactive {
    color: var(--color-success);
    background-color: var(--color-white);
    border-color: var(--color-success);
    font-size: 11px;
    white-space: normal;
}

.btn-makeactive:hover {
    color: var(--color-white);
    background-color: var(--color-success);
    border-color: var(--color-success-strong);
}

.btn-update {
    color: var(--color-primary);
    background-color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-update:hover {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary-strong);
}

.form-checkbox-large {
    width: var(--size-checkbox);
    margin-top: var(--size-checkbox-offset) !important;
    margin-bottom: var(--space-sm) !important;
}

.guestof {
    display: none;
}

.entry-form {
    margin-top: var(--space-md);
}

.outing-select {
    margin-bottom: var(--space-md);
    font-weight: bold;
}

.whole.full-height {
    height: unset;
}

.outingtable {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: var(--border-width-sm) solid var(--color-border);
    background-color: var(--color-surface);
    font-size: var(--font-size-md);
}

.outingrow {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: stretch;
}

.outingcell {
    flex: 1 1 25%;
    min-width: 0;
    padding: 0.3em var(--space-sm);
    box-sizing: border-box;
    word-break: break-word;
    border-top: var(--border-width-sm) solid var(--color-border);
    border-bottom: var(--border-width-sm) solid var(--color-border);
    border-left: var(--border-width-sm) solid var(--color-border);
}

.outingcell:nth-child(4n+1) {
    border-left: none;
}

.outingcell a {
    text-decoration: none;
    color: var(--color-link-accent);
    font-weight: 500;
    transition: color 0.2s ease;
}

.outingcell a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.command .outingcell:hover {
    background-color: var(--color-surface-hover);
}

.cellheading {
    text-align: left;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.outingrow:first-child .outingcell {
    border-top: none;
    border-bottom: none;
}

.outingdescription {
    padding: var(--space-sm);
    width: 100%;
    box-sizing: border-box;
    border-bottom: none;
    background-color: var(--color-surface);
}

.outingtable .outingrow:last-of-type .outingcell {
    border-bottom: none;
}

@media screen and (max-width: 600px) {
    .outingrow {
        flex-direction: column;
    }

    .outingcell {
        flex: 1 1 100%;
        border-left: none;
        border-top: none;
        border-bottom: var(--border-width-sm) solid var(--color-border) !important;
        box-sizing: border-box;
    }

    .outingtable .outingrow:last-child .outingcell:last-child {
        border-bottom: none !important;
    }
}

.error {
    border-color: var(--color-danger);
}

.error-message {
    color: var(--color-danger);
    font-style: italic;
    margin-bottom: var(--space-md);
}

.actions {
    padding: 0.4em;
    width: 100%;
    margin: auto;
    margin-bottom: var(--space-lg);
}

.updateform {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

.updateform input[type="submit"],
.updateform input[type="text"] {
    flex: 1 1 auto;
    min-width: 150px;
    max-width: 100%;
}

td.updateuser {
    vertical-align: top;
}

input.updateuser[type=submit] {
    padding-left: 0.3em;
    padding-right: 0.3em;
}

input.updateuser[type=text] {
    border: var(--border-width-sm) solid var(--color-link);
}

.infobox {
    display: none;
    position: fixed;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    overflow: auto;
}

.donation-link {
    font-weight: bold;
    color: var(--color-donation-link);
}

.donation-link:hover {
    color: var(--color-donation-hover);
}

.donation, .carpool {
    padding: 4px 8px;
    border-radius: var(--radius-md);
    margin: .5em;
}

.donation {
    color: var(--color-donation-text);
    background-color: var(--color-donation-bg);
}

.carpool-link {
    font-weight: bold;
    color: var(--color-carpool-link);
}

.carpool-link:hover {
    color: var(--color-carpool-hover);
}

.carpool {
    color: var(--color-carpool-text);
    background-color: var(--color-carpool-bg);
}

.outingimage {
    max-width: 100%;
    max-height: var(--size-outing-image);
    height: auto;
    display: block;
    margin: 0 auto;
}

.intro {
    margin-top: var(--space-sm);
    font-style: italic;
}

.already-registered {
    color: var(--color-text-muted);
}

.visually-hidden {
    display: none;
}

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

.outingimage-link {
    display: inline-block;
}

.count-label,
.submit-button {
    margin-top: 0.6em;
}

.registered-block {
    display: block;
}

.full-message {
    color: var(--color-danger);
}

.confirmation-body {
    padding: 2em;
}

.confirmation-panel {
    height: unset;
}

.callout-strong {
    font-weight: bold;
}

.hidden {
    display: none;
}

.outingintro {
    font-size: var(--font-size-base);
}

.outingintro h2 {
    text-align: left;
}

.outingintro .intro-heading {
    color: var(--color-accent);
    font-weight: bold;
}

.outingintro .intro-point {
    color: var(--color-accent-bright);
    font-weight: bold;
}

li.intro-point {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
    color: var(--color-accent-bright);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

li.intro-point::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--color-white), var(--color-accent-bright));
    box-shadow: var(--shadow-soft);
    flex-shrink: 0;
}

.outingintro .intro-text {
    font-weight: 400;
}

.waiver-page {
    padding: var(--space-sm);
}

.waiver-page h1 {
    font-size: var(--font-size-lg);
}

.waiver-page h2 {
    font-size: 1.2em;
}

.waiver-page h1,
.waiver-page h2 {
    text-align: center;
    text-transform: uppercase;
}

.waiver-page table,
.waiver-page tr,
.waiver-page th,
.waiver-page td {
    border: none;
}

.waiver-page td {
    padding: var(--space-sm);
}

.waiver-page .summary-heading th {
    background-color: var(--color-white);
    width: 6em;
    font-weight: bold;
}

.waiver-page .summary-heading td {
    background-color: var(--color-white);
    border-bottom: var(--border-width-md) solid var(--color-black);
}

.waiver-page .signups-heading th {
    background-color: var(--color-white);
    font-weight: bold;
    text-align: center;
}

.waiver-page input {
    margin-bottom: var(--space-md);
}

.waiver-page table.signups,
.waiver-page table.signups tr,
.waiver-page table.signups th,
.waiver-page table.signups td {
    border: var(--border-width-sm) solid var(--color-black);
}

.waiver-page table.signups {
    border-collapse: collapse;
}

.waiver-page .headertable {
    width: 100%;
}

.waiver-page .waiver-half {
    width: 50%;
}

.waiver-page .waiver-col-wide {
    width: 20em;
}

.waiver-page .waiver-col-medium {
    width: 13em;
}

.waiver-page .waiver-col-narrow {
    width: 12em;
}

.waiver-page .waiver-col-small {
    width: 6em;
}

.waiver-page .waiver-error {
    color: var(--color-danger);
}

.sierra-waiver {
    font-size: var(--font-size-base);
}

.sierra-waiver h2 {
    font-weight: bold;
    margin-top: 0;
}

.sierra-waiver h3 {
    font-size: 0.9em;
    font-style: italic;
    font-weight: bold;
    margin-top: 0;
}

.sierra-waiver h1,
.sierra-waiver h2,
.sierra-waiver h3 {
    text-align: center;
}

.sierra-waiver .communication {
    font-style: normal;
    font-weight: normal;
    margin-top: var(--space-md);
}

.sierra-waiver h4 {
    text-align: right;
    font-size: 0.7em;
}

.sierra-waiver .headerhr {
    border-top: solid var(--border-width-sm) var(--color-black);
    margin: 0;
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs);
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.sierra-waiver li {
    list-style: disc inside;
}

.sierra-waiver ul {
    margin-top: var(--space-md);
    margin-bottom: var(--space-xxs);
    text-indent: -20px;
    margin-left: 20px;
}

.sierra-waiver .doublecell {
    padding-left: 0;
    padding-right: 0;
}

.sierra-waiver .signups-heading th {
    background-color: var(--color-highlight);
}

.sierra-waiver .headertable {
    width: 100%;
    border-collapse: collapse;
}

.sierra-waiver .headertable,
.sierra-waiver .headertable td {
    border: var(--border-width-md) solid var(--color-black);
}

.sierra-waiver .qr {
    position: absolute;
    right: 0;
    top: 0;
    width: 5em !important;
    height: 5em !important;
}

.sierra-waiver .paid-cell {
    text-align: right;
}

.sierra-waiver .member-toggle {
    font-weight: bold;
    text-align: center;
}

.sierra-waiver .sierra-col-wide {
    width: 17em;
}

.sierra-waiver .sierra-col-medium {
    width: 13em;
}

.sierra-waiver .sierra-col-narrow {
    width: 12em;
}

.sierra-waiver .sierra-col-small {
    width: 7em;
}

.sierra-waiver .sierra-col-tiny {
    width: 3em;
}

.sierra-waiver .sierra-col-mini {
    width: 2em;
}

.form-page input,
.form-page textarea {
    margin-bottom: var(--space-md);
}

.form-page input[type=checkbox] {
    width: var(--size-checkbox);
    margin-top: var(--size-checkbox-offset) !important;
    margin-bottom: var(--space-sm) !important;
}

.form-page .radio-set {
    margin-left: var(--space-md);
    margin-bottom: var(--space-md);
    background-color: rgba(255, 255, 255, 0.5);
}

.form-page .radio-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-surface);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: 999px;
    padding: var(--size-switch-padding-y) 0;
    gap: var(--space-xxs);
    line-height: 1;
    height: calc(var(--size-switch-height) + (var(--size-switch-padding-y) * 2));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

.form-page .radio-switch-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.form-page .radio-switch-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--size-switch-height);
    padding: 0 var(--space-md);
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    line-height: 1;
    border: var(--border-width-sm) solid var(--color-border-muted);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0.03));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 2px rgba(0, 0, 0, 0.08);
    color: var(--color-text-muted);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.form-page .radio-switch-label:first-of-type {
    margin-left: var(--space-xs);
}

.form-page .radio-switch-label:last-of-type {
    margin-right: var(--space-xs);
}

.form-page .form-actions {
    margin-top: var(--space-md);
}

.form-page .radio-switch-input:checked + .radio-switch-label {
    background-color: var(--color-link-accent);
    color: var(--color-white);
    border-color: var(--color-link-accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 6px rgba(0, 0, 0, 0.18);
}

.form-page .radio-switch-input:focus-visible + .radio-switch-label {
    outline: 2px solid var(--color-link-hover);
    outline-offset: 2px;
}

.form-page .required {
    border-color: var(--color-danger);
}

.form-page .required-indicator {
    color: var(--color-danger);
}

.upload-link {
    margin-top: calc(-1 * var(--space-md));
    margin-bottom: calc(var(--space-md) * 2);
}

.log-popup {
    position: fixed;
    top: var(--size-log-popup-top);
    left: 50%;
    transform: translate(-50%, 0%);
    width: var(--size-popup);
    max-width: 100%;
    max-height: 100%;
    height: var(--size-popup);
    text-align: left;
    box-sizing: border-box;
    padding: var(--size-log-popup-padding);
    z-index: 100;
    display: none;
    overflow: auto;
}

.log-popup-close {
    position: absolute;
    right: var(--size-popup-close-right);
    top: var(--size-popup-close-top);
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: var(--size-radius-pill);
    padding: 4px;
}

.log-popup h5 {
    font-size: 1.2em;
    font-weight: bold;
}

.leader-info-page div.tox-tinymce {
    height: 30em !important;
}

.howto-item {
    color: var(--color-danger);
    font-weight: bold;
}

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

.howto-image-img {
    max-width: 500px;
    margin: auto;
}

.howto-list {
    padding-left: 2em;
}

.howto-list-alt {
    margin-left: 2em;
}

.calendar-page .fc-event-time,
.calendar-page .fc-event-title {
    padding: 0 1px;
    white-space: normal;
}

@media only screen and (max-width:640px) {
    .calendar-page .fc-event-time {
        display: none;
    }
}

.schedule-page input {
    margin-bottom: var(--space-md);
}

.schedule-page input[type=checkbox] {
    width: var(--size-checkbox);
    margin-top: var(--size-checkbox-offset) !important;
    margin-bottom: var(--space-sm) !important;
}

.schedule-page table.outingdescription,
.schedule-page table.outingdescription tr {
    margin: var(--space-xs);
    padding: var(--space-sm);
    width: 100%;
    background-color: var(--color-surface);
    border-collapse: collapse;
}

.schedule-page table.outingdescription,
.schedule-page table.outingdescription tr,
.schedule-page table.outingdescription td {
    border: var(--border-width-sm) solid var(--color-border);
}

.schedule-page table.outingdescription td {
    padding: var(--space-xxs) var(--space-sm);
}

.schedule-page .cellheading {
    text-align: left;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.schedule-page .celltext {
    text-align: right;
}

.schedule-page .inactive {
    font-style: italic;
}

.schedule-page .outingimg {
    max-width: 100%;
    max-height: var(--size-outing-image);
    height: auto;
    margin: auto;
    margin-bottom: 0.7em;
    display: block;
}

.schedule-page .whole {
    height: auto;
    min-height: 100%;
}

.schedule-page .hide {
    display: none;
}

.schedule-page .calbutton {
    text-align: center;
    width: var(--space-xxs);
    background-color: transparent;
}

.schedule-page .atcb-button-wrapper .atcb-button,
.schedule-page .atcb-initialized .atcb-button-wrapper {
    padding: 0 !important;
}

.schedule-image-wrap {
    text-align: center;
}

.schedule-image-link {
    display: inline-block;
}

.schedule-full-message {
    color: var(--color-danger);
}

.whole input[type=number], 
.whole input[type=text], 
.whole input[type=email], 
.whole input[type=time], 
.whole input[type=date], 
.whole input[type=radio], 
.whole textarea, 
.whole select {
  background-color: var(--color-input-bg);
}
 
p{
    margin: var(--size-paragraph-margin) 0px var(--size-paragraph-margin) 0px; /* Add some padding to the top and bottom of the <p> tags */
}
 
/* Header */
 
#header{
    height: 45px; /* Set header height */
    background: var(--color-header-bg); /* Set header background color */
}
 
#header h3{
    color: var(--color-header-text); /* Set header heading(top left title ) color */
    padding: var(--size-header-padding); /* Set padding, to center it within the header */
    font-weight: normal; /* Set font weight to normal, default it was set to bold */
}
 
/* Wrap */
 
#wrap{
    background: var(--color-white); /* Set content background to white */
    width: 615px; /* Set the width of our content area */
    margin: 0 auto; /* Center our content in our browser */
    margin-top: 50px; /* Margin top to make some space between the header and the content */
    padding: var(--size-wrap-padding); /* Padding to make some more space for our text */
    border: var(--border-width-sm) solid var(--color-border-light); /* Small border for the finishing touch */
    text-align: center; /* Center our content text */
}
 
#wrap h3{
    font: italic 22px var(--font-heading); /* Set font for our heading 2 that will be displayed in our wrap */
}
 
/* Form & Input field styles */
 
form{
    margin-top: var(--size-spacing-sm); /* Make some more distance away from the description text */
}
 
form .submit_button{
    background: var(--color-button-bg); /* Set button background */
    border: var(--border-width-sm) solid var(--color-border-light); /* Small border around our submit button */
    padding: var(--size-button-padding); /* Add some more space around our button text */
}
 
input{
    /* font: normal 16px Georgia;*/ /* Set font for our input fields */
    border: var(--border-width-sm) solid var(--color-border-light); /* Small border around our input field */
    padding: var(--size-input-padding); /* Add some more space around our text */
}

input[type="submit"],
input[type="button"],
button,
select {
    padding: var(--size-button-padding) var(--size-button-padding-inline);
    border-radius: var(--radius-sm);
}

 div.banner {
  width: 100%;
  height: var(--size-banner-height);
  text-align: center;
  margin-bottom: var(--size-banner-margin);
  background-image: url('https://mauihikes.org/planting/Auwahi_Dryland_Forest.JPG');
  background-size: 100% 100%;
  background-repeat: no-repeat;
 }

p.banner {
  color: var(--color-banner-text);
  width: 100%;
  height: 100%;
  padding-top: var(--size-banner-padding);
 }

span.banner {
  vertical-align: middle;
  font-size: 4em;
  text-shadow: 2px 2px 10px var(--color-banner-shadow);
 }

span.helptext {
	 color: var(--color-link);
}
 
.homeButton {
  border: var(--border-width-md) solid var(--color-home-border);
  background-color: var(--color-home-bg);
  color: var(--color-black);
  font-size: .8em;
  font-weight: normal;
  border-radius: var(--radius-md); 
  line-height: var(--line-height-banner);
  padding: 0.3em;
  text-transform: none;
	position: fixed;
	top: var(--size-log-popup-top);
	left: 0px;
	z-index: 200000;
}

div.outing {
    margin-bottom: 1em;
    /*
    height: 50em;
    overflow: auto;
*/
}
.atcb-dropdown, .atcb-popup {
  z-index: 9999 !important;
}

add-to-calendar-button {
  position: relative;
  z-index: 1000;
}

 @media only screen and (max-width:640px) {
     span.banner {
 	     font-size: 2.5em !important;
     }
 }
.card {
    background-color: var(--color-surface);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    box-shadow: var(--shadow-card);
}

.card-heavy {
    border-width: 4px;
}

.card-muted {
    background-color: var(--color-surface-muted);
}

.card-outline {
    border-color: var(--color-border-muted);
}

.text-muted {
    color: var(--color-text-muted);
}

/* Hikes page overrides (formerly hikes.css) */
.hikes-page {
     margin: 0.5em;
}

.hikes-page h1 {
   margin-bottom: 0.5em;
}

.hikes-page th,
.hikes-page td {
    padding: 0.5em;
}

.hikes-page th {
   text-align: left;
   background-color: #d8dfdf;
}

.hikes-page .instructions {
    font-style: italic;
}

.hikes-page a {
  color: #01AAA9;
}

.hikes-page a:hover,
.hikes-page a:focus,
.hikes-page a:active {
	 color: #A0953A;
}

.hikes-page .query {
       border: 0px none;
}

.hikes-page .label {
	width: 10em;
}

.hikes-page .field-input {
	width: 50em;
}

.hikes-page .full-table {
/*
	width: 80em;
*/
}

.hikes-page .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: 0.4em;
    font-size: 14px;
}

.hikes-page .counts {
    text-align: right;
    width: 4em;
}

.tox .tox-statusbar__branding a {
    display: none !important;
}

/* ===== Consolidated utility classes ===== */
/* Replaces inline style="..." patterns across PHP templates */

.d-none { display: none; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.w-100 { width: 100%; }
.m-auto { margin: auto; }
.m-0 { margin: 0; }
.mb-1 { margin-bottom: 1em; }
.mt-2 { margin-top: 2em; }
.ml-2 { margin-left: 2em; }
.fw-bold { font-weight: bold; }
.text-center { text-align: center; }
.text-danger { color: #dc3545; }
.text-decoration-none { text-decoration: none; }
.mw-500 { max-width: 500px; }
.mw-100 { max-width: 100%; }
.opacity-8 { opacity: 0.8; }

/* ===== Consolidated from embedded <style> blocks ===== */

/* From userfields.php: field-card component */
.field-card {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
    background: #fff;
}
.field-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}
.field-header.collapsed {
    border-bottom: none;
}
.drag-handle {
    cursor: grab;
    padding: 0 10px 0 0;
    color: #666;
    font-size: 18px;
}
.drag-handle:active {
    cursor: grabbing;
}
.field-name {
    font-weight: bold;
    flex-grow: 1;
}
.field-name input {
    font-weight: bold;
    border: 1px solid #ccc;
    padding: 2px 6px;
    width: 150px;
}
.field-name input:read-only {
    background: #e9ecef;
    border-color: #e9ecef;
}
.field-actions {
    display: flex;
    gap: 5px;
}
.field-body {
    padding: 15px;
    display: none;
}
.field-body.expanded {
    display: block;
}
.field-row {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.field-row label {
    min-width: 100px;
    font-weight: 500;
}
.field-row input[type="text"],
.field-row select {
    flex: 1;
    min-width: 200px;
    padding: 4px 8px;
}
.field-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
}
.options-container {
    margin-top: 10px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
    display: none;
}
.options-container.visible {
    display: block;
}
.option-row {
    display: flex;
    gap: 10px;
    margin-bottom: 5px;
    align-items: center;
}
.option-row input {
    padding: 4px 8px;
}
.btn-toolbar {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
}
.btn-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
}
.core-badge {
    background: #6c757d;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 10px;
}
#alert-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    max-width: 400px;
}
.alert {
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.alert-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}
.alert-danger {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}
.sortable-ghost {
    opacity: 0.4;
}
.sortable-chosen {
    background: #e3f2fd;
}

/* From carpool.php: table cell spacing */
.carpool td,
.carpool th {
    padding-left: 1em;
    padding-right: 1em;
}

/* From square/testsquare.php: cell alignment helpers */
.cellheading {
    text-align: left;
    font-size: 0.8em;
    color: gray;
}
.celltext {
    text-align: right;
}
.guestof {
    display: none;
}

/* From events.php: active/inactive states */
.active {
    background-color: lightgreen !important;
}
.inactive {
    background-color: white !important;
}

/* From allhikes.php: numeric alignment */
.numeric {
    text-align: right;
    padding-right: 1em;
}