/* Google Font - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root{
	--bgColor1:#fff;
	--bgColor2:#eee;

	--textColor1:#000;
	--textColor2:#333;
	--textColor3:#787878;
	--textColor4:#333;
	

	--fontRegular:16px;
	--fontMedium:14px;
	--fontSmall:10px;
}
:root{
	--bgColor1:#333;
	--bgColor2:#0a0a0a;
	--bgColorG:#171717;

	--textColor1:#e7e6e4;
	--textColor2:#eee;
	--textColor3:#9f9090;
	--textColorL:#bab8b6;
	--textColorLD:#71706c;
	
	--fontRegular:15px;
	--fontMedium:14px;
	--fontSmall:12px;
	
	--colorHighlight:rgb(223, 176, 58);
	--colorHighlightDark:rgb(60, 52, 32);
	
	
}

/* Reset + base */
*{
	margin:0;
	padding:0;
	box-sizing:border-box;

	/* Hide scrollbars (cross-browser) */
	-ms-overflow-style:none;
	scrollbar-width:none;
	font-family: "Inter", sans-serif;
}
*::-webkit-scrollbar{
	display:none;
}

html,body{
	width:100%;
	height:100%;

	background:var(--bgColor2);
	color:var(--textColor1);

	font-family:'Inter',sans-serif;
	font-size:var(--fontRegular);
}
p{
	line-height: 120%;
	font-weight: 200;
}
button
{
	height:30px;
	padding:0 12px;
	border-radius:6px;
	border:none;
	outline:none;
	cursor:pointer;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	font-size:12px;
	background:#222;
	color:#fff;

	transition:.15s ease;
	i,svg{
		font-size: 10px;
	}
	&[mini]
	{
		height:16px;
		padding:2px;
		color:var(--colorHighlight);
		svg{
			height: 10px;
		}
	}
	&:hover
	{
		filter:brightness(1.1);
	}

	&:active
	{
		transform:translateY(1px);
	}

	&[disabled]
	{
		background:#ccc;
		color:#666;
		cursor:not-allowed;
		filter:none;
		opacity: 0.5;
	}

	&[green]
	{
		background:#1f7a1f;

		&:hover
		{
			filter:brightness(1.15);
		}
	}

	&[red]
	{
		background:#dc1d1d;

		&:hover
		{
			filter:brightness(1.15);
		}
	}

	&[blue]
	{
		background:#2c3e70;

		&:hover
		{
			filter:brightness(1.15);
		}
	}
	&[white]
	{
		
	}
	&[basic]
	{
		background:#302d2d;
	}
	&[highlight]
	{
		background-color:var(--colorHighlight);
		color: #333;
		border-radius:12px;
	}
	&[light]
	{
		color:var(--colorHighlight);
	}
	&[loading]{
		
	}
}
input[type="text"],input[type="date"],input[type="time"],input[type="number"],input[type="email"],input[type="search"],textarea,select{
	height: 38px;
    color: var(--textColor2);
    background-color: #171717;
    border-radius: 10px;
    outline: none;
    width: 100%;
    padding: 0 11px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    transition: border-color .2s, background .2s;
    border:1px solid #ffffff1f;
    
    &:focus{
		border-color:var(--colorHighlight)
	}
}
textarea{
	padding: 14px;
	min-height: 100px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.input{
	margin-bottom: 10px;
}
.input.sin{
	position: relative;
}
.input.sin .sob{
	position: absolute;
	right:10px;
	top:7px;
}
.input .input-title{
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--textColorL);
	margin-bottom: 5px;
	
}
.netzy-input{
	
}
.netzy-input.error{
	border-color: #ff3c2e !important;
}
/* Utility font sizes */
.font-regular{
	font-size:var(--fontRegular);
}
.font-medium{
	font-size:var(--fontMedium);
}
.font-small{
	font-size:var(--fontSmall);
}

/* Utility text colors */
.text-primary{
	color:var(--textColor1);
}
.text-secondary{
	color:var(--textColor2);
}
.text-muted{
	color:var(--textColor3);
}

/* Background helpers */
.bg-primary{
	background:var(--bgColor1);
}
.bg-secondary{
	background:var(--bgColor2);
}
.subline{
	font-size: 12px;
	line-height: 14px;
	color: var(--textColorL);
}
/* Layout helpers */
.full-width{
	width:100%;
}
.full-height{
	height:100%;
}
.flex{
	display:flex;
}
.flex-center{
	display:flex;
	align-items:center;
	justify-content:center;
}
.flex-between{
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.semibold{font-weight: 500;}
.bold{font-weight: 600;}
.mb5{margin-bottom:5px!Important;}
.mb10{margin-bottom: 10px!Important;}
.mb15{margin-bottom: 15px !Important;}
.w300{width: 300px !Important;}
.tac{text-align: center;}
.tal{text-align: left;}
.tar{text-align: right;}
.p5{padding:5px !important;}
.p10{padding:10px !important;}
.p15{padding:15px !important;}
.m5{margin: 5px;}
.m10{margin: 10px;}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.ht10{height: 10px;}
.ht20{height: 20px;}
.ht30{height: 30px;}
.bs75{background-size:70% !important;mask-size:70% !important;}
.bs60{background-size:55% !important;mask-size:55% !important;}
.bs50{background-size:40% !important;mask-size:40% !important;}
.nx-item
{
	padding:8px;
	border-bottom:1px solid #ffffff19;
	cursor:pointer;
}

.nx-row
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
}

.nx-left
{
	display:flex;
	align-items:center;
	gap:8px;
}

.nx-name
{
	font-weight:600;
	font-size:14px;
}

.nx-meta
{
	font-size:12px;
	display:flex;
	gap:8px;
	flex-wrap:wrap;
	margin-left:22px;
}

.nx-check
{
	cursor:pointer;
}

.nx-btn-sm
{
	font-size:12px;
	padding:2px 6px;
	cursor:pointer;
}

displace{display: block;height: attr(data-height px);}
.v8{
	padding: 20px;
	text-align: center;
	font-weight: 500;
}
.disabled{
	filter: grayscale(1);
	pointer-events: none;
	opacity: 0.7;
}
/* Toast */
.ui-toast{
	position:fixed;
	left:50%;
	bottom:30px;
	transform:translateX(-50%) translateY(20px);
	background:#111;
	color:#fff;
	padding:10px 16px;
	border-radius:6px;
	font-size:var(--fontMedium);
	opacity:0;
	pointer-events:none;
	transition:all .3s ease;
	z-index:99999;
	color: #fff;
	font-size: 14px;
}
.ui-toast.show{
	opacity:1;
	transform:translateX(-50%) translateY(0);
}

