.passenger-container {
    position: relative;
    display: inline-block;
}

.passenger-input {
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    width: 200px;
}

.passenger-input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

.passenger-box {
    position: absolute;
    top: 50px;
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 columns for days */
    gap: 5px;
    padding: 10px;
    font-size: 14px;
    min-width: 250px; /* Allow the calendar to be wider than the input */
    z-index: 10;
}

.passenger-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    line-height: 1px;
    letter-spacing: 0.02rem;
}

.passenger-type button {
    padding: 5px 10px;
    background-color: rgb(46, 175, 255);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
    color: #fff;
    font-size: 20px;
}

.passenger-type button.decrease, .passenger-type button.increase {
    width: 40px;
}

.passenger-left-col {
	width: 30%;
}

.passenger-right-col {
	width: 68%;
	text-align: right;
}

.passenger-desc {
	font-size: 12px;
}

#children-ages input, #elderly-ages input {
    margin-top: 10px;
    padding: 5px;
    width: 80px;
    display: block;
}

       .number-input {
            width: 100px; /* Adjust width as needed */
            padding: 8px;
            font-size: 16px;
            font-family: Arial, sans-serif;
            border: 2px solid #ddd; /* Light grey border */
            border-radius: 5px; /* Rounded corners */
            outline: none;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        /* Focus effect */
        .number-input:focus {
            border-color: #007BFF; /* Blue border on focus */
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); /* Subtle blue shadow */
        }

        /* Hide the default number field arrows */
        .number-input::-webkit-inner-spin-button,
        .number-input::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        .number-input {
            -moz-appearance: textfield;
        }

        .bb-ages {
            display: flex !important;
            align-items: center;
            gap: 10px;
        }

        .bb-ages input{
            border: 1px solid;
        }

        .bb-ages label {
            margin-top: 10px;
        }

        .passenger-btn-close {
            display: block;          /* Makes the button behave as a block element */
            width: 100%;             /* Occupies the entire width */
            padding: 10px 0;         /* Top and bottom padding for a clickable area */
            background-color: #135D77; /* Red background color */
            color: #fff;             /* White text color */
            text-align: center;      /* Center the text */
            border: none;            /* Remove the default border */
            cursor: pointer;         /* Change cursor to pointer on hover */
            font-size: 16px;         /* Adjust font size */
            font-weight: bold;       /* Make text bold */
            transition: background-color 0.3s ease; /* Smooth transition for hover effect */
        }

        .passenger-btn-close:hover {
            background-color: #197A9B; /* Darker red on hover */
        }


@media only screen and (max-width: 1200px) {

	.passenger-type button.decrease, .passenger-type button.increase {
	    width: unset;
	}

	.passenger-type button {
		padding: 15px 25px;
		margin: 8px;
		font-size: 20px;
	}

}