Your IP : 18.217.116.245


Current Path : /var/www/www-root/data/www/info.monolith-realty.ru/bitrix/js/ui/forms/
Upload File :
Current File : /var/www/www-root/data/www/info.monolith-realty.ru/bitrix/js/ui/forms/ui.forms.css

:root {
	/*size*/
	--ui-field-size-lg: var(--ui-size-6xl);
	--ui-field-size-md: var(--ui-size-5xl);
	--ui-field-size-sm: var(--ui-size-3xl);
	--ui-field-size-xs: var(--ui-size-xl2);
	/*color*/
	--ui-field-color-success: #9dcf00;
	--ui-field-color-danger: #ff5752;
	--ui-field-color-primary: #66afe9;
	--ui-field-color-focused: #2fc6f6;
	--ui-field-color-link: #0b66c3;
	--ui-field-color-warning: #ff5752;
	--ui-field-color-orange: #ffa900;
	--ui-field-color-disabled: rgba(244, 244, 244, .65625);
	--ui-field-color-disabled-secondary: rgba(198, 205, 211, .372424);
	--ui-field-color-light-gray: #fdfdfd;
	--ui-field-color-border-default: 198, 205, 211;
	--ui-field-color-gray-37: rgba(198, 205, 211, .37);
	--ui-field-color-gray-17: rgba(82, 92, 105, .17);
	--ui-field-color-gray-06: rgba(82, 92, 105, .06);
	--ui-field-color-white-50: rgba(255, 255, 255, .5);
	--ui-field-color-white-44: rgba(255, 255, 255, .44);
	--ui-field-color-white-14: rgba(255, 255, 255, .14);

	--ui-field-size: var(--ui-field-size-md);
	--ui-field-border-radius: var(--ui-border-radius-3xs);
	--ui-field-spacing: 12px;
}

/*region Base style*/
.ui-ctl {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	max-width: 100%;
	width: 320px;
	vertical-align: middle;
	align-items: flex-start;
	justify-content: center;
	min-height: var(--ui-field-size);
}

.ui-ctl-element {
	z-index: 1;
	display: block;
	overflow: hidden;
	box-sizing: border-box;
	margin: 0;
	padding: 0 11px;
	width: 100%;
	height: var(--ui-field-size);
	outline: none;
	border: 1px solid rgb(var(--ui-field-color-border-default));
	border-radius: var(--ui-border-radius-2xs);
	background-color: var(--ui-color-palette-white-base);
	color: var(--ui-color-palette-black-base);
	vertical-align: middle;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	font: 400 14px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
	transition: border .3s ease, background-color .3s ease, color .3s ease, padding .3s ease;
	flex: 1;
	appearance: none;
}

.ui-ctl-element.--error,
.ui-tag-selector-outer-container.--error {
	border-color: var(--ui-field-color-danger);
}

.ui-ctl-element::placeholder {
	color: var(--ui-color-palette-gray-40);
}

div.ui-ctl-element {
	line-height: calc(var(--ui-field-size) - 2px);
}

.ui-ctl-element:hover {
	border-color: var(--ui-field-color-primary);
	color: #535c69;
}

.ui-ctl-element:focus,
.ui-ctl-element:active {
	outline: none;
	border-color: var(--ui-field-color-primary);
	color: #535c69;
}

.ui-ctl + .ui-ctl {
	margin-left: var(--ui-field-spacing);
}

/*region Fix for IOS background */
.bx-ios input.ui-ctl-element,
.bx-ios input.ui-ctl-element:hover,
.bx-ios input.ui-ctl-element:active {
	background-image: linear-gradient(transparent, transparent)
}

/*endregion*/

/*endregion*/

.ui-ctl-spacing-right .ui-ctl {
	margin-right: var(--ui-field-spacing);
	margin-left: 0;
}

.ui-ctl-spacing-right .ui-ctl:last-child {
	margin-right: 0;
}

.ui-ctl-spacing-left .ui-ctl {
	margin-left: var(--ui-field-spacing);
	margin-right: 0;
}

.ui-ctl-spacing-left .ui-ctl:first-child {
	margin-left: 0;
}

/*region Single modifications*/

.ui-ctl-inline {
	display: inline-flex !important;
	width: auto;
}

.ui-ctl-inline + .ui-ctl-inline {
	margin-left: 10px;
}

.ui-ctl-block {
	display: flex !important;
}

.ui-ctl-custom {
	width: auto;
}

.ui-ctl-no-border .ui-ctl-element {
	border-color: var(--ui-color-background-transparent) !important;
	background-color: var(--ui-color-background-transparent) !important;
}

.ui-ctl-underline .ui-ctl-element {
	border-top-color: var(--ui-color-background-transparent) !important;
	border-right-color: var(--ui-color-background-transparent) !important;
	border-left-color: var(--ui-color-background-transparent) !important;
	border-radius: 0 !important;
	background-color: var(--ui-color-background-transparent) !important;
}

.ui-ctl-no-padding .ui-ctl-element {
	padding-right: 0 !important;
	padding-left: 0 !important;
}

/*endregion*/

/*region Round*/
.ui-ctl-round .ui-ctl-element {
	padding-right: calc(var(--ui-field-size) / 2);
	padding-left: calc(var(--ui-field-size) / 2);
	border-radius: calc(var(--ui-field-size) / 2);
}

/*endregion*/

/*region Size*/
/*region Height*/
.ui-ctl-md {
	--ui-field-size: var(--ui-field-size-md);
}

.ui-ctl-lg {
	--ui-field-size: var(--ui-field-size-lg);
}

.ui-ctl-sm {
	--ui-field-size: var(--ui-field-size-sm);
}

.ui-ctl-xs {
	--ui-field-size: var(--ui-field-size-xs);
}

/*endregion*/

/*region Width*/
.ui-ctl-w100 {
	max-width: 100% !important;
	width: 100% !important;
}

.ui-ctl + .ui-ctl.ui-ctl-w100 {
	--ui-field-spacing: 0;
}

.ui-ctl-w75 {
	max-width: 75% !important;
	width: 75% !important;
}

.ui-ctl-w50 {
	max-width: 50% !important;
	width: 50% !important;
}

.ui-ctl-w33 {
	max-width: 33.33% !important;
	width: 33.33% !important;
}

.ui-ctl-w25 {
	max-width: 25% !important;
	width: 25% !important;
}

.ui-ctl-w10 {
	max-width: 10% !important;
	width: 10% !important;
}

