/*region Variables*/
:root {
	--ui-icon-size-xs: 26px;
	--ui-icon-size-sm: 31px;
	--ui-icon-size-md: 39px;
	--ui-icon-size-lg: 47px;
}

/*endregion*/

.ui-icon {
	position: relative;
	display: inline-block;
	width: var(--ui-icon-size-md);
}

.ui-icon > i {
	position: relative;
	display: block;
	padding-top: 100%;
	width: 100%;
	border-radius: 50%;
	background-color: #ebeff2;
	background-position: center;
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.ui-icon-square > i,
.ui-icon[class*=ui-icon-file-] > i { border-radius: 1px !important; }

button.ui-icon,
.ui-icon-btn {
	padding: 0;
	outline: none;
	border: none;
	background: transparent;
	text-decoration: none;
	cursor: pointer;
}

button.ui-icon > i,
.ui-icon-btn > i { transition: 250ms linear opacity; }

button.ui-icon > i:hover,
.ui-icon-btn > i:hover { opacity: .85; }

button.ui-icon > i:active,
.ui-icon-btn > i:active { opacity: 1; }

/*region Size*/
.ui-icon-xs { width: var(--ui-icon-size-xs); }

.ui-icon-sm { width: var(--ui-icon-size-sm); }

.ui-icon-md { width: var(--ui-icon-size-md); }

.ui-icon-lg { width: var(--ui-icon-size-lg); }

/* region Fix for IE*/
.bx-ie .ui-icon,
.bx-ie .ui-icon-md { width: 39px; }

.bx-ie .ui-icon-xs { width: 26px; }

.bx-ie .ui-icon-sm { width: 32px; }

.bx-ie .ui-icon-lg { width: 47px; }

/*endregion*/

/*endregion*/

/*region File icons*/
.ui-icon[class*=ui-icon-file-] > i {
	background: url(/bitrix/js/ui/icons/images/sprite-files.min.svg?v1.2) no-repeat center;
	background-size: 100% auto;
	--icon-file-col: 14;
}

/**/
.ui-icon.ui-icon-file-empty > i { background-position: 0 calc(100% / var(--icon-file-col) * 0) }

.ui-icon.ui-icon-file-txt > i { background-position: 0 calc(100% / var(--icon-file-col) * 1) }

.ui-icon.ui-icon-file-doc > i { background-position: 0 calc(100% / var(--icon-file-col) * 2) }

.ui-icon.ui-icon-file-xls > i { background-position: 0 calc(100% / var(--icon-file-col) * 3) }

.ui-icon.ui-icon-file-php > i { background-position: 0 calc(100% / var(--icon-file-col) * 4) }

.ui-icon.ui-icon-file-pdf > i { background-position: 0 calc(100% / var(--icon-file-col) * 5) }

.ui-icon.ui-icon-file-ppt > i { background-position: 0 calc(100% / var(--icon-file-col) * 6) }

.ui-icon.ui-icon-file-rar > i { background-position: 0 calc(100% / var(--icon-file-col) * 7) }

.ui-icon.ui-icon-file-zip > i { background-position: 0 calc(100% / var(--icon-file-col) * 8) }

.ui-icon.ui-icon-file-set > i { background-position: 0 calc(100% / var(--icon-file-col) * 9) }

.ui-icon.ui-icon-file-mov > i { background-position: 0 calc(100% / var(--icon-file-col) * 10) }

.ui-icon.ui-icon-file-img > i { background-position: 0 calc(100% / var(--icon-file-col) * 11) }

.ui-icon.ui-icon-file-folder > i { background-position: 0 calc(100% / var(--icon-file-col) * 12) }

.ui-icon.ui-icon-file-folder-shared > i { background-position: 0 calc(100% / var(--icon-file-col) * 13) }

.ui-icon.ui-icon-file-folder-shared-2 > i { background-position: 0 calc(100% / var(--icon-file-col) * 14) }

/*region Fix for IE*/
.bx-ie .ui-icon-file,
.bx-ie .ui-icon-file-empty > i { background-position: 0 0 }

.bx-ie .ui-icon-file-txt > i { background-position: 0 7.14% }

.bx-ie .ui-icon-file-doc > i { background-position: 0 14.28% }

.bx-ie .ui-icon-file-xls > i { background-position: 0 21.42% }

.bx-ie .ui-icon-file-php > i { background-position: 0 28.58% }

.bx-ie .ui-icon-file-pdf > i { background-position: 0 35.72% }

.bx-ie .ui-icon-file-ppt > i { background-position: 0 42.86% }

.bx-ie .ui-icon-file-rar > i { background-position: 0 50% }

.bx-ie .ui-icon-file-zip > i { background-position: 0 57.14% }

.bx-ie .ui-icon-file-set > i { background-position: 0 64.28% }

.bx-ie .ui-icon-file-mov > i { background-position: 0 71.42% }

.bx-ie .ui-icon-file-img > i { background-position: 0 78.58% }

.bx-ie .ui-icon-file-folder > i { background-position: 0 85.72% }

.bx-ie .ui-icon-file-folder-shared > i { background-position: 0 92.86% }

.bx-ie .ui-icon-file-folder-shared-2 > i { background-position: 0 100% }

/*endregion*/

/*endregion*/

/*region Common icons*/
.ui-icon[class*=ui-icon-common-] > i { background-color: #7b8691; }

.ui-icon-common-user > i { background-image: url(/bitrix/js/ui/icons/images/common/ui-user.svg); }

.ui-icon-common-phone > i { background-image: url(/bitrix/js/ui/icons/images/common/ui-call.svg); }

.ui-icon-common-notification > i { background-image: url(/bitrix/js/ui/icons/images/common/ui-notification.svg); }

.ui-icon-common-user-group > i { background-image: url(/bitrix/js/ui/icons/images/common/ui-user-group.svg); }

.ui-icon-common-company > i { background-image: url(/bitrix/js/ui/icons/images/common/ui-user-company.svg); }

.ui-icon-common-bitrix24 > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-bitrix24.svg); }

