/**
 * http://new-dev.ru/
 * author GoldSoft <newdevexpert@gmail.com>
 * Copyright (c) New-Dev.ru
 */

.watchlist_panel_1 {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px;
	background: radial-gradient(circle at top, #1b1b1b, #0a0a0a);
	border-radius: 10px;
	box-shadow: inset 0 0 40px rgba(0,0,0,.8);
}
.watchlist_panel_1 .watchlist_item {
	position: relative;
	flex: 1 1 120px;
	padding: 8px 10px;
	background: linear-gradient(180deg, #242424, #141414);
	color: #d6d6d6;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .6px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.08);
	transition: 
		color .2s ease,
		background .25s ease,
		box-shadow .25s ease,
		transform .15s ease;
	transform: translateZ(0);
}
.watchlist_panel_1 .watchlist_item::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 18px rgba(255,255,255,.04);
	pointer-events: none;
}
.watchlist_panel_1 .watchlist_item:hover {
	color: #ffffff;
	background: linear-gradient(180deg, #303030, #1b1b1b);
	transform: translateZ(0) translateY(-1px);
	box-shadow:
		0 6px 14px rgba(0,0,0,.6),
		inset 0 0 0 1px rgba(255,255,255,.12);
}
.watchlist_panel_1 .watchlist_item.is-active {
	color: #fff;
	box-shadow:
		0 0 0 1px rgba(255,255,255,.15),
		0 0 25px rgba(0,0,0,.9);
}
.watchlist_item[data-status="watch"].is-active {
	background: linear-gradient(180deg, #1f3a2c, #10251c);
	box-shadow: 0 0 20px rgba(46, 204, 113, .35);
}
.watchlist_item[data-status="done"].is-active {
	background: linear-gradient(180deg, #1e2f3f, #101b26);
	box-shadow: 0 0 20px rgba(52, 152, 219, .35);
}
.watchlist_item[data-status="todo"].is-active {
	background: linear-gradient(180deg, #3a2d14, #241b0c);
	box-shadow: 0 0 20px rgba(241, 196, 15, .35);
}
.watchlist_item[data-status="drop"].is-active {
	background: linear-gradient(180deg, #3a1b1b, #240f0f);
	box-shadow: 0 0 20px rgba(231, 76, 60, .35);
}
.watchlist_item[data-status="regular"].is-active {
	background: linear-gradient(180deg, #2b1f3a, #171024);
	box-shadow: 0 0 20px rgba(155, 89, 182, .35);
}


.watchlist_panel_2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, max-content));
	justify-content: center;
	gap: 6px;
	padding: 6px;
	background: #111;
	border-radius: 6px;
}
.watchlist_panel_2 .watchlist_item {
	padding: 6px 8px;
	background: linear-gradient(180deg, #2e2e2e, #222);
	color: #cfcfcf;
	font-size: 12px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	border-radius: 6px;
	cursor: pointer;
	transition: 
		background .2s ease,
		color .2s ease,
		transform .15s ease;
}
.watchlist_panel_2 .watchlist_item:hover {
	background: linear-gradient(180deg, #3a3a3a, #2a2a2a);
	color: #ffffff;
	transform: translateY(-1px);
}
.watchlist_panel_2 .watchlist_item.is-active {
	background: linear-gradient(180deg, #1e88a8, #146c86);
	color: #fff;
	cursor: default;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}



.watchlist_panel_3 {
	display: flex;
	padding: 4px;
	background: #000;
	flex-wrap: wrap;
}
.watchlist_panel_3 .watchlist_item {
	flex: 1;
	margin: 1px;
	min-width: 100px;
	background: #2b2b2b;
	line-height: 27px;
	color: silver;
	font-size: 12px;
	text-align: center;
	text-decoration: none;
	border-radius: 1px;
	text-shadow: 1px 1px 1px rgba(0,0,0,.3);
	transition: .2s;
}
.watchlist_panel_3 .watchlist_item:hover {
	background: #1a1a1a;
	color: #f3f3f3;
	text-decoration: none;
}
.watchlist_panel_3 .watchlist_item.is-active {
	pointer-events: none;
	background: #00799f;
	color: #fff;
}



/* element separation */
.sepH_a {margin-bottom:5px!important}
.sepH_b {margin-bottom:10px!important}
.sepH_c {margin-bottom:20px!important}

.sepV_a {margin-right:5px!important}
.sepV_b {margin-right:10px!important}
.sepV_c {margin-right:20px!important}