.ui-ctl-wa {
	max-width: initial;
	width: auto;
}

.ui-ctl-wd {
	max-width: 320px;
	width: 320px;
}

/*endregion*/

/*endregion*/

/*region Color*/

/*region Primary form and :hover*/
.ui-ctl-element:hover,
.ui-ctl-element:focus,
.ui-ctl-hover .ui-ctl-element,
.ui-ctl-active .ui-ctl-element,
.ui-ctl-hover .ui-ctl-element,
.ui-ctl-hover .ui-ctl-element:hover,
.ui-ctl-hover .ui-ctl-element:focus {
	border-color: var(--ui-field-color-primary);
}

/*endregion*/

/*region Focused form*/
.ui-ctl-focused .ui-ctl-element,
.ui-ctl-focused .ui-ctl-element:hover,
.ui-ctl-focused .ui-ctl-element:focus {
	border-color: var(--ui-field-color-focused);
}
/*endregion*/

/*region Success form*/
.ui-ctl-success .ui-ctl-element,
.ui-ctl-success .ui-ctl-element:hover,
.ui-ctl-success .ui-ctl-element:focus,
.ui-ctl.ui-ctl__combined-input.ui-ctl-success {
	border-color: var(--ui-field-color-success);
}

/*endregion*/

/*region Warning field*/
.ui-ctl-warning .ui-ctl-element,
.ui-ctl-warning .ui-ctl-element:hover,
.ui-ctl-warning .ui-ctl-element:focus,
.ui-ctl.ui-ctl__combined-input.ui-ctl-warning {
	border-color: var(--ui-field-color-warning);
}

/*endregion*/

/*region Orange field*/
.ui-ctl-orange .ui-ctl-element,
.ui-ctl-orange .ui-ctl-element:hover,
.ui-ctl-orange .ui-ctl-element:focus,
.ui-ctl.ui-ctl__combined-input.ui-ctl-orange {
	border-color: var(--ui-field-color-orange);
}

/*region Link form*/
.ui-ctl-link .ui-ctl-element,
.ui-ctl-link .ui-ctl-element:hover,
.ui-ctl-link .ui-ctl-element:focus,
.ui-ctl.ui-ctl__combined-input.ui-ctl-link {
	border-color: var(--ui-field-color-link);
	border-style: dashed;
}
/*endregion*/

/*region White special round form*/
.ui-ctl-white-special-round .ui-ctl-element,
.ui-ctl-white-special-round .ui-ctl-element:hover,
.ui-ctl-white-special-round .ui-ctl-element:focus,
.ui-ctl.ui-ctl__combined-input.ui-ctl-white-special-round {
	border-color: var(--ui-color-palette-white-base);
	border-radius: var(--ui-border-radius-3xl);
}
/*endregion*/

/*region Default light form*/
.ui-ctl-default-light .ui-ctl-element,
.ui-ctl-default-light .ui-ctl-element:hover,
.ui-ctl-default-light .ui-ctl-element:focus,
.ui-ctl.ui-ctl__combined-input.ui-ctl-default-light {
	border-color: rgba(var(--ui-field-color-border-default), var(--ui-opacity-70));
	background-color: rgba(var(--ui-color-palette-white-base-rgb), var(--ui-opacity-70));
}
/*endregion*/

/*region White form*/
.ui-ctl-white .ui-ctl-element,
.ui-ctl-white .ui-ctl-element:hover,
.ui-ctl-white .ui-ctl-element:focus,
.ui-ctl.ui-ctl__combined-input.ui-ctl-white {
	border-color: var(--ui-color-palette-white-base);
	background-color: var(--ui-color-palette-white-base);
}
/*endregion*/

/*region Transp form*/
.ui-ctl-transp .ui-ctl-element,
.ui-ctl-transp .ui-ctl-element:hover,
.ui-ctl-transp .ui-ctl-element:focus,
.ui-ctl.ui-ctl__combined-input.ui-ctl-transp {
	border-color: rgb(var(--ui-field-color-border-default));
	background-color: rgba(var(--ui-color-palette-white-base-rgb), var(--ui-opacity-50));
}
/*endregion*/

/*region Transp white form*/
.ui-ctl-transp-white .ui-ctl-element,
.ui-ctl-transp-white .ui-ctl-element:hover,
.ui-ctl-transp-white .ui-ctl-element:focus,
.ui-ctl.ui-ctl__combined-input.ui-ctl-transp-white {
	border-color: rgba(var(--ui-color-palette-white-base-rgb), .44);
	background-color: rgba(var(--ui-color-palette-white-base-rgb), .143824);
	color: rgba(var(--ui-color-palette-white-base-rgb), 1);
}

.ui-ctl-transp-white .ui-ctl-element::placeholder {
	color: rgba(var(--ui-color-palette-white-base-rgb), var(--ui-opacity-50));
}
/*endregion*/

/*region Transp gray form*/
.ui-ctl-transp-gray .ui-ctl-element,
.ui-ctl-transp-gray .ui-ctl-element:hover,
.ui-ctl-transp-gray .ui-ctl-element:focus,
.ui-ctl.ui-ctl__combined-input.ui-ctl-transp-gray {
	border-color: rgba(var(--ui-color-palette-gray-90-rgb), .17223);
	background-color: rgba(var(--ui-color-palette-gray-90-rgb), .0560806);
}
/*endregion*/

/*region Transp white borderless form*/
.ui-ctl-transp-white-borderless .ui-ctl-element,
.ui-ctl-transp-white-borderless .ui-ctl-element:hover,
.ui-ctl-transp-white-borderless .ui-ctl-element:focus,
.ui-ctl.ui-ctl__combined-input.ui-ctl-transp-white-borderless {
	border: none;
	background-color: rgba(var(--ui-color-palette-white-base-rgb), .143824);
	color: rgba(var(--ui-color-palette-white-base-rgb), 1);
}

.ui-ctl-transp-white-borderless .ui-ctl-element::placeholder {
	color: rgba(var(--ui-color-palette-white-base-rgb), var(--ui-opacity-50));
}
/*endregion*/

/*endregion*/

