@charset "utf-8";

:root { --ui-icon-size-xs: 26px; --ui-icon-size-sm: 31px; --ui-icon-size-md: 39px; --ui-icon-size-lg: 47px; --ui-icon-size: 39px; --ui-icon-service-bg-color: #ebeff2; }

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

.ui-icon > i { position: relative; display: block; padding-top: 100%; width: 100%; border-radius: 50%; background-position: center center; background-size: 100%; background-repeat: no-repeat; background-color: var(--ui-icon-service-bg-color); background-image: var(--ui-icon-service-bg-image); }

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

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

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

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

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

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

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

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

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