ef-dropdown,
ef-tags-input{
	display: block;
	z-index: 1;
	position: relative;
	width: 100%;

	outline: 1px solid #cdcdcd;
	background-color: #fff;
	border-radius: 3px;
}

ef-dropdown:focus-within,
ef-tags-input:focus-within
{
	outline-color: #46c7f2;
	box-shadow: 0px 0px 3.5pt 0.5pt rgba(70, 199, 242, 1);
}

.ef-fieldset{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: baseline;

	/*margin: 0 10px;*/
}

.ef-fieldset .ef-field{
	flex: 1 1 auto;
}



.ef-fieldset-legend{
	width: 100%;
}

.ef-field .x-dropdown,
.ef-field .x-input-text{
	width:100%;
}


.x-dropdown,
.x-textarea,
.x-input-text,
.x-input-search,
.x-droppanel dt{
	border:1px solid #cdcdcd;
	background-color: #fff;
	border-radius:3px;
}

.x-dropdown:focus,
.x-textarea:focus,
.x-input-text:focus,
.x-input-search:focus,
.x-element-focus{
	border-color:#46c7f2;
	box-shadow: 0px 0px 3.5pt 0.5pt rgba(70, 199, 242, 1);
}

.x-form-invalid .x-dropdown:invalid,
.x-form-invalid .x-textarea:invalid,
.x-form-invalid .x-input-text:invalid{
	border-color: #F24677FF;
	box-shadow: 0px 0px 3.5pt 0.5pt #F24677FF;
}

.x-dropdown:disabled,
.x-textarea:disabled,
.x-input-text:disabled,
.x-input-search:disabled,
.x-element-disabled{
	background-color:#f5f5f5;
	resize: none;
}

.x-textarea,
.x-input-text,
.x-input-search{
	box-sizing: border-box;
}

/*
.x-input-file{

}
*/


/**
 * Custom drop down
 */
.x-droppanel{
	position:relative;
	margin:0px;
}

.x-droppanel dt{
	background: #fff url("images/angle-down.png") no-repeat 99% center;
	cursor: pointer;

	height:36px;
	margin:0px;
	padding: 0 10px;

}

.x-droppanel dd{
	visibility: hidden;
	margin:0px;
	padding:0px;
	position:absolute;
	max-height: 200px;

	border: 1px solid #cdcdcd;
    background-color: #fff;

	width:100%;
	overflow: auto;
	margin-top: 2px;
}

.x-shared-panel{
	position:fixed;
	background-color: #fafafa;
	overflow:auto;
	z-index: 99;
	margin-top: 2px;
	max-height: 50%;
}




@media(max-device-width:1200px){
	.x-textarea{
		padding: 5px;
	}

	ef-dropdown,
	ef-tags-input {
		height:20px;
	}

	.x-input-text{
		height:20px;
		padding: 0 10px;
	}

	.x-dropdown{
		height:20px;
		padding: 0 0 0 10px;
		cursor:pointer;
	}
	
	.x-droppanel dt{
		height:20px;
	}

	.x-input-search{
		height:	20px;
		padding: 0 10px 0 30px;
		background-image: url("img/search.png");
		background-repeat: no-repeat;
		background-position: 5px center; 
	}
}
@media(min-device-width:1201px) and (max-device-width:1600px){
	.x-textarea{
		padding:10px;
	}

	ef-dropdown,
	ef-tags-input {
		height:30px;
	}

	.x-input-text{
		height:30px;
		padding: 0 10px;
	}

	.x-dropdown{
		height:30px;
		padding: 0 0 0 10px;
		cursor:pointer;
	}
	
	.x-droppanel dt{
		height:30px;
	}

	.x-input-search{
		height:30px;
		padding: 0 10px 0 30px;
		background-image: url("img/search.png");
		background-repeat: no-repeat;
		background-position: 5px center; 
	}
}
@media(min-device-width:1601px){
	.x-textarea{
		padding:10px;
	}

	ef-dropdown,
	ef-tags-input {
		height:36px;
	}

	.ef-fieldset-legend{
		padding-bottom: 10px;
	}

	.ef-fieldset{
		padding: 10px;
	}

	.ef-fieldset > .ef-field + .ef-field{
		margin-left: 10px;
	}

	.x-input-text{
		height:36px;
		padding: 0 10px;
	}

	.x-dropdown{
		height:36px;
		padding: 0 0 0 10px;
		cursor:pointer;
	}
	
	.x-droppanel dt{
		height:36px;
	}	

	.x-input-search{
		height:36px;
		padding: 0 10px 0 30px;
		background-image: url("img/search.png");
		background-repeat: no-repeat;
		background-position: 5px center; 
	}
}