.ui-icon-common-cloud > i { background-image: url(/bitrix/js/ui/icons/images/common/ui-cloud.svg); }

.ui-icon-common-folder > i { background-image: url(/bitrix/js/ui/icons/images/common/ui-folder.svg); }

.ui-icon-common-info > i { background-image: url(/bitrix/js/ui/icons/images/common/ui-info.svg); }

.ui-icon-common-question > i { background-image: url(/bitrix/js/ui/icons/images/common/ui-question.svg); }

/*endregion*/

/*region Service icons*/
.ui-icon-service-bitrix24 > i {
	background-color: #3ac8f5;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-bitrix24.svg);
}

.ui-icon-service-instagram > i {
	background-color: #d56c9a;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-instagram.svg);
}

.ui-icon-service-fb-instagram > i {
	background-color: #C529A4;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-fb-instagram.svg);
}

.ui-icon-service-vk > i {
	background-color: #3871ba;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-vk.svg);
}

.ui-icon-service-livechat > i {
	background-color: #ffa900;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-livechat.svg);
}

.ui-icon-service-skype > i {
	background-color: #02aff0;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-skype.svg);
}

.ui-icon-service-fb > i {
	background-color: #38659f;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-fb.svg);
}

.ui-icon-service-fb-comments > i {
	background-color: #38659f;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-fb-comments.svg);
}

.ui-icon-service-fb-messenger > i {
	background-color: #0183ff;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-fb-messanger.svg);
}

.ui-icon-service-viber > i {
	background-color: #995aca;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-viber.svg);
}

.ui-icon-service-twilio > i {
	background-color: #e42e3a;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-twilio.svg);
}

.ui-icon-service-telegram > i {
	background-color: #2fc6f6;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-telegram.svg);
}

.ui-icon-service-microsoft > i {
	background-color: #06afe5;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-microsoft.svg);
}

.ui-icon-service-kik > i {
	background-color: #212121;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-kik.svg);
}

.ui-icon-service-slack > i {
	background-color: #776ebd;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-slack.svg);
}

.ui-icon-service-groupme > i {
	background-color: #1db0ed;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-groupme.svg);
}

.ui-icon-service-outlook > i {
	background-color: #0071c5;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-outlook.svg);
}

.ui-icon-service-webchat > i {
	background-color: #4393d0;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-webchat.svg);
}

.ui-icon-service-directline > i {
	background-color: #4393d0;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-directline.svg);
}

