/*
----------------------------------------------------------

                    Popups Backend Styles

----------------------------------------------------------
*/

/*
    Posttypes Table
*/
.greyd_table.posttype_table {
	border: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

#greyd_posttype_settings .inside {
	overflow: auto;
}

.posttype_table.vertical th,
.posttype_table.vertical td {
	vertical-align: top;
	border-bottom: 1px solid var(--wp-admin-color-light);
	padding: 20px;
}

.posttype_table.vertical tr:last-child th,
.posttype_table.vertical tr:last-child td {
	border-bottom: none;
}

@media(min-width:1300px) {
	.posttype_table.vertical th {
		width: 240px;
	}
}

@media(max-width:1299px) {
	.posttype_table.vertical th {
		min-width: 120px;
		width: 30%;
		max-width: 200px;
	}
}

.posttype_table .input_section.flex {
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

.posttype_table .input_section > * {
	position: relative;
	margin-right: 12px;
}

.posttype_table .input_section > *:last-child {
	margin-right: 0;
}

.posttype_table .flex.stretch > * {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.posttype_table .flex.stretch input {
	width: 100%;
}

/* 
    inputs
*/
.posttype_table label {
	display: inline-block;
	margin-bottom: 3px;
}

@media(min-width:1300px) {

	.posttype_table input:not([type="checkbox"]),
	.posttype_table select {
		min-width: 240px;
	}
}

.posttype_table input[type="checkbox"] {
	display: inline-block;
	margin: 0 7px 7px 0;
	vertical-align: text-top;
}

.posttype_table input[type="number"] {
	width: 100px;
}

.posttype_table textarea {
	width: 100%;
	padding: 6px 8px;
}

/*
    Checkboxes
*/
input[type="checkbox"],
input[type="radio"] {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

/*
    Number Inputs
*/
input[type="number"] {
	padding-right: 0px;
}

/* 
    iOS toggle switch
*/
.greyd_switch {
	position: relative;
	margin-bottom: 12px;
}

.greyd_switch label {
	display: flex;
	margin-top: 10px;
}

.greyd_switch label > span {
	position: relative;
	margin-right: 10px;
}

.greyd_switch input {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 0%;
	margin: 0;
	padding: 0;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
}

.greyd_switch input + span {
	display: inline-block;
	padding-left: 55px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	vertical-align: baseline !important;
}

.greyd_switch input + span:before {
	content: "";
	position: absolute;
	display: inline-block;
	width: 40px;
	height: 20px;
	left: 0px;
	border-radius: 20px;
	border: 1px solid #575d65;
	box-shadow: none;
	transition: background 0.2s ease-out;
}

.greyd_switch input + span:after {
	content: "";
	position: absolute;
	display: block;
	width: 14px;
	height: 14px;
	top: 4px;
	left: 4px;
	border-radius: 20px;
	background: #575d65;
	transition: margin-left 0.1s ease-in-out;
}

.greyd_switch input:checked + span:before {
	background-color: #fff;
	transition: background 0.2s ease-in;
}

.greyd_switch input:checked + span:after {
	margin-left: 20px;
	background: #0081b6;
	-webkit-animation: popIn ease-in 0.3s normal;
	animation: popIn ease-in 0.3s normal;
}


/* 
    Pop-ups
*/
.column-greyd_popup_prio {
	user-select: none;
}

.column-greyd_popup_prio .popup_prio {
	display: inline-block;
	text-align: center;
	line-height: 11px;
	height: 14px;
	width: 14px;
	margin: 0px 3px;
	border-radius: 10px;
	cursor: pointer;
	background: #ddd;
}

.column-greyd_popup_prio .popup_prio.off {
	opacity: 0.5;
	cursor: not-allowed;
}

.column-greyd_popup_prio.blocked,
.column-greyd_popup_prio.blocked .popup_prio {
	cursor: wait;
}

body.post-type-greyd_popup #poststuff .postbox#popup_design .inside,
body.post-type-greyd_popup #poststuff .postbox#popup_settings .inside {
	margin: 0;
	padding: 0;
}

#popup_settings .settings_input .line_items {
	display: flex;
}

#popup_settings .settings_input .line_items .input_item {
	width: 100%;
	text-align: center;
	line-height: 27px;
	padding: 0px 15px;
	margin-top: 5px;
	background: #f5f5f5;
	border: 1px solid #ccc;
	cursor: pointer;
	transition: 0.3s;
}

