.wrapper
{
	background-color: white;
	display: flex;
	overflow-x: hidden;
	position: relative;
	/* width: 100% !important; */
	/* padding: 35px; */
}

.wrapper .icon
{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: linear-gradient(90deg, white 70%, transparent);
	height: 100%;
	width: 100px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.wrapper .icon i
{
	height: 50px;
	width: 50px;
	background-color: wheat;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: 0.5s;
}

.wrapper .icon i:hover
{
	background-color: yellowgreen;
}

.wrapper .icon:first-child
{
	left: 0%;
	display: none;
}

.wrapper .icon:first-child i
{
	margin-left: 15px;
}

.wrapper .icon:last-child
{
	right: 0%;
	justify-content: flex-end;
}

.wrapper .icon:last-child i
{
	margin-right: 15px;
}

.wrapper .tab-box
{
	display: flex;
	list-style: none;
	/* gap: 12px; */
	overflow-x: hidden;
	scroll-behavior: smooth;
}

.wrapper .tab-box .tab
{
	/* background-color: wheat;
	padding: 13px 25px; */
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	cursor: pointer;
	user-select: none;
}

.wrapper .tab-box.dragging li
{
	pointer-events: none;
}

.wrapper .tab-box.dragging li
{
	user-select: none;
}

.wrapper .tab-box.dragging
{
	scroll-behavior: auto;
	cursor: grab;
}

/* .wrapper .tab-box .tab.active
{
	background-color:yellowgreen;
	color:white;
} */