/*region Disabled field*/
.ui-ctl-element[disabled],
.ui-ctl-element[disabled]:hover,
.ui-ctl-element[disabled]:active,
.ui-ctl-element[disabled="disabled"],
.ui-ctl-element[disabled="disabled"]:hover,
.ui-ctl-element[disabled="disabled"]:active,
.ui-ctl-disabled .ui-ctl-element,
.ui-ctl-disabled .ui-ctl-element:hover,
.ui-ctl-disabled .ui-ctl-element:focus,
.ui-ctl-inactive .ui-ctl-element,
.ui-ctl-inactive .ui-ctl-element:hover,
.ui-ctl-inactive .ui-ctl-element:focus,
.ui-ctl.ui-ctl__combined-input.ui-ctl-inactive,
.ui-ctl.ui-ctl__combined-input.ui-ctl-disabled {
	border-color: var(--ui-field-color-disabled-secondary);
	background-color: var(--ui-field-color-disabled);
	color: #a9adb2;
	resize: none !important;
	cursor: not-allowed;
}
/*endregion*/

/*region Inactive form*/
.ui-ctl-inactive .ui-ctl-element,
.ui-ctl-inactive .ui-ctl-element:hover,
.ui-ctl-inactive .ui-ctl-element:focus {
	border-color: var(--ui-color-overlay-base);
	background-color: rgba(var(--ui-field-color-border-default), var(--ui-opacity-50));
}
/*endregion*/

/*endregion*/

/*region Before & After*/
.ui-ctl-before,
.ui-ctl-after,
.ui-ctl-ext-after,
.ui-ctl-ext-before,
.ui-ctl-icon {
	position: absolute;
	top: 1px;
	z-index: 10;
	display: block;
	border: none;
	background-color: var(--ui-color-background-transparent);
	width: var(--ui-field-size);
	height: calc(var(--ui-field-size) - 2px);
}

.ui-ctl-before {
	left: 1px;
}

.ui-ctl-ext-before-icon.ui-ctl-before-icon .ui-ctl-ext-before {
	left: var(--ui-field-size);
}

.ui-ctl-after,
.ui-ctl-ext-after {
	right: -2px;
}

.ui-ctl-ext-after-icon.ui-ctl-after-icon .ui-ctl-after {
	right: var(--ui-field-size);
}

.ui-ctl-ext-before-icon,
.ui-ctl-before-icon .ui-ctl-element {
	padding-left: var(--ui-field-size) !important;
}

.ui-ctl-ext-after-icon,
.ui-ctl-after-icon .ui-ctl-element {
	padding-right: var(--ui-field-size) !important;
}

.bx-firefox .ui-ctl-after-icon .ui-ctl-element {
	padding-right: calc(var(--ui-field-size) - 5px) !important;
}

/*endregion*/

/*region COMBINED INPUT */

.ui-ctl.ui-ctl__combined-input {
	flex-direction: row;
	align-items: center;
	padding: 0 5px;
	border: 1px solid rgb(var(--ui-field-color-border-default));
	border-radius: var(--ui-border-radius-3xs);
	transition: border .3s ease;
}

.ui-ctl.ui-ctl__combined-input:hover {
	border-color: var(--ui-field-color-primary);
}

.ui-ctl.ui-ctl__combined-input .ui-ctl-icon {
	position: static;
	padding: 0;
	width: 26px;
	background-repeat: no-repeat;
	background-position: center;
}

.ui-ctl.ui-ctl__combined-input .ui-ctl-element {
	order: 0;
	padding: 0 4px;
	height: calc(var(--ui-field-size) - 2px);
	border: none;
	border-radius: var(--ui-border-radius-none);
}

.ui-ctl.ui-ctl__combined-input .ui-ctl-before {
	order: -1;
}

.ui-ctl.ui-ctl__combined-input .ui-ctl-after {
	order: 1;
}

.ui-ctl.ui-ctl__combined-input .ui-ctl-icon__set.ui-ctl-before,
.ui-ctl.ui-ctl__combined-input .ui-ctl-icon__set.ui-ctl-after {
	position: relative;
	display: flex;
	align-items: center;
	width: auto;
}
.ui-ctl.ui-ctl__combined-input .ui-ctl-icon__set.ui-ctl-before {
	padding-right: 3px;
	margin-right: 3px;
}

.ui-ctl.ui-ctl__combined-input .ui-ctl-icon__set.ui-ctl-before:after,
.ui-ctl.ui-ctl__combined-input .ui-ctl-icon__set.ui-ctl-after:before {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 1px;
	height: 18px;
	background-color: var(--ui-color-palette-gray-20);
	transform: translateY(-50%);
	z-index: 10;
}

.ui-ctl.ui-ctl__combined-input .ui-ctl-icon__set.ui-ctl-after:before {
	left: 0;
	right: auto;
}

.ui-ctl.ui-ctl__combined-input .ui-ctl-icon__set.ui-ctl-after {
	padding-left: 3px;
	margin-left: 3px;
}

/*endregion*/

/*region icons*/
.ui-ctl-after[class*=ui-ctl-icon-],
.ui-ctl-before[class*=ui-ctl-icon-],
.ui-ctl-ext-before[class*=ui-ctl-icon-],
.ui-ctl-ext-after[class*=ui-ctl-icon-] {
	background-position: center;
	background-size: 16px auto;
	background-repeat: no-repeat;
	/*opacity: .78;*/
	transition: 250ms linear opacity;
	/*animation: ui-ctl-show-icon 500ms 1;*/
	pointer-events: none;
}

.ui-ctl.ui-ctl__combined-input .ui-ctl-icon,
.ui-ctl.ui-ctl__combined-input.ui-ctl-after[class*=ui-ctl-icon-],
.ui-ctl.ui-ctl__combined-input.ui-ctl-before[class*=ui-ctl-icon-],
.ui-ctl.ui-ctl__combined-input.ui-ctl-ext-before[class*=ui-ctl-icon-],
.ui-ctl.ui-ctl__combined-input.ui-ctl-ext-after[class*=ui-ctl-icon-] {
	pointer-events: auto;
}

@keyframes ui-ctl-show-icon {
	0% {
		opacity: 0;
	}
	100% {
		opacity: .78;
	}
}

/*.ui-ctl:hover .ui-ctl-before[class*=ui-ctl-icon-],*/
/*.ui-ctl:hover .ui-ctl-after[class*=ui-ctl-icon-],*/
/*.ui-ctl:hover .ui-ctl-ext-after[class*=ui-ctl-icon-] {*/
/*	opacity: 1;*/
/*}*/

.ui-ctl .ui-ctl-icon-clear.ui-ctl-after[class*=ui-ctl-icon-]:hover,
.ui-ctl.ui-ctl__combined-input .ui-ctl-icon.ui-ctl-icon-clear:hover,
.ui-ctl.ui-ctl__combined-input .ui-ctl-icon.ui-ctl-icon-clear:hover {
	opacity: 1;
}