.ui-overlay
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgb(61 61 61 / 87%);
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:10000;
	color: var(--textColor4);

	opacity:0;
	transition:opacity .2s;

	&.show
	{
		opacity:1;
	}

	/* ================= POPUP (CONFIRM) ================= */

	.ui-popup
	{
		background:#fff;
		color:var(--textColor1);
		min-width:260px;
		max-width:90%;
		padding:20px;
		border-radius:8px;
		text-align:center;
		box-shadow:0 10px 30px rgba(0,0,0,0.2);

		.ui-text
		{
			margin-bottom:20px;
			font-size:var(--fontRegular);
		}

		.ui-actions
		{
			display:flex;
			justify-content:center;
			gap:10px;
		}

		button
		{
			border:none;
			padding:8px 14px;
			border-radius:6px;
			cursor:pointer;
			font-size:var(--fontMedium);
		}

		.yes
		{
			background:#000;
			color:#fff;
		}

		.no
		{
			background:var(--bgColor2);
			color:var(--textColor1);
		}
	}

	/* ================= MODAL ================= */

	.ui-modal
	{
		background:#fff;
		border-radius:12px;
		box-shadow:0 10px 40px rgba(0,0,0,0.25);
		width: auto;
		max-width:95%;
		max-height:90vh;
		min-height:200px;

		display:flex;
		flex-direction:column;
		overflow:hidden;
		
		
		.ui-modal-head
		{
			display:flex;
			align-items:center;
			justify-content:space-between;
			padding:12px 16px;
			border-bottom:1px solid #eee;
			flex:0 0 auto;

			.ui-modal-title
			{
				font-weight:600;
				font-size:14px;
			}

			.ui-modal-close
			{
				cursor:pointer;
				font-size:18px;
				opacity:.6;

				&:hover{opacity:1;}
			}
		}

		.ui-modal-body
		{
			padding:16px;
			overflow:auto;
			flex:1 1 auto;
		}

		.ui-modal-foot
		{
			padding:12px 16px;
			border-top:1px solid #eee;
			flex:0 0 auto;
			text-align:right;
			display: flex;
			gap:5px;
			justify-content:flex-end;
		}
		
		&.ui-modal-dark{
			background-color:#111;
			color: var(--textColor1);
			
			.ui-modal-head
			{
				border-bottom:1px solid #2d2d2d;
			}
			.ui-modal-foot{				
				border-top:1px solid #2d2d2d;
			}
		}
	}
}
/* ------ Header ---------*/

.header{
	position:fixed;
	top:0;
	left:0px;
	padding:20px;
	padding-top: 20px;
	padding-left: 40px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	z-index:1000;

	.logo{
		font-size:20px;
		font-weight:600;
		font-size: 18px;
		letter-spacing: 3.4px;
		cursor: pointer;
		
		span:nth-of-type(1)
		{
			color:#dfb03a;
		}
		span:nth-of-type(2)
		{
			
		}
	}

	
	.account{
		display:flex;
		display: none;
		align-items:center;
		gap:8px;
		
		.account-sub{
			height:30px;
			min-width:30px;
			padding:0 8px;
			border-radius:10px;
			background:var(--bgColor1);
			display:flex;
			align-items:center;
			justify-content:center;
			gap:8px;
			cursor:pointer;
			
			.icon{
				width:15px;
				height:15px;
				display:flex;
				align-items:center;
				justify-content:center;
				
				svg{
					width:15px;
					height:15px;
					stroke-width:1;
				}
			}
			
			.info{
				display:flex;
				flex-direction:column;
				gap:2px;
				line-height:1;

				.name{
					font-size:12px;
					font-weight:600;
				}

				.email{
					font-size:9px;
					color:#777;
				}
			}
			
			.image{
				height:25px;
				width:25px;
				border-radius: 50%;
				background-size: contain;
				background-position: center;
			}
		}
		
		&.user{
			
		}
		&.notify{
			
		}
		
		
	}
}
.header-displace{
	height:45px;
}
/* ===== DESKTOP SIDEBAR ===== */
@media(min-width:768px){
	.menu{
		position:fixed;
		top:0;
		left:0;
		width:240px;
		height:100%;
		background:var(--bgColor2);
		padding:12px 8px;
		padding-top: 100px;
		border-right: 1px solid #cccccc22;
		display:flex;
		flex-direction: column;
		gap:10px;
		
		.menu-top{
			flex:1;
			border-bottom: 1px solid #ffffff19;
			margin-bottom: 20px;
		}
		.tab{
			display: flex;
	        padding: 0px 12px;
	        padding-left: 15px;
	        margin-bottom: 20px;
	        cursor: pointer;
	        color: #999;
	        gap: 10px;
	        margin-left: 40px;
			border-left: 2px solid transparent;
	        
			&:hover{
				background:rgba(0,0,0,0.04);
				border-left: 2px solid #999;
			}

			svg{
				width:16px;
				height:16px;
				stroke-width:1px;
			}

			span{
				display:table-cell;
				text-align: left;
				vertical-align:middle;
				font-size:var(--fontMedium);
				flex:1;
			}

			&.active{
				color:#fff;
				font-weight:500;
				border-left: 2px solid #fff;
			}
		}
	}
	
	.content{
		margin-left:240px;
		padding:20px;
		min-height:100vh;
	}
}
/* Content */



