/*! © 2022 Beastly, Inc. - All rights reserved.
http://www.beastlyinc.com */

/* Revised: June 29, 2022 5:10 PM */

/* ------------------------------------------- Fonts & HTML ------------------------------------------- */

/* This section contains CSS boilerplate for HTML elements and Fonts used in our build. Any
declarations that affect basic HTML elements, except headings, form fields and buttons, should
be made here. */

/* ---------- HTML ---------- */

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

a {
	color: #000;
	display: inline-block; /* Makes focus outline wrap more predictably around image links. */
	text-decoration: none;
	-moz-transition: color .15s ease-in-out;
	-ms-transition: color .15s ease-in-out;
	-o-transition: color .15s ease-in-out;
	-webkit-transition: color .15s ease-in-out;
	transition: color .15s ease-in-out;
}

a:hover:not(.disabled),
a:active:not(.disabled) {
	color: #676767;
}

address {
	font-style: normal;
}

blockquote {
	/**/
}

div {
	text-align: left;
	vertical-align: top;
}

fieldset {
	border: none;
	margin: 0;
	padding: 0;
}

form {
	margin: 0;
	padding: 0;
}

hr {
	border: none;
	border-bottom: 1px solid #CCC;
	margin: 20px 0;
}

iframe {
	border: none;
	margin: 0 0 -3px; /* Corrects 3-pixel margin under iframes in all supported browsers. */
	width: 100%;
	height: 100%;
}

img {
	border: none;
}

label {	/* Note: In this implementation all field labels are positioned above the field. */
	cursor: default;
	display: block;
	/*font-weight: 500;*/
	margin-bottom: 10px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	white-space: nowrap;
}

legend {
	border: none;
	margin: 0;
	padding: 0;
}

nav {
	/**/
}

noscript.main { /* We use .main to avoid conflicts with 3rd-party noscript elements. */
	background: #fff;
	bottom: 0;
	left: 0;
	padding: 10px 20px;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000;
}

p {
	margin: 0 0 20px;
}

p:last-child {
	margin: 0;
}

section {
	/**/
}

sup {
	font-size: 70%;
	margin-right: 2px;
	vertical-align: text-top;
}

table {
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;
	padding: 0;
}

td,
th {
	padding: 0;
	text-align: left;
	vertical-align: top;
}

th {
	font-weight: normal;
}

ol, /* TODO: Verify that we're handling OLs and ULs properly. */
ul {
	margin: 0;
}

ul {
	list-style: none;
	padding-left: 5px;
	text-indent: -10px;
}

ul[class],
nav ul {
	padding: 0;
	text-indent: 0;
}

li {
	margin: 0 0 8px 5px;
}

ul li::before {
	content: "•";
	font-size: 80%;
	padding-right: 5px;
}

ul[class] li,
nav li {
	margin: 0;
}

ul[class] li::before,
nav li::before {
	display: none;
}

li:empty::before {
	content: "";
}

li:last-child {
	margin-bottom: 0;
}

var { /* Var elements are used to hold hidden text need in the UI by JS scripts. */
	width: 0;
	height: 0;
	display: none;
}

/* ---------- Box Model ---------- */

/* We change the box sizing for a tighter UI. */