.ui-ctl-icon-btn,
button.ui-ctl-before,
button.ui-ctl-ext-before,
button.ui-ctl-after,
button.ui-ctl-ext-after,
a.ui-ctl-before,
a.ui-ctl-ext-before,
a.ui-ctl-after,
a.ui-ctl-ext-after {
	outline: none !important;
	cursor: pointer;
	pointer-events: auto !important;
}

button.ui-ctl-before:active,
button.ui-ctl-after:active {
	background-color: #e0e5ea;
}

/*calendar*/
.ui-ctl-icon-dots {
	background-image: url(/bitrix/js/ui/forms/images/dots.svg);
}

/*calendar*/
.ui-ctl-icon-calendar {
	background-image: url(/bitrix/js/ui/forms/images/calendar.svg);
}

/*calendar*/
.ui-ctl-icon-calendar-dot {
	background-image: url(/bitrix/js/ui/forms/images/calendar-dot.svg);
}

/*clock*/
.ui-ctl-icon-clock {
	background-image: url(/bitrix/js/ui/forms/images/clock.svg);
}

.ui-ctl.ui-ctl__combined-input .ui-ctl-icon.ui-ctl-icon-clock {
	background-size: 16px auto;
}

/*search*/
.ui-ctl-icon-search {
	background-image: url(/bitrix/js/ui/forms/images/search.svg);
}

/*phone*/
.ui-ctl-icon-phone {
	background-image: url(/bitrix/js/ui/forms/images/phone.svg);
}

/*mail*/
.ui-ctl-icon-mail {
	background-image: url(/bitrix/js/ui/forms/images/mail.svg);
}

/*chain*/
.ui-ctl-icon-chain {
	background-image: url(/bitrix/js/ui/forms/images/chain.svg);
}

/*unchain*/
.ui-ctl-icon-unchain {
	background-image: url(/bitrix/js/ui/forms/images/unchain.svg);
}

.ui-ctl-icon-change {
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2215%22%20height%3D%2218%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M9.928%205.836H1.073V4.415h8.855V.895l4.24%204.241-4.24%204.24v-3.54zm-4.91%206.692h8.886v1.42H5.018v3.52l-4.24-4.24%204.24-4.24v3.54z%22%20fill%3D%22%23525C69%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E')
}

/*forward*/
.ui-ctl-icon-forward {
	background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2213%22%20height%3D%2213%22%3E%3Cpath%20fill%3D%22%23525C69%22%20fill-rule%3D%22evenodd%22%20opacity%3D%221%22%20d%3D%22M4.89%201.551l3.962%203.961H.383v1.977h8.469L4.89%2011.45l1.398%201.398L12.636%206.5%206.288.153z%22/%3E%3C/svg%3E);
}

/*arrow-down*/
.ui-ctl-icon-arrow-down {
	background-image: url(/bitrix/js/ui/forms/images/arrow-down.svg);
	background-size: 14px auto;
}

/*close-special*/
.ui-ctl-icon-close-special {
	background-image: url(/bitrix/js/ui/forms/images/close-special.svg);
}

/*location*/
.ui-ctl-icon-location {
	background-image: url(/bitrix/js/ui/forms/images/location.svg);
}

.ui-ctl-icon-forward.ui-ctl-before[class*=ui-ctl-icon-],
.ui-ctl-icon-forward.ui-ctl-after[class*=ui-ctl-icon-] {
	background-size: 14px auto;
	opacity: .56;
}

/*endregion*/

/*angle*/
.ui-ctl-icon-angle {
	background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23828B95'%3E%3Cpath d='M7.071 10.858l1.414-1.414 5.657 5.656-1.414 1.414z'/%3E%3Cpath d='M16.97 9.444l1.415 1.414-5.657 5.657-1.414-1.415z'/%3E%3C/g%3E%3C/svg%3E");
}

.ui-ctl-icon-angle.ui-ctl-before[class*=ui-ctl-icon-],
.ui-ctl-icon-angle.ui-ctl-after[class*=ui-ctl-icon-] {
	background-size: 26px auto;
}
/*endregion*/

/*crm-dynamic*/
.ui-ctl-icon-crm-dynamic.ui-ctl-before[class*=ui-ctl-icon-],
.ui-ctl-icon-crm-dynamic.ui-ctl-after[class*=ui-ctl-icon-] {
	background-size: 18px auto;
}

.ui-ctl-icon-crm-dynamic {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='9' cy='9' r='9' fill='%2380868E' opacity='.7'/%3E%3Cpath fill='%23FFF' d='M10.989 7.778a.321.321 0 01.378.171l.313.657a.023.023 0 00.021.013c.34-.012.671.039.983.146l.49-.548a.322.322 0 01.413-.057l.368.233a.321.321 0 01.124.397l-.283.67a.023.023 0 00.004.025c.146.155.274.329.382.518l.733-.084a.321.321 0 01.346.23l.12.42a.321.321 0 01-.17.379l-.654.311a.023.023 0 00-.013.021c.01.273-.022.542-.091.799a.023.023 0 00.008.024l.58.461a.32.32 0 01.082.408l-.212.381a.32.32 0 01-.388.147l-.7-.248a.023.023 0 00-.025.006c-.18.192-.39.36-.624.496a.023.023 0 00-.011.022l.082.722a.321.321 0 01-.23.346l-.42.12a.32.32 0 01-.378-.17l-.32-.67a2.738 2.738 0 01-.955-.131.023.023 0 00-.024.006l-.488.545a.322.322 0 01-.412.057l-.368-.234a.321.321 0 01-.124-.396l.282-.667a.023.023 0 00-.005-.025 2.738 2.738 0 01-.393-.525.023.023 0 00-.022-.011l-.727.083a.321.321 0 01-.346-.23l-.12-.42a.321.321 0 01.171-.38l.66-.314a.023.023 0 00.013-.02c-.008-.273.023-.54.092-.797a.023.023 0 00-.008-.024l-.559-.444a.322.322 0 01-.082-.408l.212-.381a.322.322 0 01.389-.147l.671.238c.009.003.018 0 .024-.006.183-.196.394-.366.632-.504a.023.023 0 00.011-.022l-.082-.723a.32.32 0 01.23-.345zm1.608-4.803c.522 0 .946.423.946.945v3.112a4.342 4.342 0 00-.945-.284V3.92H4.972V13.97h2.633c.194.343.428.66.696.946H4.973a.946.946 0 01-.945-.946V3.92c0-.522.423-.945.945-.945h7.624zm.638 8.313a1.451 1.451 0 00-2.142-1.187c-.446.237-.787.852-.752 1.356a1.451 1.451 0 002.142 1.187c.495-.263.791-.797.752-1.356zM9.62 7.23c-.48.248-.913.574-1.283.96h-.054a.473.473 0 01-.473-.473v-.014c0-.262.212-.473.473-.473H9.62zm-2.756 0a.473.473 0 110 .945h-.28a.473.473 0 110-.945h.28zm4.064-1.891c.26 0 .472.211.472.472v.015a.473.473 0 01-.472.473H8.283a.473.473 0 01-.473-.473v-.015c0-.26.212-.472.473-.472h2.645zm-4.064 0a.473.473 0 110 .945h-.28a.473.473 0 110-.945h.28z'/%3E%3C/g%3E%3C/svg%3E");
}

