/* Plugin title font */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
.sc-title-font {
	font-family: 'DM Serif Display', serif;
}
.sc-title,
.sc-subtitle {
	width: max-content;
	margin: 10px auto 20px auto;
}

/* Style the buttons */
.button-secondary.is-destructive, .submitdelete {
	color: var(--vid-destructive);
	border-color: var(--vid-destructive);
}
.button-primary.is-destructive {
	background: var(--vid-destructive);
	border-color: var(--vid-destructive);
}
.button-primary.is-destructive:hover,
.button-primary.is-destructive:active,
.button-primary.is-destructive:focus {
	background: var(--vid-destructive-dark);
	border-color: var(--vid-destructive-dark);
}
.button-primary.is-destructive:focus {
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--vid-destructive-dark);
}
.button-secondary.is-destructive:hover, .submitdelete:hover {
	color: var(--vid-destructive-dark);
	border-color: var(--vid-destructive-dark);
}
.button-primary.wide, .button-secondary.wide {
	min-width: 120px;
	padding-left: 20px; padding-right: 20px;
}
.button-secondary span, .button-primary span {
	vertical-align: text-top;
}

/* Admin containers */
.sc-admin-container {
	display: flex;
	flex-flow: row wrap;
	gap: 10px;
	margin-bottom: 10px;
	padding-right: 20px;
	box-sizing: border-box;
}
.sc-admin-container.column {
	flex-flow: column nowrap;
}
.sc-admin-box {
	display: flex;
	flex-flow: column nowrap;
	background-color: #fff;
	border: 1px solid #c3c4c7;
	margin: 0;
	padding: 10px;
	box-sizing: border-box;
}
.sc-admin-box.row { flex-flow: row nowrap; }
.sc-admin-box.wide { flex-grow: 1; }

/* Lists ol, ul */
.sc-info-page-metaboxes ul,
.sc-list-wrap ul {
	list-style: initial !important;
}
.sc-info-page-metaboxes ul li,
.sc-list-wrap ul li {
	margin-left: 2em !important;
	padding: 0 !important;
}

/* Accordion */
.sc-accordion {
	display: flex;
	flex-flow: column nowrap;
	gap: 0;
}
.sc-accordion .ui-accordion-header.ui-state-default {
	background-color: var(--vid-light);
	color: var(--vid-text-color);
	font-weight: bold;
	margin-bottom: 0;
	border-radius: 3px;
	padding: 5px;
	cursor: pointer;
	transition: all 300ms ease;
}
.sc-accordion .ui-accordion-header.ui-state-hover {
	background-color: var(--vid-darker);
	color: var(--vid-lighter);
}
.sc-accordion .ui-accordion-header.ui-state-active {
	background-color: var(--vid-text-act);
	color: var(--vid-lighter);
	border-radius: 3px 3px 0 0;
	text-shadow: 1px 1px 4px var(--vid-text-color);
}
.sc-accordion .ui-accordion-content {
	background-color: var(--vid-light);
	border-radius: 0 0 3px 3px;
	padding-left: 5px;
	padding-right: 5px;
}

/* Meta boxes */
.sc-info-page-metaboxes {
	width: 100%;
	padding-right: 20px;
	box-sizing: border-box;
}
.sc-info-page-metaboxes .meta-box-sortables {
	display: grid;
	grid: auto-flow / 1fr 1fr 1fr;
	gap: 10px;
	width: 100%;
	align-items: start;
}

/* Order metabox */
.sc-orderbox-list:not(:last-child) {
	border-bottom: 1px solid #888;
}
.sc-orderbox-list:last-child {
	margin-bottom: 10px;
}
.sc-orderbox-post-unlist {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	padding-bottom: 5px;
	margin-top: 2px;
	width: 1.2em;
	height: 1.2em;
	font-weight: bold;
	background-color: var(--vid-destructive);
	color: var(--vid-lighter);
	border-radius: 50%;
	text-decoration: none;
	transition: all 300ms;
}
.sc-orderbox-post-unlist:hover {
	background-color: var(--vid-lighter);
	color: var(--vid-destructive);
}
.sc-orderbox-post-position {
	display: inline-block;
	font-weight: bold;
	background-color: var(--vid-darker);
	color: var(--vid-lighter);
	border-radius: var(--vid-border-radius);
	padding: 0 3px;
	text-decoration: none;
	transition: all 300ms;
}
.sc-orderbox-post-position:hover {
	background-color: var(--vid-lighter);
	color: var(--vid-darker);
}
#sc-post-association-msg {
	position: fixed;
	bottom: 32px;
	right: 24px;
	z-index: 99999;
}

/* Help button */
.sc-help-btn {
	position: absolute;
	right: 0;
	bottom: 0;
}

.sc-dialog-only {
	display: none;
}
.vid-dialog .sc-dialog-only {
	display: initial;
}

