/* Reproduces the form-control appearance that jQuery Mobile used to produce by
   auto-enhancing bare inputs, selects and buttons on these pages. jQuery Mobile
   was removed, so these rules do the same job without the library.

   Loaded only by the pages that lost jQuery Mobile, so nothing else can be
   affected. Values are the computed styles measured on the pre-upgrade pages:
   wrapper 294x38, border 1px #0a3874, radius 7px, focus glow 0 0 12px #0a3874. */

/* Text, password and textarea.
   Only .inputText is styled here. jQuery Mobile used to also enhance every
   class-less text control, but the pages' own CSS positions their labels with
   selectors like "div .floating-label" that only matched because jQuery Mobile
   injected a wrapper div around each input. Without that wrapper the label
   rules stop matching, so styling bare inputs here moves their labels out of
   place. Those pages keep their post-port appearance until the wrapper is
   restored, which needs JavaScript rather than this stylesheet. */
input.inputText {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 294px;
	height: 38px;
	margin: 0 0 6px;
	padding: 3px 3px 0;
	background-color: #ffffff;
	border: 1px solid #0a3874;
	border-radius: 7px;
	color: #333333;
	font-family: helvetica, arial, verdana, sans-serif;
	font-size: 14.4px;
	line-height: normal;
}
textarea.inputText {
	height: auto;
	min-height: 38px;
	padding: 4px;
}
input.inputText:focus {
	box-shadow: 0 0 12px #0a3874;
	outline: none;
}
input.inputText:disabled,
input.inputText[disabled] {
	background-color: #ffffff;
	border-color: #cccccc;
	box-shadow: none;
}

/* Buttons --------------------------------------------------------------------
   jQuery Mobile wrapped these in a shrink-wrapped .ui-btn and ignored the
   width attribute the pages set inline, so width:auto is forced to match. */
input.submit,
input.submitbutton,
input.submitred,
button.submit,
button.submitbutton,
button.submitred {
	display: inline-block;
	box-sizing: border-box;
	width: auto !important;
	min-width: 47px;
	margin: 7px 0;
	padding: 7px 7px;
	background: #ffffff;
	color: #333333;
	border: 1px solid #0a3874;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	font-family: helvetica, arial, verdana, sans-serif;
	font-size: 14.4px;
	line-height: 1.3;
	cursor: pointer;
}
input.submitred,
button.submitred {
	border-color: #990000;
	color: #990000;
}
input.submit:hover,
input.submitbutton:hover,
button.submit:hover,
button.submitbutton:hover {
	background: #f2f2f2;
}
input.submit:disabled,
input.submit[disabled],
input.submitbutton:disabled,
button.submit:disabled {
	color: #aaaaaa;
	border-color: #cccccc;
	box-shadow: none;
	background: #ffffff;
	cursor: default;
}

/* The page's floating label was positioned against jQuery Mobile's input
   wrapper. With the input at its original 38px height the existing -28px and
   -36px offsets land back inside the box, so nothing to do here. */

/* Floating-label field wrapper (login/password and similar single-input pages).
   jQuery Mobile used to inject a wrapper div around each input; these rules
   recreate that so the label sits inside the box and floats above the value.
   JS toggles .is-active so autofilled values float the label too. */
.field-wrap {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 294px;
	height: 38px;
	margin: 0 0 6px;
	background: #ffffff;
	border: 1px solid #0a3874;
	border-radius: 7px;
}
.field-wrap input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 17px 8px 2px;
	border: none;
	background: transparent;
	outline: none;
	font-family: helvetica, arial, verdana, sans-serif;
	font-size: 14.4px;
	color: #333333;
	border-radius: 7px;
}
.field-wrap .floating-label {
	position: absolute;
	left: 8px;
	top: 50%;
	margin-top: -10px;
	font-size: 16px;
	color: #0a3874;
	pointer-events: none;
}
.field-wrap.is-active .floating-label {
	top: 5px;
	margin-top: 0;
	font-size: 12px;
}
.field-wrap input:focus { box-shadow: 0 0 12px #0a3874; }