/*
form {
	display: table;
	width: 100%;
}

.form__item {
	display: inline-block;
	margin: 5px;
	min-height: 58px;
	float: left;

	// běžný input
	label {
		display: block;
		text-transform: uppercase;
		font-size: 12px;
		font-weight: 600;
		margin-bottom: 5px;
		color: $color--grayforms-label;
	}
	select,
	input,
	textarea {
		display: block;
		width: calc(100% - 10px);
		padding-left: 10px;
		line-height:30px;
		border: 1px solid $color--grayforms-border;
		box-shadow: inset 0 0 0 0 black;
		&:required, &.required { 
			border: 1px solid rgba($color--additional, 0.5); 
			background-image: url(imgs/asterisk.png);
			background-position: right center;
			background-repeat: no-repeat;
		}
		&:focus { outline: none; border: 1px solid $color--grayforms-label; }
	}
	select {
		width: 100%;
		padding-top: 4px;
		padding-bottom: 4px;
		&:required {
			background-image: none;
		}
	}
	textarea {
		width: calc(100% - 10px);
		height: 120px;
		resize: vertical;
	}

	&.narrow {
		margin: 0 10px;
		min-height: 32px;
		label {
			margin-top: 5px;
		}
	}
	&.group {
		input[type=radio] + label,
		input[type=checkbox] + label,
		label[for^=radio],
		label[for^=checkbox] {
			display: inline-block;
			margin-right: 25px;
			margin-top: 10px;
			min-height: 45px;
			text-transform: none;
			color: $color--black;
			font-weight: 400;
		}

		.form__item {
			margin-left: 0;
		}
	}

	&.column {
		label[for^=checkbox] {
			display: block;
		}
	}

	&.error {
		label {
			display: inline-block;
			width: auto;
			&:before {
				box-shadow: 0px 0px 3px 0px $color--red;
			}
		}
		.message {
			display: inline-block; 
			margin-left: 20px;
			color: $color--red;
			font-size: 12px;
			float: right;
		}
		select,
		input,
		textarea {
			box-shadow: 0px 0px 3px 0px $color--red;
			margin: -1px;
		}
	}

	&.line {
		label { 
			display: inline-block; 
			margin-right: 40px;
		}

		input {
			width: 250px;
			display: inline-block;
		}

		.slider-range {
			display: inline-block;
			width: 50%;
		}
	}

	&.right { float: right; }
	&.alone { display: block; float: none; }
	
	&.has-roletka {
		position: relative;
	}
	&.has-tickets {
		width: calc(100% - 20px);
	}

	.remove { display: none; }
	&.removeable {
		input {
			width: calc(100% - 45px);
			float: left;
			display: inline-block;
		}
		.remove {
			display: inline-block;
			width: 30px;
			height: 30px;
			margin-top: 2px;
			font-size: 16px;
			float: right;
			position: relative;
			background: $color--additional;
			color: $color--white;
			box-shadow: $shadows-visible;
			transition: 0.2s all linear;
			cursor: pointer;
			&:hover { background: darken($color--additional, 5%); box-shadow: none; text-decoration: none;}	

			&:after {
				content: "\e104";
				font-family: 'icomoon';
				display: block;
				width: 20px;
				height: 20px;
				position: absolute;
				top: 8px;
				left: 5px;
				color: $color--white;
				transition: all 0.2s linear;
				transform: rotate(45deg);
			}

			&.moved {
				margin-top: 1.5rem;
			}
		}
		.form__item {
			margin: 0 10px 0 0;
			min-height: 35px;
			input { width: calc(100% - 10px); }
		}
	}


	// checkbox
	label[for^="checkbox"] {
		position: relative;
		cursor: pointer;
		line-height: 22px;
		margin-top: 27px;
		padding-left: 32px;
		&:before {
			content: "";
			display: inline-block;
			float: left;
			width: 20px;
			height: 20px;
			border: 1px solid $color--grayforms-border;
			background-color: $color--white;
			margin-right: 10px;
			margin-left: -32px;
		}
		&:after {
			position: absolute;
			width: 25px;
			height: 25px;
			content: "";
			display: none;
			left: -2px;
			top: -3px;
			transition: 0.2s all linear;
			background: none;
			background: url(imgs/checkbox--checked.png);
		}

		& + input[type="text"] {
			display: inline-block;
			width: 250px;
			margin-top: -1px;
			margin-left: -20px;
		}
	}
	label[for^="radio"] {
		position: relative;
		cursor: pointer;
		line-height: 22px;
		display: inline-block;
		margin-right: 20px;
		margin-top: 7px;
		padding-left: 20px;
		text-transform: none;
		&:last-child {
			margin-right: 0;
		}

		&:before {
			content: "";
			display: inline-block;
			float: left;
			border: 1px solid $color--grayforms-border;
			background-color: $color--white;
			margin-right: 10px;
			border-radius: 10px;
			width: 18px;
			height: 18px;
			margin-left: -20px;
		}

		&:after {
			position: absolute;
			content: "";
			display: block;
			transition: 0.2s all linear;
			border-radius: 10px;
			width: 10px;
			height: 10px;
			top: 5px;
			left: 5px;
		}
	}
	input[type="checkbox"] {
		display: none !important;
		&:checked + label[for^="checkbox"] {
			&:after {
				display: block;
			}
		}
	}
	input[type="radio"] {
		display: none;
		&:checked + label[for^="radio"] {
			&:after {
				background: $color--graydark;;
			}
		}
	}
	input[name=filter] {
		background-color: $color--white;
		background-image: url(imgs/magnifier.png);
		background-repeat: no-repeat;
		background-position: calc(100% - 7px) center;
	}

	input.hasDatepicker {
		background: $color--white url(imgs/calendar.svg) no-repeat;
		background-position: right center;
		background-size: contain;
		cursor: pointer;
	}

	input[readonly] {
		background: $color--grayforms-border;
	}

	button {
		float: right;
		margin-right: 20px;
		margin-top: 16px;
	}
}

.form__item--100 {
	@extend .form__item;
	width: calc(100% - 20px);
	clear: both;

	&.form__item--container {
		width: calc(100% - 60px);

		.popup--form & {
			margin: 10px;
		}
	}

	&.centered {
		text-align: center;
		button.btn--important { float: none; }
		button.btn--back { float: left; }
	}

	label[for^=checkbox] {
		margin-top: 17px;
	}
	.form__item {	
		label[for^=checkbox] {
			margin-top: 28px;
		}
	}
	
	&.group {
		input[type=radio] + label,
		input[type=checkbox] + label,
		label[for^=radio],
		label[for^=checkbox] {
			display: inline-block;
			margin-right: 25px;
			margin-top: 10px;
			min-height: 45px;
			text-transform: none;
			color: $color--black;
			font-weight: 400;
		}

		.form__item {
			margin-left: 0;
		}
	}

}


.form__item--75 {
	@extend .form__item;
	width: calc(75% - 20px);
	display: inline-block;
	float: left;
}

.form__item--66 {
	@extend .form__item;
	width: calc(66% - 20px);
	display: inline-block;
	float: left;

	&.form__item--container {
		width: calc(66% - 80px);
	}
	&.group {
		margin: 10px;
		label[for^=checkbox] {
			min-height: auto;
			margin-top: 7px;
			margin-bottom: 5px;
		}
	}
	&.has-tickets {
		input { 
			width: calc(66% - 20px); 
			display: inline-block;
			float: left;
		}
		.tickets__container {
			width: calc(66% - 20px);
			float: left;
		}
		.roletka {
			width: calc(66% - 9px);
		}
	}

	.removeable & {
		width: calc(66% - 30px);
	}
}

.form__item--50 {
	@extend .form__item;
	width: calc(50% - 20px);
	display: inline-block;
	float: left;

	&.form__item--container {
		width: calc(50% - 60px);
	}
	&.group {
		margin: 10px;
		label[for^=checkbox] {
			min-height: auto;
			margin-top: 7px;
			margin-bottom: 5px;
		}
	}
	&.has-tickets {
		input { 
			width: calc(50% - 20px); 
			display: inline-block;
			float: left;
		}
		.tickets__container {
			width: calc(50% - 20px);
			float: left;
		}
		.roletka {
			width: calc(50% - 9px);
		}
	}

	.removeable & {
		width: calc(50% - 30px);
	}
}
.form__item--35 {
	@extend .form__item;
	width: calc(35% - 20px);
	min-width: 180px;
	display: inline-block;
	float: left;
	&.group {
		margin: 10px;
		label[for^=checkbox] {
			min-height: auto;
			margin-top: 7px;
			margin-bottom: 5px;
		}
	}
	&.has-tickets {
		input { 
			width: calc(35% - 20px); 
			display: inline-block;
			float: left;
		}
		.tickets__container {
			width: calc(65% - 20px);
			float: left;
		}
		.roletka {
			width: calc(35% - 9px);
		}
	}
}
.form__item--30 {
	@extend .form__item;
	width: calc(33% - 20px);
	display: inline-block;
	float: left;
	&.group {
		margin: 10px;
		label[for^=checkbox] {
			min-height: auto;
			margin-top: 7px;
			margin-bottom: 5px;
		}
	}
}
.form__item--25 {
	@extend .form__item;
	width: calc(25% - 20px);
	min-width: 180px;
	display: inline-block;
	float: left;


	&.form__item--container {
		width: calc(25% - 60px);
	}

	&.group {
		input[type=radio] + label,
		input[type=checkbox] + label,
		label[for^=checkbox],
		label[for^=radio] {
			min-height: auto;
			margin-top: 7px;
			margin-bottom: 5px;
		}
	}
	&.has-tickets {
		width: calc(50% - 20px);
		input { 
			width: calc(50% - 20px); 
			display: inline-block;
			float: left;
		}
		.tickets__container {
			width: calc(50% - 20px);
			float: left;
		}
		.roletka {
			width: calc(25% - 9px);
		}
	}
}
.form__item--25--alone {
	@extend .form__item;
	width: calc(100% - 40px);
	display: block;
	min-width: 300px;

	input,select {
		width: calc(25% - 10px);
	}
}
.form__item--15 {
	@extend .form__item;
	width: calc(15% - 20px);
	min-width: 120px;
	display: inline-block;
	float: left;
}
.form__item--10 {
	@extend .form__item;
	width: calc(10% - 20px);
	min-width: 85px;
	display: inline-block;
	float: left;
}

.form__item--alone {
	@extend .form__item;
	width: calc(100% - 20px);
	display: block;
	min-width: 300px;
	input {
		width: 50%;
	}
}

.form__item.box-right {
	label {
		display: inline-block;
		&:before {
			float: right;
			margin-left: 10px;
		}
	}
}

.form__item.box-button {
	float: right;
}

.form__item--line {
	@extend .form__item;
	min-height: 35px;
		label { 
			display: inline-block; 
			margin-right: 10px !important;
		}

		input {
			width: 250px;
			display: inline-block;
		}

		.slider-range {
			display: inline-block;
			width: 50%;
		}

		&.w80 {
			input { width: 80px; }
		}
}

.form__item--container {
	display: table;
	padding: 20px;
	background: rgba($color--grayforms-border, 0.5);
	.heading {
		display: block;
		width: 100%;
		font-size: 14px;
		margin-bottom: 10px;
		color: $color--additional;
		font-weight: 800;
		text-transform: uppercase;
		text-align: left;
	}
	.form--filter & {
		margin: 10px 0;
		width: calc(100% - 40px);
	}

}

.form__item--row {
	display: table;
	width: 100%;
	.form__item--container {
		margin-right: 0;
		&.form__item--50 {
			width: calc(50% - 50px);
		}
		&.form__item--25 {
			width: calc(25% - 50px);
		}
	}
}

.form--filter {
	display: none;
	&.active {
		display: block;
	}
}

.form__separator {
	display: table;
	width: 100%;
	padding-top: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid $color--grayforms-border;
}

.form__item--btn--ahead {
	text-align: left;
	button {
		float: left;
		margin-top: 32px;
	}
}

.form__item--btn--labeled {
	@extend .form__item;
	text-align: left;
	button {
		float: left;
		margin-top: 0;
	}
}

.form__note,
span.form__note {
	font-size: 12px;
	color: $color--additional;
	display: block;
}



//formular v popupu
	.popup--form .popup__content .form__item {
		.heading {
			font-size: 14px;
			text-align: left;
			margin-bottom: 0;
		}
		.form__note {
			font-size: 12px;
			display: block;
			text-align: left;
		}
		.btn--small {
			font-size: 14px;
			margin-top: 22px;
		}
		.form__item--50.clone.removeable {
			min-width: 600px;
		}
		.form__item--50.right {
			width: 180px;
		}
	}


// CK EDIT
span.cke_editor_text:focus,
span.cke_browser_webkit:focus {
	outline: none;
}

.form__item--100.ck-edit {
	textarea {
		height: 500px;
	}
}

// IMAGES
.form__item--images {
	width: calc(100% - 20px);
	margin: 10px;

	.images__upload {
		width: 300px;
		height: 300px;
		background: rgba($color--additional, 0.1);
		cursor: pointer;
		border: 2px solid $color--additional;
		border-radius: 3px;
		padding: 100px 50px;
	}
}
*/