/*
 * SRAD framework custom tags style classes
 *
 */
.sf-container {
	
}

/*
 * .sf-tag is the base 'namespace' for the custom tags
 * All styling is below is prefixed by it. That allows easy theme switching.
 */
.sf-tag { /*width: 220px;*/
	/* padding: 4px; */
	margin-right: 10px;
	text-align: left;
}

/* =============================================================================
   Label styles
   ========================================================================== */

/*
 * Base styles for labels and fieldset's legend tags nested inside our custom tags.
 */
.sf-tag label,.sf-tag legend {
	color: #555555;
}

/*
 * When we have .label-top set on our sf-tag, we should position the label on top of the 
 * wrapped input or select field.
 */
.sf-tag.label-top label {
	display: block !important;
	min-height: 18px !important;
	margin-bottom: 3px !important;
	text-align: left !important;
}

/*
 * When we have .label-left set on our sf-tag, we should position the label on left of the 
 * wrapped input or select field.
 */
.sf-tag.label-left {
	width: auto !important;
	display: inline !important;
}

.sf-tag.label-left label {
	display: inline-block;
	margin-right: 4px;
}

/*
 * Information icon
 */
.sf-info {
	display: inline-block;
	height: 10px;
	width: 12px;
	background-image: url("/registers/javax.faces.resource/images/i_12x10.png.xhtml?ln=sf");
	background-repeat: no-repeat;
}

/* =============================================================================
   Datatable styles
   ========================================================================== */
.sf-dataTable>tbody  td {
	vertical-align: top;
}

.sf-dataTable>tbody td>* {
	margin-top: 2px;
}
/* =============================================================================
   List styles
   ========================================================================== */
.sf-tag ul {
	padding: 0px;
	margin: 0px;
}

.sf-tag ul li {
	margin-left: 15px;
}

/* =============================================================================
   Default style classes for components and their display modes
   ========================================================================== */

/*
 * A group should span all the width of the wrapping container.
 */
.sf-tag.sf-group {
	width: auto;
	margin-right: 0px;
}

/*
 * Editable mode styles
 */
.sf-tag input[type='text'],.sf-tag textarea,.sf-tag select {
	/*width: 210px;*/
	width: 100%;
	max-width: 100%;
	background-color: #ffffff;
	border: 1px solid #cccccc;
}

.sf-tag input[type='text']:focus,.sf-tag textarea:focus,.sf-tag select:focus {
	border-color: rgba(82, 168, 236, 0.8);
	outline: 0 none;
}

/* 
 * Required field styles 
 */
.sf-required>input[type='text'],.sf-required>textarea,.sf-required>select,.sf-required.sf-label>label {
	border-color: #d8d806;
	background-image: none !important;
	background-color: #F8F9C5;
}

.sf-required>input[type='text']:focus,.sf-required>textarea:focus,.sf-required>select:focus {
	border-color: #aab300;
	outline: 0 none;
}

/* 
 * Error styles 
 */
.sf-error>input[type='text'],.sf-error>textarea,.sf-error>select,.sf-error.sf-label>label {
	border-color: #df382c;
	background-image: none !important;
	background-color: #EF6E6B;
}

.sf-error>input[type='text']:focus,.sf-error>textarea:focus,.sf-error>select:focus {
	border-color: #bc271c;
	outline: 0 none;
}

/* 
 * Warning styles 
 */
.sf-warning>input[type='text'],.sf-warning>textarea,.sf-warning>select,.sf-warning.sf-label>label {
	border-color: #eca918;
	background-image: none !important;
	background-color: #FCE092;
}

.sf-warning>input[type='text']:focus,.sf-warning>textarea:focus,.sf-warning>select:focus {
	border-color: #c18910;
	outline: 0 none;
}

/* 
 * Preview styles 
 */
.sf-preview>span {
	display: inline-block;
	width: 100%;
	min-height: 18px;
	color: #555555;
	border: 1px solid transparent;
	border-bottom: 1px solid #aaaaaa;
	background-color: #dedede;
	cursor: url("/registers/javax.faces.resource/images/cancel.png.xhtml?ln=sf"), auto;
}

.sf-preview.sf-error>span {
	background-color: #EF6E6B;
}

.sf-preview.sf-required>span {
	background-color: #F8F9C5;
}

/* 
 * Disabled styles 
 */
.sf-disabled>input[type='text'],.sf-disabled>textarea,.sf-disabled>select,.sf-disabled.sf-label>label {
	background-image: none !important;
	background-color: #eeeeee !important;
	border: 1px solid #aaaaaa;
	cursor: url("/registers/javax.faces.resource/images/cancel.png.xhtml?ln=sf"), auto;
}