a,
button,
div,
footer,
h1,
h2,
h3,
h4,
h5,
h6,
header,
input,
li,
nav,
ol,
p,
section,
select,
table,
textarea,
td,
tr,
ul {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* ---------- Cursor ---------- */

/* Helper used to ensure that elements with the following attributes always display
a pointer. */

*[onclick],
*[data-goto] {
	cursor: pointer;
}

/* ------------------------------------------- As  ------------------------------------------- */

/* Link class names should be placed here. These are links that are used throughout
the interface but are not a children of another element. */

/* TODO: Move link classes here. */

/* ------------------------------------------- Text (Types) ------------------------------------------- */

/* Headings and text class names should be placed here. Elements with class names in this
section should not be children of other elements. These are elements that can be used in
multiple general contexts. */

/* ---------- H1 - H6 ---------- */

/*h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	font-family: inherit;
	font-weight: 300;
	line-height: 1.1;
	margin: 0 0 14px;
}

h1,
.h1 {
	font-size: 214%;
}

h2,
.h2 {
	font-size: 171%;
	margin-bottom: 20px;
}

h3,
.h3 {
	font-size: 142%;
}

h4,
.h4 {
	font-size: 128%;
}

h5,
.h5 {
	font-size: 114%;
}

h6,
.h6 {
	font-size: 102%;
}*/

/* ---------- Lead ---------- */

.lead {
	font-size: 150%;
	font-weight: 300;
	line-height: 1.4;
	margin: 0 0 10px;
}

/* ---------- Help ---------- */

.help {
	font-size: 80%;
}

h1 .help,
h2 .help,
h3 .help,
h4 .help,
h5 .help,
h6 .help {
	font-size: small;
}

.help.e,
.help.w {
	text-align: left;
}

.help.n,
.help.s {
	text-align: center;
}

.help.ne,
.help.se {
	text-align: right;
}

/* ------------------------------------------- Text (Colors and Sizes) ------------------------------------------- */

/* ---------- Colors ---------- */

/* TODO: Match up opacity to colors. */

.help {
	/*color: #555;*/
	opacity: 0.5;
}

.light {
	/*color: #888;*/
	opacity: 0.5;
}

/* ---------- Sizes ---------- */

.big {
	font-size: 120%;
}

.medium {
	/* Directly assigned to elements where font size cascading needs to be escaped
	via a ":not(.medium)" pseudo-class on the cascading class. */
}

small,
.small {
	font-size: 92%;
	font-weight: normal;
}

.x-small {
	font-size: 80%;
	font-weight: normal;
}

/* ------------------------------------------- Text (Treatments) ------------------------------------------- */

/* ---------- Transformations ---------- */

.capitalize {
	text-transform: capitalize;
}

.lowercase {
	text-transform: lowercase;
}

.uppercase {
	text-transform: uppercase;
}

/* ---------- Inline Formatting ---------- */

b {
	font-weight: 600;
}

mark {
	background: #f9fac0;
	color: inherit;
}

strong,
.strong {
	font-weight: 600;
}

.thin {
	font-weight: 300;
}

/* ------------------------------------------- Forms  ------------------------------------------- */

/* ---------- Form Layout ---------- */

/*form > section {
	margin-right: -40px;	!* The negative margin here is used to offset right padding in descendants below. *!
	padding: 10px;
	!*background: green;*!
}

!* The "max-width" values of the selectors below, for direct descendants of "form > section" are
each 50% smaller of the next bigger selector. *!

form > section > * {
	max-width: 768px;
	width: 100%;
	background: red;
}

form > section > *.wide {
	max-width: 1024px;
}

form > section > *.narrow {
	max-width: 512px;
}

form > section > *.x-narrow {
	max-width: 256px;
}

form > section > div {
	padding-right: 40px;	!* Matches padding in table cells below; related to negative margin in parent. *!
}

form > hr {
	margin: 20px 10px;		!* Matches left/right padding of "form > section". *!
}

form > section > table {
	table-layout: fixed;
}

form > section > table th,
form > section > table td {
	padding: 0 40px 0 0;	!* Matches padding in divs above; related to negative margin in parent. *!
	position: relative;
}

form > section > table th::after,
form > section > table td::after {
	border-right: 1px solid #DDD;
	bottom: 0;
	content: "";
	position: absolute;
	right: 20px;			!* Should be half of the right padding for cells and headers. *!
    top: 0;
}

form > section > table th:last-child::after,
form > section > table td:last-child::after {
	border-right: none;
}*/

/* ---------- Fields ---------- */

input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=url],
select,
textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background: #FFF;
	border: 1px solid #C0C0C0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	font-size: 100%;
	padding: 5px;
	margin: 0;
	-moz-transition: background .20s ease-in-out, border .15s ease-in-out;
	-ms-transition: background .20s ease-in-out, border .15s ease-in-out;
	-o-transition: background .20s ease-in-out, border .15s ease-in-out;
	-webkit-transition: background .20s ease-in-out, border .15s ease-in-out;
	transition: background .20s ease-in-out, border .15s ease-in-out;
	width: 100%;
}

/* ---------- Radios & Checkboxes ---------- */

/* Removed for Spreadsheet
input[type=radio],
input[type=checkbox] {
	margin: 0;
	vertical-align: middle;
}*/

select:not([multiple]).error {
	background: url(../beastly/css/images/form-select-arrow.png) no-repeat right #fff7f6;
}

/* ---------- Selects ---------- */

select:not([multiple]) {
	background: url(../beastly/css/images/form-select-arrow.png) no-repeat right #fff;
	overflow: hidden;
	padding-right: 30px;
}

