@charset "utf-8";
/* CSS Document */

        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
        body {
            font-family: 'Inter', sans-serif;
        }

        .invisible-autofill-input {
            position: absolute;
            left: -9999px;
            opacity: 0;
            pointer-events: none;
            width: 1px;
            height: 1px;
            /* Keyframes to detect autofill */
            animation-name: onAutoFillStart;
            animation-duration: 0.1s;
        }
        
        /* Keyframes for the autofill detection animation */
        @keyframes onAutoFillStart {
            from {
                /*
                  This is a dummy keyframe to trigger the animation event.
                  The browser applies this animation automatically on autofill.
                */
            }
            to {
                /*
                  This is a dummy keyframe to trigger the animation event.
                */
            }
        }

        /* Override the browser's default autofill background color */
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-box-shadow: 0 0 0px 1000px #d8c29d inset !important;
            -webkit-text-fill-color: #002058 !important;
            transition: background-color 5000s ease-in-out 0s;
        }

        .form-card {
            max-width: 500px;
            background-color: #d7b47d;
            border: 2px solid #002058; /* Added a solid border as a frame */
        }

        /* Style for all form controls and the custom dropdown toggle */
        .form-control,
        #dropdown-selected {
            background-color: #faefe0;
            border-color: #002058;
            color: #0a1a30; /* New text color for input fields and dropdown */
        }

        /* Style the custom dropdown when autofilled, matching the inputs */
        #dropdown-selected.autofilled {
            background-color: #d8c29d;
        }
        
        /* Placeholder color */
        ::placeholder {
            color: #0a1a30 !important; /* New placeholder color */
            opacity: 1; /* Make sure placeholder is not transparent */
        }

        .form-control:focus,
        #dropdown-selected:focus {
            border-color: #002058;
            box-shadow: 0 0 0 0.25rem rgba(0, 32, 88, 0.25);
        }

        .custom-dropdown-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #0a1a30; /* New text color for dropdown toggle */
            background-color: transparent;
        }

        .custom-dropdown-toggle:hover {
            color: #fff;
            background-color: #002058;
        }

        .custom-dropdown-toggle .fi,
        .custom-dropdown-toggle svg {
            color: #0a1a30; /* New color for icons */
        }

        .custom-dropdown-toggle:hover .fi,
        .custom-dropdown-toggle:hover svg {
            filter: brightness(0) invert(1);
        }

        .custom-dropdown-menu {
            background-color: #faefe0;
            max-height: 250px;
            overflow-y: auto;
        }
        
        /* Color for items within the dropdown */
        .dropdown-item {
            color: #0a1a30; /* New text color for dropdown items */

        }

        .dropdown-item:hover {
            background-color: #002058;
            color: #faefe0;
        }

        .sticky-search {
            position: sticky;
            top: 0;
            background-color: #faefe0;
            z-index: 1050;
        }

        /* Custom button styling */
        .btn-custom {
            background-color: #002058;
            color: #d7b47d;
            border-color: #002058;
        }

        .btn-custom:hover {
            background-color: #faefe0;
            color: #002058;
            border-color: #002058;
        }

        .btn-custom:focus,
        .btn-custom:active {
            background-color: #002058;
            color: #d7b47d;
            border-color: #002058;
            box-shadow: 0 0 0 0.25rem rgba(0, 32, 88, 0.25);
        }
        
        /* New color for labels, headings, and paragraphs */
        .form-label, h1, .form-paragraph, .form-check-label {
            color: #002058 !important;
        }

        /* Custom validation styles for the dropdown */
        .form-control.is-invalid,
        #dropdown-selected.is-invalid {
            border-color: #dc3545;
        }

        .form-control.is-invalid:focus,
        #dropdown-selected.is-invalid:focus {
            box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
        }

        /* NEW: Custom validation style for the required drop-zone */
        .drop-zone.is-invalid-file {
            border-color: #dc3545; /* Red border to match other validation errors */
            box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
        }

		/* Modal styling (MODIFIED: Centering the card and setting font) */
        .modal-content {
            /* 1. CARD CENTERING/SIZING FIX */
            max-width: 500px;
            margin: auto;
            font-family: 'Inter', sans-serif;

            background-color: #d7b47d;
            border: 2px solid #002058;
        }

        .modal-header {
            border-bottom: 2px solid #002058;
        }
        
        .modal-footer {
            border-top: 2px solid #002058;
        }
        
        .btn-close {
            filter: invert(1);
        }

        /* 2. TEXT ALIGNMENT FIX: Ensure all form fields are left-aligned */
        .modal-content .modal-body {
            text-align: left;
        }

        /* --- Custom Constraint for 80% Width and Centering (Re-added) --- */

        /* Target all columns that span the full width of the form (col-12) 
           and are NOT the two-column name fields (col-md-6) or the form title (first col-12 text-center) */
        .modal-content .row > .col-12:not(.col-md-6):not(.text-center),
        /* Also include the submit button column, which is explicitly targeted by class */
        .modal-content .col-12.mt-4.text-center {
            /* Force the column to be 80% wide and center it, overriding Bootstrap grid defaults */
            max-width: 80% !important;
            flex: 0 0 80% !important;
            width: 80% !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

        /* --- End Custom Constraint --- */