.ableplayer-wide {
    width: 75%;
}

.ableplayer-narrow {
    width: 20%;
}

#ableplayer-settings form p {
	display: flex;
	align-items: center;
	column-gap: 10px;
	flex-wrap: wrap;
}

@media (max-width: 782px) {
    .ableplayer-narrow {
        width: 100%;
    }

    .ableplayer-wide {
        width: 100%;
    }
}

.ableplayer-admin .metabox-holder .ableplayer-postbox > h2,
.ableplayer-admin .metabox-holder .postbox > h2 {
	font-size: 14px;
	padding: 8px 12px;
	margin: 0;
	line-height: 1.4;
}

.ableplayer-admin .postbox {
	margin: 10px 10px 0 0
}

.ableplayer-admin .jcd-narrow .postbox {
	margin-right: 0;
	min-width: auto;
}

.ableplayer-admin .postbox .inside {
	overflow: visible !important;
	margin: 0;
}


.wp-admin.no-js .wptab {
	display: none;
}

.ableplayer-tabs .tabs, .mc-tablinks {
	position: relative;
	border-bottom: 1px solid #c3c4c7;
	margin-bottom: 0;
	margin-top: 20px;
}

.ableplayer-tabs.vertical .tabs {
	border-bottom: none;
}

.ableplayer-tabs .tabs button, .mc-tablinks a {
	display: inline-block;
	padding: 6px 12px;
	font-size: 14px;
	border-radius: 4px 4px 0 0;
	border: 1px solid #c3c4c7;
	background: #f6f7f7;
	position: relative;
	border-bottom: 2px solid transparent;
}

.ableplayer-tabs .tabs button[aria-selected=true]:after,
.mc-tablinks a[aria-current=page]:after {
	content: '';
	position: absolute;
	left: calc( 50% - 10px );
	top: calc( 100% + 1px );
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #fff;
	clear: both;
}

.ableplayer-tabs .tabs button[aria-selected=true]:before,
.mc-tablinks a[aria-current=page]:before {
	content: '';
	position: absolute;
	left: calc( 50% - 10px );
	top: calc( 100% + 2px );
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #c3c4c7;
	clear: both;
}

@media screen and ( width >= 481px ) {
	.ableplayer-tabs.vertical .tabs button[aria-selected=true]:after,
	.ableplayer-tabs.vertical .tabs button[aria-selected=true]:before {
		left: 100%;
		top: 50%;
		border-left: 10px solid #fff;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		margin-top: -10px;
	}

	.ableplayer-tabs.vertical .tabs button[aria-selected=true]:before {
		left: calc( 100% + 1px );
		top: 50%;
		border-left: 10px solid #a2a4a7;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
	}
}


.ableplayer-tabs .tabs button:hover,
.ableplayer-tabs .tabs button:focus,
.mc-tablinks a:hover,
.mc-tablinks a:focus {
	border-bottom: 2px solid #000;
}

.ableplayer-tabs .tabs button[aria-selected=true],
.mc-tablinks a[aria-current=page] {
	background: #fff;
}

.ableplayer-tabs.vertical {
	display: grid;
	grid-template-columns: 12em 1fr;
}

.ableplayer-tabs.vertical .tabs {
	margin-top: 0;
}

.ableplayer-tabs.vertical .tabs button {
	display: block;
	border: 1px solid #c3c4c7;
	border-right: none;
	border-bottom: none;
	border-radius: 0;
	width: 100%;
	text-align: left;
}

.ableplayer-tabs.vertical .tabs button:last-of-type {
	border-bottom: 1px solid #c3c4c7;
}

.ableplayer-tabs.vertical .wptab {
	border-left: 1px solid #c3c4c7;
	padding: 10px;
}

.ableplayer-tabs .label-number,
.ableplayer-tabs .label-select,
.ableplayer-tabs .label-text {
	display: block;
}