@-moz-document url-prefix() {
	select { background: #fff; }
	select.error { background: #fff7f6; }
}

select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #000;
}

select::-ms-expand {
	display: none;
}

select:focus::-ms-value {
	background: none;
	color: inherit;
}

/* ---------- Textareas ---------- */

textarea {
	display: block;
	min-height: 200px;
	/*resize: none;*/
}

textarea.short {
	min-height: 80px;
}

/* ---------- Focus ---------- */

input:focus,
select:focus,
textarea:focus {
	border: 1px solid #909090;
}

/* ---------- Error ---------- */

input.error,
select.error,
textarea.error {
	border: 1px solid #F37171;
}

input.error,
textarea.error {
	background: #FFF7F6;
}

/* ------------------------------------------- Buttons  ------------------------------------------- */

/* ---------- Default ---------- */

button/*,
input[type=button],
input[type=submit]*/ {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background: #5a67d6;
	border: solid 1px #5a67d6;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
	font-size: 100%;
	margin: 0;
	padding: 10px 15px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
	-moz-transition: background .15s ease-in-out, border .15s ease-in-out, color .15s ease-in-out;
	-ms-transition: background .15s ease-in-out, border .15s ease-in-out, color .15s ease-in-out;
	-o-transition: background .15s ease-in-out, border .15s ease-in-out, color .15s ease-in-out;
	-webkit-transition: background .15s ease-in-out, border .15s ease-in-out, color .15s ease-in-out;
	transition: background .15s ease-in-out, border .15s ease-in-out, color .15s ease-in-out;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

button > */*,
input[type=button] > *,
input[type=submit] > **/ {
	pointer-events: none;
}

button:enabled/*,
input[type=button]:enabled,
input[type=submit]:enabled*/ {
	cursor: pointer;
}

button:hover:enabled/*,
input[type=button]:hover:enabled,
input[type=submit]:hover:enabled*/ {
	background: #3b4acf;
	border: solid 1px #3b4acf;
}

/* ---------- Accented ---------- */

button.accented,
input[type=button].accented,
input[type=submit].accented {
	background: #ffffff;
	border: solid 1px #5a67d6;
	color: #5a67d6;
}

button.accented:hover:enabled,
input[type=button].accented:hover:enabled,
input[type=submit].accented:hover:enabled {
	background: #ffffff;
	border: solid 1px #232e92;
	color: #232e92;
}

/* ---------- Outlined ---------- */

button.outlined,
input[type=button].outlined,
input[type=submit].outlined {
	background: none;
	border: solid 1px #5a67d6;
	color: #5a67d6;
}

button.outlined:hover:enabled,
input[type=button].outlined:hover:enabled,
input[type=submit].outlined:hover:enabled {
	background: none;
	border: solid 1px #232e92;
	color: #232e92;
}

/* ---------- Dimmed ---------- */

button.dimmed,
input[type=button].dimmed,
input[type=submit].dimmed {
	opacity: .5;
}

button.dimmed:hover:enabled,
input[type=button].dimmed:hover:enabled,
input[type=submit].dimmed:hover:enabled {
	opacity: .5;
}

/* ---------- Back ---------- */

button.back,
input[type=button].back,
input[type=submit].back {
	background: #0D5EE1;
	border: solid 1px #0D5EE1;
}

button.back:hover:enabled,
input[type=button].back:hover:enabled,
input[type=submit].back:hover:enabled {
	background: #317AF0;
	border: solid 1px #317AF0;
}

/* ---------- Forward ---------- */

button.forward,
input[type=button].forward,
input[type=submit].forward {
	background: #1BB80C;
	border: solid 1px #1BB80C;
}

button.forward:hover:enabled,
input[type=button].forward:hover:enabled,
input[type=submit].forward:hover:enabled {
	background: #35C527;
	border: solid 1px #35C527;
}

/* ---------- Info ---------- */

button.info,
input[type=button].info,
input[type=submit].info {
	background: #33ABD3;
	border: solid 1px #33ABD3;
}

button.info:hover:enabled,
input[type=button].info:hover:enabled,
input[type=submit].info:hover:enabled {
	background: #3FBDE7;
	border: solid 1px #3FBDE7;
}

/* ---------- Warning ---------- */

button.warning,
input[type=button].warning,
input[type=submit].warning {
	background: #EA961E;
	border: solid 1px #EA961E;
}

button.warning:hover:enabled,
input[type=button].warning:hover:enabled,
input[type=submit].warning:hover:enabled {
	background: #F4A32F;
	border: solid 1px #F4A32F;
}

/* ---------- Problem ---------- */

button.problem,
input[type=button].problem,
input[type=submit].problem {
	background: #CC1A20;
	border: solid 1px #CC1A20;
}

button.problem:hover:enabled,
input[type=button].problem:hover:enabled,
input[type=submit].problem:hover:enabled {
	background: #ec272d;
	border: solid 1px #ec272d;
}

/* ---------- Selected ---------- */

/* Note: The colors here are currently the same as the default button colors. */

button.selected,
input[type=button].selected,
input[type=submit].selected {
	background: #9AC0BB;
	border: solid 1px #9AC0BB;
	color: #fff;
}

button.selected:hover:enabled,
input[type=button].selected:hover:enabled,
input[type=submit].selected:hover:enabled {
	background: #A7CCC7;
	border: solid 1px #A7CCC7;
}

/* ---------- Large ---------- */

button.large,
input[type=button].large,
input[type=submit].large {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	font-size: 152%;
	padding: 10px 16px;
}

/* ---------- Small ---------- */

button.small,
input[type=button].small,
input[type=submit].small {
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	font-size: 90%;
	padding: 6px 10px;
}

/* ---------- Extra Small ---------- */

button.x-small,
input[type=button].x-small,
input[type=submit].x-small {
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	font-size: 80%;
	padding: 5px 7px;
}

/* ---------- Icons (Uses "Font Awesome" Library) ---------- */

button > i,
input[type=button] > i {
	display: inline-block;
	text-align: center;
	width: 1.25em;
}

button > i:first-child,
input[type=button] > i:first-child {
	margin: 0 10px 0 -2px;
}

button > i:last-child,
input[type=button] > i:last-child {
	margin: 0 -2px 0 10px;
}

button.small > i:last-child,
input[type=button].small > i:last-child {
	margin: 0 -2px 0 4px;
}

button.extra-small > i:last-child,
input[type=button].extra-small > i:last-child {
	margin: 0 -2px 0 3px;
}

/* ---------- Exit ---------- */

button.exit.extra-small {
	font-size: 90%;
	padding: 2px 3px;
	position: absolute;
	right: 4px;
	top: 4px;
	z-index: 10;
}

button.exit.extra-small::after {
	bottom: -5px;
	content: "";
	left: -10px;
    position: absolute;
	right: -10px;
    top: -5px;
}

button.exit.extra-small > i {
	pointer-events: none;
}

/* ---------- Tool ---------- */

button.tool,
input[type=button].tool,
input[type=submit].tool {
	height: 40px;
	width: 40px;
	background: rgba(0, 0, 0, 0);
	border: none;
	color: rgba(0, 0, 0, .25);
	font-size: 154%;
	text-align: center;
	line-height: 1;
	padding: 0;
	-moz-transition: color .15s linear;
	-ms-transition: color .15s linear;
	-o-transition: color .15s linear;
	-webkit-transition: color .15s linear;
	transition: color .15s linear;
}

button.tool:hover:enabled,
input[type=button].tool:hover:enabled,
input[type=submit].tool:hover:enabled {
	background: rgba(0, 0, 0, 0);
	border: none;
	color: #669F98;
}

/* Tighten up icon for flush right alignment. */

button.tool > i,
input[type=button].tool > i {
	width: 1.1em;
}

/* ---------- Branded ---------- */

/* Buttons that are branded to 3rd-party design guidelines (e.g. Apple, PayPal, Amazon, etc.) */

button.branded-apple-pay,
input[type=button].branded-apple-pay,
input[type=submit].branded-apple-pay {
	-webkit-appearance: -apple-pay-button;
	-apple-pay-button-type: plain;
	color: rgba(0, 0, 0, 0);		/* Hides text in the button; we need text in there to size it properly. */
}

button.branded-paypal,
input[type=button].branded-paypal,
input[type=submit].branded-paypal,
button.branded-paypal:hover:enabled,
input[type=button].branded-paypal:hover:enabled,
input[type=submit].branded-paypal:hover:enabled {
	background: #fec349;
	border: none;
	padding: 2px;
}

/* ---------- Context Changes ---------- */

div.toggle button {
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	margin-left: 0;
	margin-right: 0;
	padding-left: 6px;
	padding-right: 6px;
}

div.toggle button:first-child {
	-moz-border-bottom-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	border-bottom-left-radius: 3px;
	-moz-border-top-left-radius: 3px;
	-webkit-border-top-left-radius: 3px;
	border-top-left-radius: 3px;
}

div.toggle button:last-child {
	-moz-border-bottom-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	border-bottom-right-radius: 3px;
	-moz-border-top-right-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	border-top-right-radius: 3px;
}

/* ---------- Responsive Changes ---------- */

@media (max-width: 512px) {
	
	button,
	input[type=button],
	input[type=submit] {
		font-size: 125%;
	}
	
	button.large,
	input[type=button].large,
	input[type=submit].large {
		font-size: 151%;
	}
	
	button.small,
	input[type=button].small,
	input[type=submit].small {
		font-size: 120%;
	}
	
	button.extra-small,
	input[type=button].extra-small,
	input[type=submit].extra-small {
		font-size: 100%;
	}
	
	button.tool,
	input[type=button].tool,
	input[type=submit].tool {
		font-size: 205%;
	}
	
	div.product.detail div.brief div.toolbar button.tool {
		padding-top: 4px;
		font-size: 250%;
	}
	
}

/* ------------------------------------------- Static Fields and Buttons ------------------------------------------- */

/* These fields and buttons DO NOT change size. */

input.static[type=email],
input.static[type=number],
input.static[type=password],
input.static[type=tel],
input.static[type=text],
input.static[type=url],
select.static,
textarea.static,
button.static,
input.static[type=button],
input.static[type=submit] {
	font-size: 100%;
}

/* ------------------------------------------- UI Components ------------------------------------------- */

/* ---------- Button Bar ---------- */

*.button-bar {
	display: block;
}

*.button-bar > button:not(:first-child):not(:last-child) {
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}

*.button-bar > button:first-child {
	-moz-border-top-right-radius: 0;
	-webkit-border-top-right-radius: 0;
	border-top-right-radius: 0;
	-moz-border-bottom-right-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	border-border-right-radius: 0;
}

*.button-bar > button:last-child {
	-moz-border-top-left-radius: 0;
	-webkit-border-top-left-radius: 0;
	border-top-left-radius: 0;
	-moz-border-bottom-left-radius: 0;
	-webkit-border-bottom-left-radius: 0;
	border-border-left-radius: 0;
}

h2 + *.button-bar {
	margin-bottom: 20px;
	margin-top: -10px;
	/*background: blue;*/
}

/* ------------------------------------------- JS Classes  ------------------------------------------- */

/* Elements in this section are dynamically created by the JS library and are never coded
directly into the UI. They facilitate presentation of fields and their associated labels, help links
and placeholders. Without the JS library, these class names are never used. */

/* ---------- Field Wraps ---------- */

div.wrap-field-group,
div.wrap-field,
div.wrap-radio-and-checkbox {
	/*position: relative;*/
}

div.wrap-field-group {
	padding: 0 0 24px;
}

div.wrap-radio-and-checkbox {
	display: inline-block;
	line-height: 1;
	margin-bottom: 10px;
	margin-right: 14px;
	margin-top: 0;
}

div.terms div.wrap-radio-and-checkbox { /* This handles radio and checkbox wraps in "terms" elements. */
	margin-right: 0;
}

/* ---------- Field Labels ---------- */

label.label-left,
label.label-right {
	vertical-align: middle;
}

label.label-left {
	margin-right: 6px;
}

label.label-right {
	margin-left: 6px;
}

div.wrap-radio-and-checkbox label,
form div.wrap-field-group label {
	/*white-space: nowrap;*/
}

form div.wrap-field-group label {
	display: table;
	margin: 0 8px 4px 0;
	white-space: nowrap;
}

form div.field-label {
	display: table;
	position: relative;
	width: 100%;
}

form div.field-label label {
	margin: 0;
}

form div.field-label div.label-left,
form div.field-label div.label-right {
	display: table-cell;
	padding-top: 8px;
	width: 1px;
}

form div.field-label div.label-left {
	padding-right: 12px;
}

form div.field-label div.label-right {
	padding-left: 12px;
}

/* ---------- Field Help ---------- */

div.field-help {
	position: relative;
}

div.wrap-field + div.help {
	line-height: 1;
	margin: 2px 0 -14px 0;
	min-height: 12px;
	overflow: visible;
}

label + div.field-help {
	margin: -2px 0 4px;
}

label + div.field-help div.help.n,
label + div.field-help div.help.ne {
	margin: 6px 0 0 0;
}

form div.field-label div.help:first-child {
	left: 0;
	margin-top: -2px;
	overflow: visible;
	position: absolute;
	right: 0;
	top: -14px;
	white-space: nowrap;
}

/* ---------- Field Placeholders ---------- */

input[placeholder] {
	text-overflow: ellipsis;
}

*::-webkit-input-placeholder {
	-webkit-transition: opacity .15s ease-in-out;
	color: #808080;
	text-overflow: ellipsis;
	transition: opacity .15s ease-in-out;
	opacity: 1;
}

[placeholder]:focus::-webkit-input-placeholder {
	opacity: .3;
}

*::-moz-placeholder {
	-moz-transition: opacity .15s ease-in-out;
	color: #808080;
	text-overflow: ellipsis;
	transition: opacity .15s ease-in-out;
	opacity: 1;
}

[placeholder]:focus::-moz-placeholder {
	opacity: .3;
}

*:-ms-input-placeholder {
	-ms-transition: opacity .15s ease-in-out;
	color: #808080;
	text-overflow: ellipsis;
	transition: opacity .15s ease-in-out;
	opacity: 1;
}

/* IE Placeholder disappears on focus. This is an acknowledged bug with a planned/promised fix.

References:
- https://twitter.com/MSEdgeDev/status/479699046215319552
- http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css/2610741#2610741 */

[placeholder]:focus:-ms-input-placeholder {
	opacity: .3;
}

select.placeholder {
	color: #808080;
}

/* ------------------------------------------- Special-purpose Fields  ------------------------------------------- */



/* ------------------------------------------- Layout ------------------------------------------- */

/* ---------- Properties ---------- */

/* Used as the main container element for "Properties Sheets" in the UI. These are used in the detail
views of records, and generally contain forms and other visualizations used to edit content. */

.properties {
	width: 100%;
	max-width: 900px;
	padding: 20px;
	background: #F5F5F5;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	/*-moz-box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
	-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15);*/
	/*border: 1px dotted #C5C5C5;*/
}

.properties.large {
	max-width: 1400px;
}

.properties.small {
	max-width: 600px;
}

.properties.x-small {
	max-width: 420px;
}

/* ---------- Rows ---------- */

/* Used for form presentation. These classes divide rows into percentage-based columns. */

.row-25,
.row-25-75,
.row-33,
.row-50,
.row-75-25 {
	display: table;
	table-layout: fixed;
	width: 100%;
	margin-bottom: 20px;
}

.row-25 > *,
.row-25-75 > *,
.row-33 > *,
.row-50 > *,
.row-75-25 > * {
	display: table-cell;
}

.row-25 > * {
	width: 25%;
}

.row-25-75 > :first-child {
	width: 25%;
}

.row-25-75 > :last-child {
	width: 75%;
}

.row-33 > * {
	width: 33%;
}

.row-50 > * {
	width: 50%;
}

.row-75-25 > :first-child {
	width: 75%;
}

.row-75-25 > :last-child {
	width: 25%;
}

.row-25 > :nth-child(1),
.row-25 > :nth-child(2),
.row-25 > :nth-child(3),
.row-25-75 > :first-child,
.row-33 > :nth-child(1),
.row-33 > :nth-child(2),
.row-50 > :first-child,
.row-75-25 > :first-child {
	padding-right: 10px;
}

.row-25 > :nth-child(2),
.row-25 > :nth-child(3),
.row-25 > :nth-child(4),
.row-25-75 > :last-child,
.row-33 > :nth-child(2),
.row-33 > :nth-child(3),
.row-50 > :last-child,
.row-75-25 > :last-child {
	padding-left: 10px;
}

/* TODO: This element should likely be converted to a "Special-purpose field". */

.row-mmmm-d-yyyy {
	display: table;
	table-layout: fixed;
	width: 100%;
}

.row-mmmm-d-yyyy > * {
	display: table-cell;
}

.row-mmmm-d-yyyy > :nth-child(1) {
	width: 50%;
}

.row-mmmm-d-yyyy > :nth-child(2) {
	width: 20%;
	padding: 0 10px;
}

.row-mmmm-d-yyyy > :nth-child(3) {
	width: 30%;
}

/* PRE-2016 CODE BELOW THIS LINE. */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

/* ------------------------- Action Styles ------------------------- */

a.action {
	color:#000000;
	padding-left:3px;
}

a.action:Hover {
	color:#536EF4;
}

a.action-unavailable, span.action-unavailable {
	color:#777777;
	padding-left:3px;
	cursor:default;
}

table.action-overlay-container, td.action-overlay-item-normal, td.action-overlay-item-over {
	background-color:#2679E6;
	border:1px solid #2679E6;
	line-height: 0;
}

img.action-overlay-icon, td.action-overlay-item-normal, td.action-overlay-item-over {
	width:15px;
	height:15px;
}

td.action-overlay-item-normal {
	background:url(/image/layout/layout_overlay_menu_action_BGND_normal.gif);
	background-color:#0057CA;
}

td.action-overlay-item-over {
	background:url(/image/layout/layout_overlay_menu_action_BGND_over.gif);
	background-color:#549AFF;
}

/* ------------------------- Item Styles ------------------------- */

div.item, table.item {
	-moz-box-sizing:border-box; /* Corrects border issue in FireFox. */
	-webkit-box-sizing:border-box; /* Corrects border issue in Safari. */
	background-color:#FFFFFF;
	border:1px solid #C5C5C5;	
}

div.item-holder {
	float:left;
	margin-right:4px;
	margin-bottom:4px;
}

div.item-removed, div.item-pending {
	visibility:hidden;
	width:0px;
	height:0px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:20;
}

/* ------------------------- Option Styles ------------------------- */

a.option {
	color:#000000;
}

a.option:Hover, a.option-hover {
	color:#536EF4;
}

a.option-unavailable, span.option-unavailable {
	color:#777777;
	cursor:default;
}

/* ------------------------- Overlay Styles ------------------------- */

div.overlay-menu {
	/* This class is used in Javascript. */
}

div.overlay-object {
	/* This class is used in Javascript. */
	line-height: 0;
}

img.overlay-header-button {
	width:13px;
	height:13px;
}

img.overlay-header-icon {
	width:16px;
	height:16px;
}

span.overlay-header-title {
	color:#FFFFFF;
	line-height: 1.428;
}

td.overlay-object-content-area {
	padding-top:6px;
	padding-left:6px;
	padding-right:6px;
}

table.overlay-form-normal {
	width:400px;
}

table.overlay-form-wide {
	width:600px;
}

table.overlay-form-extrawide {
	width:800px;
}

table.overlay-form-narrow {
	width:300px;
}

/* ------------------------- Area Header Styles ------------------------- */

div.layout-area-header-closed {
	height:13px;
	width:100%;
	background-color:#E8E8E5;
	border-bottom:1px solid #D8D2BD;
	-moz-box-sizing:border-box; /* Corrects border issue in FireFox. */
}

div.layout-area-header-open {
	height:47px;
	width:100%;
	background-color:#E8E8E5;
	border-bottom:1px solid #D8D2BD;
	-moz-box-sizing:border-box; /* Corrects border issue in FireFox. */
}

/* ------------------------- Area Styles (General) ------------------------- */

table.layout-area-body {
	width: 100%;
	height: 100%;
	table-layout: fixed;
}

td.layout-area-module {
	padding: 0;
}

div.layout-area-component {
	padding: 10px 4px 0;
	width: 100%;
}

/* ------------------------- Breadcrumb Styles ------------------------- */

a.breadcrumb {
	color:#777777;
}

a.breadcrumb:Hover {
}

span.breadcrumb {
	color:#777777;
}

span.breadcrumb-here {
	color:#0D1DE0;
}

table.breadcrumb-bar {
	height:32px;
	width:100%;
	background-color:#F2F2F1;
	border-bottom:1px solid #D8D2BD;
	-moz-box-sizing:border-box; /* Corrects border issue in FireFox. */
}

a.breadcrumb-light {
	font-size:10px;
	color:#0D1DE0;
}

a.breadcrumb-light:Hover {
}

/* ------------------------- Form Styles ------------------------- */

iframe.form, div.form {
	width:100%;
	height:200px;
	border:1px solid #AAAAAA;
	margin:0px;
	margin-top:2px;
	margin-bottom:8px;
	overflow:auto;
	background-color:#FFFFFF;
}

input.button {
	width:91px;
	height:21px;
	border:none;
	margin-left:10px;
	margin-top:10px;
	background:url(/image/layout/button_normal.gif);
}

input.button_small {
	width:71px;
	height:18px;
	border:none;
	margin-bottom:8px;
	margin-top:2px;
	background:url(/image/layout/button_small.gif);
}

input.search, input.signin {
	border:1px solid #AAAAAA;
}

input.search, td.search, input.signin {
	width:140px;
}

table.form-1, table.form-2, table.form-3, table.submit {
	width: 500px;
}

table.form-1, table.form-3 {
	margin-top: 0;
}

table.form-1 {
	margin-bottom: 0;
}

table.submit {
	margin-top: 0;
	margin-bottom: 0;
}

/*textarea.normal, select.normal, input.normal {
	width:100%;
	margin-bottom:8px;
	margin-top:2px;
	border:1px solid #AAAAAA;
	background-color:#FFFFFF;
}*/

*.form-big {
	width:756px;
}

*.form-medium {
	width:600px;
}

*.form-small {
	width:420px;
}

*.form-smaller {
	width:330px;
}

td.checkbox-element {
	vertical-align:middle;
	width:16px;
}

td.checkbox-text, td.checkbox-text-parent {
	vertical-align:middle;
	padding-left:4px;
	overflow:hidden;
}

td.checkbox-text-parent {
	font-weight:bold;
	padding-bottom:0px;
}

/* ------------------------- Group Styles ------------------------- */

div.group {
	width:100%;
	margin-bottom:10px;
	background-image:url(/image/layout/layout_liner.gif);
}

div.group-container, div.group-container-heading, div.group-container-heading-subsequent, div.group-container-error, div.group-container-error-subsequent, div.group-container-in-form {
	width:100%;
	border-bottom:dotted 1px #C5C5C5;
	background-repeat:repeat-x;
}

div.group-container, div.group-container-heading, div.group-container-heading-subsequent, div.group-container-in-form {
	background-image: linear-gradient(#fff, #fdffb3 200px);
}

div.group-container-error, div.group-container-error-subsequent {
	background-image:url(/image/layout/layout_group_background_error.gif);
}

div.group-container{
	padding-right:4px;
	padding-bottom:30px;
	margin-bottom:20px;
}

div.group-container-heading, div.group-container-error{
	padding-right:4px;
	padding-top:10px;
	margin-bottom:20px;
}

div.group-container-heading-subsequent, div.group-container-error-subsequent{
	padding-right:4px;
	padding-top:0px;
	margin-bottom:20px;
}

div.group-container-in-form-separator {
	height:20px;	
}

div.group-container-in-form-table {
	padding-left:10px;
	padding-right:10px;
}

div.group-container-heading, div.group-container-heading-subsequent, div.group-container-error, div.group-container-error-subsequent, div.group-container-in-form {
	padding-bottom:20px;
}

div.group-frame {
	padding:15px;
	background-color:#FFFFFF;
	border:dotted 1px #C5C5C5;
}

td.group-heading {
	color:#000000;
	font-weight:bold;
	background-color:#FFFFFF;
	padding-right:10px;
	white-space:nowrap;
}

/* ------------------------- Heading Styles ------------------------- */

a.heading, span.heading {
	font-weight:bold;
}

/* ------------------------- Help Styles ------------------------- */

a.help {
	font-size:10px;
	color:#0E299F;
}

a.help:Hover {
	color:#428EFF;
}

/* ------------------------- Hidden Styles ------------------------- */

div.hidden {
	height:0px;
	width:0px;
	display:none;
}

/* ------------------------- Image Styles ------------------------- */

img.dot {
	height:1px;
	width:1px;
}

img.icon-action {
	vertical-align:top;
	margin-left:7px;
	margin-right:2px;
}

img.icon-small, img.icon-action, td.icon-small {
	width:16px;
	height:16px;
}

img.icon-collapse {
	width:22px;
	height:22px;
}

img.icon-collapse-mini {
	width:11px;
	height:11px;
}

img.icon-collapse-tiny {
	width:9px;
	height:9px;
}

img.icon-indicator {
	width:14px;
	height:14px;
}

img.icon-medium {
	width:32px;
	height:32px;
}

img.icon-message {
	width:31px;
	height:17px;
}

img.icon-large {
	width:48px;
	height:48px;
}

img.space {
	height:1px;
	width:2px;

}

/* ------------------------- Legal Styles ------------------------- */

a.legal {
	font-size:10px;
	color:#D6DFF7;
	font-weight:bold;
}

a.legal:Hover {
	color:#EAF0FF;
}

div.legal {
	font-size:10px;
	color:#BCC9F0;
	padding:12px;
}

/* ------------------------- Node Styles ------------------------- */

div.node-container, div.node-container-grayed, div.node-container-negative {
	float:left;
	margin:4px;
}

div.node-container {
	border:1px solid #5C93E2;
	background-color:#ECEFFF;
}

div.node-container-grayed {
	border:1px solid #989898;
	background-color:#E9E9E9;
}

div.node-container-negative {
	border:1px solid #E34D78;
	background-color:#FFEBEB;
}

div.node-item, div.node-item-grayed, div.node-item-negative {
	width:160px;
	padding-top:4px;
	border:1px solid #FFFFFF;
}

div.node-item {
	background:url(/image/layout/layout_node_item_background_01.gif);
	background-repeat:repeat-x;
	background-position:bottom;
}

div.node-item-grayed {
	background:url(/image/layout/layout_node_item_background_02.gif);
	background-repeat:repeat-x;
	background-position:bottom;
}

div.node-item-negative {
	background:url(/image/layout/layout_node_item_background_03.gif);
	background-repeat:repeat-x;
	background-position:bottom;
}

/* ------------------------- Underline Styles ------------------------- */
span.underline {
	border-bottom:1px dotted #C5C5C5;
}

/* ------------------------- View Styles ------------------------- */

a.view {
	color:#2758F3;
}

a.view:Hover {
	color:#2758F3;
}

/* ------------------------- List Styles ------------------------- */

a.list {
	color:#2758F3;
}

a.list:Hover {
	color:#448CFF;
}

table.list {
	width:100%;
	margin-top:10px;
}

td.listcontrol-1, td.listcontrol-2 {
	vertical-align:middle;
}

td.listcontrol-2 {
	width:33%;
}

td.listhead-1, td.listhead-2, td.listhead-3,
td.listrow-1a, td.listrow-2a, td.listrow-3a, td.listrow-1b, td.listrow-2b, td.listrow-3b {
	height:22px;
	padding-top:4px;
}

td.listhead-1, td.listhead-2,
td.listrow-1a, td.listrow-1b {
	padding-right:6px;
	padding-left:6px;
}

td.listhead-seperator, td.listrow-seperator-a, td.listrow-seperator-b {
	width:1px;
}

td.listhead-seperator {
	background-color:#FFFFFF;
}

td.listhead-1 {
	background-color:#ABBEEF;
}

td.listhead-2, td.listhead-3 {
	background-color:#D6DFF7;
}

td.listhead-2 {
	width:100px;
}

td.listhead-3,
td.listrow-3a, td.listrow-3b {
	width:22px;
	text-align:center;
}

td.listrow-1a, td.listrow-2a, td.listrow-3a {
	background-color:#FFFFFF;
}

td.listrow-1b, td.listrow-2b, td.listrow-3b {
	background-color:#E9EDFB;
}

td.listrow-2a, td.listrow-2b {
	text-align:center;
}

td.listrow-seperator-a {
	background-color:#FFFFFF;
}

td.listrow-seperator-b {
	background-color:#E9EDFB;
}

/* ------------------------- Loading Styles ------------------------- */

div.loading {
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
	z-index:10;
	display:none;
	text-align:center;
	vertical-align:middle;
	background-image:url(/image/layout/layout_loading_background.png);
}

div.loading-1 {
	width:280px;
	height:60px;
	background-color:#FFFFFF;
	text-align:center;
	vertical-align:middle;
	margin-left:auto;
	margin-right:auto;
}

table.loading-2 {
	width:100%;
	height:100%;
	background-color:#EEF0FC;
	border:2px solid #1367D5;
	text-align:center;
	vertical-align:middle;
	background-image:url(/image/layout/layout_loading_inner_background.gif);
}

/* ------------------------- Menu Styles (Left Menu Area) ------------------------- */

td.layout-menu-left-closed,
td.layout-menu-left-open {
	height: 100%;
	background-color:#1367D5;
}

td.layout-menu-left-closed {
	width: 13px;
}

td.layout-menu-left-open {
	width: 210px;
}

td.layout-menu-left-closed > table,
td.layout-menu-left-open > table {
	width: 100%;
	height: 100%;
}

/* ------------------------- Message Styles ------------------------- */

div.message {
	height: 30px;
	vertical-align: middle;
}

a.message-link {
	height: 16px;
	color: #0D1DE0;
}

a.message-link:Hover {
}

/* ------------------------- Navigation Styles (Top Links) ------------------------- */

a.tab {
	height:16px;
	color:#000000;
	margin-left:5px;
	margin-right:5px;
}

a.tab:Hover {
}

a.tab-here {
	height:16px;
	color:#3131EE;
	margin-left:5px;
	margin-right:5px;
}

a.tab-here:Hover {
}

/* ------------------------- Navigation Styles (Left Navigation Groups) ------------------------- */

a.navigation {
	height:16px;
	color:#0E299F;
	padding-left:6px;
	padding-right:6px;
}

a.navigation-unavailable, span.navigation-unavailable {
	height:16px;
	color:#828BB9;
	padding-left:6px;
	padding-right:6px;
}

a.navigation:Hover {
	color:#536EF4;
}

div.navigation-1 {
	height:100%;
	padding-top:2px;
}

div.navigation-2 {
	height:22px;
	width:186px;
	background-image:url(/image/layout/navigation_header_menu_background_01.gif);
	margin-left:auto;
	margin-right:auto;
}

div.navigation-3 {
	float:left;
	font-weight:bold;
	color:#0E299F;
	margin-top:4px;
	margin-left:6px;
}

div.navigation-4 {
	float:right;
}

div.navigation-5 {
	height:22px;
	width:186px;
	background-image:url(/image/layout/navigation_header_menu_background_02.gif);
	margin-left:auto;
	margin-right:auto;
}

div.navigation-6 {
	width:186px;
	background-color:#D6DFF7;
	border-top:1px solid #E9EDFB;
	border-left:1px solid #E9EDFB;
	border-right:1px solid #E9EDFB;
	-moz-box-sizing:border-box; /* Corrects border issue in FireFox. */
	-webkit-box-sizing:border-box; /* Corrects border issue in Safari. */
	padding-top:12px;
	padding-bottom:4px;
	margin-left:auto;
	margin-right:auto;
}

div.navigation-7 {
	height:4px;
	width:186px;
	background-image:url(/image/layout/navigation_header_menu_footer_01.gif);
	margin-left:auto;
	margin-right:auto;
	font-size:0px; /* Corrects div height issue in IE. */
}

div.navigation-8 {
	padding-left:6px;
	padding-right:0px;
	height:16px;
	margin-bottom:4px;
}

div.navigation-9 {
	float:left;
	font-size: 11px;
	line-height: 1.128;
}

div.navigation-10 {
	height:16px;
}

/* ------------------------- Sign-In Styles ------------------------- */

table.signin {
	width:400px;
	height:225px;
	border:2px solid #1367D5;
	margin-left:auto;
	margin-right:auto;
}

td.signin-header {
	height:50px;
	border-bottom:2px solid #1367D5;
	-moz-box-sizing:border-box; /* Corrects border issue in FireFox. */
}

table.signin-header-inner {
	width:100%;
	height:100%;
	border:2px solid #5C93E2;
	-moz-box-sizing:border-box; /* Corrects border issue in FireFox. */
	background-image:url(/image/layout/layout_signin_header_background.gif);
}

table.signin-form {
	width:100%;
	height:100%;
	border:2px solid #FFFFFF;
	-moz-box-sizing:border-box; /* Corrects border issue in FireFox. */
	background-image:url(/image/layout/layout_signin_form_background.gif);
}

/* ------------------------- Text Styles ------------------------- */

span.error {
	color:#BB0000;
}

a.light, span.light, div.light {
	color:#777777;
}

span.small {
	font-size:10px;
}

/* ------------------------- Misc. Styles ------------------------- */

.clear {
	clear:both;
}

/*2015 Styles*/

.lightened,
.lightened * {
	color: silver;
}