.sf-disabled>input[type='text']:focus,.sf-disabled>textarea:focus,.sf-disabled>select:focus {
	border-color: #888888;
	outline: 0 none;
}

/* =============================================================================
   InputText style classes
   ========================================================================== */
.sf-tag.sf-input-text {
	
}

/* =============================================================================
   InputText with calendar style classes (dateField)
   ========================================================================== */
.sf-tag.sf-date-field {
	position: relative;
}

.sf-tag.sf-date-field .sf-calendar-img {
	position: absolute;
	right: 0px;
	top: 22px;
}

/* =============================================================================
   Textarea style classes
   ========================================================================== */
.sf-tag.sf-textarea label {
	float: left;
}

.sf-tag.sf-textarea.label-top label {
	float: none;
}

.sf-tag.sf-textarea.height-2 textarea {
	height: 48px;
	line-height: 18px;
}

.sf-tag.sf-textarea.height-4 textarea {
    height: 96px;
    line-height: 18px;
}

/* =============================================================================
   SelectOneMenu style classes
   ========================================================================== */
.sf-tag.sf-select-one select {
	
}

/* =============================================================================
   SelectManyMenu style classes
   ========================================================================== */
.sf-tag.sf-select-many label {
	float: left;
}

.sf-tag.sf-select-many.label-top label {
	float: none;
}

.sf-tag.sf-select-many select {
	height: 56px;
	/*width: 220px;*/
}

.sf-tag.sf-select-many.sf-preview span {
	height: auto;
}

/* =============================================================================
   Checkbox style classes
   ========================================================================== */
.sf-tag.sf-checkbox input {
	float: left;
}

.sf-tag.sf-checkbox label {
	display: inline;
}

/*
.sf-tag.sf-checkbox.sf-required {
	background-color: #F8F9C5;
}

.sf-tag.sf-checkbox.sf-error {
	background-color: #EF6E6B;
}

.sf-tag.sf-checkbox.sf-warning {
	background-color: #FCE092;
}

.sf-tag.sf-checkbox.sf-disabled {
	background-color: #eeeeee;
}
*/

/* =============================================================================
   Checkbox style classes
   ========================================================================== */
.sf-tag.sf-radiobutton fieldset {
	padding: 0px 5px;
}

.sf-tag.sf-radiobutton fieldset legend {
	padding: 0px 3px;
	font-size: 12px;
}

/* when label-top is applied */
.sf-tag.sf-radiobutton.label-top fieldset label {
	position: relative;
	top: -15px;
	padding: 0px 5px 0px 0px;
}

.sf-tag.sf-radiobutton.label-top fieldset input {
	position: relative;
	top: 18px;
	left: -5px;
}

/* when label-right is applied */
.sf-tag.sf-radiobutton.label-right fieldset label {
	position: relative;
	top: -2px;
}

.sf-tag.sf-radiobutton.label-right fieldset input {
	
}

/* when label-left is applied */
.sf-tag.sf-radiobutton.label-left table {
	padding-bottom: 1px;
}

.sf-tag.sf-radiobutton.label-left table:after {
	content: "\0020";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	overflow: hidden;
}

.sf-tag.sf-radiobutton.label-left fieldset label {
	float: right;
}

.sf-tag.sf-radiobutton.label-left fieldset input {
	float: right;
	margin: 3px 5px 0px 3px;
}

.sf-tag.sf-radiobutton.sf-error legend {
	background-color: #EF6E6B;
	color: #ffffff;
}

.sf-tag.sf-radiobutton.sf-warning legend {
	background-color: #FCE092;
}

.sf-tag.sf-radiobutton.sf-disabled legend {
	background-color: #dddddd;
}

/* =============================================================================
   Button field style classes
   ========================================================================== */
.sf-tag.sf-button-field {
	position: relative;
}

.sf-tag.sf-button-field .button-field-icon {
	position: absolute;
	right: 2px;
	top: 22px;
}

/* =============================================================================
   Group style classes
   ========================================================================== */
.sf-tag.sf-group fieldset {
	padding: 15px 5px 5px 5px;
	margin-bottom: 20px;
	border: 1px solid #888888;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-khtml-border-radius: 3px;
}

.sf-tag.sf-group fieldset legend {
	padding: 0 5px;
	margin-left: 10px;
	font-size: 13px;
	font-weight: bold;
}

/* =============================================================================
   Label style classes
   ========================================================================== */
.sf-tag.sf-label {
	padding: 4px 0px;
	color: #555555;
	font-size: 13px;
}