#ableplayer-generator .shortcode-preview {
	display: grid;
	grid-template-columns: 1fr auto auto;
	column-gap: 10px;
	align-items: center;
}

@media screen and ( width <= 481px ) {
	#ableplayer-generator .shortcode-preview {
		grid-template-columns: 1fr;
	}
}

.ableplayer-text-input label {
	flex-basis: 100%;
}

.ableplayer-input-description {
	display: inline-flex;
	align-items: center;
	border-left: 4px solid #72aee6;
	padding: 4px;
	position: relative;
	color: #646970;
}

.ableplayer-copy-button {
	display: flex;
	align-items: center;
	column-gap: 10px;
}

.ableplayer-notice-copied {
	display: none;
	background: #f5e6ab;
	color: #000;
	padding: 6px;
	border-radius: 3px;
	position: absolute;
	top: 2rem;
}

.ableplayer-notice-copied.visible {
	display: block;
}

.ableplayer-generator-inputs {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	column-gap: 20px;
}

@media screen and ( width < 1200px ) {
	.ableplayer-generator-inputs {
		grid-template-columns: 1fr;
	}
}

.ableplayer-generator-inputs input[type=url],
.ableplayer-generator-inputs input[type=text],
.ableplayer-generator-inputs select,
.ableplayer-generator-inputs textarea {
	width: 100%;
}

.ableplayer-generator-inputs li label {
	display: inline-block;
}

.ableplayer-tracks summary,
.ableplayer-media-preview {
	display: flex;
	gap: 20px;
	padding: 1rem;
	border: 1px solid #c5d9ed;
	background: #f0f6fc66;
	margin-bottom: .5rem;
}

.ableplayer-tracks summary {
	display: list-item;
	font-weight: 700;
}

.ableplayer-tracks summary:hover {
	border-color: #0a4b78;
}

.ableplayer-media-preview > div:has(button) {
	display: grid;
	gap: 4px;
	align-items: center;
}

.ableplayer-media-preview button:nth-of-type(1) {
	align-self: end;
}

.ableplayer-media-preview button:nth-of-type(2) {
	align-self: start;
}

.ableplayer-media-preview .ableplayer-track-details,
.ableplayer-media-preview .ableplayer-remove-preview {
	display: none;
}

.ableplayer-media-preview.has-value .ableplayer-track-details,
.ableplayer-media-preview.has-value .ableplayer-remove-preview {
	display: block;
}

@media screen and ( width < 481px ) {
	.ableplayer-tabs.vertical {
		display: flex;
		flex-wrap: wrap;
	}
	.ableplayer-tabs.vertical .tabs {
		display: flex;
		flex-wrap: wrap;
	}
	.ableplayer-tabs.vertical .tabs button {
		border: 1px solid #c3c4c7;
	}
	.ableplayer-tabs.vertical .wptab {
		padding: 0;
		margin-top: 10px;
	}
	.ableplayer-tabs.vertical .tabs button[aria-selected="true"]::before,
	.ableplayer-tabs.vertical .tabs button[aria-selected="true"]::after {
		display: none;
	}
	.ableplayer-tabs.vertical .tabs button[aria-selected="true"] {
		border-bottom: 2px solid black;
	}
}

.ableplayer-admin fieldset .wptab {
	border: 1px solid #c3c4c7;
	border-top: none;
	padding: 1em;
	margin-bottom: 1em;
}

/* some plugins change this, but I need it at WP default. */
.ableplayer-admin .meta-box-sortables {
	min-height: 0
}

.ableplayer-flex {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ableplayer-flex.ableplayer-social {
	justify-content: center;
}

.ableplayer-flex.ableplayer-social {
	margin: 0;
	align-items: center;
}

.ableplayer-flex.ableplayer-social li {
	margin: 0;
}

.ableplayer-flex.ableplayer-social a {
	display: block;
	padding: 3px;
	border-radius: 3px;
}

.ableplayer-flex.ableplayer-social a:hover {
	outline: 2px solid;
}