.ui-ctl-icon-search.ui-ctl-before[class*=ui-ctl-icon-] {
	opacity: var(--ui-opacity-50);
}
/*endregion*/

/*crm*/
.ui-ctl-icon-crm-contact {
	background-size: 16px auto;
	background-image: url(/bitrix/js/ui/forms/images/crm-contact.svg);
}

.ui-ctl-icon-crm-lead {
	background-image: url(/bitrix/js/ui/forms/images/crm-lead.svg);
}

.ui-ctl-icon-crm-deal {
	background-image: url(/bitrix/js/ui/forms/images/crm-deal.svg);
}

.ui-ctl-icon-crm-company {
	background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%229%22%20fill%3D%22%2380868E%22%20opacity%3D%22.7%22/%3E%3Cg%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%3E%3Cpath%20d%3D%22M11.575%207.291V4.04a.5.5%200%200%200-.5-.5H5.189a.5.5%200%200%200-.5.5v9.656a.5.5%200%200%200%20.504.5l8.107-.068a.5.5%200%200%200%20.496-.5V7.791a.5.5%200%200%200-.5-.5h-1.721zm-1.262%205.493h-.938v-1.741h-2.67v1.741h-.937V4.813h4.612l-.067%207.971zm2.411-.335h-1.34v-1.34h1.34v1.34zm0-2.612h-1.34v-1.34h1.34v1.34z%22/%3E%3Cpath%20d%3D%22M6.906%205.818h2.437v1.339H6.906zM6.906%208.43h2.457v1.34H6.906z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E) no-repeat;
}

/*Loader*/
.ui-ctl-icon-loader {
	background-image: url(/bitrix/js/ui/forms/images/loader.svg);
}

/*clear*/
.ui-ctl-icon-clear {
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.279 1.78L7.343 5.716l3.936 3.936L9.65 11.28 5.716 7.342 1.781 11.28.153 9.65 4.09 5.715.153 1.781 1.781.153l3.935 3.935L9.651.153l1.628 1.628z' fill='%23525C69' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.ui-ctl-icon-clear.ui-ctl-before[class*=ui-ctl-icon-],
.ui-ctl-icon-clear.ui-ctl-after[class*=ui-ctl-icon-],
.ui-ctl.ui-ctl__combined-input .ui-ctl-icon.ui-ctl-icon-clear {
	background-size: 10px auto;
	opacity: var(--ui-opacity-50);
	cursor: pointer;
}
/*endregion*/

/*border*/
.ui-ctl-icon-border:after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	right: 8px;
	width: 1px;
	height: 18px;
	background: #edeef2;
}
/*endregion*/

/*region Types*/
.ui-ctl-row {
	flex-direction: row;
	align-items: center;
}

.ui-ctl-row + .ui-ctl-row {
	margin-top: 12px;
}

.ui-ctl-column {
	flex-direction: column;
	align-content: flex-start;
}

.ui-ctl-label-text {
	padding: 0 0 7px;
	font: var(--ui-font-size-sm)/17px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
	font-size: var(--ui-font-size-md);
	color: var(--ui-color-base-90);
}

.ui-ctl-label-text-error {
	color: var(--ui-color-text-alert);
}

.ui-ctl-row .ui-ctl-label-text {
	padding: 0 10px;
}

/*region Type Dropdown*/
/*.ui-ctl-dropdown div.ui-ctl-element { padding-top: 10px; }*/ /* Comment on task 223275 */

/*endregion*/

/*region Type Multiple Select*/
.ui-ctl-multiple-select {
	height: auto;
}

.ui-ctl-multiple-select .ui-ctl-element {
	overflow-y: auto;
	padding: 0;
}

.ui-ctl-multiple-select .ui-ctl-element option {
	padding: 0 11px;
	height: 18.5px;
	transition: 250ms linear all;
}

.ui-ctl-multiple-select {
	min-height: calc(var(--ui-field-size) * 3);
	height: calc(var(--ui-field-size) * 3);
}

.ui-ctl-multiple-select select.ui-ctl-element {
	min-height: calc(var(--ui-field-size) * 3 - 2px);
	height: calc(var(--ui-field-size) * 3 - 2px);
}

/*endregion*/

/*region Type Finder Select*/
.ui-ctl-finer {
	height: auto;
}

.ui-ctl-finer div.ui-ctl-element {
	display: flex;
	padding-right: 30px;
	padding-left: 0;
	height: auto;
	flex-wrap: wrap;
}

.ui-ctl-option-selected {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin: 3px 0 3px 3px;
	padding: 0 30px 0 9px;
	height: calc(var(--ui-field-size) - 8px);
	border-radius: var(--ui-border-radius-3xs);
	background: var(--ui-color-tag-1);
	vertical-align: middle;
	font: var(--ui-font-size-lg)/calc(var(--ui-field-size) - 8px) var(--ui-font-family-primary, var(--ui-font-family-helvetica));
	transition: background .2s;
}

/*endregion*/

/*region Textarea*/
.ui-ctl-textarea {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: 491px;
	height: auto;
}

.ui-ctl-textarea.ui-ctl-sm {
	width: 292px;
}

.ui-ctl-textarea textarea.ui-ctl-element,
.ui-ctl > div.ui-ctl-element[contenteditable] {
	display: block;
	overflow: auto;
	padding-top: 6px;
	padding-bottom: 6px;
	min-width: 0;
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: auto;
	white-space: normal;
	line-height: normal;
	flex: auto;
}

.ui-ctl-no-resize textarea.ui-ctl-element {
	resize: none;
}

