/* Custom CSS for Christmas Theme (Red and White, no green) */

/* Background and Text Colors */
body {
  background-color: #191970;
  color: #FFFFFF;
}

/* Input and Button Styles */
.form-control {
  background-color: #FFFFFF;
  color: #000000; /* Black */
  border: 1px solid #FFFFFF;
}

.btn-primary {
  background-color: #0047ab;
  color: #FFFFFF;
  border: 1px solid #0047ab;
}

.btn-close {
  background-color: #0047ab;
  color: #FFFFFF;
  border: 1px solid #0047ab;
}

.btn-primary:hover {
  background-color: #191970;
  color: #FFD700;
  border: 1px solid #FFD700;
}

.btn-outline-primary {
  background-color: #191970;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}

.btn-outline-primary:hover {
  background-color: #0047ab;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}

.btn-outline-secondary {
  color: #FFD700;
  border-color: #FFD700;
}

/* Alert Box Styles */
.alert-danger {
  background-color: #191970;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}

/* Link Styles */
a {
  color: #FFD700;
  text-decoration: none;
}

a:hover {
  color: #0047ab;
}

/* Navbar Styles */
.navbar-custom {
  background-color: #0047ab;
}

.navbar-collapse {
  flex-grow: 0;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255,255,255);
}

.invalid-feedback {
  color: #FFFFFF;
}

.recipient-card {
  border: 1px solid #ced4da;
  border-radius: 10px;
  padding: 5px;
  margin-bottom: 15px;
  display: flex; /* Use flexbox */
  align-items: center; /* Center vertically */
}

.color-gold {
  color: #FFD700;
}

/* Add the following CSS to your existing styles */

.form-control {
  border: 1px solid #ced4da;
  border-radius: 8px; /* Add border radius for a softer appearance */
  padding: 10px; /* Add padding for better spacing */
  resize: none; /* Disable textarea resizing */
}

.form-control:focus {
  border-color: #80bdff; /* Change border color on focus */
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Add focus outline */
}

.alert-warning {
  color: #191970;
  background-color: #fff3b3;
  border-color: #FFFFFF;
  border-bottom: 1px solid;
}


.alert-warning {
  color: #191970;
  background-color: #ffeb80;
  border-color: #FFFFFF;
}

.alert {
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
}

.modal-content {
  background-color: #191970;
}

.modal-header {
  border-bottom: 0px;
}

.modal-footer {
  border-top: 0px;
}

#template-image .image-container {
    display: flex;
    /* justify-content: center; /* Centers horizontally */
    /* align-items: center;     /* Centers vertically */
}

#template-image .fixed-size-image {
    max-width: 100%;        /* Ensure image does not overflow */
    height: auto;           /* Maintain aspect ratio */
}

.recipient-card.selected {
    border: 3px solid blue;
}

.fixed-bottom {
    position: fixed;
    bottom: 3rem;
    max-height: 25vh;
    text-align: center; /* Center align buttons */
    padding: 1.5rem 1rem; /* Add some padding */
    background-color: #191970; /* Background color */
    overflow: auto;
}

footer {
    background-color: #191970;
    /* position: fixed; /* Make the footer fixed */
    /* bottom: 0; /* Position it at the bottom */
    left: 0;
    width: 100%; /* Full width */
    /* z-index: 1000; /* Ensure it stays on top */
    font-size: .9em;
}

#contextWindow {
  margin-bottom: 12rem; /* Adjust this value based on the height of your buttonContainer */
}

/* CSS for positioning the image */
.chapter-image {
    float: right;
    margin-left: 10px;
    margin-bottom: 10px;
}

#actionContainer {
    overflow-y: auto; /* Enable vertical scrolling */
}