#popup_settings .settings_input .line_items .input_item {
	background: #fff;
}

#popup_settings .settings_input .line_items .input_item:first-child {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	border-right: 0px;
}

#popup_settings .settings_input .line_items .input_item:last-child {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border-left: 0px;
}

#popup_settings .settings_input .line_items .input_item:hover {
	background: #eee;
}

#popup_settings .settings_input .line_items .input_item.active {
	color: #fff;
	border-color: #007cba;
	background: #007cba;
}

#popup_settings .settings_input .line_items .input_item.active[data-index="off"] {
	border-color: #575d65;
	background: #575d65;
}

/* popup settings */
#popup_settings .settings_input {
	width: 100%;
	max-width: 600px;
	margin-bottom: 10px;
	transition: 0.3s;
}

#popup_settings .settings_input #popup_settings .settings_input .settings_options {
	margin-right: 25px;
}

#popup_settings .settings_input_switch {
	display: flex;
	align-items: center;
	min-height: 50px;
	width: 100%;
	/* max-width: 600px; */
	/* margin-top: 10px; */
	background: #f5f5f5;
	border: 1px solid #ddd;
	transition: 0.3s;
	box-sizing: border-box;
}

#popup_settings .settings_input_switch > .head_label {
	flex: 1 120px;
	margin-left: 20px;
	font-weight: 600;
	font-size: 14px;
}

#popup_settings .settings_input_switch > label {
	flex: 1 180px;
	display: flex;
	align-items: center;
	margin: 0px;
}

#popup_settings .settings_input_switch > label input {
	min-width: unset;
	width: 55px;
	margin: 0px 5px;
	padding-right: 0px;
}

#popup_settings .settings_input_switch > label input[type="number"] {
	width: 45px;
}

#popup_settings .settings_input .settings_input_switch > *:not(.settings_options):not(.greyd_switch) {
	transition: opacity 0.2s;
}

#popup_settings .settings_input.inactive .settings_input_switch > *:not(.settings_options):not(.greyd_switch) {
	opacity: 0.5;
}

#popup_settings .settings_input_switch .settings_options {
	margin-right: 20px;
}

#popup_settings .settings_input_switch .info_toggle {
	margin-right: 30px;
	cursor: pointer;
}

#popup_settings .settings_input_switch .greyd_switch {
	height: 40px;
	margin: 0px;
}

#popup_settings .settings_input_options {
	width: 100%;
	/* max-width: 600px; */
	padding: 20px 20px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-top: none;
	box-sizing: border-box;
}

#popup_settings .settings_input_options.inline {
	display: flex;
	align-items: flex-end;
}

#popup_settings .settings_input_options.inline input:not([type="checkbox"]),
#popup_settings .settings_input_options.inline select {
	min-width: unset;
}

#popup_settings .settings_input_options > label {
	display: block;
	margin-left: 20px;
	margin-right: 20px;
}

#popup_settings .settings_input_options .settings_input_option {
	display: flex;
	flex-direction: column;
	width: 100%;
}

#popup_settings .settings_input_options .head_label {
	font-size: 14px;
	margin-bottom: 10px;
}

#popup_settings .settings_input_element {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
}

#popup_settings .settings_input_element select {
	max-width: 150px;
	margin-bottom: 5px;
}

#popup_settings .description_label {
	color: #868A8F;
	font-size: smaller;
	font-weight: normal;
}

