html {
   position: relative;
   min-height: 100%;
 }
 body {
   margin-bottom: 60px; /* Margin bottom by footer height */
 }
 .footer {
   position: absolute;
   bottom: 0;
   /* width: 100%; */
   height: 60px; /* Set the fixed height of the footer here */
   line-height: 60px; /* Vertically center the text there */
 }

header {
   padding: 20px 0px 10px 0px;
   
}

.mybtn {
   min-width: 15em !important
}

.pin {
   max-width: 150px !important;
}

.accountID {
   max-width: 150px !important;
}

.username {
   max-width: 150px !important;
}

.nav-username {
   color: white !important;
   cursor: default;
}

.warning {
   color: red !important;
   font-weight: bold !important;
}

.namesInput {
   width: 15em !important;
}

.dateInput {
   width: 10em !important;
}

.emailInput {
   width:24em !important;
}

.pictureInput {
   width: fit-content !important;
}

/* .email-col {
   width: 10% !important;
    word-wrap: break-word; overflow-wrap: break-word; word-break: break-all;
  } */

.photoModal {
   --bs-modal-width: 600px !important;
}

.success {
   color: green !important;
   /* font-weight: bold !important; */
}

.failure {
   color: red !important;
   /* font-weight: bold !important; */
}

input[type="checkbox"] {
            transform: scale(1.5);
            margin-right: 10px;
        }

 ul {
  text-align: left;
}

li {
  text-align: left;
}

.phoneInput {
   width: 15em !important;
}

.bnp-container-background {
  background-image: url('/images/BNP-2026-Background.png');
  /* background-color: burlywood; */

  min-height: 100vh; /* Ensure the container takes at least the full viewport height */

  background-repeat: no-repeat; /* Prevent the image from repeating */
  background-size: cover; /* Scale the image to cover the entire container */
  background-position: center bottom; /* Center the image within the container */
  opacity: 1.2; /* Set the opacity to make it faint */
  z-index: -1; /* Ensure the background image is behind other content */
}

 .tooltip-container {
    position: relative;
    display: inline-block; /* Aligns the container to the image size */
    cursor: pointer; /* Changes cursor to a hand pointer */
}

.tooltip-text {
    visibility: hidden;
    width: 300px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Positions the tooltip above the icon */
    left: 50%;
    margin-left: -110px; /* Centers the tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}  

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.attend-switch {
    display: flex;
    justify-content: center;
    align-items: center;
}

.attend-switch input[type="checkbox"] {
    margin-right: unset;
}

.mb-3 {
    margin-bottom: 0.5rem !important;
}

.pickup {
   background: lightgoldenrodyellow !important;
   border-radius: 15px !important;
   padding: 5px 10px 5px 5px !important;
}

.yes {
   color: green !important;
   font-weight: bold !important;
}
.no {
   color: red !important;
   /* font-weight: bold !important; */
}

/* li:not(:last-child) { 
   margin-bottom: 7px !important;
   border: 1px solid grey !important;
   max-width: 20em;
}

li:hover {
   background-color:#f0bc6e;
} */

/* For WebKit-based browsers (Chrome, Safari, Edge) */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}