Your IP : 3.17.76.163
:root {
/*size*/
--ui-field-size-lg: 47px;
--ui-field-size-md: 39px;
--ui-field-size-sm: 31px;
--ui-field-size-xs: 26px;
/*color*/
--ui-field-color-success: #7bd500;
--ui-field-color-primary: #66afe9;
--ui-field-color-secondary: #2fc6f6;
--ui-field-color-danger: #ff5752;
--ui-field-color-warning: #d5a933;
--ui-field-color-disabled: #c6cdd3;
--ui-field-size: var(--ui-field-size-md);
--ui-field-spacing: 12px;
}
/*region Base style*/
.ui-ctl {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
-ms-flex-align: start;
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 100%;
width: 320px;
vertical-align: middle;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-box-align: start;
align-items: flex-start;
-webkit-box-pack: center;
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 #c6cdd3;
border-radius: 2px;
background-color: #fff;
color: #535c69;
vertical-align: middle;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
font: 400 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
transition: border .3s ease, background-color .3s ease, color .3s ease, padding .3s ease;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
div.ui-ctl-element { line-height: calc(var(--ui-field-size) - 2px);}
.bx-ie .ui-ctl-element::-ms-expand { display: none; }
.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*/
/*region Fix for IE*/
.bx-ie .ui-ctl { height: 39px; }
.bx-ie div.ui-ctl-element { font: 400 15px/37px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.bx-ie .ui-ctl-element:hover,
.bx-ie .ui-ctl-element:focus,
.bx-ie .ui-ctl-element:active { border-color: #66afe9; }
/*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: -webkit-inline-flex !important;
display: -ms-inline-flexbox !important;
display: inline-flex !important;
width: auto;
}
.ui-ctl-inline + .ui-ctl-inline { margin-left: 10px; }
.ui-ctl-block {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
}
.ui-ctl-custom { width: auto; }
.ui-ctl-no-border .ui-ctl-element {
border-color: transparent !important;
background-color: transparent !important;
}
.ui-ctl-underline .ui-ctl-element {
border-top-color: transparent !important;
border-right-color: transparent !important;
border-left-color: transparent !important;
border-radius: 0 !important;
background-color: 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);
}
/*region Fix for IE*/
.bx-ie .ui-ctl-round .ui-ctl-element,
.bx-ie .ui-ctl-round.ui-ctl-md .ui-ctl-element {
padding-right: 18.5px;
padding-left: 18.5px;
border-radius: 18.5px;
}
.bx-ie .ui-ctl-round.ui-ctl-lg .ui-ctl-element {
padding-right: 23.5px;
padding-left: 23.5px;
border-radius: 23.5px;
}
.bx-ie .ui-ctl-round.ui-ctl-sm .ui-ctl-element {
padding-right: 15.5px;
padding-left: 15.5px;
border-radius: 15.5px;
}
.bx-ie .ui-ctl-round.ui-ctl-xs .ui-ctl-element {
padding-right: 13px;
padding-left: 13px;
border-radius: 13px;
}
/*endregion*/
/*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); }
/*region Fix for IE*/
.bx-ie .ui-ctl-md { height: 39px !important; }
.bx-ie .ui-ctl-lg { height: 47px !important; }
.bx-ie .ui-ctl-sm { height: 31px !important; }
.bx-ie .ui-ctl-xs { height: 26px !important; }
.bx-ie div.ui-ctl-element,
.bx-ie .ui-ctl-md div.ui-ctl-element { line-height: 37px !important; }
.bx-ie .ui-ctl-lg div.ui-ctl-element { line-height: 45px !important; }
.bx-ie .ui-ctl-sm div.ui-ctl-element { line-height: 29px !important; }
.bx-ie .ui-ctl-xs div.ui-ctl-element { line-height: 24px !important; }
/*endregion*/
/*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); }
/*region Fix for IE*/
.bx-ie .ui-ctl-element:hover,
.bx-ie .ui-ctl-element:focus,
.bx-ie .ui-ctl-active .ui-ctl-element,
.bx-ie .ui-ctl-hover .ui-ctl-element,
.bx-ie .ui-ctl-hover .ui-ctl-element,
.bx-ie .ui-ctl-hover .ui-ctl-element:hover,
.bx-ie .ui-ctl-hover .ui-ctl-element:focus { border-color: #66afe9; }
/*endregion*/
/*endregion*/
/*region Success form*/
.ui-ctl-success .ui-ctl-element,
.ui-ctl-success .ui-ctl-element:hover,
.ui-ctl-success .ui-ctl-element:focus { border-color: var(--ui-field-color-success); }
/*region Fix for IE*/
.bx-ie .ui-ctl-success .ui-ctl-element,
.bx-ie .ui-ctl-success .ui-ctl-element:hover,
.bx-ie .ui-ctl-success .ui-ctl-element:focus { border-color: #7bd500; }
/*endregion*/
/*endregion*/
/*region Danger field*/
.ui-ctl-danger .ui-ctl-element,
.ui-ctl-danger .ui-ctl-element:hover,
.ui-ctl-danger .ui-ctl-element:focus { border-color: var(--ui-field-color-danger); }
/*region Fix for IE*/
.bx-ie .ui-ctl-danger .ui-ctl-element,
.bx-ie .ui-ctl-danger .ui-ctl-element:hover,
.bx-ie .ui-ctl-danger .ui-ctl-element:focus { border-color: #ff5752; }
/*endregion*/
/*endregion*/
/*region Warning field*/
.ui-ctl-warning .ui-ctl-element,
.ui-ctl-warning .ui-ctl-element:hover,
.ui-ctl-warning .ui-ctl-element:focus { border-color: var(--ui-field-color-warning); }
/*region Fix for IE*/
.bx-ie .ui-ctl-warning .ui-ctl-element,
.bx-ie .ui-ctl-warning .ui-ctl-element:hover,
.bx-ie .ui-ctl-warning .ui-ctl-element:focus { border-color: #d5a933; }
/*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 {
border-color: var(--ui-field-color-disabled);
background-color: #f4f4f4;
color: #a9adb2;
resize: none !important;
cursor: not-allowed;
}
/*region Fix for IE*/
.bx-ie .ui-ctl-element[disabled],
.bx-ie .ui-ctl-element[disabled]:hover,
.bx-ie .ui-ctl-element[disabled]:active,
.bx-ie .ui-ctl-element[disabled="disabled"],
.bx-ie .ui-ctl-element[disabled="disabled"]:hover,
.bx-ie .ui-ctl-element[disabled="disabled"]:active,
.bx-ie .ui-ctl-disabled .ui-ctl-element,
.bx-ie .ui-ctl-disabled .ui-ctl-element:hover,
.bx-ie .ui-ctl-disabled .ui-ctl-element:focus { border-color: #c6cdd3; }
/*endregion*/
/*endregion*/
/*endregion*/
/*region Befores & Afters*/
.ui-ctl-before,
.ui-ctl-after,
.ui-ctl-ext-after,
.ui-ctl-ext-before {
position: absolute;
top: 1px;
z-index: 10;
display: block;
border: none;
background-color: 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: 1px; }
.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; }
/*region Fix for IE*/
.bx-ie .ui-ctl-before,
.bx-ie .ui-ctl-after,
.bx-ie .ui-ctl-ext-after,
.bx-ie .ui-ctl-md .ui-ctl-before,
.bx-ie .ui-ctl-md .ui-ctl-after,
.bx-ie .ui-ctl-md .ui-ctl-ext-after {
width: 37px;
height: 37px;
}
.bx-ie .ui-ctl-lg .ui-ctl-before,
.bx-ie .ui-ctl-lg .ui-ctl-after,
.bx-ie .ui-ctl-lg .ui-ctl-ext-after {
width: 45px;
height: 45px;
}
.bx-ie .ui-ctl-sm .ui-ctl-before,
.bx-ie .ui-ctl-sm .ui-ctl-after,
.bx-ie .ui-ctl-sm .ui-ctl-ext-after {
width: 29px;
height: 29px;
}
.bx-ie .ui-ctl-xs .ui-ctl-before,
.bx-ie .ui-ctl-xs .ui-ctl-after,
.bx-ie .ui-ctl-xs .ui-ctl-ext-after {
width: 24px;
height: 24px;
}
.bx-ie .ui-ctl-before-icon .ui-ctl-element,
.bx-ie .ui-ctl-md.ui-ctl-before-icon .ui-ctl-element { padding-left: 37px; }
.bx-ie .ui-ctl-lg.ui-ctl-before-icon .ui-ctl-element { padding-left: 45px; }
.bx-ie .ui-ctl-sm.ui-ctl-before-icon .ui-ctl-element { padding-left: 29px; }
.bx-ie .ui-ctl-xs.ui-ctl-before-icon .ui-ctl-element { padding-left: 24px; }
.bx-ie .ui-ctl-after-icon .ui-ctl-element,
.bx-ie .ui-ctl-ext-after-icon,
.bx-ie .ui-ctl-md.ui-ctl-ext-after-icon,
.bx-ie .ui-ctl-md.ui-ctl-after-icon .ui-ctl-element { padding-right: 37px; }
.bx-ie .ui-ctl-lg.ui-ctl-ext-after-icon,
.bx-ie .ui-ctl-lg.ui-ctl-after-icon .ui-ctl-element { padding-right: 45px; }
.bx-ie .ui-ctl-sm.ui-ctl-ext-after-icon,
.bx-ie .ui-ctl-sm.ui-ctl-after-icon .ui-ctl-element { padding-right: 29px; }
.bx-ie .ui-ctl-xs.ui-ctl-ext-after-icon,
.bx-ie .ui-ctl-xs.ui-ctl-after-icon .ui-ctl-element { padding-right: 24px; }
/*endregion*/
/*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;
}
@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-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); }
/*clock*/
.ui-ctl-icon-clock { background-image: url(/bitrix/js/ui/forms/images/clock.svg); }
/*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); }
/*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);
}
.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='%23535C69'%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");
}
/*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-] {
background-size: 10px auto;
}
/*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: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #525c69;
line-height: 17px;
}
.ui-ctl-label-text-error {
color: #ff5752;
}
.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: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-right: 30px;
padding-left: 0;
height: auto;
-ms-flex-wrap: wrap;
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: 2px;
background: #bcedfc;
vertical-align: middle;
font: 15px/calc(var(--ui-field-size) - 8px) "Helvetica Neue", Arial, Helvetica, sans-serif;
-webkit-transition: background 0.2s linear;
transition: background 0.2s linear;
}
/*endregion*/
/*region Textarea*/
.ui-ctl-textarea {
display: block;
max-width: 100%;
max-height: 100%;
width: 640px;
height: auto;
}
.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;
-webkit-box-flex: 1;
-ms-flex: auto;
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 - 2px);
height: calc(var(--ui-field-size) * 3 - 2px);
}
/*region Fix for IE*/
.bx-ie .ui-ctl-textarea,
.bx-ie .ui-ctl-md.ui-ctl-textarea {
min-height: 117px;
height: 117px;
}
.bx-ie .ui-ctl-lg.ui-ctl-textarea {
min-height: 141px;
height: 141px;
}
.bx-ie .ui-ctl-sm.ui-ctl-textarea {
min-height: 93px;
height: 93px;
}
.bx-ie .ui-ctl-xs.ui-ctl-textarea {
min-height: 78px;
height: 78px;
}
.bx-ie .ui-ctl-textarea textarea.ui-ctl-element,
.bx-ie .ui-ctl-md.ui-ctl-textarea textarea.ui-ctl-element {
min-height: 115px;
height: 115px;
}
.bx-ie .ui-ctl-lg.ui-ctl-textarea textarea.ui-ctl-element {
min-height: 139px;
height: 139px;
}
.bx-ie .ui-ctl-sm.ui-ctl-textarea textarea.ui-ctl-element {
min-height: 91px;
height: 91px;
}
.bx-ie .ui-ctl-xs.ui-ctl-textarea textarea.ui-ctl-element {
min-height: 76px;
height: 76px;
}
/*endregion*/
/*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: 13px "OpenSans", Helvetica, Arial, sans-serif;
cursor: pointer;
transition: color 0.2s linear, border-color 0.2s linear;
-webkit-font-smoothing: antialiased;
}
.ui-ctl-file-link .ui-ctl-label-text:hover {
border-bottom-color: 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: 2px;
background: #ecedef;
box-shadow: 0 0 0 1px #c6cdd3 inset;
color: #7a818a;
vertical-align: middle;
text-decoration: none;
text-transform: uppercase;
text-shadow: none;
white-space: nowrap;
font: 12px "OpenSans-Bold", Helvetica, Arial, sans-serif;
line-height: calc(var(--ui-field-size) - 2px);
cursor: pointer;
transition: background-color 0.2s linear, color 0.2s linear;
-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: #fff;
}
/*endregion*/
/*region File Drop*/
.ui-ctl-file-drop {
display: inline-flex;
width: 640px;
height: 300px;
border: 2px dashed #c6cdd3;
border-radius: 2px;
background: #ecedef;
cursor: pointer;
transition: background-color 0.2s linear;
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: uppercase;
text-shadow: none;
white-space: nowrap;
font: 12px "OpenSans-Bold", Helvetica, Arial, sans-serif;
transition: color 0.2s linear;
-webkit-font-smoothing: antialiased;
}
.ui-ctl-file-drop .ui-ctl-label-text small {
padding-top: 10px;
text-transform: none;
font-size: 12px;
}
.ui-ctl-file-drop:hover {
background: #cfd4d8;
color: #535c69;
}
.ui-ctl-file-drop:active {
background: #868d95;
box-shadow: none !important;
color: #fff;
}
/*endregion*/
/*region Checkbox*/
.ui-ctl-checkbox {
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: start;
-ms-flex-align: center;
margin-bottom: 7px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: start;
justify-content: flex-start;
}
.ui-ctl-checkbox .ui-ctl-element {
display: inline;
margin: 0 8px 0 0;
padding: 0;
width: auto;
height: auto;
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
-ms-appearance: checkbox;
-o-appearance: checkbox;
appearance: checkbox;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.ui-ctl-checkbox .ui-ctl-label-text { padding-bottom: 0; }
/*endregion*/
/*region Checkbox*/
.ui-ctl-checkbox-selector {
padding: 0;
width: auto;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: start;
-ms-flex-align: center;
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: #fff;
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: 2px;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: start;
transition: 170ms linear all;
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-secondary);
}
.ui-ctl-checkbox-selector .ui-ctl-inner::before {
content: '';
display: block;
border: 1px solid #fff;
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-secondary);
border-top: none;
border-right: none;
position: absolute;
right: -2px;
top: -1px;
width: 0;
height: 0;
transition: 180ms linear all;
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: #333;
padding: 0 7px;
}
.ui-ctl-checkbox-selector .ui-ctl-label-img + .ui-ctl-label-text { padding-left: 7px; }
/*endregion*/
/*region Radiobox*/
.ui-ctl-radio {
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: start;
-ms-flex-align: center;
margin-bottom: 7px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: start;
justify-content: flex-start;
}
.ui-ctl-radio .ui-ctl-element {
display: inline;
margin: 0 5px 2px 0;
padding: 0;
width: auto;
height: auto;
-webkit-appearance: radio;
-moz-appearance: radio;
-ms-appearance: radio;
-o-appearance: radio;
appearance: radio;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
.ui-ctl-radio .ui-ctl-label-text { padding-bottom: 0; }
/*endregion*/
/*region Radio*/
.ui-ctl-radio-selector {
padding: 0;
width: auto;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: start;
-ms-flex-align: center;
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: 2px;
height: var(--ui-field-size-sm);
min-width: var(--ui-field-size-sm);
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: start;
transition: 170ms linear all;
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-secondary);
}
.ui-ctl-radio-selector .ui-ctl-inner::before {
content: '';
display: block;
border-radius: 50%;
background-color: var(--ui-field-color-secondary);
border-bottom: none;
border-left: none;
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
transition: 180ms linear all;
}
.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-secondary);*/
border: 1.5px solid #fff;
border-top: none;
border-right: none;
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
transition: 180ms linear all;
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: #525c69;
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: 30px;
top: -6px;
background-color: #4ad3ff;
color: #fff;
font: bold 7px/13px "Helvetica Neue", Helvetica, Arial, sans-serif;
vertical-align: middle;
text-align: center;
padding: 0 6px;
height: 13px;
border-radius: 6.5px;
z-index: 10;
pointer-events: none;
text-transform: uppercase;
}
.ui-ctl-tag.ui-ctl-tag-success { background-color: var(--ui-field-color-success);}
.ui-ctl-tag.ui-ctl-tag-primary { background-color: var(--ui-field-color-primary); }
.ui-ctl-tag.ui-ctl-tag-danger { background-color: var(--ui-field-color-danger); }
.ui-ctl-tag.ui-ctl-tag-warning { background-color: var(--ui-field-color-warning); }
.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: 3px;
color: #fff;
z-index: 2;
font: 13px/31px "Helvetica Neue", Helvetica, Arial, sans-serif;
transition: all .2s linear;
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 transparent;
border-top-color: #ff5752;
}
.ui-ctl-popup-show {
opacity: 1;
transform: translateY(0);
}
.ui-ctl-popup-hide {
opacity: 0;
transform: translateY(-30%);
}
/*endregion*/