#popup_settings .settings_input_options .tagarea {
	line-height: 2;
	min-height: 30px;
	padding: 0px 8px;
	margin-bottom: 15px;
	border-radius: 4px;
	border: 1px solid rgb(126, 137, 147);
	background-color: rgb(255, 255, 255);
	color: rgb(50, 55, 60);
	cursor: text;
	resize: vertical;
	overflow: auto;
}

#popup_settings .settings_input_options .tagarea .tag {
	display: inline-block;
	margin: 7px 5px 0px 0px;
	padding: 2px 8px;
	line-height: normal;
	border-radius: 4px;
	border: 1px solid #868A8F;
	background: #f5f5f5;
	color: #868A8F;
}

#popup_settings .settings_input_options .tagarea .tag .tag_close {
	cursor: pointer;
	padding-left: 5px;
	font-size: 18px;
	height: auto;
}

#popup_settings .settings_input_options .tagarea .tag .tag_close:hover {
	color: #007cba;
}

#popup_settings .settings_input_options .tagarea .tag_input {
	min-width: unset;
	border: 0;
	box-shadow: none;
}

#popup_settings .settings_input_options .tagarea .tag_suggestions {
	display: none;
	position: absolute;
	padding: 5px 15px;
	margin-top: -5px;
	min-width: 150px;
	max-height: 200px;
	overflow: auto;
	border-radius: 4px;
	border: 1px solid #868A8F;
	background: #f5f5f5;
	box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.175);
	z-index: 1000;
}

#popup_settings .settings_input_options .tagarea .tag_suggest {
	display: block;
	line-height: normal;
	padding: 1px 0px;
	color: #868A8F;
}

#popup_settings .settings_input_options .tagarea .tag_suggest.option {
	padding-left: 10px;
	color: inherit;
	cursor: pointer;
}

#popup_settings .settings_input_options .tagarea .tag_suggest.option:hover {
	color: #007cba;
}

/*
    Popups Blockeditor support
*/
body.post-type-greyd_popup.block-editor-page .edit-post-layout__metaboxes {
	background: #F0F0F0;
}

body.post-type-greyd_popup.block-editor-page .edit-post-layout__metaboxes .postbox {
	background: transparent;
}

body.post-type-greyd_popup.block-editor-page .edit-post-layout__metaboxes #poststuff .inside {
	background: #fff;
	border: 1px solid #ddd;
	margin: -1px 0 20px !important;
}

.greyd-styles-panel.popups-panel {
	margin: -16px;
}

/*
    Popup Preview
*/
.popup_wrapper {
	position: relative;
	display: flex;
	height: 70vh;
	max-width: 100%;
	overflow: hidden;
	margin: 0 auto;
	transition: all .2s ease;
}

body > .popup_wrapper {
	height: 100%;
}

.popup_wrapper .popup_website {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.popup_wrapper .popup_website > iframe {
	width: 100%;
	height: 100%;
	filter: var(--popup--more--overlay_effect);
	transform: var(--popup--more--anim_body-transform);
	transform-origin: var(--popup--more--anim_body-origin);
	pointer-events: none;
}

.popup_wrapper .popup_preview {
	position: relative;
	display: flex;
	justify-content: var(--popup--layout--justify);
	align-items: var(--popup--layout--align);
	width: 100%;
	height: 100%;
	/* fake popup margin */
	padding-top: var(--popup--layout--margin-top, 1.5em);
	padding-left: var(--popup--layout--margin-left, 1.5em);
	padding-right: var(--popup--layout--margin-right, 1.5em);
	padding-bottom: var(--popup--layout--margin-bottom, 1.5em);
}

.popup_wrapper .popup_preview.hidden {
	display: none;
}

.popup_wrapper .popup_preview .popup_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--popup--more--overlay);
	height: var(--popup--more--overlay);
	background: var(--popup--more--overlay_color);
	opacity: var(--popup--more--overlay_opacity)
}

