/**
 * 
 * @package		Livesite
 * @version		1.3.5-beta
 * @author		Bogdan Vojska 
 * @copyright	2011-2020 Bogdan Vojska. All rights reserved.
 * @homepage	www.bogdan-vojska.de
 * @email		mail@bogdan-vojska.de
 *
 */
 
@CHARSET "UTF-8";

/* Common control styles */

.text {
	line-height : 150%;
}

.input {
	font-size : 9pt;
	background-color : #fff;
	border : 1px solid #aaa;
	width : 255px;
	padding-left : 5px;
}
.input.text {
	padding-left : 5px;
}
.input.markedyellow {
	background-color : #dd3;
	color: #000;
}
.input.markedred {
	background-color : #d22;
	color : #fff;
	font-weight : bold;
	font-size : 9pt;
}

.input.markedblue  {
	background-color : #332eb1;
	color : #fff;
	font-weight : bold;
	font-size : 9pt;
}

.input.scalar {
	line-height : 11pt;
	height : 14pt;
	font-size : 9pt;
	padding-left : 5px;
	background-color : #fff;
	border : 1px solid #aaa;
}

.textbutton {
	line-height: 120%;
	font-size: 12px;
	color: #555;
	background-color : #eee;
	border: 1px solid #888;
	border-radius : 4px;
	padding: 0px 3px;
	margin : 0px 5px;
	display: inline-block;
	cursor: pointer;
}

.textbutton.gray {
	color: #555;
	background-color : #eee;
}

.commandbutton {
    border : 1px solid #aaa;
    background-color : #DCDAD5;
    color : #666666;
    border-radius : 11px;
    font-weight : 700;
    font-size : 10pt;
    line-height : 14pt;
    padding : 0 8px;
    text-align : center;
    text-decoration : none;
    height : 22px;
    margin : 5px;
    min-width : 140px;
    display : inline-block;
    cursor : pointer;
}

.iconbutton {
	margin : 2px;
	cursor : pointer;
}

.iconbutton img {
	vertical-align : top;
}

.iconbutton.alterimage {
	width : 16px;
	height : 16px;
	position : relative;
	top : 25px;
	left : 7px;
	display : block;
	opacity : 0.5;
}
.iconbutton.alterimage:hover {
	opacity : 1;
}

.iconbutton.enlarger {
	margin : 5px;
}

.value {
	min-height : 22px;
	margin : 0px 5px;
	font-weight: normal;
	line-height : 22px;
}
.caption {
	min-height : 22px;
	margin : 0px 5px;
	font-weight: normal;
	line-height : 22px;
}

p.label {
	margin : 0px 5px;
	font-weight: normal;
}
	
div.label {
	min-height : 22px;
	margin : 0px 5px;
	font-weight: normal;
	text-align: right;
	line-height : 22px;
	float : left;
}
div.input {
	font-size : 9pt;
	line-height : 13pt;
	min-height : 13pt;
}

select > option {
    color : #000;
}
.input.select {    
	background: url(../../../images/system/arrow_solidBlackDown_9px.png) no-repeat center right 3px;
    -moz-appearance: none;
}
.input.select > option {
    color : #000;
}
.input.select.selectmultiple
.input.select.multiple {
	padding : 0 0 0 0;
	border : 1px solid #aaa;
	min-height : 90px;
}
.selectbox {
	background-color : #fff;
	border : 1px solid #aaa;
	width : 255px;
}
.selectbox.dd  {
	width : 40px;
}
.selectbox.dm  {
	width : 80px;
}
.selectbox.dy {
	width : 60px;
}

.textarea {
	max-height : 470px;
	border : 1px solid #aaa;
	}	
.textarea.default {
	width : 400px;
	height : 20px;
	}
.textarea.regular {
	width : 400px;
	height : 20px;
	overflow : auto;
	}
.textarea.medium {
	width : 400px;
	height : 150px;
	overflow : auto;
	}
.textarea.large {
	width : 400px;
	height : 300px;
	overflow : auto;
	}
.textarea.huge {
	width : 400px;
	height : 600px;
	overflow : auto;
	}

/* Form tab classes */

.tabControl {
	border-width : 3px 1px 0 1px;
	border-color : #666;
	border-style : solid solid none solid;
	background-color : #f9f9f9;
	padding: 2px 5px 2px 5px;
	text-align: center;
	display : inline-block;
}
.tabControl:hover {
	border-top : 3px solid #00cc00;
	background-color : #ddd;
	text-align: center;
	cursor: pointer;
}
.tabControl.active {
	border-top : 3px solid #00cc00;
	background-color : #f9f9f9;
	text-align: center;
}
.tabControl.block {
	display : inline-block;
}
.tabControl.hidden {
	display : none;
}

