/*****************
 * ADD/EDIT Poll
 *****************/
.dem-edit-poll{
	padding:2rem;

	input[type="text"],
	textarea { width:80%; min-width:400px; max-width:800px; }

	.dem-edit-poll__question {
		margin-bottom:1rem;
		input { display:block; font-size:120%; }
	}

	.dem-edit-poll__answers{ margin-bottom:1.5em; margin-left:0;
		.dashicons.sorthand { position:absolute; left:-2em; margin-left:0; margin-top:.5em; opacity:.3;
			&:hover{ opacity:.9; }
		}
	}
}

.dem-del-button{ display:inline-block; cursor:pointer; line-height: 1; padding:0 5px; font-size:23px; color:#acacac;
	&:hover{ color:#e34f23; }
}

.poll-options{ margin-top:1.5em; margin-bottom:1.5em; }
.poll-options .poll-options__row {
	line-height: 1;
	display: flex; align-items: center; gap:.3em;
	label { display: flex; align-items: center; gap:.3em; }
	margin: 1.2em 0;
	.dashicons{ font-size:120%; width:1em; height:1em; margin-top:-.3em; margin-right:.4rem; }
	.dashicons:before{ font-size:inherit; opacity:.5; }
}

/* all pages options */

.demoptions {
	.demoptions__group{ position:relative; background: #fff; margin-bottom:2em; padding:1em;
		border: 1px solid #e5e5e5; box-shadow: 0 1px 1px rgba(0,0,0,.04);
		background: #fff;

		.title{ margin:-1em -1em 1em -1em; padding:.7em 1em; border-bottom:1px solid #eee; font-weight:600; font-size:110%; }
	}
	.demoptions__block{ position: relative; margin:1rem 0; }
	.demoptions__block em{ display:block; opacity:0.5; margin-top:.5em; line-height:1.2; }
	.demoptions__block:hover em{ opacity:0.9; }

	h3{ margin:2em 0 1em 0; }

	.loaders, .buttons{ float:left; }
	.loaders {
		.lo_item{ position:relative; display:inline-block; text-align:center; height:75px; }
		.loader{ min-width:30px; margin-bottom:.5em; }
		.lo_item.svg .loader{ width:40px; height:40px; } /* fix bugs in firefox...*/
		.loader{ position:relative; }
		&:after,
		em{ content:''; display: table; clear: both; }
	}

	:is(.loaders, .buttons, .check_radio_wrap, .demoptions__group):after{ content:''; display:table; clear:both; }

	.selectable_els {
		label{ display:inline-block; text-align:center; }
		label > *{ display:inline-block; }
		label{ }
		label input[type="radio"]{ display:none; }
		label input[type="radio"]:checked + .radio_content{ border-bottom:3px solid #000; background:rgba(0,0,0,0.05); }
		label:hover .radio_content{ border-bottom:3px solid rgba(0,0,0,.03); background:rgba(0,0,0,.03); }
		label .radio_content{ padding:1em; border-bottom:3px solid rgba(0,0,0,0); }
	}
}

.polls-preview:after{ content:''; display:table; clear:both; }


.button .dashicons,
.button-primary .dashicons{ line-height: 1.3; opacity: 0.7; }

/* design */

.polls-preview{ position: relative; padding:1em; background: #fff;
	.poll{ float:left; width:20%; min-width:270px; margin-right:3%;
		&:last-child{ margin-right:0; }
		.tit{ text-align: center; opacity:.5; }
	}
	.wp-picker-container{ position: absolute; bottom: 0; right:0; }
}

.dempage-design {
	.wp-picker-container {
		position: relative; margin-top:.15em; margin-bottom:.15em;
		.wp-color-result.button { margin:0; }
	}
	.wp-picker-holder{ position: absolute; z-index: 999; }
}

/* Polls list */

.metabox-prefs .dashicons{ font-size:14px; vertical-align:inherit; }
.tablenav-pages .dashicons{ cursor:pointer; margin:3px 10px 0 0; }
.tablenav-pages .dashicons.active{ color:#0096DD; }
.tablenav{ height: auto; }

/* wp-list-table */
.wp-list-table{
	tr:hover{ background:rgba(0,0,0,.05) }
	.column-id{ width:4em; }
	.column-active,
	.column-open{ width:4.5em; }
	.column-usersvotes{ width:8em; }
	.column-in_posts{ width:20%; }
	.column-added{ width: 110px; }

	.statuses{ margin-left:0.5em; float:right; cursor:help;
		@media( width <= 1300px ){
			width:3.8em;
		}
	}
	.statuses > *{ opacity:.2; margin-right:1px; float:right;
		&:before{ font-size:80%;  }
		&:hover{ opacity:.7; }
	}

	.compact-answ{ height:40px; overflow:hidden; }
	.compact-answ small{ opacity:.7; }

	/* logs */
	.column-ip{ width:9em; }
	.column-ip_info{ width:15%; }
	.column-userid{ max-width:150px; }
	.column-date{ width:7.5em; }
	.column-expire{ width:7.5em; }
}


/* codeMirror */

#wpwrap {
	.CodeMirror{ border:1px solid #e5e6e8; }
	.cm-s-default .cm-qualifier{ color:#e91e63; }
	.cm-s-default .cm-property{ font-weight:bolder; }
}


/** Info sidebar */

.dem-info-wrap{ width: 17%; position: fixed; right: 0; }
.dempage_settings, .dempage-design, .dempage_l10n{ float: left; width: 80%; }
.dem-info-section{ background: white; padding: 1em; }
@media ( max-width: 1400px ){
	.dem-info-wrap{ display: none; }
	.dempage_settings, .dempage-design, .dempage_l10n{ float: none; width: 100%; }
}


/**************
 * datepicker
 **************/

.ui-corner-all { border-radius: 0; }

.ui-datepicker {
	display: none;
	width: 17em;
	padding: .5em;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 0 15px #0004;
	background: white;
	color: #333;
}

/* header */

.ui-datepicker-header {
	position: relative;
	display: flex; align-items: center; justify-content: space-between;
	margin: -.5em -.5em .5em -.5em;
	background: #0001;
	font-weight: bold;
}

.ui-datepicker-title { order: 2;  }

.ui-datepicker-prev,
.ui-datepicker-next {
	position: relative; width: 2.5em; height: 2.5em; cursor: pointer;
	color: inherit;

	&:hover { background: #0001; color: inherit; text-decoration: none; }

	.ui-icon {
		display: block; position: absolute; inset: 0; font-size: 0;
		&::before { font-size: 1.3rem; line-height: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
	}
}

.ui-datepicker-prev {
	order: 1;
	.ui-icon::before { content: "‹"; }
}

.ui-datepicker-next {
	order: 3;
	.ui-icon::before { content: "›"; }
}


/* calendar */

.ui-datepicker-calendar { width: 100%; border-collapse: collapse; }

.ui-datepicker {
	th { padding: .7em .3em; border: 0; font-weight: bold; }
	td {
		padding: 1px; border: 0;
		a, span { display: block; padding: .2em; text-align: center; text-decoration: none;}
	}
}

.ui-state-default { background: #0001; color:inherit; text-align: center;
	&:hover { background: #0003; color: #2b2b2b;  }
}
.ui-state-highlight { background: #0008; color: white; }
.ui-state-active { background: var(--wp-admin-theme-color, orange); color: white; }
.ui-state-disabled { opacity: .3; cursor: default; pointer-events: none; }