.form-group {
    margin-bottom: 20px;
}


.form-control {
    margin-top: 5%;
    border-color: #3b4050 !important; /* Lighter color for form controls */
    border-width: 1px !important; /* Adjust thickness as needed */
}

form .form-control:focus {
    border-color: #000080;
    box-shadow: none;
    border-width: 2px !important; /* Adjust thickness as needed */
}


input[type="radio"] {
    margin-top: 5%;
    border-color: #3b4050 !important; /* Lighter color for radio buttons */
    border-width: 1px !important; /* Adjust thickness as needed */
}

    /* Style for radio buttons when focused */
    input[type="radio"]:focus {
        border-color: #000080 !important; /* Electric navy blue color when focused */
        box-shadow: none !important;
        border-width: 2px !important; /* Adjust thickness as needed */
    }

/* Style for checkboxes */
input[type="checkbox"] {
    margin-top: 5%;
    border-color: #3b4050 !important; /* Lighter color for checkboxes */
    border-width: 1px !important; /* Adjust thickness as needed */
}

    /* Style for checkboxes when focused */
    input[type="checkbox"]:focus {
        border-color: #000080 !important; /* Electric navy blue color when focused */
        box-shadow: none !important;
        border-width: 2px !important; /* Adjust thickness as needed */
    }

/* Style for table borders */
.table-bordered {
    border-color: #3b4050 !important; /* Lighter color for table borders */
    border-width: 1px !important; /* Adjust thickness as needed */
}

    /* Style for table borders when focused */
    .table-bordered:focus {
        border-color: #000080 !important; /* Electric navy blue color when focused */
        box-shadow: none !important;
        border-width: 2px !important; /* Adjust thickness as needed */
    }

.btn-group-toggle .btn-lg {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
}

.btn {
    padding: 0.5em 0.75em;
    background-color: var(--primary-clr-neutral);
    color: var(--primary-clr-light);
    font-family: "Oswald", sans-serif;
    /* font-size: 1.125rem;*/
    font-size: 1.025rem;
    border: none;
    transition: background-color 0.3s ease;
}

    .btn:hover {
        background-color: #039ca8;
    }

.note-cd {
    background-color: #ae5674; /* Electric navy blue color */
    color: white; /* Text color */
    padding: 10px; /* Adjust padding as needed */
}


.guest-rel-select select {
    height: auto;
    min-height: 30px;
}
/*
@keyframes sizeChange {
    0% {
        font-size: 16px;
    }
    
    50% {
        font-size: 20px;
    }
   
    100% {
        font-size: 16px;
    }
   
}

.animate-text {
    animation: sizeChange 10s ease-in-out infinite; 
}
*/

.fieldset-wrapper {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    margin-bottom: 20px;
}

/* Display field style */
.display-field {
    font-weight: bold; /* Make text bold */
    margin-top: 5%;
    color: #0b5f65;
}

/* Ensure col-md-3 elements are evenly spaced */
.row [class^="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}

Remove padding from the first and last col-md-3 elements
.row [class^="col-"]:first-child {
    padding-left: 0;
}

.row [class^="col-"]:last-child {
    padding-right: 0;
}

/* Add margin to top and bottom of the row */
.row {
    margin: 20px 0;
}

/*.nav-links a {
    display: inline-block;
}*/

.custom-card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    width: calc(50% - 40px); /* Adjust card width to fit two columns */
    height: 50px;
    border-radius: 5px;
    padding: 20px;
    margin: 20px;
    display: inline-block;
    vertical-align: top; /* Align cards to the top of the container */
    box-sizing: border-box; /* Include padding and border in the width calculation */
    text-align: center; /* Center align content */
}

    .custom-card:hover {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }

.card {
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px; /* Add padding to the card header */
    border-bottom: 1px solid #ccc;
}


.column-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: white; /* Add background color */
    padding: 20px; /* Add padding */
    border-radius: 10px; /* Add border radius */
}

