﻿   .DisplayColumn {
    /*border: 2px solid #b0c7ad;*/
    padding-top : 1%;
    margin-top:3%;
}

.CateringInquiryContainer {
    position: relative;
    margin: 20px 0 10px 0;
}

    .CateringInquiryContainer label {
        position: absolute;
        top: 5px;
        left: 0px;
        font-size: 16px;
        /*font-size: 1.1em;
        opacity: 0.9;*/
        color: #aeaeae;
        transition: all 0.5s ease-in-out;
        padding: 1px;
        pointer-events: none;
    }
    input[type="date"]::-webkit-datetime-edit {
  text-align: left !important;
}
input[type="date"] {
    color:#a7a7a7 !important;
    position:relative;
    text-align:left !important;
}
    .CateringInquiryContainer input, .CateringInquiryContainer select {
        border: 0;
        border-bottom: 1px solid #b0c7ad;
        background: transparent !important;
        width: 100%;
        padding: 8px 10px 0 0;
        font-size: 16px;
        /*font-size: 1.1em;*/
        color: #a7a7a7;
        border-radius : 0px !important;
    }

        .CateringInquiryContainer input:focus, .CateringInquiryContainer select:focus {
            /*border: none !important;*/
            outline: none !important;
            border-bottom: 1px solid #b0c7ad;
        }

            .CateringInquiryContainer input:focus ~ label,
            .CateringInquiryContainer input:valid ~ label,
            .CateringInquiryContainer select:focus ~ label,
            .CateringInquiryContainer select:valid ~ label {
                top: -12px;
                color: #b0c7ad;
                font-size: 14px;
                font-weight:600;
                /*font-size: 0.8em;*/
            }


.CateringTypeContainer > .Title {
    font-size: 16px;
}
.CateringTypeContainer label {
    font-size: 16px;
    color: #aeaeae;
}

.FoodTypeContainer > .Title {
    font-size: 16px;
}
.FoodTypeContainer label {
    font-size: 16px;
    color: #aeaeae;
}
 .CateringInquiryContainer {
            position: relative;
            display: flex;
            align-items: center;
            margin-top: 20px;
        }

        
        input[type="date"] {
            width: 100%;
           
            font-size: 1rem;
            /*border: 1px solid #ccc;*/
            border-radius: 5px;
            padding-right: 11px; /* Space for the calendar icon */
            position: relative; /* Ensure input field is positioned properly */
            -webkit-appearance: none; /* Removes the default calendar icon on Safari */
            -moz-appearance: none; /* Removes the default calendar icon on Firefox */
            appearance: none; /* Removes the default calendar icon */
        }

        /* Calendar icon styling */
        .calendar-icon {
            position: absolute;
               right: 10px;
    top: 62%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    color: #b0c7ad;
            display:block;
        }

        /* Error message styling */
        .text-danger {
            font-size: 0.875rem;
            color: red;
        }

        /* Label styling */
       
        /* Mobile responsive styling */
        @media (max-width: 768px) {
            .calendar-icon {
                font-size: 1.2rem;
            }

            input[type="date"] {
                font-size: 0.9rem;
            }
        }

        /* Extra tweaks for Android devices */
        @media (max-width: 480px) {
            /* Android-specific adjustment */
            .calendar-icon {
                right: 10px;
                top: 50%;
                font-size: 1.5rem;
                transform: translateY(-50%);
            }
        }