.data {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}

.encoder .data {
	border-radius: 12px;
}

/* ratio tabs */
.ratio-tabs {
	width: 100%;
	height: 40px;
	display: flex;
	flex-flow: row;
	background-image: linear-gradient(#fff, #eee, #ddd, #ccc);
	border-top-left-radius: 40px;
	border-top-right-radius: 40px;
	white-space: nowrap;
}
.ratio-tab-holder {
	display: flex;
	flex-flow: column;
	flex: 1;
	transition: all .33s;
	pointer-events: none;
}

.ratio-filler { flex: 1; }

.ratio-tab {
	flex: 1;

	text-align: center;
	font-size: 16px;
	color: #444;

	padding: 6px 4px;

	background-image: linear-gradient(#eee, #ddd);

	border: 4px double gray;
	border-bottom: 1px solid gray;

	border-top-left-radius: 16px 40px;
	border-top-right-radius: 16px 40px;

	cursor: pointer;
	pointer-events: auto;

	transition: all .33s;
}

.ratio-selected { flex: 9; }

.ratio-selected .ratio-tab {
	font-size: 18px;
	font-weight: bold;
	color: #000;

	background-image: linear-gradient(#fff, #eee);
}

.ratio-tab:hover {
	background-image: linear-gradient(#f8f8f8, #e8e8e8);
}
.ratio-selected .ratio-tab:hover {
	background-image: linear-gradient(#fff, #fff);
}

.ratio-tab:active {
	background-image: linear-gradient(#ddd, #eee);;
}
.ratio-selected .ratio-tab:active {
	background-image: linear-gradient(#eee, #fff);;
}

.ratio-tab-holder:hover { flex: 1.18; }
.ratio-selected:hover { flex: 9; }
.ratio-selected { transition: all 1s; }

.click-tabs {
	text-align: center;
	font-size: larger;
	transition: transform 0.33s;
	text-wrap: balance;
}
.click-tabs sub {
	font-size: xx-large;
}
.click-tabs b {
	text-decoration: underline;
}