.dashboard-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    color: #333; /* Custom color */
    font-weight: bold; /* Custom font weight */
    text-transform: uppercase; /* Convert text to uppercase */
}

/* CSS for the modal */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Position fixed to overlay entire page */
    z-index: 1; /* Set z-index to make sure it's on top of other elements */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scrolling if needed */
    background-color: rgba(0, 0, 0, 0.4); /* Black background with opacity */
    display: flex; /* Use flexbox for centering */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
}

.modal-content {
    display: flex; /* Set modal content as a flex container */
    flex-direction: column; /* Stack children vertically */
    background-color: #ffffff; /* White background */
    padding: 20px;
    border: 2px solid #ccc; /* Add border to modal content */
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    width: 80%; /* Set the width to 80% of the viewport */
    max-width: 400px; /* Set max-width to match the date input width */
    margin: auto; /* Center the modal horizontally */
    margin-top: 10%; /* Adjust the top margin to center vertically */
}

.date-inputs {
    margin-bottom: 15px; /* Add margin between date inputs */
}

    .date-inputs label {
        color: #555; /* Dark grey label color */
        font-weight: bold; /* Bold label text */
    }

    .date-inputs input[type="date"] {
        background-color: #f9f9f9; /* Light grey input background color */
        border: 1px solid #ccc; /* Light grey border */
        border-radius: 5px;
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
    }

#dateModal .date-inputs input[type="date"]:focus {
    background-color: #fff; /* White background color when focused */
    border-color: #009688; /* Turquoise border color when focused */
    outline: none; /* Remove default focus outline */
}

/* Colorful styles */
.modal-content h2 {
    color: #009688; /* Turquoise title color */
}

.modal-content button[type="submit"] {
    background-color: #009688; /* Turquoise button background color */
    color: #fff; /* White button text color */
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
}

    .modal-content button[type="submit"]:hover {
        background-color: #00796b; /* Darker turquoise color on hover */
    }

#dateModal {
    display: none;
}

#dm {
    display: none;
}

.dataTables_wrapper {
    border: 0px solid #ccc; /* Set light border color */
}

    .dataTables_wrapper .dataTables_filter input {
        border: 1px solid #ccc; /* Set light border color for search input */
    }

    .dataTables_wrapper .dataTables_scrollHead {
        background-color: #f5f5f5; /* Set light background color for header */
    }

#dm .modal-backdrop {
    z-index: 1050 !important; /* Adjust the z-index as needed */
    opacity: 0.7; /* Adjust opacity as needed */
}

#room-availability .row {
    display: flex;
    margin-bottom: 20px;
}

#room-availability .title {
    font-weight: bold;
    margin-right: 10px;
    font-size: 20px;
    color: #2e323f;
}

#room-availability .room {
    width: 75px;
    height: 75px;
    background-color: #2e323f; /* Background color */
    color: #ffffff; /* Text color */
    margin-right: 20px;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 5px 10px;
    border-radius: 10px;
}

#room-availability .vip {
    background-color: lightcoral;
}

.room-snippet {
    display: none; /* Hide snippet content by default */
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    width: 250px; /* Adjust snippet width as needed */
    z-index: 1;
    display: none; /* Hide snippet content by default */
    margin-top: -70px; /* Adjust top margin as needed */
    color: #6f737f; /* Text color */
}

.room-info-wrapper {
    position: relative;
    display: inline-block; /* Ensures tooltip positioning */
}

/* Positioning for room info icon */
.room-info-icon {
    position: absolute;
    top: -35px; /* Adjust top position as needed */
    //right: -5px; /* Adjust right position as needed */
    left: 30px;
    color: #a59678; /* Icon color */
}

.room-section {
    background-color: #c8ced1; /* Light gray background */
    padding: 20px; /* Add padding for better readability */
    margin-bottom: 20px; /* Add margin to separate rows */
}