body {
    background-color: #e2e2e2;
}

.hidden {
    display: none;
}

.main-content {
    padding: 20px;
}

#active-list {
    list-style: none outside;
}

.display-list {
    list-style: none outside;
}

.todo-item:first-child .top-todo-link,
.todo-item:first-child .up-todo-link,
.todo-item:last-child .bottom-todo-link,
.todo-item:last-child .down-todo-link {
    display: none;
}

.module {
    border-radius: 20px;
    padding: 20px;
    margin: 10px;
    background-color: white;
    box-shadow: 2px 4px 12px #00000014;
}

#invite-page .module {
    max-width: 600px;
}

#team-page .module {
    position: relative;
}

fieldset {
    border: none;
}

.entity-list {
    padding-bottom: 10px;
}

.counter-container {
    display: inline-block;
    border-left: 2px solid grey;
    padding-left: 4px;
}

.delete-link {
    color: red;
}

#accept-invite-button {
    background-color: darkgreen;
}

#decline-invite-button {
    background-color: darkred;
}

#invite-answer-form {
    text-align: center;
}

#invite-answer-form button {
    border-radius: 8px;
    width: 45%;
    padding: 10px;
    margin: 0 4px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    box-shadow: none;
    border: none;
}

#invite-answered div {
    padding: 10px 0;
    text-align: center;
    border-radius: 3px;
    font-size: 18px;
    font-weight: bold;
}

#invite-yes-answer {
    background-color: lightgreen;
}

#invite-no-answer {
    background-color: lightcoral;
}

#invite-change-answer-link {
    margin-top: 10px;
    display: inline-block;
    padding: 3px;
    border: 1px solid lightgray;
    background-color: whitesmoke;
    font-size: 14px;
    color: black;
    border-radius: 3px;
}

.invite-activity-label {
    display: inline-block;
    width: 60px;
}

.invite-activity-value {
    font-size: 18px;
}

#invite-activity {
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
}

#invite-member-details {
    text-align: center;
}

#invite-team-name {
    display: inline-block;
}

#invite-member {
    display: inline-block;
}

#invite-page {
    font-family: Avenir, Corbel, sans-serif;
    padding-top: 20px;
}

#invite-header {
    text-align: center;
}

#hojden-logo {
    width: 100px;
    right: 10px;
    position: absolute;
    top: 10px;
}

#page-footer p {
    padding: 0 10px;
    font-size: 12px;
}

#admin-page-header {
    padding: 0 20px;
    border-bottom: 1px solid grey;
}

.subtag {
    padding: 0;
    margin: -20px 0 10px;
}

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

ul {
    padding-left: 0;
}

.member-list-item,
.activity-list-item {
    list-style: none outside;
    margin: 4px 0;
    padding: 4px 4px 10px;
    border-top: 1px solid lightgray;
}

.member-list-item-present {
    border-top: 2px solid darkgreen;
}

.member-list-item-absent {
    border-top: 2px solid darkred;
}

.member-list-item-unseen {
    color: blue;
    background-color: #edf6ff;
}

.member-list-item-declined {
    color: red;
    background-color: #ffeded;
}

.member-list-item-accepted {
    color: green;
    background-color: #ddfdd2;
}

.member-list-item-read {
    color: yellow;
    background-color: #fcffed;
}

.member-list-item p,
.activity-list-item p {
    color: black;
}

.member-list-item-name,
.activity-list-item-type {
    font-weight: bold;
    margin: 0;
}

#historic-activities-list .activity-list-item-type {
    font-size: 12px;
}

#historic-activities-list li {
    list-style-type: none;
}

.zebra-list li:nth-child(odd) {
    background-color: white;
}
.zebra-list li:nth-child(even) {
    background-color: lightgrey;
}

.team-player-list li:nth-child(odd) {
    background-color: lightgrey;
}

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

.activity-list-item-type,
#current-activity-type {
    text-transform: capitalize;
}

.member-list-item-email,
.activity-list-item-date {
    font-size: 12px;
    margin: 0;
}

.delete-member-link,
.delete-activity-link,
.activate-activity-link {
    font-size: 14px;
}

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

.l-cont label {
    padding: 4px 10px;
    display: inline-block;
}

#add-member-form,
#add-activity-form {
    background-color: whitesmoke;
    padding: 2px 10px;
    border: 1px solid lightgray;
    border-radius: 4px;
    position: relative;
}

.corner-link {
    position: absolute;
    top: 6px;
    right: 10px;
    font-size: 14px;
}

#activity-area .module {
    border: 1px solid lightgray;
}

.section {
    border-radius: 5px;
    border: 1px solid lightgray;
    padding: 10px;
}

.member-button {
    border: 1px solid lightgrey;
    border-radius: 5px;
    display: inline-block;
    font-size: 12px;
    padding: 3px;
    margin-bottom: 4px;
    color: black;
    text-decoration: none;
    background-color: white;
}

.member-list-item-absent .set-absent {
    display: none;
}

.member-list-item-present .set-present {
    display: none;
}

.member-list-item-accepted .reply-presence {
    display: none;
}

.member-list-item-declined .reply-absence {
    display: none;
}

.member-list-item-unseen .remove-invite-answer {
    display: none;
}

.member-list-item-read .remove-invite-answer {
    display: none;
}