.ui-icon-service-callback > i {
	background-color: #ff5752;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-call.svg);
}

.ui-icon-service-call > i {
	background-color: #54d1e1;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-call.svg);
}

.ui-icon-service-envelope > i {
	background-color: #4393d0;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-envelope.svg);
}

.ui-icon-service-email > i {
	background-color: #90be00;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-email.svg);
}

.ui-icon-service-webform > i {
	background-color: #00b4ac;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-webform.svg);
}

.ui-icon-service-ya-dialogs > i {
	background-color: #3a78db;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-ya-dialogs.svg);
}

.ui-icon-service-apple > i {
	background-color: #000;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-apple.svg);
}

.ui-icon-service-imessage > i {
	background-color: #54d857;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-imessage.svg);
}

.ui-icon-service-site-b24 > i {
	background-color: #4393d0;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-siteb24.svg);
}
.ui-icon-service-vk-adds > i {
	background-color: #3871ba;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-vk-adds.svg);
}

.ui-icon-service-ya-direct > i {
	background-color: #ffce00;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-ya-direct.svg);
}
.ui-icon-service-fb-adds > i {
	background-color: #38659f;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-fb-adds.svg);
}

.ui-icon-service-vk-order > i {
	background-color: #4a73a5;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-vk-order.svg);
}
	
.ui-icon-service-estore i {
	background-color: #90be00;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-estore.svg);
}

.ui-icon-service-site > i {
	background-color: #d4825A;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-ownsite.svg);
}

.ui-icon-service-call-up i {
	background-color: #55d0e0;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-call-up.svg);
}

.ui-icon-service-google-ads > i {
	background-color: #3889db;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-googleads.svg);
}

.ui-icon-service-organic > i {
	background-color: #6baf0e;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-organic.svg);
}

.ui-icon-service-common > i {
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-common.svg);
}

.ui-icon-service-universal > i {
	background-color: #55d0e0;
	background-image: url(/bitrix/js/ui/icons/images/service/ui-service-universal.svg);
}

.ui-icon-service-instagram-fb > i {
	background-color: #e85998;
	background-image: url(images/service/ui-service-instagram-fb.svg);
}
/*endregion*/

/* region Light Service icons */
.ui-icon[class*=ui-icon-service-light-] > i { background-color: #ebeff2; }

.ui-icon-service-light-bitrix24 > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-bitrix24.svg); }

.ui-icon-service-light-instagram > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-instagram.svg); }

.ui-icon-service-light-fb-instagram > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-fb-instagram.svg); }

.ui-icon-service-light-vk > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-vk.svg); }

.ui-icon-service-light-livechat > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-livechat.svg); }

.ui-icon-service-light-skype > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-skype.svg); }

.ui-icon-service-light-fb > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-fb.svg); }

.ui-icon-service-light-fb-comments > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-fb-comments.svg); }

.ui-icon-service-light-fb-messenger > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-messanger.svg); }

.ui-icon-service-light-viber > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-viber.svg); }

.ui-icon-service-light-twilio > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-twilio.svg); }

.ui-icon-service-light-telegram > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-telegram.svg); }

.ui-icon-service-light-microsoft > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-microsoft.svg); }

.ui-icon-service-light-kik > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-kik.svg); }

.ui-icon-service-light-slack > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-slack.svg); }

.ui-icon-service-light-groupme > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-groupme.svg); }

.ui-icon-service-light-outlook > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-outlook.svg); }

.ui-icon-service-light-webchat > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-webchat.svg); }

.ui-icon-service-light-directline > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-directline.svg); }

.ui-icon-service-light-callback > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-call.svg); }

.ui-icon-service-light-call > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-call.svg); }

.ui-icon-service-light-email > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-email.svg); }

.ui-icon-service-light-envelope > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-envelope.svg); }

.ui-icon-service-light-webform > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-webform.svg); }

.ui-icon-service-light-ya-dialogs > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-ya-dialogs.svg); }

.ui-icon-service-light-apple > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-apple.svg); }

.ui-icon-service-light-imessage > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-imessage.svg); }

.ui-icon-service-light-vk-order > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-vk-order.svg); }

.ui-icon-service-light-common > i { background-image: url(/bitrix/js/ui/icons/images/service/ui-service-light-common.svg); }

/*endregion*/