.ui-ctl-resize-y textarea.ui-ctl-element {
	resize: vertical;
}

.ui-ctl-resize-x textarea.ui-ctl-element {
	resize: horizontal;
}

.ui-ctl-textarea {
	min-height: calc(var(--ui-field-size) * 3);
	height: calc(var(--ui-field-size) * 3);
}

.ui-ctl-textarea textarea.ui-ctl-element {
	/*min-height: calc(var(--ui-field-size) * 3.5 - 2px);*/
	height: calc(var(--ui-field-size) * 3.5 - 2px);
	white-space: pre-wrap;
}

.ui-ctl-textarea.ui-ctl-sm textarea.ui-ctl-element {
	min-height: calc(var(--ui-field-size) * 3  - 2px);
	height: calc(var(--ui-field-size) * 3  - 2px);
}

/*endregion*/

/*region Datetime variables*/

.ui-ctl-time,
.ui-ctl-date,
.ui-ctl-datetime {
	--icon-width-after: 11px;
	--icon-width-before: 11px;
}

.ui-ctl-time.ui-ctl-after-icon,
.ui-ctl-date.ui-ctl-after-icon,
.ui-ctl-datetime.ui-ctl-after-icon {
	--icon-width-after: var(--ui-field-size);
}

.ui-ctl-date.ui-ctl-before-icon,
.ui-ctl-time.ui-ctl-before-icon,
.ui-ctl-datetime.ui-ctl-before-icon {
	--icon-width-before: var(--ui-field-size);
}

/*endregion*/

/*region Datetime*/
.ui-ctl-datetime {
	max-width: calc(125px + var(--icon-width-before) + var(--icon-width-after));
	width: calc(125px + var(--icon-width-before) + var(--icon-width-after));
}

/*.ui-ctl-datetime div.ui-ctl-element { padding-top: 10px; }*/

/*endregion*/

/*region Date*/
.ui-ctl-date {
	max-width: calc(80px + var(--icon-width-before) + var(--icon-width-after));
	width: calc(80px + var(--icon-width-before) + var(--icon-width-after));
}

.ui-ctl-date div.ui-ctl-element {
	padding-top: 10px;
	line-height: normal;
}

/*endregion*/

/*region Time*/
.ui-ctl-time {
	max-width: calc(45px + var(--icon-width-before) + var(--icon-width-after));
	width: calc(45px + var(--icon-width-before) + var(--icon-width-after));
}

.ui-ctl-time div.ui-ctl-element {
	padding-top: 10px;
}

/*endregion*/

/*region File link*/
.ui-ctl-file-link {
	display: inline-flex;
	width: auto;
	height: auto;
}

.ui-ctl-file-link .ui-ctl-element {
	display: none;
}

.ui-ctl-file-link .ui-ctl-label-text {
	display: inline;
	margin: 0;
	padding: 0;
	outline: none;
	border: none;
	border-bottom: 1px dashed;
	color: #7a818a;
	vertical-align: middle;
	text-decoration: none;
	text-shadow: none;
	white-space: nowrap;
	font: var(--ui-font-size-sm) var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular);
	cursor: pointer;
	transition: color .2s, border-color .2s;
	-webkit-font-smoothing: antialiased;
}

.ui-ctl-file-link .ui-ctl-label-text:hover {
	border-bottom-color: var(--ui-color-background-transparent);
	color: #535c69;
}

.ui-ctl-file-link .ui-ctl-label-text:active { }

/*endregion*/

/*region File Button*/
.ui-ctl-file-btn {
	display: inline-flex;
	width: auto;
	height: var(--ui-field-size-md);
}

.ui-ctl-file-btn .ui-ctl-element {
	display: none;
}

.ui-ctl-file-btn .ui-ctl-label-text {
	display: inline-block;
	margin: 0;
	padding: 0 18px;
	outline: none;
	border: none;
	border-radius: var(--ui-field-border-radius);
	background: #ecedef;
	box-shadow: 0 0 0 1px rgb(var(--ui-field-color-border-default)) inset;
	color: #7a818a;
	vertical-align: middle;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: none;
	white-space: nowrap;
	font: var(--ui-font-size-xs) var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-bold);
	line-height: calc(var(--ui-field-size) - 2px);
	cursor: pointer;
	transition: background-color .2s, color .2s;
	-webkit-font-smoothing: antialiased;
}

.ui-ctl-file-btn .ui-ctl-label-text:hover {
	background: #cfd4d8;
	color: #535c69;
}

.ui-ctl-file-btn .ui-ctl-label-text:active {
	background: #868d95;
	box-shadow: none !important;
	color: var(--ui-color-on-primary);
}

/*endregion*/

/*region File Drop*/
.ui-ctl-file-drop {
	display: inline-flex;
	width: 640px;
	height: 300px;
	border: 2px dashed rgb(var(--ui-field-color-border-default));
	border-radius: 2px;
	background: #ecedef;
	cursor: pointer;
	transition: background-color .2s;
	align-items: center;
	justify-content: center;
}

.ui-ctl-file-drop .ui-ctl-element {
	display: none;
}

.ui-ctl-file-drop .ui-ctl-label-text {
	margin: 0;
	padding: 0;
	outline: none;
	border: none;
	vertical-align: middle;
}

.ui-ctl-file-drop .ui-ctl-label-text span,
.ui-ctl-file-drop .ui-ctl-label-text small {
	display: block;
	color: #7a818a;
	text-align: center;
	text-decoration: none;
	text-transform: var(--ui-text-transform-uppercase);
	text-shadow: none;
	white-space: nowrap;
	font: var(--ui-font-size-xs) var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-bold);
	transition: color 0.2s linear;
	-webkit-font-smoothing: antialiased;
}

.ui-ctl-file-drop .ui-ctl-label-text small {
	padding-top: 10px;
	text-transform: var(--ui-text-transform-none);
	font-size: var(--ui-font-size-xs);
}

.ui-ctl-file-drop:hover {
	background: #cfd4d8;
	color: #535c69;
}

.ui-ctl-file-drop:active {
	background: #868d95;
	box-shadow: none !important;
	color: var(--ui-color-primary-alt);
}

/*endregion*/

/*region Checkbox*/
.ui-ctl-checkbox {
	flex-direction: row;
	margin-bottom: 7px;
	align-items: center;
	justify-content: flex-start;
}

.ui-ctl-checkbox .ui-ctl-element {
	display: inline;
	margin: 0 8px 0 0;
	padding: 0;
	width: auto;
	height: auto;
	appearance: checkbox;
	flex: none;
}

