/* roboto-regular - latin */
@font-face {font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('/ui/fonts/roboto/roboto-v32-latin-regular.woff2') format('woff2');
}

/* roboto-500 - latin */
@font-face {font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('/ui/fonts/roboto/roboto-v32-latin-500.woff2') format('woff2');
}

/* roboto-700 - latin */
@font-face {font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('/ui/fonts/roboto/roboto-v32-latin-700.woff2') format('woff2');
}

/* roboto-900 - latin */
@font-face {font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url('/ui/fonts/roboto/roboto-v32-latin-900.woff2') format('woff2');
}


		body {
            font-family: "Roboto", "Helvetica", "Arial", sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
			background-color: #EEE;
           
        }
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
        .form-container {
            background-color: #FFF;
			color: #222;
			padding: 30px;
			margin: 0 15px;
			border-radius: 8px;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			max-width: 600px;
			width: 100%;
        }
		
		.form-container input::placeholder {
			color: #999;
		}
		
		.form-container p {
			margin-bottom:15px;
			line-height:1.5;
		}
		
		.form-container p.header {
			margin-bottom:25px;
		}
	
        .form-container h1 {
            margin: 10px 0 25px;
			font-weight: 400;
			font-size: 2.125rem;
			line-height: 1.235;
			letter-spacing: 0.00735em;
            color: #1976D2;
			text-align: center;
        }
		
		.form-container h2 {
            margin: 20px 0;
            color: #333333;
            font-size: 1.4rem;
            text-align: left;
            font-weight: 500;
        }
		
		.form-container h4 {
			margin: 10px 0;
			font-weight: 500;
			font-size: 1.25rem;
			line-height: 1.4;
			letter-spacing: 0.0075em;
		}
		
        .form-container label {
            display: block;
            font-size: 0.95rem;
            margin-bottom: 5px;
        }
        .form-container span {
            color: red;
            font-weight: bold;
        }
		.accept-credit	{
			color: #888;
		}
		
		#card-errors {
			color: #CC0000;
			margin: 15px 0;
		}
		
        input:not([type="checkbox"]) {
            width: 100%;
            margin-bottom: 15px;
            border-radius: 4px;
            outline: none;
            background: #F9F9F9;
            padding: 14px;
            font-size: 16px;
            border: 1px solid #CCC;
        }
		
        input:focus, .form-container select:focus {
            border: 2px solid #1976D2;
        }
		
		input[type="checkbox"] {
		position: relative;
		width: 14px;
		height: 14px;
		border: 1px solid #808080;
		background: #FFF;
		}
		
		select {
		width: 100%;
		margin-bottom: 15px;
		border-radius: 4px;
		outline: none;
		background: #F9F9F9;
		padding: 14px 30px 14px 14px;
		border: 1px solid #ccc;
		color: #999;	
		font-size:16px;
		appearance: none; /* Remove default browser styles */
		-webkit-appearance: none;
		-moz-appearance: none;
		background-image: url('/ui/images/down-arrow.png'); /* Path to your image */
		background-repeat: no-repeat;
		background-position: right 10px center; /* Adjust position */
		background-size: 14px; /* Resize the arrow */
		}
		
		select:valid {
		color: #222; /* Change color when a valid option is selected */
		}
		
		/* Preserve arrow on focus */
		select:focus {
		background-image: url('/ui/images/down-arrow.png'); /* Reapply the image */
		}

		/* Hide the default dropdown arrow in IE/Edge */
		select::-ms-expand {
		display: none;
		}
		
        button {
            width: 100%;
            padding: 12px;
			margin-top:25px;
            font-size: 1rem;
            color: #ffffff;
            background-color: #0073e6;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s;
            font-weight: bold;
        }
		
        button:hover {
            background-color: #005bb5;
        }
		
        .form-container .note {
            font-size: 0.85rem;
            color: #777777;
            text-align: center;
            margin-top: 10px;
        }
        .error-message {
            color: red;
            font-size: 0.85rem;
            margin-top: -10px;
            margin-bottom: 10px;
            display: none;
        }
		
		.flex-container {
			display: flex;
			gap: 15px;
		}

		.flex-item-1 {
			flex: 1;
		}
		
		.flex-item-2 {
			flex: 2;
		}
		
		.loading-spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
        }
		
		.alert-box{display:flex;align-items:center;background-color:#F8D7DA;color:#721C24;border:1px solid #F2B7BE;margin:15px 0;padding:15px;}
		.alert-box p {margin:6px 0;line-height:1.4;font-weight:600;}

				
		.success {
			display:flex;
			align-items:center;
			background-color:#D4EDDA;
			color:#3E6F0A;
			border:1px solid #C3E6CB;
			padding:10px;
			font-size:16px;
			margin:0;
		}
		
		.success p {
			margin:6px 0;
			line-height:1.4;
		}