/************************************************************
 * html components redefined
 ************************************************************/

/**
 * Purpose: Override default font face, size, and color for all the
 * major block-level containers.
 */
body, table, input, select, textarea, p, td, span, div {
	font-size: 13pt;
	font-family: Helvetica, Arial, sans-serif;
}

@media (min-width: 576px) {
	body, table, input, select, textarea, p, td, span, div {
		font-size: 11pt;
		font-family: Helvetica, Arial, sans-serif;
		line-height: 24px;
	}
}

/**
 * Purpose: Override background to be transparent for body and tables.
 */
body, table {
	background-color: transparent;
}

/**
 * Purpose: Zero out margins for the page so we can have graphics flush with the edges.
 */
body {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
	line-height: 24px;
}

/**
 * Tag: p
 * Purpose: Adjust top/bottom margins to not chew up so much vertical
 * space on P tags.
 */
p {
    margin-top: 3px;
    margin-bottom: 6px;
}

/**
 * Purpose: Don't fully underline link text until the user hovers over the link.
 */
a, .linkdec {

	text-decoration: none;

}
a.nodec {
	text-decoration: none;

	border-bottom: 1px none;

}
a:hover {

	text-decoration: none;

}
a.nodec:hover {

	text-decoration: none;
	border-bottom: 1px none;

}

/**
 * Purpose: Prevent forms from consuming extra layout space.
 */
form {
	margin: 0px;
	display: inline;
}

/**
 * Purpose: bold text in label tags by default, typically used as the
 * text for radio buttons and checkboxes.
 */
label {
    font-weight: bold;
    vertical-align: middle;
	line-height: 32px;
}


/************************************************************
 * General, useful components.
 ************************************************************/

/**
 * Tag or Class: small
 * Purpose: Control font size of <small> tag for on-screen hints,
 * which is usually one size too small in most browsers.
 */
small, .small {
	font-size: 8.5pt;
	font-weight: normal;
}

.instructionalText {
	font-size: 9pt;
}

.todo {
	padding: 5px;
	border: 2px dotted #6666aa;
	background-color: #ffffcc;
	color: #6666aa;
}

/**
 * Class: bodyTitle
 * Purpose: Header for a bodyText block.
 */
.bodyTitle {
    padding-top: 6px;
	padding-left: 20px;
    font-weight: bold;
}

/**
 * Class: bodyText
 * Purpose: Alternative to blockquote that when used on a div tag
 * will not chew up the vertical space that blockquote tag does.
 */
.bodyText {
    padding-right: 20px;
	padding-left: 20px;
    padding-top: 3px;
    padding-bottom: 3px;
}

/**
 * Class: label
 * Usage: Generic text-only container that is concise, descriptive,
 * not a contentHeader or groupHeader, and intended to call out or
 * frame a block in the column next to it.  Does not have fixed
 * width like the label classes below with a name descriptive of width.
 */
table tr td.label {
    font-weight: bold;
    padding-left: 10px;
}

/***  Nice label for left side of a 2-column table, which makes up form content.  ***/
/***  This is just for tables now, but may be pulled out if needed as a generic.  ***/
table tr td.shortLabel {
    width: 100px;
    padding-left: 8px;
	padding-right: 8px;
	line-height: 24px;
}
table tr td.mediumLabel {
    width: 165px;
	padding-left: 8px;
	padding-right: 8px;
	line-height: 24px;
}
table tr td.wideLabel {
    width: 225px;
	padding-left: 8px;
	padding-right: 8px;
	line-height: 24px;
}


input, select {
    opacity: 0.99;  /* work-around for Safari 5.7.1 UIWebView/Carbon glitch with input type=text fields having black background */
	height: 32px;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	padding: 0 4px 0 4px;
	margin-bottom: 2px;
	margin-top: 2px;
}

textarea {
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	padding: 0 4px 0 4px;
	opacity: 0.99;  /* work-around for Safari 5.7.1 UIWebView/Carbon glitch with input type=text fields having black background */
	min-height: 64px;
	margin-bottom: 2px;
	margin-top: 2px;
 }

input[type='checkbox'], input[type='radio'] {
	vertical-align: middle;
	height: 41px;
}

td input[type='checkbox'], input[type='radio'] {
	vertical-align: middle;
	height: 43px;
}

input.veryTinyField {
	width: 40px;
}

input.tinyField {
	width: 60px;
}
select.tinyField {
	min-width: 60px;
}

input.colorPickerField {
	width: 70px;
}

input.smallField, textarea.smallField {
	width: 130px;
}
select.smallField {
	min-width: 130px;
}

input.mediumField, textarea.mediumField {
	width: 200px;
}
select.mediumField {
	min-width: 200px;
}

input.largeField, textarea.largeField {
	width: 270px;
}
select.largeField {
	min-width: 270px;
}

input.hugeField, textarea.hugeField {
	width: 340px;
}
select.hugeField {
	min-width: 340px;
}

input.wideField {
	min-width: 100%;
}

input.enormousField, textarea.enormousField {
	width: 410px;
}
select.enormousField {
	min-width: 410px;
}

/************************************************************
 * Alert components.
 ************************************************************/

div.alertContainer {
	text-align:center;
	margin-bottom:2px;
}

/** Alert title uses non-brandable colors, but the forced bg and fg result
	in the component always being clearly visible. Note that this is meant
    to be used with non-wrapped text. Otherwise it looks ugly. **/
span.alertTitle {
	background-color: #f23e46;
	color: #FFF;
	padding: 4px;
	border-radius: 2px;
	box-shadow: 1px 1px 1px #aaaaaa88;
	border: 1px solid rgba(0,0,0,.125);
}

.background-disabled {
	background: lightgray;
}

.hide {
	display: none;
}

.show {
	display: block;
}

.language-flag-button {
	float: right;
	width: 24px;
	height: 16px;
	margin-right: 16px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 24px;
	border: none;
}

.language-international-flag-button-wrap {
	float: right;
	padding: 4px;
	border-radius: 4px;
	border: 1px solid #ced4da;
	height: 34px;
	cursor: pointer;
	background-color: #FFFFFF;
}

.language-international-flag-button-wrap span {
	float: right;
	height: 24px;
	line-height: 24px;
}

.language-international-flag-button {
	float: left;
	width: 28px;
	height: 24px;
	background-position: left;
	background-repeat: no-repeat;
	background-size: 24px;
	border: none;
	background-color: transparent;
}

.language-flag-icon {
	float: left;
	margin-right: 1.5rem;
	margin-top: 4px;
	width: 24px;
	height: 16px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 24px;
}

.dropdown-languages .dropdown-item {
	cursor: pointer;
}