.ui-tile-list-block {
	padding-bottom: 10px;
}

.ui-tile-list-list {
	display: flex;
	margin: -14px 0 0 -14px;
	padding-top: 3px;
	align-items: center;
	flex-wrap: wrap;
}

.ui-tile-list-item {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	margin: 16px 0 0 14px;
	padding-bottom: 15px;
	min-height: 112px;
	width: 202px;
	height: 50px;
	border-radius: var(--ui-tile-list-item-border-radius, var(--ui-border-radius-sm, 1px));
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
	cursor: pointer;
	justify-content: flex-end;
	align-items: center;
}

.ui-tile-list-item:hover {
	box-shadow: rgba(0, 0, 0, 0.15) 0 4px 10px;
	transition: all 0.15s linear;
	transform: translate(0, -1px);
}

.ui-tile-list-item .ui-btn {
	display: block;
	max-width: calc(100% - 20px);
	padding: 0 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ui-tile-list-name {
	max-width: calc(100% - 10px);
}

.ui-tile-list-name-text {
display: inline-block;
overflow: hidden;
max-width: 135px;
color: #525c69;
vertical-align: middle;
text-overflow: ellipsis;
white-space: nowrap;
font: 13px/20px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-semi-bold, 600);
}

.ui-tile-list-logo-container {
margin-bottom: 13px;
}

.ui-tile-list-logo {
display: inline-block;
box-sizing: border-box;
width: 42px;
height: 42px;
border: 1px solid transparent;
border-radius: 50%;
vertical-align: top;
}

.ui-tile-list-item-selected {
border: none;
border-radius: var(--ui-tile-list-item-border-radius, var(--ui-border-radius-sm, 3px));
}

.ui-tile-list-item-selected:before {
position: absolute;
bottom: 14px;
top: -4px;
right: -5px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #97c70f url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%229%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M4.627%205.81L10.402%200%2012%201.607%204.652%209l-.025-.025L4.602%209%200%204.373l1.598-1.607z%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E)
		no-repeat center;
content: '';
box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}

.ui-tile-list-item-selected .ui-tile-list-logo {
border-color: rgba(255, 255, 255, .3);
}

.ui-tile-list-item-selected .ui-tile-list-name-text {
color: #fff;
}

.ui-tile-list-item-siteb24 {
background: #4393d0;
}

.ui-tile-list-item-googleads {
background: #3889db;
}

.ui-tile-list-item-estore {
background: #90be00;
}

.ui-tile-list-item-ownsite {
background: #d4825a;
}

.ui-tile-list-item-call-up {
background: #55d0e0;
}

.ui-tile-list-item-envelope {
background: #00b4ac;
}

.ui-tile-list-item-webform {
background: #3e7cac;
}

.ui-tile-list-item-fb {
background: #38659f;
}

.ui-tile-list-item-color-red { background: #ff5752; }

.ui-tile-list-item-color-orange { background: #ffa900; }

.ui-tile-list-item-color-green { background: #90be00; }

.ui-tile-list-item-color-blue { background: #4393d0; }

.ui-tile-list-item-color-violet { background: #995aca; }

.ui-tile-list-item-add {
border: 1px dashed rgba(166, 166, 166, .4);
background: rgba(255, 255, 255, .22);
box-shadow: none;
transition: all .2s linear;
}

.ui-tile-list-item-add:hover {
border-color: rgba(166, 166, 166, .8);
box-shadow: none;
transform: none;
}

.ui-tile-list-item-add:hover .ui-tile-list-logo-add:before,
.ui-tile-list-item-add:hover .ui-tile-list-logo-add:after {
background-color: #828c94;
}

.ui-tile-list-item-add .ui-tile-list-name-text {
font: 12px/25px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-regular, 400);
}

.ui-tile-list-item-add .ui-tile-list-logo-container {
margin-bottom: 7px;
}

.ui-tile-list-logo-add {
position: relative;
border-radius: 50%;
background-color: #fff;
}

.ui-tile-list-logo-add:before,
.ui-tile-list-logo-add:after {
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 4px;
background-color: #969aa0;
content: '';
transition: background-color .2s linear;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.ui-tile-list-logo-add:before {
top: 18px;
left: 11px;
transform: rotate(90deg);
}

.bitrix24-light-theme .ui-tile-list-logo {
background-color: rgba(255, 255, 255, .25);
}

.bitrix24-light-theme .ui-tile-list-logo-add:before,
.bitrix24-light-theme .ui-tile-list-logo-add:after {
background-color: #e9e9ea;
}

.bitrix24-light-theme .ui-tile-list-item-add:hover .ui-tile-list-logo-add:before,
.bitrix24-light-theme .ui-tile-list-item-add:hover .ui-tile-list-logo-add:after {
background-color: #fff;
}

.bitrix24-light-theme .ui-tile-list-item-add {
border-color: rgba(255, 255, 255, 0.4);
}

.bitrix24-light-theme .ui-tile-list-item-add:hover {
border-color: rgba(255, 255, 255, 0.7);
}

.bitrix24-light-theme .ui-tile-list-item-add .ui-tile-list-name-text {
color: #fff;
}

.ui-tile-list-item-disabled {
cursor: auto;
}

.ui-tile-list-item-disabled .ui-tile-list-logo-container,
.ui-tile-list-item-disabled .ui-tile-list-name {
opacity: .6;
}

.ui-tile-list-item-disabled:hover {
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
transform: none;
}

.ui-tile-list-label {
position: absolute;
top: -4px;
left: 9px;
display: flex;
padding: 0 5px;
border-radius: 30px;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}

.ui-tile-list-label-text {
overflow: hidden;
max-width: 130px;
color: #525c69;
text-transform: uppercase;
text-overflow: ellipsis;
white-space: nowrap;
font: 8px/14px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-bold, 700);
}

.ui-tile-list-btn-block {
	display: flex;
	justify-content: center;
	width: 100%;
}

.ui-tile-badge {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
padding: 0 8px;
height: 14px;
border-radius: 12px;
font: 8px/14px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-bold, 700);
text-transform: uppercase;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.14);
}

.ui-tile-badge--new {
top: -4px;
left: 10px;
background-color: #2fc6f6;
color: #fff
}