.x-hover:hover{
	background-color:#97bfe8
}



.x-element-error{
	border-color:#ff9494;
	box-shadow: 0px 0px 3.5pt 0.5pt rgba(242, 70, 70, 1);
}


.x-daterange,
.x-datepicker{
	cursor:pointer;
}

.x-datepicker{
	padding: 0 10px 0 30px;
	background-image: url("images/calendar.png");
	background-repeat: no-repeat;
	background-position: 5px center; 
}


/**
 * Knopki
 */
.x-btn{
	min-height:40px;
	padding: 0 20px;

	/*margin:0 8px; poziceonirovanie vnutri dolzno zadovatsaj vnutri elementra (opisat otdelno iduschie podrjad knopki)*/
	
	border-radius: 2px 2px 2px 2px;
	-moz-border-radius: 2px 2px 2px 2px;
	-webkit-border-radius: 2px 2px 2px 2px;
	cursor:pointer;
	
	background-color: transparent;
	/*Esli v knopke net teksta ee pozicionirovanie smeshaetjsa*/
	vertical-align: top;
}

.x-btn-blue{background-color: #46c7f2}
.x-btn-blue-selected,
.x-btn-blue:hover,
.x-btn-blue:active{background-color:#33b7e3}

.x-btn-blue:disabled{background-color:rgba(70,199,242,0.5)}


.x-btn-red{background-color: #ff9494}
.x-btn-red:hover,
.x-btn-red:active{background-color:#EC8485}
.x-btn-red:disabled{background-color:rgba(255,148,148,0.5)}


.x-btn-gray{background-color: #cdcdcd}

.x-btn.x-icon:not(:empty){
	background-position: 20px center;
	padding-left: 43px;
}

.x-btn.x-icon:empty{
	background-position: center;
}


/**
 * Zagolovki
 */
.x-label{
	display:block;
}

.x-label .x-input-radio{
	margin-right:7px;
}

.x-label .x-input-checkbox{
	margin-right:7px;
}

.x-legend{
	padding:10px;
}

/**
 * Forma
 */
.x-form{
	width:100%;
	display: flex;
	box-sizing: border-box;
	flex-flow:row nowrap;
	flex-shrink:0;
	justify-content: flex-end;
	/*align-items: center;*/
}



.x-form > .x-fieldset{
	flex: 1 100%;
	-webkit-flex: 1 100%;
	-ms-flex: 1 100%;
}

.x-fieldset  select.x-dropdown,
.x-fieldset .x-textarea,
.x-fieldset .x-input-text,
.x-fieldset .x-input-search,
.x-fieldset .x-datepicker
{
	width:100%;
}


fieldset.x-fieldset{
	margin:0 10px 0 10px;
}

.x-input-not-empty + .x-input-clear{
	visibility: visible;
}

.x-input-clear{
	position: absolute;
	background:#fff url("images/text-cls.png") no-repeat center center;
	top:12px;
	right:11px;
	width:16px;
	height:16px;
	visibility: hidden;
	cursor: pointer;
}


@media(max-device-width:1200px){
	.x-label{
		display:block;
		margin-bottom: 3px;
		margin-top: 4px;
	}
}
@media(min-device-width:1201px) and (max-device-width:1600px){
	.x-label{
		display:block;
		margin-bottom: 5px;
		margin-top: 6px;
	}

}
@media(min-device-width:1601px){
	.x-label{
		display:block;
		margin-bottom: 5px;
		margin-top: 10px;
	}
}