/* ===== MOBILE (BOTTOM BAR) ===== */
@media(max-width:768px){
	.header{
		position: static;
	}
	.menu{
		position: fixed;
		top:auto;
		bottom:0;
		left:0;
		padding:0;
		z-index: 100;
		background:var(--bgColor1);
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
		
		.menu-top,.menu-bottom{
			height:64px;
			padding:0;
			text-align:center;
			white-space:nowrap;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.menu-top{
			width:80%;
		}
		.menu-bottom{
			width: 20%;
			.tab{
				display: none;
				
				&[data-tab="profile"]
				{
					display: block;
				}
			}
		}
		.tab{
			display:inline-block;
			margin:0;
			padding: 10px 0px;
			font-size:11px;
			border-radius:0;
			flex: 1;
			color: #999;

			i{
				display:block;
				width:22px;
				height:22px;
				margin:0 auto 2px;
			}
			svg{
				width: 20px;
				height: 20px;
			}
			span{
				display:none;
				font-size:11px;
				text-align: center;
			}
			&[data-tab="community"]
			{
				display:none;
			}
			&.active{
				color:#fff;
				background:transparent;
				
					span{
						display: block;
					}
			}
		}
	}

	.content{
		margin-left:0;
		padding:12px;
		padding-bottom:70px;
	}
}

.fleece{

	.fleece-head{
		padding-bottom:8px;
		margin-bottom:12px;
		border-bottom:1px solid rgba(0,0,0,0.08);

		.fleece-tab{
			display:inline-block;
			margin-right:18px;
			cursor:pointer;
			font-size:14px;
			color:#999;
			font-weight:500;
			border-bottom:1px solid transparent;
			padding:5px 7px;
			
			&:after{
				content: attr(count);
				font-size: 9px;
                background-color: #e6ff0052;
                color: #fff;
                vertical-align: text-bottom;
                padding: 2px 6px;
                border-radius: 20px;
			}
			&[count="0"]:after,&[count=""]:after,&:not([count]):after{
				display: none;
			}
			
			.fleece-icon{
				display:inline-block;
				margin-right:6px;
				vertical-align:middle;
			}

			.fleece-tab-text{
				vertical-align:middle;
			}

			&.active{
				color:var(--textColor1);
				border-bottom:1px solid var(--colorHighlight);
				
			}
		}
	}

	.fleece-body{

		.fleece-content{
			display:none;
		}

		.fleece-content:first-child{
			display:block;
		}
	}
}
.card-list{
	
	&.single{
		display: flex;
		flex-direction: column;
		gap:10px;
	}
}
.tag {
	background: #333;
	height: 26px;
	color: var(--textColorL);
	cursor: pointer;
	border: none;
	border-radius: 980px;
	align-items: center;
	padding: 0 10px;
	font-size: 12px;
	font-weight: 500;
	display: inline-flex;
	transition: all 150ms;
}
.tag:hover {
	opacity: 0.85;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.card-network{
	display:flex;
	align-items:center;
	gap:12px;
	padding:10px 12px;
	border-radius:8px;
	cursor:pointer;

	&:hover{
		background:rgba(0,0,0,0.04);
	}

	.cn-avatar{
		width:45px;
		height:45px;
		border-radius:50%;
		display:flex;
		align-items:center;
		justify-content:center;
		font-size:12px;
		font-weight:500;
		flex-shrink:0;
	}

	.cn-body{
		flex:1;
		min-width:0;
		display: flex;
		flex-direction: column;
		gap:1px;
		
		.cn-top{
			margin-bottom: 2px;
			align-items: center;
            justify-content: flex-start;
            display: flex;
            gap:5px;
            flex-wrap: wrap;
		}

		.cn-name{
			font-size:14px;
			font-weight:500;
			color:var(--textColor1);
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
		}
		
		.cn-pill{
			display: inline-flex;
			.iconp{
				transform: scale(0.8);
			}
		}

		.cn-meta{
			font-size:12px;
			color:#777;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
		}
		.cn-aka{
			font-size: 12px;
			color: #666;
			margin-top: 4px;
		}
		.cn-tags{
			margin-top: 4px;
		}
	}
	.cn-right{
		min-height: 50px;
		
		.cn-date{
			font-size: var(--fontSmall);
			color:var(--textColor3);
			margin-bottom: 5px;
		}
		
		.cn-actions{
			display:flex;
			justify-content: flex-end;
			gap:6px;

			a, span{
				display:inline-flex;
				line-height:0;
			}

			svg{
				width:14px;
				height:14px;
				flex-shrink:0;
				cursor:pointer;
			}

			.inactive svg{
				opacity:.4;
				cursor:default;
			}
		}
	}
	

	.cn-remove{
		margin-left:6px;
		opacity:0;
		transition:opacity .15s ease;

		svg{
			width:14px;
			height:14px;
			color:#999;
		}
	}

	&:hover{
		.cn-remove{
			opacity:1;
		}
	}
}
.card-search {

	background: hsl(0 0% 9%);
	border: 1px solid hsl(0 0% 100% / 0.08);
	border-radius: 18px;
	padding: 20px;
	cursor: pointer;
	transition: box-shadow 0.2s;

	&:hover {
		box-shadow: 0 4px 6px rgba(0,0,0,0.15);
	}

	.cs-row {
		display: flex;
		align-items: flex-start;
		gap: 12px;
	}

	.cs-avatar {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgb(15, 121, 174);
		font-size: 14px;
		font-weight: 500;
		flex-shrink: 0;
	}

	.cs-main {
		flex: 1;
		min-width: 0;
	}

	.cs-head {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.cs-name {
		font-size: 18px;
		font-weight: 500;
		letter-spacing: -0.02em;
	}

	.cs-meta {
		font-size: 13px;
		color: hsl(40 3% 55%);
	}

	.cs-proximity {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 12px;
		font-weight: 500;
		color: hsl(142 71% 50%);
		line-height: 1;

		.cs-dot {
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: hsl(142 71% 50%);
		}
	}

	.cs-actions {
		display: inline-flex;
		align-items: center;
		gap: 5px;

		.cs-icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 20px;
			height: 20px;
			cursor: pointer;

			.cs-i {
				width: 16px;
				height: 16px;
				display: block;
				mask-size:contain;
				background-size:contain;
				mask-position:center ;
				background-position:center ;
			}

			.cs-i-linkedin {
				background: #0A66C2;
				mask-image:url('/images/iconp-ln.png');
			}

			.cs-i-whatsapp {
				background-image:url('/images/icona-whatsapp.png');
			}

			.cs-i-phone {
				background: #1DA1F2;
				mask-image:url('/images/iconp-phone.png');
			}

			.cs-i-facebook {
				background: #1877F2;
				mask-image:url('/images/iconp-fb.png');
			}
			.cs-i-google {
				background: #888;
				mask-image:url('/images/iconp-mail.png');
			}
		}
	}

	.cs-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin-top: 12px;

		.cs-pill {
			background: hsl(0 0% 14%);
			color: hsl(40 3% 55%);
			border-radius: 999px;
			padding: 0 10px;
			height: 26px;
			display: inline-flex;
			align-items: center;
			font-size: 12px;
			font-weight: 500;
			cursor: pointer;
			transition: all 0.15s;

			&:hover {
				opacity: 0.85;
				text-decoration: underline;
				text-underline-offset: 2px;
			}
		}
	}
}
.ui-block{
	border:1px solid rgb(53 53 53);
	border-radius:12px;
	margin-bottom: 20px;
	a{
		color: var(--colorHighlight);
	}
	.ui-block-head{
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:10px;
		padding:14px 16px;
		cursor:pointer;

		.ui-block-left{
			display:flex;
			align-items:center;
			gap:10px;
			min-width:0;

			.ui-block-icon{
				width:16px;
				height:16px;
				flex-shrink:0;
			}

			.ui-block-title-wrap{
				min-width:0;

				.ui-block-title{
					font-size:14px;
					font-weight:500;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
				}

				.ui-block-sub{
					font-size:12px;
					margin-top:2px;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
					color: #999;
				}
			}
		}

		.ui-block-actions{
			display:flex;
			align-items:center;
			gap:6px;

			.ui-btn{
				display:inline-flex;
				align-items:center;
				gap:6px;
				padding:6px 10px;
				border-radius:8px;
				font-size:12px;
				font-weight:500;
				cursor:pointer;

				&.blue{
					background:rgba(0,120,255,0.1);
					color:#0078ff;
				}

				&.accent{
					background:rgba(0,0,0,0.06);
					color:#333;
				}

				svg{
					width:13px;
					height:13px;
				}
			}
		}
	}

	.ui-block-body{
		padding:0 16px 16px 16px;

		.ui-block-list{
			display:flex;
			flex-direction:column;
			gap:4px;
		}
	}
}
.profile {
	max-width:1080px;
	margin:0 auto;
	padding:24px;
	overflow:hidden;
	color: var(--textColor3);

	.profile-back {
		margin-bottom:16px;
		font-size:13px;
		color:#999;
		cursor:pointer;
	}

	.profile-main {
		display:flex;
		flex-direction:column;
		gap:24px;
		
		h2{
			font-size:12px;
			color:#777;
			text-transform: uppercase;
			margin: 0px;
			font-weight: 500;
			margin-top: 10px;
			margin-bottom: 10px;
		}
		
		.profile-top,.profile-bottom {
			display:flex;
			gap:24px;
			flex-wrap:wrap;
			align-items: flex-start;

			.profile-left {
				flex:1;
				min-width:0;

				.profile-header {
					display:flex;
					gap:16px;

					.profile-avatar {
						width:64px;
						height:64px;
						border-radius:50%;
						display:flex;
						align-items:center;
						justify-content:center;
						background:#fff1e0;
						color:#e65c00;
						font-weight:500;
						overflow: hidden;
						
						.cn-avatar{
							min-height: 50px;
							min-width: 50px;
							transform: scale(1.3);
							border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 12px;
                            font-weight: 500;
                            flex-shrink: 0;
						}
					}

					.profile-info {
						flex:1;

						.profile-name {font-size:28px;}
						.profile-title {font-size:14px;color:#666;}
						.profile-location {font-size:14px;color:#666;}

						.profile-proximity {
							margin-top:6px;
							font-size:12px;
							display:flex;
							align-items:center;
							gap:6px;

							.dot {
								width:6px;
								height:6px;
								border-radius:50%;
								background:green;
							}
						}
					}
				}

				.profile-tags {
					margin-top:16px;
					display:flex;
					flex-wrap:wrap;
					gap:6px;

					.pill {
						padding:4px 8px;
						border-radius:999px;
						font-size:12px;
					}
				}
				.profile-comm{
					padding: 10px 0px;
					font-size: 12px;
					color: var(--textColorL);
				}
				.profile-actions {
					margin-top:16px;
					display:flex;
					gap:20px;

					.action {
						display:flex;
						flex-direction:column;
						align-items:center;
						font-size:11px;
					}
				}

				.profile-badges {
					margin-top:16px;
					display:flex;
					gap:6px;

					.badge {
						font-size:11px;
						
						padding:4px 8px;
						border-radius:999px;
					}
				}
			}

			.profile-right {
				width:320px;
				max-height: 100px;
				overflow: visible;
				&.right-full{
					max-height: 1000px;
				}
				.contact-box{
					background-color: rgb(23, 23, 23);
					border-radius:12px;
					padding:16px;
													
					.contact-header {
						display:flex;
						justify-content:space-between;
						margin-bottom:12px;
					}

					.contact-list {
						display:flex;
						flex-direction:column;
						gap:10px;
						//max-height: 100px;
						overflow: hidden;
						transition: all 0.3s ease-in;

						.row {
							display:flex;
							justify-content:space-between;
							font-size:13px;
							
							span:first-of-type{
								
							}
							
							a{
								color: #ccc;
							}
						}
					}
					.contact-expand{
						display: none;
					}
					button[highlight]{
						margin-top:12px;
						width:100%;
					}

					.btn-secondary {
						margin-top:10px;
						width:100%;
						padding:8px;
						font-size:12px;
					}
					
				}
				&:hover{
					.contact-list{
						max-height: 400px;
					}
				}
			}
		}

		.profile-tabs {

			.tab-header {
				display:inline-flex;
				gap:8px;
				padding: 5px;
				background:rgb(23,23,23);
				border-radius: 8px;

				.tab {
					padding:8px 12px;
					border-radius:8px;
					cursor:pointer;
					font-size:13px;
				}

				.tab.active {
					background:rgb(10,10,10);
				}
			}

			.tab-content {
				margin-top:16px;

				.profile-section {
					margin-bottom:32px;

					.section-title {
						font-size:12px;
						color:#777;
						text-transform: uppercase;
					}

					.section-body {
						margin-top:10px;
						font-size:14px;
						line-height:1.6;
					}
				}

				.timeline {
					.item {
						display:flex;
						gap:12px;
						padding:12px 0;

						.marker {
							width:8px;

							.dot {
								width:8px;
								height:8px;
								border-radius:50%;
								background:#ccc;
							}
						}
					}
				}
			}

			.profile-side {
				display:flex;
				flex-direction:column;
				gap:24px;

				.card {
					border:1px solid #eee;
					padding:16px;
					border-radius:10px;

					.card-title {
						font-size:12px;
						color:#999;
					}

					.progress-row {
						display:flex;
						align-items:center;
						gap:8px;

						.bar {
							flex:1;
							height:5px;
							background:#eee;

							.fill {
								height:100%;
								background:#007aff;
							}
						}
					}
				}

				.people-list {
					.person {
						display:flex;
						align-items:center;
						gap:10px;
						padding:10px 0;

						.avatar {
							width:36px;
							height:36px;
							border-radius:50%;
							background:#eee;
						}

						.info {
							flex:1;
						}
					}
				}
			}
		}

		.profile-bottom-cta {
			position:fixed;
			bottom:0;
			left:0;
			right:0;
			padding:12px;
			display:flex;
			gap:8px;
			border-top:1px solid #eee;
			background:#fff;

			button {
				flex:1;
				height:44px;
			}
		}
	}
}

.profile-history-card {
	display:flex;
	flex-direction:column;
	padding:12px 0;
	margin-bottom: 0px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	.phc-root-company{
		font-size: 14px;
		color: var(--colorHighlight);
		margin-bottom:5px;
		margin-left: 18px;
	}
	.phc{
		display:flex;
		align-items:flex-start;
		
	.phc-timeline {
		display:flex;
		flex-direction:column;
		align-items:center;
		margin-top:6px;
		width:8px;
		align-self: stretch;
		margin-right: 10px;

		.phc-dot {
			width:8px;
			height:8px;
			border-radius:50%;
			flex-shrink:0;
			background-color: #666;
			&.active{
				background-color: rgb(37, 218, 103);
			}
			margin-bottom:5px;
			
		}

		.phc-line {
			width:1px;
			margin-top:4px;
			min-height:calc(100% - 20px);
			border-left:1px solid #666;
		}
		
	}

	.phc-content {
		margin-bottom: 10px;
		flex:1;

		.phc-role {
			font-size:14px;
			font-weight:500;
			margin-bottom:5px;
		}

		.phc-company {
			font-size: 14px;
			color: var(--colorHighlight);
			margin-bottom:5px;
		}

		.phc-duration {
			margin-bottom:5px;
			font-size:12px;
		}
		.phc-location {
			margin-bottom:5px;
			font-size:12px;
		}

		.phc-description {
			margin-top:4px;
			font-size:13px;
			line-height:1.5;
		}
	}

}
	&.no-line {
		.phc-timeline {
			.phc-line {
				display:none;
			}
		}
	}
}
.profile-history-card .phc:last-child .phc-line {
	display: none;
}
.profile-history-card[child-length="1"]
{
	.phc-root-company
	{
		display: none;
	}
}
.profile-history-card:not([child-length="1"])
{
	.phc-company
	{
		display: none;
	}
}
.profile-network {
	display:flex;
	align-items:center;
	gap:20px;
	margin-top:16px;

	.item {
		display:flex;
		flex-direction:column;
		align-items:center;
		gap:4px;

		.label {
			font-size:11px;
		}

		&.disabled {
			.icona {
				opacity:0.35;
				cursor:default;
			}

			.label {
				opacity:0.6;
			}
		}
	}
}
@media(max-width:768px)
{
	.profile-top,.profile-bottom {
		flex-direction: column;
	}
	.profile-right{
		max-height:1000px !important;
		width: 100% !important;
	}
}
.content{
	
}
.content .content-box{
	max-width: 1000px;
	margin: 0px auto;
}
.content .content-head-gear
{
	float: right;
}
.content{
	h1,h2{
		margin: 0px;
		margin-bottom: 20px;
		color: var(--textColor2);
		font-size:20px;	
		font-weight: 600;
	}
	
}
.content h3{
	margin: 0px;
	margin-bottom: 10px;
	color: var(--textColor3);
	font-size: var(--fontMedium);
}
.avatar-ref{
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.avatar-ref.avatar-ref-collasce{
	box-shadow:0px 0px 3px 2px #000;
	margin-left: -30px;
}
.avatar-ref.frame{
	overflow: hidden;
    height: 53px;
    width: 53px;
}
.avatar-ref.frame iframe{
	transform: translate(105px, -10px);
}
.pill{
	display: inline-block;
	vertical-align: middle;
	font-size:9px;
	padding:3px 6px;
	border-radius:999px;
	margin-right:6px;
	cursor:pointer;
	font-weight: 600;
    color: #fff;
    background-color: #333;
    text-transform: lowercase;
    line-height: 0.8rem;
}
.pill:first-line{
	
  text-transform: uppercase;
}
.pill:after{
	content: attr(count);
	background-color: #333;
	padding: 1px 2px;
	border-radius:25%;
	display: inline-block;
	font-size: 9px;
	margin-left: 5px;
}
.pill:not([count]):after,.pill[count="0"]:after,.pill[count="1"]:after
{
	display: none;
}
.iconp{
	display: inline-block;
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
   cursor:pointer;
}
.pill.pill-green{
	background-color: rgb(29, 53, 38);
	color: rgb(37, 218, 103);
}
.pill[source="LINKEDIN"]
{
	background-color: #0072b1;
}
.pill[source="FACEBOOK"]
{
	background-color: #1877f299;
}
.pill[source="GOOGLE"]
{
	background-color: #de5246;
}
.pill[source="WHATSAPP"]
{
	background-color: #075e54;
	
}
.pill[source="PHONE"]
{
	background-color: blue;
	 
}
.pill[source="EMAIL"]
{
	background-color: #666;
}
.iconp{
	mask-size:contain;
	background-size:contain;
	mask-position:center ;
	background-position:center ;
	background-repeat: no-repeat;
	mask-repeat:no-repeat;
}
.iconp.LINKEDIN
{
	background: #0A66C2;
	mask-image:url('/images/iconp-ln.png');
	background-size: 90%;
}
.iconp.WHATSAPP
{
	background-image:url('/images/icona-whatsapp.png');
	background-size: 90%;
}
.iconp.FACEBOOK
{
	background: #1877F2;
	mask-image:url('/images/iconp-fb.png');
}
.iconp.GOOGLE
{
	background-size: 90%;
	background-image:url('/images/google.png');
}
.iconp.EMAIL
{
	background-image:url('/images/iconp-mail.png');
	 background-size: 80%;
}
.iconp.PHONE
{
	background-image:url('/images/iconp-phone.png?1');
	 background-size: 70%;
}
.icona{
	display: inline-block;
	width: 25px;
	height: 25px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.icona.LINKEDIN
{
	background-image:url('/images/icona-linkedin.png');
}
.icona.FACEBOOK
{
	background-image:url('/images/icona-facebook.png');
}
.icona.GOOGLE
{
	background-image:url('/images/icona-google.png');
}
.icona.EMAIL,.icona.MAIL
{
	background-image:url('/images/icona-mail.png');
}
.icona.WHATSAPP
{
	background-image:url('/images/icona-whatsapp.png');
}
.icona.PHONE
{
	background-image:url('/images/icona-phone.png');
}

.dedupe-mapper
{
	padding:16px;

	.dedupe-mapper-head
	{
		text-align:center;
		font-size:16px;
		font-weight:600;
		margin-bottom:16px;
	}

	.dedupe-mapper-body
	{
		display:flex;
		gap:16px;
		justify-content:center;
		flex-wrap:nowrap;
	}
}

.card-vertical
{
	width:220px;
	background:#fff;
	border-radius:10px;
	box-shadow:0 6px 20px rgba(0,0,0,0.2);
	display:flex;
	flex-direction:column;
	align-items:center;

	transition:.2s ease;
	position: relative;

	&:hover
	{
		transform:translateY(-2px);
		box-shadow:0 10px 28px rgba(0,0,0,0.12);
	}

	.cv-head
	{
		margin-bottom:10px;
		.cv-head-line{
			height: 10px;
			margin-bottom: 5px;
			.cv-selector{
				position: absolute;
				top:5px;
				left: 5px;
			}
			.cv-sources{
				position: absolute;
				right: 5px;
				top: 5px;
				.pill{
					margin-left: -14px;
				}
			}
		}
		.cv-avatar
		{
			width:53px;
			height:53px;
			border-radius:50%;
			background-size:cover;
			background-position:center;
			background-color:#eee;
			display: flex;
	        align-items: center;
	        justify-content: center;
	        font-size: 12px;
	        font-weight: 500;
	        flex-shrink: 0;
		}
	}

	.cv-body
	{
		width:100%;
		display:flex;
		flex-direction:column;
		gap:8px;
		flex:1;
		padding: 10px;

		.cv-body-line
		{
			display:flex;
			align-items:center;
			gap:8px;
			font-size:12px;

			svg
			{
				width:14px;
				height:14px;
				flex:0 0 14px;
				opacity:.6;
			}

			span
			{
				flex:1;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
			}
		}
	}
	.cv-footer
	{
		width:100%;
		display:flex;
		gap:8px;
		cursor: pointer;
		
		label{
			width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 5px;
            background-color: #eaeaea;
			
			input{
				
			}
		}
	}
}
.tip-box {
	border:1px dashed #ffffff19;;
	background:var(--bgColorG);
	border-radius:18px;
	padding:16px;

	.tip-primary {
		font-size:15px;
		color:var(--textColorL);
		line-height:1.5;
		
		b{
			color: var(--textColor1);
		}
	}

	.tip-highlight {
		font-weight:500;
		color:var(--colorHighlight);
	}

	.tip-secondary {
		margin-top:8px;
		font-size:13px;
		color:var(--textColorLD);
	}
}
.cs-card{
	background:#171717;
	border-radius:18px;
	padding:20px;
	display:flex;
	flex-direction:column;
	box-shadow:0 4px 12px rgba(0,0,0,0.25);
	transition:transform .2s, box-shadow .2s;

	&:hover{
		transform:translateY(-2px);
		box-shadow:0 8px 20px rgba(0,0,0,0.35);
	}

	& .cs-title{
		font-size:18px;
		font-weight:500;
		letter-spacing:-0.02em;
		color:#e7e7e7;
		margin-bottom:8px;
	}

	& .cs-desc{
		font-size:13px;
		color:#9ca3af;
		margin-bottom:8px;
	}

	& .cs-action{
		margin-top:12px;
		background:none;
		border:none;
		padding:0;
		font-size:15px;
		color:#fbbf24;
		cursor:pointer;
		text-align:left;
		color: var(--colorHighlight);
	}

	& .cs-action:hover{
		text-decoration:underline;
		text-underline-offset:3px;
	}
}
.waver {
	display:flex;
	flex-direction:column;
	gap:12px;

	.waver-head {
		    display: flex;
            flex-wrap: wrap;
            gap: 8px;
	}

	.waver-tab {
		padding:6px 12px;
		font-size:12px;
		border-radius:999px;
		background:rgb(51,51,51);
		color:var(--textColor3);
		cursor:pointer;
		transition:.2s;
		font-weight: 600;

		&:hover {
			background:var(--colorHighlightDark);
		}

		&.waver-tab-current {
			background:var(--colorHighlightDark);
			color:var(--colorHighlight);
		}
	}

	.waver-body {
		display:flex;
		flex-wrap:wrap;
		gap:8px;
	}

	.waver-element {
		padding:6px 12px;
		font-size:12px;
		border-radius:999px;
		background:rgb(51,51,51);
		color:var(--textColor3);
		cursor:pointer;
		transition:.2s;
		font-weight: 600;

		&:hover {
			background:var(--colorHighlightDark);
		}

		&.active {
			background:var(--colorHighlightDark);
			color:var(--colorHighlight);
		}
	}
}

.form {
	display:flex;
	justify-content:center;
	.step-ladder{
		float: right;
		font-size:12px;
		color:var(--textColorLD);
	}
	.form-inner {
		width:100%;
		max-width:600px;
		padding:30px;

		.form-eyebrow {
			font-size:11px;
			letter-spacing:.06em;
			text-transform:uppercase;
			color:var(--textColorL);
			margin-bottom: 30px;
			margin-top: 30px;
		}

		.form-title {
			font-size:30px;
			margin-bottom:15px;
			color: var(--textColor1);
		}

		.form-sub,.subtext {
			margin-top:8px;
			font-size:13px;
			color:var(--textColorL);
			margin-bottom: 15px;
		}
		.subsubtext{
			color:var(--textColorLD);
			font-size:13px;
			line-height: 150%;
			
			p{
				margin-bottom: 5px;
			}
		}

		.form-body {
			margin-top:32px;
			display:flex;
			flex-direction:column;
			gap:16px;
		}
		.hightext{
			margin-bottom: 10px;
		}
		

		.form-avatar {
			display:flex;
			flex-direction:column;
			align-items:center;
			margin-bottom:8px;

			.avatar-upload {
				width:80px;
				height:80px;
				border-radius:999px;
				display:flex;
				align-items:center;
				justify-content:center;
				border:1px dashed #ffffff19;
				cursor:pointer;
				color:var(--textColorL);
				overflow:hidden;
			}
		}

		.form-group {
			display:flex;
			flex-direction:column;

			label {
				font-size:13px;
				margin-bottom:7px;
				font-weight:500;
			}
		}

		.form-meta {
			margin-top:6px;
			font-size:13px;
			color:var(--textColorLD);
		}

		.form-divider {
			border-top:1px solid hsl(var(--border-default) / 0.5);
			margin-top:8px;
			padding-top:16px;
		}

		.form-section {
			font-size:15px;
			margin-bottom:12px;
		}

		.tip-box {
			margin-top:16px;
		}

		.form-submit {
			border-radius: 980px;
		    width: 100%;
		    height: 44px;
		    padding: 0 20px;
		    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
		    font-size: 15px;
		    font-weight: 500;
		    transition: opacity .2s;
		}

		.form-footer {
			margin-top:12px;
			text-align:center;
			font-size:13px;
			color:var(--textColorL);
		}
		li{
			margin-bottom: 7px;
		}
		h3{
			margin-bottom: 10px;
		}
	}
}
.input-file {
	min-height: 56px;
	border: 1px dashed #ffffff19;
	cursor: pointer;
	border-radius: 18px;
	justify-content: center;
	align-items: center;
	padding: 16px;
	transition: all .2s;
	display: flex;
	font-size: 12px;
	color: var(--textColorLD);
	text-align: center;

	&.drag {
		border-color: var(--accent);
		background: rgba(255,255,255,0.03);
	}
	&.uploaded{
		color:var(--colorHighlight);
		color: #25da67;
	}
	
	.if-loader {
		width: 14px;
		height: 14px;
		border: 2px solid rgba(255,255,255,0.2);
		border-top-color: var(--accent);
		border-radius: 50%;
		animation: if-spin 0.6s linear infinite;
		display: inline-block;
		margin-right: 6px;
	}
}

@keyframes if-spin {
	to { transform: rotate(360deg); }
}
.href{
	text-decoration: none;
	color: var(--textColorL);
	font-size: 13px;
}
.href.high{
	color: var(--colorHighlight);
}
.onboarding-progress{
	.progress-tag {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 0;
		border-bottom: 2px solid #ffffff19;

		.pt-label {
			font-size: 12px;
			color: hsl(var(--text-secondary));
			display: flex;
			align-items: center;
			gap: 6px;

			.pt-source {}

			.pt-sep {
				opacity: 0.6;
			}

			.pt-meta {}
		}

		.pt-status {
			width: 16px;
			height: 16px;
			position: relative;

			&.success {
				&::after {
					content: '✓';
					color: hsl(var(--green));
					font-size: 14px;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}
	}
}
.notify-card {
	padding: 16px;
	border-radius: 12px;
	border: 1px solid #ffffff19;;
	background: var(--bgColorG);

	.nc-head {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 12px;

		.nc-icon {
			width: 36px;
			height: 36px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8px;
			background: hsl(var(--accent-blue) / 0.1);

			svg {
				width: 18px;
				height: 18px;
				stroke: hsl(var(--accent-blue));
				fill: none;
				stroke-width: 1.5;
				stroke-linecap: round;
				stroke-linejoin: round;
			}
		}

		.nc-text {
			.nc-title {
				font-size: 14px;
				font-weight: 500;
			}

			.nc-sub {
				font-size: 12px;
				
				color: var(--textColorLD);
			}
		}
	}

	.nc-desc {
		font-size: 14px;
		color: var(--textColorL);
	}

	.nc-btn {
		width: 100%;
		margin-top: 16px;
		padding: 10px;
		border-radius: 10px;
		font-size: 14px;
		cursor: pointer;

		&.nc-primary {
			border-radius: 980px;
            width: 100%;
            height: 44px;
		}
	}
}
.events-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;

	.event-card {
		background: var(--bgColorG);
		border: 1px solid #ffffff19;
		border-radius: 10px;
		padding: 10px 12px;
		display: flex;
		flex-direction: column;
		gap: 6px;
		width: calc(33.333% - 8px);

		.t-title {
			display: flex;
			gap: 6px;
			font-size: 15px;
			font-weight: 600;
			color: var(--textColor2);
			align-items: center;
		}

		.t-meta {
			display: flex;
			gap: 10px;
			color: var(--colorHighlight);
			.t-item {
				display: flex;
				gap: 4px;
				font-size: 12px;
				align-items: center;
			}
		}

		.t-desc {
			font-size: 11px;
			color: var(--textColorL);
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			line-height: 1.3;
		}

		.t-people {
			font-size: 11px;
			color: var(--textColorL);
			display: flex;
			gap: 4px;
			flex-wrap: wrap;
		}

		.t-actions {
			margin-top: auto;
			}
		}
	}
}

@media (max-width: 768px) {
	.events-list {
		.event-card {
			width: 100%;
		}
	}
}
.group_list{
	display:flex;
	flex-direction:column;
	gap:8px;
}

.g{
	display:flex;
	align-items:center;
	gap:10px;
	padding:10px 12px;
	border:1px solid #fffff19;
	border-radius:10px;
	background:#333;
	font-size:13px;
	color:var(--colorHighlight);
}

.g i{
	font-size:14px;
}

.g span{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.ui-accordion{}

.ui-accordion .ua-body{display:flex;flex-direction:column;gap:6px}

.ui-accordion .ua-item{}
.ui-accordion .ua-list{display:flex;flex-direction:column;gap:6px}
.ui-accordion .ua-toggle{
	text-align:center;
	font-size:12px;
	color:#666;
	cursor:pointer;
	padding:6px;
	display:none;
}
.ui-mail{
	padding:8px 10px;
	display:flex;
	flex-direction:column;
	gap:6px;

	.um-top{
		display:flex;
		justify-content:space-between;
		gap:8px;

		.um-main{
			display:flex;
			flex-direction:column;
			gap:2px;
			min-width:0;

			.um-subject{
				font-size:13px;
				font-weight:600;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
			}

			.um-from{
				font-size:12px;
				opacity:.7;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
			}
		}

		.um-date{
			font-size:11px;
			opacity:.6;
			white-space:nowrap;
		}
	}

	.um-bottom{
		display:flex;
		justify-content:space-between;
		align-items:center;
		gap:8px;

		.um-people{
			display:flex;
			gap:6px;
			flex-wrap:wrap;
			max-width:80%;

			span{
				font-size:11px;
				padding:2px 6px;
				border-radius:999px;
				opacity:.75;
			}
		}

		.um-open{
			font-size:12px;
			padding:4px 8px;
			border-radius:6px;
			cursor:pointer;
			opacity:.8;

			&:hover{
				opacity:1;
			}
		}
	}
}
.icp {
	border-radius: 12px;
	padding: 16px;
	border: 1px solid var(--colorHighlightDark);
	display: flex;
	flex-direction: column;
	background-color: var(--bgColorG);
	gap: 10px;
	.icp-main{
		float: right;
        margin-left: auto;
        font-size: 10px;
        margin-top: -7px;
        margin-right: -7px;
        background-color: var(--colorHighlight);
        color: #333;
        padding: 0px 5px;
        border-radius: 6px;
        line-height: 16px;
	}
	.icp-row {
		display: flex;
		gap: 10px;
	}

	.icp-avatar {
		width: 53px;
		height: 53px;
		min-width: 53px;
		min-height: 53px;
		flex: 0 0 53px; /* ?? key line */
		border-radius: 50%;
		border: 1px solid;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
	}

	.icp-info {
		display: flex;
		flex-direction: column;
	}

	.icp-name {
		font-size: 14px;
		font-weight: 600;
	}

	.icp-role {
		font-size: 12px;
		color:var(--textColorL);
	}

	.icp-meta {
		font-size: 10px;
		color:var(--textColorLD);
	}

	.icp-box {
		border-radius: 8px;
		padding: 8px;
		border:1px solid #ffffff19;
		color: rgb(231 230 228 / 80%);
	}
	
	.icp-box-why{
		border: 1px solid var(--colorHighlightDark);
		background-color:#dfb03a0d;
	}

	.icp-label {
		font-size: 10px;
		font-weight: 600;
		margin-bottom: 4px;
		color: var(--colorHighlight);
		text-transform: uppercase;
	}

	.icp-text {
		font-size: 12px;
	}

	.icp-actions {
		display: flex;
		justify-content: flex-end;
		gap:5px;
	}

	.icp-button {
		padding: 6px 12px;
		border-radius: 999px;
		border: 1px solid;
		font-size: 12px;
		cursor: pointer;
		border: 1px solid var(--colorHighlightDark);
		color: var(--colorHighlight);
		background-color:#dfb03a0d;
		
		svg{
			height: 14px;
			width: 14px;
			margin: 2px;
		}
	}
	.icp-box-common{
		color: #36c936;
	}
	.icp-tags{
		display: flex;
		gap:5px;
		flex-wrap: wrap;
		.kill{
			display: inline-block;
		    vertical-align: middle;
		    font-size: 10px;
		    padding: 3px 6px;
		    border-radius: 999px;
		    margin-right: 6px;
		    cursor: pointer;
		    font-weight: 500;
		    color: #fff;
		    background-color: #333;
		    line-height: 0.8rem;
		}
	}
}
.loader {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	&::after {
		content: '';
		min-width: 30px;
		min-height: 30px;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		border: 3px solid #ffffff20;
		border-top-color: #ffffff;
		animation: spin 0.8s linear infinite;
	}
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.popup{
	text-align: center;
	font-size: 0px;
	z-index: 1001;
	position: fixed;
	left: 0px;
	right: 0px;
	bottom: 0px;
	top: 0px;
	display: none;
}
.popup .popup-col{
	width: 10px;
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.popup .popup-col.popup-col-main{
	height: auto;
	max-height: 100%;
	width: calc(100% - 20px);
	
}
.film_01{
	z-index: 1000;
	background-color: #000000cc;
	position: fixed;
	left: 0px;
	right: 0px;
	bottom: 0px;
	top: 0px;
	opacity: 0.7;
	display: none;
}
.form{
	display: flex;
	flex-direction: column;
	padding: 10px;
	margin: 10px;
	border-radius: 3px;
	align-items: center;
}
.form h2{
	margin: 0px 10px;
	font-weight: 600;
}
.form .form-input{
	margin: 10px;
	margin-top: 0px;
	padding: 10px;
	border-bottom: 1px solid #eaeaea;
}
.form .form-input .title{
	font-weight: 500;
	margin-bottom: 5px;
}
.form .form-input .notice{
	font-size: 12px;
}
.form .form-foot{
	text-align: right;
}
range{
	display: block;
    position: relative;
    width: 100%;
    height: 20px;
    background-color: #eaeaea;
    border-radius: 10px;
    margin-bottom: 5px;
}

range input[type="range"]{
	position: absolute;
	width: 100%;
	pointer-events: none;
	appearance: none;
	height: 6px;
	background: transparent;
	outline: none;
}
range input[type="range"][left]{
	margin-left: -3px;
}
range input[type="range"]::-webkit-slider-thumb {
	pointer-events: all;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #007bff;
	cursor: pointer;
	appearance: none;
	margin-top: 10px;
}

range track{
	display: block;
	position: absolute;
	height: 6px;
	border-radius: 3px;
	background: #4f004f;
	top: 50%;
	transform: translateY(-50%);
}
user{
	display:flex;
	flex-wrap: nowrap;
}
user input{
	display: inline-flex;
}
user input::-webkit-outer-spin-button,
user input::-webkit-inner-spin-button{
	display: none;
}
user input[user-cc]
{
	width: 30px !important;
}
form{
	font-size: 0px;
}

.input .input-element-holder input:checked{
	opacity:1;
}
.input .input-element-holder input:after{
	transition:all ease-in 0.2s;
	content: '';
	display: inline-block;
	width: 15px;
	height: 15px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background-color: var(--base1);
	margin-top: 1px;
	margin-left: 1px;
	transform: translateX(0px);	
}
.input .input-element-holder input:checked:after{
	background-color: var(--base2);
	transform: translateX(12px);	
}
.input .input-element-holder .input-media{
	background-color: var(--icon);
	border:0px;
	outline:0px;
	font-size: var(--fontSizeS);
	display: block;
	border-radius: 3px;
	width: 100%;
	max-width: 100%;
	box-shadow:0px 0px 2px 0px var(--base2) inset;
	cursor: pointer;
	padding-top: 100%;
	background-image: url('/include/images/media-image.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 50px;
}
.input .input-element-holder .input-media.input-media-active{
	background-size: contain;
}
.input .input-element-holder .input-media span{
	position: absolute;
	top: 5px;
	left: 5px;
	width: 15px;
	height: 15px;
	background: radial-gradient(#ff9e9f, #ff1b0b);
	mask-image: url('/media/hc/modal_close.png');
	mask-size: 100%;
	mask-position: center;	
}
.input .input-element-holder .input-media figcaption{
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	padding: 5px;
	background: linear-gradient(to bottom, #00000000 0%, #00000099 30%, #000000CC 100%);
	color:#fff;
}
.input .input-element-holder input[type=file]
{
	height: 0px;
	padding: 0px;
	width: 0px;
	margin: 0px;
	outline: none;
	border:none;
	font-size: 0px;
	opacity: 0;
}
.input .input-error{
	padding: 3px 5px;
	font-size: 13px;
	color:var(--red);
}
.modal{
	background-color: var(--bgColorG);
	box-shadow:0px 0px 2px 2px #000000;
	border-radius:10px;
	font-size: var(--fontSizeR);
	overflow: hidden;
	text-align: left;
	margin: 0px auto;
	display: flex;
	flex-direction: column;
}
	.modal.modal-alert{
		max-width: 400px;
	}
	.modal.modal-edit{
		width: calc(100% - 40px);
		max-width: 600px;
		overflow: visible;
	}
	
.modal .modal-head{
	background-color: #000;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.modal .modal-head .modal-head-icon{
	display: inline-block;
	height: 10px;
	width: 10px;
	margin:10px;
	background-color: var(--colorHighlight);
	/*mask-size:75%;
	mask-position:center;
	mask-repeat:no-repeat;*/
	border-radius:50%;
	mask-image:none !important;
}
	.modal.modal-edit .modal-head .modal-head-icon{
		mask-image:url('/media/hc/modal_icon_edit.png');
	}
	.modal.modal-alert .modal-head .modal-head-icon{
		mask-image:url('/media/hc/modal_icon_edit.png');
	}
	.modal.modal-info .modal-head .modal-head-icon{
		mask-image:url('/media/hc/modal_icon_edit.png');
	}
.modal .modal-head .modal-head-title{
	height: 30px;
	color:var(--colorHighlight);
	flex: 1;
	line-height: 30px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: 5px;
	font-weight: 500;
	font-size: 12px;
}
.modal .modal-head .modal-head-close{
	height: 30px;
	width: 30px;
	color: #ffffff22;
	cursor: pointer;
	line-height: 30px;
    text-align: center;
    font-size: 17px;
}


.modal .modal-body-text{
	padding:10px;
	display:none;
	font-size:14px;	
}
.modal .modal-body-form{
	padding:10px;
	max-height: calc(100vh - 180px);
	flex: 1;
	padding-bottom: 20px;
	display: none;
	overflow-x: visible;
	overflow-y: scroll;
}

.modal .modal-body-buttons{
	text-align: right;
	padding: 10px;
	white-space: nowrap;
	display: none;
}
.modal .modal-foot{
	text-align: right;
	padding: 10px 5px;
	display: none;
}
.modal button{
	display: inline-block;
	padding: 5px 7px;
	border-radius: 3px;
	margin-right: 5px;
	border: 0px;
	outline: none;
	cursor: pointer;
	line-height: 0px;
}
.modal button:active{
	transform: translate(1px,1px);
}
.modal button.button-positive{
	background-color:var(--colorHighlight);
	color:#000;	
}
.modal button.button-cancel{
	background-color:#ff0000;
	color:#fff;	
}
.modal button.button-agree{
	background-color:#00FF00;
	color:#fff;	
}

.footer{
	background:#0b0b0c;
	border-top:1px solid #1a1b1f;
	padding:16px;
	padding-top: 25px;
	margin-top: 20px;

	display:flex;
	flex-direction:column;
	align-items:center;
	gap:8px;
	
	.links{
		width:100%;
		max-width:600px;

		display:grid;
		grid-template-columns:repeat(4,1fr);
		gap:8px;

		text-align:center;

		a{
			font-size:11px;
			color:#8a8f98;
			text-decoration:none;
		}

		a:hover{
			color:#ffffff;
		}
	}

	.email{
		a{
			font-size:11px;
			color:var(--colorHighlight);
			text-decoration:none;
		}
	}

	.copy{
		font-size:10px;
		color:#666;
	}
}



/* 2 links per row */
@media(max-width:500px){
	.footer{
		.links{
			grid-template-columns:repeat(2,1fr);
		}
	}
}
.alert{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:12px;
	padding:12px 16px;
	border:1px solid var(--colorHighlightDark);
	border-radius:12px;
	margin-bottom: 20px;
	padding: 15px;
	
	.left{
		min-width:0;
		font-size: 14px;
		flex:1;
		
		span{
			font-weight:600;
			color:var(--colorHighlight);	
		}
	}
	svg{
		color: var(--colorHighlight);
	}
	button{
		padding:6px 12px;
		font-size:12px;
		min-width: 120px;
		text-transform: uppercase;
	}
}