select {-webkit-appearance: none;}
input, select, textarea, span.checkbox {border: solid 1px lightgray; border-radius: 4px; box-sizing: border-box; color: #000; font-family: Verdana, Arial, sans-serif; font-size: 16px; padding: 6px;}
select {background:#fff;}
input:focus, select:focus, textarea:focus, span.checkbox:focus {outline: solid 2px #0066ff;}
input.err:focus, select.err:focus, textarea.err:focus, span.checkbox.err:focus {border-color: red !important;}
form_wrap {text-align: center; width: 100%; display: inline-block;}
form .preamble {background: #eee; border-radius: 8px; display: inline-block; margin: 10px 0; padding: 10px; width: 414px;}
form fieldset {background: #f2f2f2; border: none; border-radius: 8px; box-sizing: border-box; display: inline-block; padding: 15px;}
form.login {background: #fff; border: solid 1px #ccc; border-radius: 8px; box-shadow: 4px 4px 8px 0 #000; color: #000; display: inline-block; max-width: 410px; padding: 10px;}
form label {box-sizing: border-box; display: inline-block; font-size: 16px; overflow: hidden; padding: 7px 6px 7px 0; text-overflow: ellipsis; text-align: right; vertical-align: top; width: 120px;}
form .error {border: 1px solid red; border-radius: 8px; padding: 5px; color: red; letter-spacing: -.2px;}
form .lge {width: 260px;}
form .med {width: 195px;}
form .sm {width: 130px;}
form .xs {width: 65px;}
form label.checkbox {padding: 4px 0 0 6px; text-align: left; width: auto;}
form span.checkbox {display: inline-block; height: 12px; vertical-align: middle; width: 12px;}
form span.enabled {background: #fff;}
form span.checked {background: #fff url("../images/icons/checkbox.png") no-repeat center center;}
form p.info {border-radius: 8px; box-shadow: 0 0 4px #c2c2c2; padding: 10px;}
.ui_btn {border: solid 1px gray; border-radius: 4px; font-family: "Trebuchet MS",Arial,sans-serif; font-size: 22px; letter-spacing: 2px; margin-top: 15px; opacity: .9; padding: 8px 4px; text-align: center;}
.ui_btn {background: #0066ff; color: #fff;}
.ui_btn:hover {cursor: pointer; opacity: 1;}
fieldset > div {padding: 2px 0; text-align: left;}
::-moz-placeholder {font-style: italic;}
:focus::-moz-placeholder {color: transparent;}
::-webkit-input-placeholder {font-style: italic;}
::-os-input-placeholder {font-style: italic;}
#wait {display: block; height: 100%; left: 0; position: fixed; text-align: center; top: 0; -ms-transition: opacity .5s; -webkit-transition: opacity .5s; transition: opacity .5s; width: 100%; z-index: 10000;}
#spinner {
-webkit-animation-name: spinner;
-webkit-animation-duration: .6s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-fill-mode: forward;
animation: spinner .6s infinite linear; border-color: #000 rgba(0, 0, 0, .4) rgba(0, 0, 0, .4) rgba(0, 0, 0, .4); border-radius: 50%; border-style: solid; border-width: 8px; display: inline-block; height: 80px; margin: 0 auto; position: relative; top: calc(50% - 48px); width: 80px; z-index: 10001;}
#alert {background: rgba(0,0,0,.4); display: block; height: 100%; left: 0; opacity: 0; position: fixed; text-align: center; top: 0; z-index: 10000; -ms-transition: opacity .5s; -webkit-transition: opacity .5s; transition: opacity .5s; width: 100%;}
#alert_box {background: white; border: 1px solid gray; border-radius: 6px; box-shadow: 4px 4px 8px 0 black; display: inline-block; margin: 0 auto; position: relative; top: -100%; width: 400px; -ms-transition: top 1s; -webkit-transition: top 1s; transition: top 1s; z-index: 1001;}
#alert_box.show {top: 10%;}
#alert_head {border-radius: 6px 6px 0 0; font-size: 24px; letter-spacing: 1px; padding: 10px;}
#alert_head, #alert_body {border-bottom: 1px lightgray solid; text-align: left;}
.fade_in {opacity: 1 !important}
#alert_body, #alert_close {padding: 20px 10px;} 
#alert_close {text-align: center;}

@-webkit-keyframes spinner {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@keyframes spinner {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@media screen and (max-width: 767px) {
 fieldset > div {margin-bottom: 10px;}
 form label.lge, form label.med, form.login label {display: block; font-size: 14px; padding: 0; text-align: left; width: auto;}
 #spinner {border-width: 6px; height: 60px; top: calc(50% - 36px); width: 60px;}
}
@media screen and (max-width: 500px) {
 form label.sm, form label.xs {display: block; font-size: 14px; padding: 0; text-align: left; width: auto;}
form .preamble {width: 280px;}
 }