.popup_wrapper .popup_preview .is-root-container.wp-block-post-content {
	transition: all .2s ease;
	display: flex;
    flex-direction: column;
    overflow: var(--popup--more--overflow);
	/* display: block; */
	/* overflow: auto; */
	max-height: 100%;
	/* layout */
	/* justify-content: var(--popup--layout--size-align, center); */
	width: var(--popup--layout--size-width, auto);
	/* height: calc(var(--popup--layout--size-height, auto) - var(--popup--layout--margin-top, 1.5em) - var(--popup--layout--margin-bottom, 1.5em)); */
	height: var(--popup--layout--size-height, auto);
	/* max-height: calc(100% - var(--popup--layout--margin-top, 1.5em) - var(--popup--layout--margin-bottom, 1.5em)); */
	padding-top: var(--popup--layout--padding-top, 1em);
	padding-left: var(--popup--layout--padding-left, 1em);
	padding-right: var(--popup--layout--padding-right, 1em);
	padding-bottom: var(--popup--layout--padding-bottom, 1em);
	/* margin-top: var(--popup--layout--margin-top, 1.5em);
    margin-left: var(--popup--layout--margin-left, 1.5em);
    margin-right: var(--popup--layout--margin-right, 1.5em);
    margin-bottom: var(--popup--layout--margin-bottom, 1.5em); */
	margin: 0;
	/* design */
	color: var(--popup--design--colors-text, currentColor) !important;
	background: var(--popup--design--colors-background, var(--wp--preset--color--background, #fff));
	border-top-left-radius: var(--popup--design--border_radius-topLeft, 5px);
	border-top-right-radius: var(--popup--design--border_radius-topRight, 5px);
	border-bottom-left-radius: var(--popup--design--border_radius-bottomLeft, 5px);
	border-bottom-right-radius: var(--popup--design--border_radius-bottomRight, 5px);
	border-top: var(--popup--design--border-top-width, 0) var(--popup--design--border-top-style, solid) var(--popup--design--border-top-color, var(--wp--preset--color--foreground));
	border-right: var(--popup--design--border-right-width, 0) var(--popup--design--border-right-style, solid) var(--popup--design--border-right-color, var(--wp--preset--color--foreground));
	border-bottom: var(--popup--design--border-bottom-width, 0) var(--popup--design--border-bottom-style, solid) var(--popup--design--border-bottom-color, var(--wp--preset--color--foreground));
	border-left: var(--popup--design--border-left-width, 0) var(--popup--design--border-left-style, solid) var(--popup--design--border-left-color, var(--wp--preset--color--foreground));
	box-shadow: var(--popup--design--shadow, none);
}

:where(
	.popup_wrapper .popup_preview .is-root-container.wp-block-post-content h1,
	.popup_wrapper .popup_preview .is-root-container.wp-block-post-content h2,
	.popup_wrapper .popup_preview .is-root-container.wp-block-post-content h3,
	.popup_wrapper .popup_preview .is-root-container.wp-block-post-content h4,
	.popup_wrapper .popup_preview .is-root-container.wp-block-post-content h5,
	.popup_wrapper .popup_preview .is-root-container.wp-block-post-content h6
) {
	color: var(--popup--design--colors-headline);
	transition: color .2s ease;
}

/* mobile */
.has-mobile .popup_wrapper {
	max-width: 780px;
}

.has-mobile .popup_wrapper .popup_preview {
	justify-content: var(--popup--layout--mobile--justify);
	align-items: var(--popup--layout--mobile--align);
	/* fake popup margin */
	padding-top: var(--popup--layout--mobile--margin-top);
	padding-left: var(--popup--layout--mobile--margin-left);
	padding-right: var(--popup--layout--mobile--margin-right);
	padding-bottom: var(--popup--layout--mobile--margin-bottom);
}

.has-mobile .popup_wrapper .popup_preview .is-root-container.wp-block-post-content {
	/* layout */
	justify-content: var(--popup--layout--mobile--size-align);
	width: var(--popup--layout--mobile--size-width);
	height: calc(var(--popup--layout--mobile--size-height) - var(--popup--layout--mobile--margin-top) - var(--popup--layout--mobile--margin-bottom));
	/* max-height: calc(100% - var(--popup--layout--mobile--margin-top) - var(--popup--layout--mobile--margin-bottom)); */
	padding-top: var(--popup--layout--mobile--padding-top);
	padding-left: var(--popup--layout--mobile--padding-left);
	padding-right: var(--popup--layout--mobile--padding-right);
	padding-bottom: var(--popup--layout--mobile--padding-bottom);
	/* margin-top: var(--popup--layout--mobile--margin-top);
    margin-left: var(--popup--layout--mobile--margin-left);
    margin-right: var(--popup--layout--mobile--margin-right);
    margin-bottom: var(--popup--layout--mobile--margin-bottom); */
}

/* hover */
.has-hover .popup_wrapper .popup_preview .is-root-container.wp-block-post-content,
.popup_wrapper .popup_preview .is-root-container.wp-block-post-content:hover {
	/* design */
	color: var(--popup--design--hover--colors-text) !important;
	background: var(--popup--design--hover--colors-background);
	border-top-left-radius: var(--popup--design--hover--border_radius-topLeft);
	border-top-right-radius: var(--popup--design--hover--border_radius-topRight);
	border-bottom-left-radius: var(--popup--design--hover--border_radius-bottomLeft);
	border-bottom-right-radius: var(--popup--design--hover--border_radius-bottomRight);
	border-top: var(--popup--design--hover--border-top-width) var(--popup--design--hover--border-top-style) var(--popup--design--hover--border-top-color);
	border-right: var(--popup--design--hover--border-right-width) var(--popup--design--hover--border-right-style) var(--popup--design--hover--border-right-color);
	border-bottom: var(--popup--design--hover--border-bottom-width) var(--popup--design--hover--border-bottom-style) var(--popup--design--hover--border-bottom-color);
	border-left: var(--popup--design--hover--border-left-width) var(--popup--design--hover--border-left-style) var(--popup--design--hover--border-left-color);
	box-shadow: var(--popup--design--hover--shadow);
}

:where(
	.has-hover .popup_wrapper .popup_preview .is-root-container.wp-block-post-content h1,
	.has-hover .popup_wrapper .popup_preview .is-root-container.wp-block-post-content h2,
	.has-hover .popup_wrapper .popup_preview .is-root-container.wp-block-post-content h3,
	.has-hover .popup_wrapper .popup_preview .is-root-container.wp-block-post-content h4,
	.has-hover .popup_wrapper .popup_preview .is-root-container.wp-block-post-content h5,
	.has-hover .popup_wrapper .popup_preview .is-root-container.wp-block-post-content h6,
	.popup_wrapper .popup_preview .is-root-container.wp-block-post-content:hover h1,
	.popup_wrapper .popup_preview .is-root-container.wp-block-post-content:hover h2,
	.popup_wrapper .popup_preview .is-root-container.wp-block-post-content:hover h3,
	.popup_wrapper .popup_preview .is-root-container.wp-block-post-content:hover h4,
	.popup_wrapper .popup_preview .is-root-container.wp-block-post-content:hover h5,
	.popup_wrapper .popup_preview .is-root-container.wp-block-post-content:hover h6
) {
	color: var(--popup--design--hover--colors-headline);
}

.popup_wrapper .popup_preview .is-root-container.wp-block-post-content > * {
	width: 100%;
	flex-shrink: 0;
}
.popup_wrapper .popup_preview .is-root-container.wp-block-post-content.align-center > :first-child,
.popup_wrapper .popup_preview .is-root-container.wp-block-post-content.align-end > :first-child {
	margin-top: auto !important;
}
.popup_wrapper .popup_preview .is-root-container.wp-block-post-content.align-center > :last-child {
	margin-bottom: auto !important;
}