/* GLOBAL ********************************************************************/

.hide {
	display: none;
}

.invis {
	visibility: hidden;
}

.clear {
	clear: both;
}

.pull-left {
	float: left;
}

.pull-right {
	float: right;
}

.no-select {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* MENU ICON ***********************************/

.drop-in-menu-container {
	padding: 10px;
	width: 44px;
	height: 44px;
}

.drop-in-menu-icon {
	width: 24px;
	height: 24px;
	background: #2C2C2C;
	position: relative;
	border-radius: 50%;
}

.drop-in-menu-icon.select {
}

.drop-in-menu-icon::before {
	width: 32px;
	height: 32px;
	background: -webkit-linear-gradient(0deg,transparent 39%,#2C2C2C 39%,#2C2C2C 61%, transparent 61%),-webkit-linear-gradient(60deg,transparent 42%,#2C2C2C 42%,#2C2C2C 58%, transparent 58%),-webkit-linear-gradient(120deg,transparent 42%,#2C2C2C 42%,#2C2C2C 58%, transparent 58%);
	background: -moz-linear-gradient(0deg,transparent 39%,#2C2C2C 39%,#2C2C2C 61%, transparent 61%),-moz-linear-gradient(60deg,transparent 42%,#2C2C2C 42%,#2C2C2C 58%, transparent 58%),-moz-linear-gradient(120deg,transparent 42%,#2C2C2C 42%,#2C2C2C 58%, transparent 58%);
	background: -o-linear-gradient(0deg,transparent 39%,#2C2C2C 39%,#2C2C2C 61%, transparent 61%),-o-linear-gradient(60deg,transparent 42%,#2C2C2C 42%,#2C2C2C 58%, transparent 58%),-o-linear-gradient(120deg,transparent 42%,#2C2C2C 42%,#2C2C2C 58%, transparent 58%);
	background: -ms-linear-gradient(0deg,transparent 39%,#2C2C2C 39%,#2C2C2C 61%, transparent 61%),-ms-linear-gradient(60deg,transparent 42%,#2C2C2C 42%,#2C2C2C 58%, transparent 58%),-ms-linear-gradient(120deg,transparent 42%,#2C2C2C 42%,#2C2C2C 58%, transparent 58%);
	background: linear-gradient(0deg,transparent 39%,#2C2C2C 39%,#2C2C2C 61%, transparent 61%),linear-gradient(60deg,transparent 42%,#2C2C2C 42%,#2C2C2C 58%, transparent 58%),linear-gradient(120deg,transparent 42%,#2C2C2C 42%,#2C2C2C 58%, transparent 58%);
	position: absolute;
	content: '';
	top: -4px;
	left: -4px;
	border-radius: 50%;
}

.drop-in-menu-icon::after {
	width: 12px;
	height: 12px;
	background: #ffffff;
	position: absolute;
	content: '';
	top: 6px;
	left: 6px;
	border-radius: 50%;
}

.drop-in-menu-icon:hover::after {
	box-shadow: inset 0 0 0 1px #ddd, inset 0 0 0 2px #390;
}

.drop-in-menu-icon.select::after {
	background: rgba(0, 144, 224, 1);
	box-shadow: inset 0 0 0 1px #ddd, inset 0 0 0 2px #390;
}

.drop-in-menu-icon.dragging {
	background: #c00000;
}

.drop-in-menu-icon.dragging:hover::after {
	box-shadow: inset 0 0 0 1px #ff0000, inset 0 0 0 2px #a00000;
}

.drop-in-menu-icon.dragging::after {
	background: #ffa0a0;
}

/* MENU ****************************************/

.drop-in-submenu {
	position: absolute;
	z-index: 9876543;
}

.drop-in-menu {
	background-color: rgba(255, 255, 255, 1);
	border: 1px solid rgba(0, 144, 224, 0.9);
	box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);
	color: rgba(0, 144, 224, 0.9);
	position: absolute;
	z-index: 987654;
}

.drop-in-menu-title {
	background-color: rgba(0, 0, 0, 0.05);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	text-align: center;
}

.drop-in-menu-menu,
.drop-in-menu-items {
}

.drop-in-menu-item {
	white-space: nowrap;
	width: 100%;
	cursor: pointer;
	display: inline-block;
	text-align: center;
}

.touch .drop-in-menu-item {
	padding: 3px 0 3px 0;
	margin: 4px 0 4px 0;
}

.drop-in-menu-item.selected {
	color: rgba(0, 0, 0, 0.9);
	background-color: rgba(255, 255, 0, 1);
}

.drop-in-menu-item.selected:hover {
	background-color: rgba(255, 230, 0, 1);
	color: rgba(0, 0, 0, 0.9);
}

.drop-in-menu-item.followed {
	background-color: #ffcc00;
	color: #000000;
}

.drop-in-menu-item:hover {
	background-color: #ffaa00;
	color: rgba(0, 0, 0, 0.9);
}

.drop-in-menu-item-label {
	white-space: nowrap;
	padding: 3px 20px 3px 0px;
	margin: 0 20px 0 10px;
	display: inline-block;
}

.drop-in-menu-item-label sup {
	color: #0040a0;
	font-size: 9pt;
}

.drop-in-menu-items {
	white-space: nowrap;
	padding: 3px 10px 3px 10px;
	cursor: pointer;
}

/*
.drop-in-menu-items:hover {
	background-color: #ffaa00;
	color: #000000;
}
*/

.drop-in-menu-item-arrow {
	width: 0;
	height: 0;
	border-style: solid;
	display: inline-block;
}

.drop-in-menu-item-arrow-left {
	border-width: 8px 10px 8px 0;
	margin: 4px 5px 0 0;
	border-color: transparent rgba(0, 144, 224, 0.6) transparent transparent;
}

.drop-in-menu-item-arrow-right {
	border-width: 8px 0 8px 10px;
	margin: 4px 5px 0 0;
	border-color: transparent transparent transparent rgba(0, 144, 224, 0.6);
}

.menu-label {
	display: inline-block;
}






.bitrate {
	display: inline-block;
	text-align: right;
	width: 50px;
}



/* tooltips */

.drop-in-menu-tooltip {
	position: absolute;
	z-index: 9999999;
}

.drop-in-menu-tooltip-body {
	background-color: #1f1f1f;
	padding: 5px 10px 5px 10px;
}

.drop-in-menu-text-tooltip {
	color: #e3e3e3;
	font-size: 11pt;
	white-space: nowrap;
}

.drop-in-menu-tooltip-arrow {
	margin: 0 auto;
	width: 0;
	height: 0;
	border: 1px solid transparent;
	border-left-width: 8px;
	border-top-width: 8px;
	border-right-width: 8px;
	border-bottom-width: 0;
	border-top-color: #1f1f1f;
}