.member-activity-list-status {
    color: black;
    font-size: 12px;
}

.member-activity-list-presence {
    color: black;
    font-size: 10px;
}

.inline-form-part {
    border: 1px solid red;
}

.header-link {
    font-size: 12px;
    padding: 4px;
    margin: 4px;
    background-color: whitesmoke;
    border-radius: 5px;
    text-decoration: none;
    border: 1px solid grey;
    font-weight: bold;
    text-transform: uppercase;
}

.logout-link {
    color: darkred;
}

.admin-link {
    color: darkorange;
}

#admin-page-container {
    padding: 20px;
}

.member-listing-card {
    padding: 10px;
    margin: 10px;
    border: 1px solid lightgrey;
    border-radius: 5px;
}

.member-list-item-role {
    text-transform: capitalize;
}

.admin-button-menu {
    padding: 10px;
    margin: 10px;
}

.league-list-item,
.league-game-list-item,
.league-team-list-item {
    list-style: none outside;
    padding: 4px;
}

#leagues-list li:nth-child(odd),
#league-team-list li:nth-child(odd),
#league-game-list li:nth-child(odd) {
    background: #f9f9f9; /* light gray for odd rows */
}

.heading-button {
    margin-top: 16px;
}

#main-games-view {
    padding: 20px;
}

.date-patch {
    background-color: white;
    border: 1px solid lightgray;
    width: 50px;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 5px;
}

.date-patch-day-number {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: black;
}

.date-patch-month {
    text-align: center;
    font-size: 14px;
    background-color: darkred;
    color: white;
}

.date-patch-day {
    text-align: center;
}

.member-next-game-date-day-weekday {
    color: black;
}

.member-next-game-date-day-sunday {
    color: darkred;
}

.card {
    border-radius: 20px;
    margin: 10px;
    overflow: hidden;
    box-shadow: 2px 4px 12px #00000014;
}

.next-game-card {
    background-color: #2a3244;
    color: white;
}

.next-exercise-card {
    background-color: #f2f4f8;
}

.next-game-padding {
    padding: 20px;
}

.top-heading {
    margin-top: 0;
    margin-bottom: 0;
}

.next-game-details,
.next-exercise-details {
    padding: 10px 10px 10px 30px;
}

.next-box-labels {
    padding: 5px 10px;
    text-transform: uppercase;
    font-weight: bold;
}

.next-game-labels {
    background-color: rgba(255, 255, 255, 0.1);
}

.next-exercise-labels {
    background-color: white;
}

.next-game-heading-label,
.next-exercise-heading-label {
    border-radius: 20px;
    font-size: 12px;
    margin-top: 2px;
    padding: 4px 5px 2px;
    width: 150px;
    text-align: center;
}

.lightgreen {
    background-color: darkgreen;
    color: rgb(210, 255, 210);
}

.lightyellow {
    background-color: orange;
    color: lightyellow;
}

.lightred {
    color: rgb(255, 210, 210);
    background-color: darkred;
}

.lightblue {
    background-color: navy;
    color: rgb(210, 230, 255);
}

.lightgray {
    background-color: rgb(255, 255, 210);
}

.dashboard-label {
    padding: 4px 8px;
    border-radius: 3px;
    display: inline-block;
}

.border-label {
    border: 1px solid black;
}

.fade {
    opacity: 0;
    transition: opacity 5s ease; /* 0.5s fade duration */
}

.fade.show {
    opacity: 1;
}

#member-page-upcoming-activities-list {
    margin: 10px;
    list-style-type: none;
}

.next-box-footer {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 10px;
}

.next-game-footer {
    background-color: rgba(255, 255, 255, 0.2);
}

.next-exercise-footer {
    background-color: white;
}

.footer-marker {
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    margin: 5px 10px;
    display: inline-block;
}

#member-page-upcoming-activities-list li {
    padding: 10px;
    margin: 10px 0;
    background-color: #f2f4f8;
    border-radius: 5px;
    box-shadow: 2px 4px 12px #00000014;
}

.page-header {
    padding: 10px;
    margin-bottom: 0;
}

.page-header .team-name {
    font-size: 36px;
    font-weight: bold;
    margin: 0 10px;
    padding-top: 10px;
}

.page-header .club-name {
    font-size: 18px;
}

.sub-header {
    margin: 0;
    background: whitesmoke;
    padding: 0 0 0 10px;
    font-size: 12px;
}

.list-message {
    background-color: lightgray;
    padding: 20px;
    margin: 10px;
    border-radius: 10px;
    list-style-type: none;
}

#create-message-link {
    display: block;
    padding: 10px;
    margin: 10px;
    background-color: gray;
    border-radius: 10px;
    text-align: center;
    width: 200px;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    color: whitesmoke;
}

.list-message-actions {
    margin-top: 5px;
}

.list-message-actions a {
    color: black;
    text-decoration: none;
    background-color: darkgreen;
    padding: 10px 20px 10px 18px;
    margin: 10px;
    border-radius: 20px;
    color: white;
    display: block;
    text-align: left;
}

.list-message-byline {
    padding: 5px 10px;
}

.list-message-misc {
    background-color: whitesmoke;
    padding-bottom: 10px;
    border-radius: 10px;
}

.list-item-marker {
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    display: inline-block;
    margin-top: 3px;
}

.ml-10 {
    margin-left: 10px;
}