@media (max-width: 991.98px) {
    .main-content {
        height: auto;
        min-height: calc(100vh - 10vh)
    }

    .feature-section{
        height: auto;
        min-height: calc(100vh - 10vh)
    }

    .xmas-list-list {
        width: 100%;
    }
}

:root {
    --bs-primary: #ee0000;
    --bs-background-primary: #333333;
    --bs-background-secondary: #444444;
    --bs-border-primary: #555555;
    --bs-button-primary: #22c55e;
    --bs-button-secondary: #666666;
}

body {
    background-color: var(--bs-background-primary);
    color: white;
}

.navbar {
    background-color: var(--bs-background-primary);
    border-color: var(--bs-border-primary);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    min-height: 60px;
    height: 10vh;
    max-height: 80px;
    padding: 0px 20px;
}

.login-link {
    margin-right: 20px;
}

.title-section {
    margin-top: 20px;
}

.main-content {
    height: calc(100vh - 10vh)
}

.feature-section {
    height: calc(100vh - 10vh)
}

.other-side {
    background-color: var(--bs-background-secondary);
    border-left: 1px solid var(--bs-border-primary);
    padding-left: 15px;
    overflow: hidden;
}

.btn {
    background-color: var(--bs-button-primary);
    box-shadow: 0 1px 10px 5px rgba(71, 71, 71, 0.5);
    margin: 10px 0px;
}

.btn-secondary {
    background-color: var(--bs-button-secondary);
}

.gift-link {
    color: #22c55e; /* Tailwind's emerald-500, a modern, vibrant green */
    transition: color 0.2s;
}
.gift-link:hover, .gift-link:focus {
    color: #42f59e; /* Even lighter green on hover */
    text-decoration: underline;
}

.xmas-list-list {
    list-style-type: none;
    width: 40vw
}

.login-title {
    margin-top: 100px;
    margin-bottom: 40px;
}

.login-form {
  width: 100%;
  height: 100%;
  border: 1px solid var(--bs-border-primary); /* Optional: Add a border to the tab content */
  border-top: none; /* Remove the top border to connect tabs and forms seamlessly */
  border-radius: 0 0 0.5rem 0.5rem; /* Optional: Add rounded corners to the bottom of the tab content */
}

.nav-link {
    background-color: var(--bs-background-secondary);
}

/* Remove margin between tabs and tab content */
.nav-tabs {
    margin-bottom: 0 !important; /* Remove the default margin below the tabs */
    border-bottom: none; /* Remove the bottom border of the tabs */
}

/* Remove padding from the nav-link elements */
.nav-tabs .nav-link {
    margin: 0 !important; /* Remove any margin from the nav links */
    padding: 0.5rem 1rem; /* Optional: Adjust padding for better spacing */
}

/* Ensure only the active tab is visible */
.tab-pane {
    position: absolute; /* Position the forms absolutely within the tab-content container */
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: none; /* Hide inactive tabs completely */
    align-items: center;
    justify-content: center;
    z-index: 0; /* Ensure inactive tabs are behind the active tab */
}

.tab-pane.show.active {
    display: flex; /* Show the active tab */
    z-index: 1; /* Bring the active tab to the front */
}

/* Ensure the tab content container has a fixed height */
.tab-content {
    position: relative;
    padding: 0;
    margin: 0;
    min-height: 500px; /* Set a fixed height for the tab content */
    margin-top: -1px; /* Remove the gap between tabs and forms */
    background-color: var(--bs-background-primary); /* Optional: Set background color for the tab content */
}

.alert-messages {
    margin-top: 20px;
}

.alert-error {
    color: red
}

.google-signin-wrapper {
    background: transparent;
    border-radius: 50px;
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.select2-container .select2-dropdown {
    background-color: var(--bs-background-primary);
}

/* Style the Select2 multi-select container */
 .select2-selection--multiple {
    background-color: #23272b !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}

/* Style the selected choices inside the container */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #22c55e !important;
    color: #fff !important;
    border: none !important;
}

.select2-container--default .select2-results__option--selected {
    background-color: #22c55e !important; /* Bootstrap primary blue */
    color: #fff !important;
}