@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto:400,400italic,700&subset=latin,cyrillic);

#podcasts-intro {
	font-size: 22px;
	line-height: 30px;
	margin-top: 10px;
}
#podcasts-intro .feedback { 
	font-size: 16px;
	line-height: 22px;
	font-style: italic;
	opacity: .8;
	margin-top: 7px;
}

#widget-head { 
	display: flex;
	gap: 15px;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 20px;
}
/* #pl-ctrl {} */
#pl-ctrl .ctrl-item {
	display: inline-block;
	margin: 0 3px 3px 0;
	padding: 8px 25px 7px;
	border-radius: 3px;
	background-color: #e0e0e0;
	cursor: pointer;
	font-family: 'Roboto Condensed', 'Roboto', sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: 15px;
	line-height: 15px;
	color: rgba(0,0,0,.8);
}
#pl-ctrl .ctrl-item:hover { 
	color: rgba(0,0,0,.9);
	background-color: #d0d0d0;
}
#pl-ctrl .ctrl-item.active {
	color: white;
	background-color: #06b9b1;
	pointer-events: none;
}

#to-add-podcast {
	display: inline-flex;
	align-items: center;
	font-size: 16px;
	line-height: 16px;
	text-decoration: none;
	color: #606060;
}
#to-add-podcast::before {
	content: "";
	display: inline-block;
	width: 20px; height: 20px;
	min-width: 20px; min-height: 20px;
	border-radius: 30px;
	padding: 5px;
	background-color: white;
	background-image: url(icons/icon_plus-gray.svg);
	box-shadow: 0 0 15px rgba(0,0,0,.2), 0 2px 5px rgba(0,0,0,.3);
	margin-right: 8px;
	transition: box-shadow .5s;
}
#to-add-podcast:hover { color: #202020; }
#to-add-podcast:hover::before { 
	box-shadow: 0 0 30px rgba(3,93,89,.4), 0 3px 10px rgba(3,93,89,.5); 
	background-image: url(icons/icon_plus-green.svg);
}

#pl-list {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
#pl-list .podcast {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	gap: 5px;
	padding: 10px 10px 15px;
	background-color: #fff;
	width: 100%; max-width: 280px;
	border-radius: 5px;
	cursor: default;
}
#pl-list .podcast:hover {
	background-color: #daeceb;
}
#pl-list .podcast .pd-header {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 10px;
}
#pl-list .podcast img.pd-cover {
	width: 100%; max-width: 80px;
}
#pl-list .podcast .pd-name {
	font-size: 18px;
	line-height: 20px;
	font-weight: bold;
	margin-bottom: 7px;
}
#pl-list .podcast .pd-label {
	font-size: 12px;
	line-height: 12px;
	font-style: italic;
	display: inline-block;
	padding: 2px 8px;
	background-color: rgba(0,0,0,.1);
	color: rgba(0,0,0,.4);
	margin-bottom: 10px;
}
#pl-list .podcast .pd-about {
	font-size: 14px;
	line-height: 16px;
	color: #404040;
}
#pl-list .podcast .pd-about ul { padding-bottom: 0; }

#pl-list .podcast .pd-links {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}
#pl-list .podcast .pd-links div {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}
#pl-list .podcast .pd-links .pd-link {
	border-radius: 50px;
	background-color: rgba(0,0,0,.15);
}
#pl-list .podcast .pd-links .pd-link:hover {
	background-color: rgba(0,0,0,.3);
}
#pl-list .podcast .pd-links .pd-link.apple:hover { background-color: #f452ff; }
#pl-list .podcast .pd-links .pd-link.google:hover { background-color: #fab908; }
#pl-list .podcast .pd-links .pd-link.soundcloud:hover { background-color: #f26e23; }
#pl-list .podcast .pd-links .pd-link.spotify:hover { background-color: #1ed760; }
#pl-list .podcast .pd-links .pd-link.tiktok:hover { background-color: #000000; }
#pl-list .podcast .pd-links .pd-link.linkedin:hover { background-color: #0077b7; }
#pl-list .podcast .pd-links .pd-link.facebook:hover { background-color: #1877f2; }
#pl-list .podcast .pd-links .pd-link.twitter:hover { background-color: #1d9bf0; }
#pl-list .podcast .pd-links .pd-link.instagram:hover { background-color: #e22081; }
#pl-list .podcast .pd-links .pd-link.telegram:hover { background-color: #35ace1; }
#pl-list .podcast .pd-links .pd-link.youtube:hover { background-color: #ff0000; }

#pl-list .podcast .pd-links .link-icon {
	width: 20px; height: 20px;
	min-width: 20px; min-height: 20px;
}

@media screen and (max-width: 1410px) {
	#pl-list .podcast { max-width: 250px; }
}
@media screen and (max-width: 1280px) {
	#pl-list .podcast img.pd-cover { max-width: 60px; }
	#pl-list .podcast { max-width: 220px; }
	#pl-list .podcast .pd-links { gap: 2px; }
	#pl-list .podcast .pd-links div { gap: 2px; }
}
@media screen and (max-width: 1150px) {
	#widget-head { flex-direction: column; gap: 7px; }
	#pl-list .podcast { max-width: 300px; }
	#pl-list .podcast img.pd-cover { max-width: 80px; }
}
@media screen and (max-width: 1030px) {
	#pl-list .podcast { max-width: 230px; }
	#pl-list .podcast img.pd-cover { max-width: 60px; }
}
@media screen and (max-width: 560px) {
	#pl-list .podcast { max-width: unset; background-color: #f0f0f0; }
	#pl-list .podcast img.pd-cover { max-width: 80px; }
	#pl-list .podcast .pd-links .link-icon {
		width: 25px; height: 25px;
		min-width: 25px; min-height: 25px;
	}
}