.icon{
    float:left;
	position: relative;
    overflow:hidden;
    user-select: none;
}
.icon > span{
	display: block;
	width: inherit;
	height: inherit;
    background-size:100%;
}

.icon > .rounded{
    border-radius:50%;
    background-size:50%;
}

.icon > .size12{
	width:12px;
	height:12px;
}
.icon > .size16{
	width:16px;
	height:16px;
}
.icon > .size18{
	width:18px;
	height:18px;
}
.icon > .size20{
	width:20px;
	height:20px;
}
.icon > .size22{
	width:22px;
	height:22px;
}
.icon > .size24{
	width:24px;
	height:24px;
}
.icon > .size26{
	width:26px;
	height:26px;
}
.icon > .size28{
	width:28px;
	height:28px;
}
.icon > .size32{
	width:32px;
	height:32px;
}
.icon > .size36{
	width:36px;
	height:36px;
}
.icon > .size40{
	width:40px;
	height:40px;
}
.icon > .size50{
	width:50px;
	height:50px;
}

.icon-text{
    display: flex;
    column-gap:8px;
    align-items: center;
}
.icon-text .icon{
    flex:0 0 1;
}
.icon-text > .text{
    flex:1;
    display: flex;
    flex-direction: column;
    gap:5px;
}
.icon-text > .text .title{
    font-size:14px;
}
.icon-text > .text .sub-title{
    font-size:12px;
    color:#999;
}
/*
.icon-text > .text,
.icon-text > .text .title,
.icon-text > .text .sub-title 
{
    word-break: break-all;
}
*/
.clic-push,
.clic-pushed
{
	transition: transform 0.05s ease;
}
.clic-push:active,
.clic-pushed:active
{
	transform: scale(0.90);
}

.gap4{
	gap:4px;
}
.gap5{
	gap:5px;
}
.gap6{
	gap:6px;
}
.gap8{
	gap:8px;
}
.gap10{
	gap:10px;
}
.gap12{
	gap:12px;
}
.gap14{
	gap:14px;
}
.gap16{
	gap:16px;
}
.gap20{
	gap:20px;
}
.gap24{
	gap:20px;
}