.ui-ctl-checkbox .ui-ctl-label-text {
	padding-bottom: 0;
}

/*endregion*/

/*region Checkbox*/
.ui-ctl-checkbox-selector {
	padding: 0;
	width: auto;
	flex-direction: row;
	margin-bottom: 7px;
	display: inline-flex;
	align-items: stretch;
	justify-content: flex-start;
	cursor: pointer;
	min-height: var(--ui-field-size);
	min-width: var(--ui-field-size);
}

.ui-ctl-checkbox-selector .ui-ctl-inner {
	background-color: var(--ui-color-background-primary);
	padding: 7px;
	width: 100%;
	height: var(--ui-field-size);
	min-width: var(--ui-field-size);
	border: 1px solid var(--ui-field-color-disabled);
	border-radius: var(--ui-border-radius-3xs);
	display: flex;
	align-items: center;
	transition: .17s;
	justify-content: flex-start;
	position: relative;
	box-sizing: border-box;
}

.ui-ctl-checkbox-selector .ui-ctl-inner:hover,
.ui-ctl-checkbox-selector .ui-ctl-element:checked + .ui-ctl-inner ,
.ui-ctl-checkbox-selector.selected .ui-ctl-element + .ui-ctl-inner {
	border-color: var(--ui-field-color-focused);
}

.ui-ctl-checkbox-selector .ui-ctl-inner::before {
	content: '';
	display: block;
	border: 1px solid var(--ui-color-primary-alt);
	border-bottom: none;
	border-left: none;
	position: absolute;
	right: -1px;
	top: -1px;
	width: 0;
	height: 0;
	transition: 180ms linear all;
}

.ui-ctl-checkbox-selector .ui-ctl-element:checked + .ui-ctl-inner::before,
.ui-ctl-checkbox-selector.selected .ui-ctl-element + .ui-ctl-inner::before {
	width: 6px;
	height: 6px;
}

.ui-ctl-checkbox-selector .ui-ctl-inner::after {
	content: '';
	display: block;
	border: 1px solid var(--ui-field-color-focused);
	border-top: none;
	border-right: none;
	position: absolute;
	right: -2px;
	top: -1px;
	width: 0;
	height: 0;
	transition: .18s;
	transform: rotate(-45deg);
	opacity: 0;
	box-sizing: border-box;
}

.ui-ctl-checkbox-selector .ui-ctl-element:checked + .ui-ctl-inner::after,
.ui-ctl-checkbox-selector.selected .ui-ctl-element + .ui-ctl-inner::after {
	width: 5px;
	height: 3px;
	opacity: 1;
}

.ui-ctl-checkbox-selector .ui-ctl-element {
	display: none;
}

.ui-ctl-checkbox-selector .ui-ctl-label-img {
	display: block;
	background-position: center;
	background-size: cover;
	width: 22px;
	height: 22px;
	min-width: 22px;
	min-height: 22px;
	box-sizing: border-box;
}

.ui-ctl-checkbox-selector .ui-ctl-label-text {
	text-overflow: ellipsis;
	overflow: hidden;
	color: var(--ui-color-base-default);
	padding: 0 7px;
}

.ui-ctl-checkbox-selector .ui-ctl-label-img + .ui-ctl-label-text {
	padding-left: 7px;
}

/*endregion*/

/*region Radiobox*/
.ui-ctl-radio {
	flex-direction: row;
	margin-bottom: 7px;
	align-items: center;
	justify-content: flex-start;
}

.ui-ctl-radio .ui-ctl-element {
	display: inline;
	margin: 0 5px 2px 0;
	padding: 0;
	width: auto;
	height: auto;
	appearance: radio;
	flex: none;
}

.ui-ctl-radio .ui-ctl-label-text {
	padding-bottom: 0;
}

/*endregion*/

/*region Radio*/
.ui-ctl-radio-selector {
	padding: 0;
	width: auto;
	flex-direction: row;
	margin-bottom: 7px;
	display: inline-flex;
	align-items: stretch;
	justify-content: flex-start;
	cursor: pointer;
	min-height: var(--ui-field-size-sm);
	min-width: var(--ui-field-size-sm);
}

.ui-ctl-radio-selector .ui-ctl-inner {
	background-color: #fff;
	padding: 7px 6px;
	width: 100%;
	border: 1px solid var(--ui-field-color-disabled);
	border-radius: var(--ui-border-radius-3xs);
	height: var(--ui-field-size-sm);
	min-width: var(--ui-field-size-sm);
	display: flex;
	align-items: center;
	transition: .17s;
	justify-content: center;
	position: relative;
	box-sizing: border-box;
}

.ui-ctl-radio-selector .ui-ctl-inner:hover,
.ui-ctl-radio-selector .ui-ctl-element:checked + .ui-ctl-inner,
.ui-ctl-radio-selector.selected .ui-ctl-element + .ui-ctl-inner {
	border-color: var(--ui-field-color-focused);
}

.ui-ctl-radio-selector .ui-ctl-inner::before {
	content: '';
	display: block;
	border-radius: var(--ui-border-radius-circle);
	background-color: var(--ui-field-color-focused);
	border-bottom: none;
	border-left: none;
	position: absolute;
	right: 0;
	top: 0;
	width: 0;
	height: 0;
	transition: .18s;
}

.ui-ctl-radio-selector .ui-ctl-element:checked + .ui-ctl-inner::before,
.ui-ctl-radio-selector.selected .ui-ctl-element + .ui-ctl-inner::before {
	width: 11px;
	height: 11px;
	right: -3px;
	top: -3px;
}

.ui-ctl-radio-selector .ui-ctl-inner::after {
	content: '';
	display: block;
	/*border: 1.5px solid var(--ui-field-color-focused);*/
	border: 1.5px solid var(--ui-color-on-primary);
	border-top: none;
	border-right: none;
	position: absolute;
	right: 0;
	top: 0;
	width: 0;
	height: 0;
	transition: .18s;
	transform: rotate(-45deg);
	opacity: 0;
	box-sizing: border-box;
}

.ui-ctl-radio-selector .ui-ctl-element:checked + .ui-ctl-inner::after,
.ui-ctl-radio-selector.selected .ui-ctl-element + .ui-ctl-inner::after {
	width: 5px;
	height: 3px;
	opacity: 1;
}

.ui-ctl-radio-selector .ui-ctl-element {
	display: none;
}