.tabframe {
	border: 1px solid #777;
	padding : 3px;
}
.tabframe.hidden {
	display : none;
}
.tabframe.block {
	display : block;
}


/* Form vertical slider section control */

#opener {
	margin : 3px 0;
}
#opener * {
	display : inline;
}
#opener > span {
	margin-left : 3px;
}
#opener img {
	height : 10px;
	width : 10px;
}
#opener.targetframe {
	display : none;
}
#opener.label {
	margin : 0px 5px;
	display : inline
}
.opener {
	margin : 3px 0;
}
.opener * {
	display : inline;
}
.opener > span {
	margin-left : 3px;
}
.opener img {
	height : 10px;
	width : 10px;
}
.opener.targetframe {
	display : none;
}
.opener.label {
	margin : 0px 5px;
	display : inline
}

/* Optionselector - The detailed style for select controls */

.optionselector {
	border : 1px solid #aaa;
	background-color : #fff;
	max-height : 600px;
}
.optionselector option.selected {
	background-color : #ff0;
	color : #000;
}
.optionselector option {
	color : #000;
}
.optionselector option.label {
	color : #444;
	background-color : #eee;
	border-top : medium none;
}
.optionselector option.separator {
	border-top : 2px solid #666;
	color : #fff;
	height : 22px;
}

/* Radiogroup */

.radiogroup.trigger {
	min-width : 200px;
	text-align : left;
}

.radiogroup.trigger > div {
	width : 50%;
}

.radiogroup.trigger .caption {
	min-width : calc( 50% - 40px);
	text-align : left;
}

/* Optionlists and Autocomplete */
 
.autocomplete-items > div {
	cursor : pointer;
}

/* Separator */

.formgroup .separator {
	font-size : 0.9em;
	border-top : 2px solid #aaa;
	color : #fff;
	background-color : #aaa;
	padding : 2px 0 2px 5px;
	min-height : 2px;
	padding-bottom : 5px;
	clear : both;
}
.formgroup .separator.topline {
	background-color : inherit;
	border-top : 2px solid #aaa;
	color : inherit;
}
.formgroup .separator.bottomline {
	background-color : transparent;
	border-bottom : 2px solid #aaa;
	color : #666;
}
.formgroup .separator.noborder {
	border : medium none;
}

/* Spacer */

.spacer {
	float : left;
	height : 20px;
}

/* colorpicker */
.colorpicker > .colorbox {
	height : 14pt;
	width : 14pt;
	margin : 0 5px 0 0;
	background : transparent;
	border : 1px solid #999;
}

.colorpicker > .input.text {
	height : 14pt;
}

/* Dialogmenu */

.dialogmenu.frame {
	background-color : #fff;
	border-top : 2px solid #aaa;
	left : 0px;
	height : auto;
}

.dialogmenu.frame.hidden {
	display : none;
}
.dialogmenu.frame.block {
	display : block;
}

.dialogmenu > * {
	display: block;
	height : auto;
}

.dialogmenu .option {
	padding : 3px 5px;
}

.dialogmenu .option:hover {
	background-color : #eaeaea;
}

/* Datalist control */

.formgroup .frame.datalist,
.frame.datalist {
	padding : 0;
	display : flex;
	flex-direction : column;
	position : relative;
}

.formgroup .frame.datalist .datalistinput,
.frame.datalist .datalistinput {
	width : 100%;
	padding : 2px;
	border : medium none;
	background-color : #fff;
}
.formgroup .frame.datalist > .optionlist,
.frame.datalist > .optionlist {
	border : 1px solid #aaa;
	background-color : #fff;
	padding : 3px 5px;
}
.frame.datalist .option {
	padding : 1px 5px;
}
.frame.datalist .option:hover {
	background-color : #eaeaea;
}

/** paginator **/

#paginator {
	display: flex;
	gap : 2px;
	margin: 5px 0 5px 0;
	flex-direction: row;
	align-items: flex-start;
}
#paginator > * {
	text-align: center;
	border : medium none;
	display : flex;
	align-items : center;
	justify-content : center;
	min-width : 15px;
	min-height : 15px;
}
#paginator > form {
	width : auto;
	cursor : pointer;
	vertical-align : middle;
}
#paginator > .pgnbutton.first {
	background-image : url(../../../images/system/arrow_boxedGreyLeft_15px.png);
	background-repeat : no-repeat;
}
#paginator > .pgnbutton.last {
	background-image : url(../../../images/system/arrow_boxedGreyRight_15px.png);
	background-repeat : no-repeat;
}
#paginator > form.first,
#paginator > form.last {
}
#paginator > div.range,
#paginator > form.range,
#paginator > .paginator_legend {
}