/* =============================================================================
   Grid style classes
   ========================================================================== */

/*
 * A grid row is a container for sf-tag's to be aligned visualy and logicaly in a row.
 */
.sf-row {
	display: block;
	padding: 3px 0px;
}

/*
 * Clear the floats from the nested floated content.
 */
.sf-row:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.sf-row .sf-tag {
	float: left;
}

.sf-row .sf-tag.max-width {
	width: 940px;
}

/* =============================================================================
   Tooltip style classes
   ========================================================================== */

/*
 * The tooltip content being generated inside the sf-tag container should not be visible.
 */
div.tooltip,.sf-tag div.tooltip {
	display: none;
}

/*
 * This is a marker class for sf-tags that have a tooltip content to show.
 * The tooltip plugin looks after for this marker to know whether to show a tooltip or not
 * for given field.
 */
.has-tooltip {
	
}

#tiptip_content {
	font-size: 13px !important;
}

#tiptip_content span {
	display: block;
}

#tiptip_content ul {
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}

.tooltip-error {
	color: #df382c;
	font-weight: bold;
}

.tooltip-warning {
	color: #eca918;
	font-weight: bold;
}

.tooltip-info {
	color: #1e9f2a;
	font-weight: bold;
}

/* =============================================================================
   Ajax loader style classes
   ========================================================================== */
.sf-ajax-loader {
	z-index: 2000;
}

.sf-ajax-loader img {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
}

.sf-ajax-loader .text {
	display: block;
	position: absolute;
	top: 46%;
	left: 50%;
	width: 400px;
	color: black;
	margin-left: -200px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

.sf-ajax-loader.after-loader {
	position: absolute;
}

.sf-ajax-loader.after-loader img {
	position: relative;
}

.sf-ajax-loader.modal-loader {
	position: fixed;
}

.sf-ajax-loader.modal-loader img {
	margin-top: -5px;
	margin-left: -8px;
}

.sf-ajax-loader.static-loader {
	position: fixed;
	right: 15px;
	top: 10px;
}

.sf-ajax-loader.inplace-loader {
	position: absolute;
}

.sf-ajax-loader.inplace-loader img {
	margin-top: -5px;
	margin-left: -8px;
}

/* =============================================================================
   Common style classes
   ========================================================================== */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.sf-hidden,.sf-tag.sf-hidden {
	display: none !important;
}

/* =============================================================================
   File upload
   ========================================================================== */
div[id$=fileContent] label {
	float: right;
	margin-right: 20px;
}

.sf-fileupload {
	float: left;
}

.sf-fileupload .rf-fu,.sf-fileupload .rf-fu-hdr {
	float: right;
	width: auto;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
}

.sf-fileupload .rf-fu-btn-cnt-add {
	paddin-left: 0;
	cursor: pointer;
}

.sf-fileupload .rf-fu-btn-add {
	margin: 0;
}

.sf-fileupload .rf-fu-btns-rgh,.sf-fileupload .rf-fu-lst {
	display: none !important;
}

.sf-fileupload .rf-fu-btns-lft {
	width: 100%;
}

.sf-fileupload-sf-fileupload-dl-link {
	float: left;
	margin: 3px 0 0 2px;
}

.sf-fileupload-dl-link {
	display: inline-block;
	float: left;
	margin-right: 5px;
	margin-top: 3px;
}

.sf-fileupload.sf-required .rf-fu-btn-add {
	border-color: #d8d806;
	background-color: #F8F9C5;
	background-image: none !important;
}

/* =============================================================================
   Codelist Auto-complete
   ========================================================================== */
.sf-codelist {
	position: relative;
}

input[type="text"].sf-codelist-input {
	z-index: 100;
}

.sf-codelist>.sf-codelist-image {
	background-repeat: no-repeat;
	background-image: url("/registers/javax.faces.resource/images/dropdown_arrow.png.xhtml?ln=sf") !important;
	cursor: pointer;
	height: 18px !important;
	width: 18px !important;
	position: absolute;
}

.sf-codelist.label-top>.sf-codelist-image {
	top: 26px;
	right: -5px;
}

.sf-codelist.label-left>.sf-codelist-image {
	top: 5px;
	right: 4px;
}

.clTable .sf-codelist-image {
	top: 3px;
	right: 3px;
}

.ui-autocomplete {
	max-height: 160px;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	overflow-x: hidden;
}

/* Hyphenation */
.sf-preview>span,.sf-fileupload-dl-link {
	-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

/* Rich modal panel */
.sf-documentContainer .rf-pp-shade {
	opacity: 0.9;
}