.ui-ctl-radio-selector .ui-ctl-label-img {
	display: block;
	background-position: center;
	background-size: cover;
	width: 21px;
	height: 20px;
	min-width: 20px;
	min-height: 20px;
	box-sizing: border-box;
}

.ui-ctl-radio-selector .ui-ctl-label-text {
	text-overflow: ellipsis;
	overflow: hidden;
	color: var(--ui-color-base-90);
	padding: 0 2px 1px;
	font-size: 13px;
	white-space: nowrap;
	max-width: 300px;
}

.ui-ctl-radio-selector .ui-ctl-label-img + .ui-ctl-label-text {
	padding-left: 7px;
}

/*endregion*/

/*endregion*/

/*region Tag*/
.ui-ctl-tag {
	position: absolute;
	right: 12px;
	top: -6px;
	background-color: var(--ui-color-palette-blue-50);
	color: var(--ui-color-on-primary-alt);
	font: var(--ui-font-weight-bold) 7px/13px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
	vertical-align: middle;
	text-align: center;
	padding: 0 6px;
	height: 13px;
	border-radius: 6.5px;
	z-index: 10;
	pointer-events: none;
	text-transform: var(--ui-text-transform-uppercase);
}

.ui-ctl-tag.--tag_light-blue {
	background-color: var(--ui-color-palette-blue-30);
	color: var(--ui-color-palette-gray-90);
}

.ui-ctl-tag.--tag_light {
	background-color: #fdfdfd;
	color: var(--ui-color-palette-gray-50);
}

.ui-ctl-ext-before-icon .ui-ctl-tag {
	right: 50px;
}

/*endregion*/

/*region Popup*/

.ui-ctl-popup {
	position: absolute;
	top: -36px;
	right: 0;
	background: #ff5752;
	padding: 0 20px;
	border-radius: var(--ui-border-radius-2xs);
	color: var(--ui-color-primary-alt);
	z-index: 2;
	font: var(--ui-font-size-sm)/31px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
	transition: .2s;
	box-sizing: border-box;
	max-width: 100%;
}

.ui-ctl-popup-text {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 100%;
	display: block;
}

.ui-ctl-popup:after {
	content: '';
	position: absolute;
	bottom: -16px;
	left: 50%;
	transform: translateX(-50%);
	border: 8px solid var(--ui-color-background-transparent);
	border-top-color: var(--ui-color-text-alert);
}

.ui-ctl-popup-show {
	opacity: 1;
	transform: translateY(0);
}

.ui-ctl-popup-hide {
	opacity: 0;
	transform: translateY(-30%);
}

/*endregion*/

/* region Container*/

.ui-ctl-container {
	position: relative;
	display: inline-flex;
	flex-direction: column;
}

.ui-ctl-top {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
}

.ui-ctl-title,
.ui-ctl-bottom {
	font: var(--ui-font-size-sm) var(--ui-font-family-primary, var(--ui-font-family-helvetica));
	color: var(--ui-color-palette-gray-50);
}

.ui-ctl-control {
	margin-right: 12px;
}

.ui-ctl-control:last-child {
	margin-right: 0;
}

.ui-ctl-control.--ui-ctl__link {
	color: var(--ui-color-link-primary-base);
	border-bottom: 1px dashed rgba(var(--ui-color-link-primary-base-rgb), var(--ui-opacity-40));
}

.ui-ctl-control.--ui-ctl__link-gray {
	border-bottom: 1px dashed rgba(var(--ui-color-palette-gray-70-rgb), var(--ui-opacity-40));
	color: var(--ui-color-palette-gray-70);
}

.ui-ctl-bottom {
	margin-top: 6px;
	font-style: italic;
}

/* region States */

.ui-ctl-success .ui-ctl-bottom {
	font-style: normal;
	color: var(--ui-field-color-success);
}

.ui-ctl-warning .ui-ctl-bottom {
	font-style: normal;
	color: var(--ui-field-color-warning);
}

/*endregion*/

/*endregion*/

/* region Control & Entity */

.ui-ctl__entity {
	text-align: center;
}

.ui-ctl__combined-input .ui-ctl__entity:first-child {
	margin: 0 19px 0 7px;
}

.ui-ctl__entity_value {
	position: relative;
	margin-right: 4px;
	cursor: pointer;
}

.ui-ctl__control {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	width: 26px;
	text-align: center;
}

.ui-ctl__control_item {
	display: inline-flex;
	border: none;
	cursor: pointer;
}

.ui-ctl__control.--arrow .ui-ctl__control_item {
	width: 26px;
	height: 15px;
	border: none;
	background: var(--ui-color-background-transparent) url(/bitrix/js/ui/forms/images/arrow-down.svg) center no-repeat;
	transition: opacity .3s;
	transform: rotate(180deg);
}

.ui-ctl__control.--arrow .ui-ctl__control_item + .ui-ctl__control_item {
	transform: rotate(0deg);
}

.ui-ctl__control.--arrow .ui-ctl__control_item:hover {
	opacity: var(--ui-opacity-40);
}

.ui-ctl-sm .ui-ctl__control.--arrow {
	height: 22px;
}

.ui-ctl__entity_value.--ui-ctl__link-gray {
	border-bottom: 1px dashed rgba(var(--ui-color-palette-gray-50-rgb), var(--ui-opacity-40));
	color: var(--ui-color-palette-gray-50);
	cursor: pointer;
}

.ui-ctl__entity_value.--arrow:after {
	content: '';
	position: absolute;
	display: block;
	top: 2px;
	right: -14px;
	width: 12px;
	height: 15px;
	background: var(--ui-color-background-transparent) url(/bitrix/js/ui/forms/images/arrow-down.svg) center no-repeat;
	opacity: .5;
}

/*endregion*/

/* Alert */

.ui-ctl__alert {
	display: none;
	position: absolute;
	top: -17px;
	right: 0;
	padding: 6px 16px;
	border-radius: var(--ui-border-radius-3xs);
	color: var(--ui-color-palette-white-base);
}

.ui-ctl__alert:before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -11px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 11px 11.5px 0 11.5px;
	transform: translateX(-50%);
}

.ui-ctl-warning .ui-ctl__alert {
	display: block;
	background-color: var(--ui-color-palette-red-50);
}

.ui-ctl-warning .ui-ctl__alert:before {
	border-color: var(--ui-color-palette-red-50) var(--ui-color-background-transparent) var(--ui-color-background-transparent) var(--ui-color-background-transparent);
}

/*endregion*/