/****
#084cdf;	Darker blue
#1e90ff;	Lighter blue to highlight button on hover

#cccccc;	Lighter gray, disabled button
#666666;	Darker gray
#808080;	Dark gray for text
****/

body {
	/*font-family: Arial, sans-serif; font-size: 12pt;*/
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 12pt;
	color: #808080; /* Dark gray for text */
}

button, input, select, textarea {
	font-family: inherit; /* Form elements inherit body font */
}

input[type=button],
input[type=submit] {
	margin-right: 20px;
	border: none;
	background: #084cdf; /* darker blue */
	padding: 10px 20px;
	border-radius: 10px;
	color: white;
	cursor: pointer;
}

input[type=submit]:hover {
	background-color: #1e90ff; /* lighter blue */
}

input[type="submit"]:disabled { /* any input with type=submit that is disabled */
	background-color: #cccccc; /* lighter gray */
	color: #666666; /* darker gray */
	cursor: not-allowed;
	box-shadow: none;
}

input[type=file] {
	width: 350px;
	max-width: 100%;
	color: #444;
	padding: 5px;
	background: white;
	border-radius: 10px;
	border: 1px solid #555;
}

input[type=file]::file-selector-button:hover {
	background-color: #1e90ff; /* lighter blue */
}

input[type=file]::file-selector-button {
	margin-right: 20px;
	border: none;
	background: #084cdf; /* darker blue */
	padding: 10px 20px;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
}

#form-container {
	background-color: #f0f0f0; /* light gray background */
	width : 500px;
	padding: 20px;
	border: 1px solid #cccccc; /* medium gray */
	border-radius: 8px;
	display: flex; /* one-dimensional vert or horiz layout as opposed to grid */
	flex-direction: column;
	align-items: center;
	gap: 15px;
	justify-content: center;
	margin: 20px auto;
	box-shadow: 5px 5px 5px lightgray;
	text-align: center;
}

#form-container form {
	display: flex; /* one-dimensional vert or horiz layout as opposed to grid */
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

.clipbutton {
    font-size:10pt;
    text-decoration: none;
    color:gray;
    cursor: pointer; 
}

.widebutton {
    font-size:12pt;
	width:250px;
	color:white;
	background:#084cdf;
	width:250px;
	margin-right: 20px;
	border: none;
	padding: 10px 20px;
	border-radius: 10px;
	cursor: pointer;
}

.widebutton:hover {
	background-color: #1e90ff; /* lighter blue */
}

.disabledwidebutton {
    font-size:12pt;
	color:white;
	background:darkgray;
	width:250px;
	margin-right: 20px;
	border: none;
	padding: 10px 20px;
	border-radius: 10px;
	cursor: not-allowed;
}

.buttonlike {
	color:white;
	background:#084cdf;
}

.buttonlike:hover {
	color:white;
	background:#1e90ff;
}