/* Layouts listing */
#sc-layouts-listing-wrapper {
	height: 100%;
	flex-grow: 1;
}
#layouts-list .item-options-inside .sc-label {
	margin-right: 20px;
}
#layouts-list .item-options-inline {
	gap: 20px;
}
#layout-preview {
	position: relative;
	overflow: hidden;
	height: 100vh;
	max-height: 100%;
}
#preview-frame {
	min-height: 400px;
	max-height: 80vh;
}
#add-new-layout-btn {
	display: flex;
	align-items: center;
	height: 48px;
	border-radius: var(--vid-border-radius);
}

/* Resizer */
.sc-resizer {
	width: 16px;
	background: radial-gradient(#ccc 20%, transparent 40%) center / 10px 10px repeat-y;
	cursor: ew-resize;
}
.sc-resizable-parent {
	flex-direction: row;
}
.sc-resizable {
	max-width: 70%;
	min-width: 30%;
	width: 50%;
	position: relative;
}

/* Post order */
#sc-main {
	max-height: calc( 90vh - 200px );
	min-height: 400px;
	overflow: hidden;
}
#sc-order,
#sc-extra {
	overflow-x: hidden;
	overflow-y: scroll;
}
#sc-order .item-options-inline,
#sc-extra .item-options-inline {
	margin-left: auto;
	margin-right: 20px;
}
#filter-switches label {
	vertical-align: top;
}

/* Horizontal line */
hr.sc-admin-hr {
	width: 100%;
	height: 1px;
	margin: 1px;
	background-color: var(--vid-text-disabled);
	border: 0;
}

/* Color picker */
.sc-color-picker:not(.visible) {
	display: none;
}
.sc-color-picker-parent .wp-picker-holder {
	position: absolute;
	z-index: 1000;
	top: 80%;
}
.sc-color-picker-parent .wp-picker-container {
	position: relative;
}
.always-open .wp-picker-input-wrap {
	display: flex;
	gap: 5px;
	border: 1px solid #dcdcde;
	border-top: 0 !important;
	background-color: #fff;
	padding: 0 10px 10px 10px;
	position: relative;
	z-index: 1000;
}
.always-open .iris-picker {
	border-bottom: 0;
}
.always-open .button.button-small {
	margin-left: 0 !important;
}
.button.dashicons-before::before,
.button-secondary.dashicons-before::before,
.button-primary.dashicons-before::before,
button.dashicons-before::before {
	vertical-align: middle;
}

/* Common */
.sc-label.hidden {
	display: none;
}
.sc-flex-row {
	display: flex;
	flex-flow: row nowrap;
}
.sc-flex-col {
	display: flex;
	flex-flow: column nowrap;
}
.sc-flex-wrap {
	flex-wrap: wrap;
}
.sc-flex-gap {
	gap: 5px;
}
.sc-flex-gap-plus {
	gap: 10px;
}
.sc-flex-gap-extra {
	gap: 15px;
}
.sc-margins {
	margin: 5px;
}
.sc-margin-top {
	margin-top: 5px;
}
.sc-margin-right {
	margin-right: 5px;
}
.sc-margin-bottom {
	margin-bottom: 5px;
}
.sc-margin-left {
	margin-left: 5px;
}
.sc-margin-auto-h {
	margin-left: auto;
	margin-right: auto;
}
.sc-margin-auto-left {
	margin-left: auto !important;
}
.sc-padding {
	padding: 5px;
}
.sc-padding-plus {
	padding: 10px;
}
.sc-flex-justify-space {
	justify-content: space-between;
}
.sc-flex-justify-evenly {
	justify-content: space-evenly;
}
.sc-flex-justify-center {
	justify-content: center;
}
.sc-flex-justify-start {
	justify-content: start;
}
.sc-flex-justify-end {
	justify-content: end;
}
.sc-flex-align-center {
	align-items: center;
}
.sc-flex-align-start {
	align-items: start;
}
.sc-flex-align-end {
	align-items: end;
}
.sc-width-max-content {
	width: max-content;
}
.sc-height-full {
	height: 100%;
}
.sc-flex-grow {
	flex-grow: 1;
}
.sc-display-none {
	display: none !important;
}
.sc-relative {
	position: relative;
}
.sc-font-size-plus {
	font-size: 1.1em !important;
}
.sc-medium-text {
	font-size: 1.4em !important;
	line-height: 1.4;
}
.sc-bold {
	font-weight: bold;
}
.sc-small-note {
	font-size: 10px;
	font-style: italic;
}

@media all and (max-width: 860px) {
	.sc-resizable {
		max-width: 100%;
		width: 100% !important;
	}
	.sc-resizer { display: none; }
	.sc-resizable-parent {
		flex-flow: column nowrap;
		gap: 20px;
	}
	.sc-admin-container {
		flex-flow: column nowrap !important;
	}
	.sc-info-page-metaboxes .meta-box-sortables {
		grid: auto-flow / 1fr 1fr;
	}
	.sc-margin-auto-left {
		margin-left: 0 !important;
	}
}

@media all and (max-width: 560px) {
	.sc-info-page-metaboxes .meta-box-sortables {
		grid: auto-flow / 1fr;
	}
}