/** PRESETS ------------------------------------ */
.democracy{
	--dem-graph-bg: transparent;
	--dem-graph-color: rgba(0,0,0,.6);
	--dem-graph-height: 1.2em;
	--dem-fill: #7cb4dd;
	--dem-fill-voted: #FFC45A;

	position:relative; margin:0 auto;

	:where(input[type='radio'], input[type='checkbox']){ margin-right:.2em; }
	ul.dem-vote{
		margin-bottom:1em;
		li{ padding-bottom:0; margin-bottom:0; }
		li > *{ margin-bottom:.6em; } /* for comfort hover */
	}
	ul.dem-answers{
		li{ padding-bottom:1em; }
	}
}

.dem-screen{ position:relative; line-height:1.3; }
.dem-answers{
	.dem-label{ margin-bottom:.2em; line-height:1.2; }
}


/** RESULT SCREEN */
.dem-graph{ position:relative; color:var(--dem-graph-color); box-sizing:content-box; width:100%; display:table; height:var(--dem-graph-height); line-height:var(--dem-graph-height); background:var(--dem-graph-bg); }
.dem-fill{ position:absolute; top:0; left:0; height:100%; background-color:var(--dem-fill); }
.dem-voted-this .dem-fill{ background-color:var(--dem-fill-voted); }

.dem-votes-txt,
.dem-percent-txt{ position:relative; display:table-cell; padding-left:.3em; vertical-align:middle; font-size:90%; }

/* result bottom */
.dem-poll-info{
	padding-bottom:1em;

	&::after{ content:''; display:table; clear:both; }
	> *{ font-size:85%; display:block; float:right; clear:both; text-align:right; opacity:0.7; line-height:1.3; }
}

/** VOTE SCREEN */
.dem-vote{
	label{ float:none; display:block; }
	.dem-disabled{ opacity:.5; }
}
.dem-results-link{ display:inline-block; line-height:1; margin:.8em 1em; }

.dem-bottom{
	text-align:center;

	&[class]{ padding-bottom:1em; } /* increase specific */
	&::after{ content:''; display:table; clear:both; }
}

/** TYPICALLY DON'T CHANGE -- */
.dem-poll-title{ display:block; margin-bottom:1.5em; margin-top:1.2em; font-size:120%; }

.dem-notice{ z-index:10; position:absolute; top:0%; border-radius:2px; width:100%; padding:1.5em 2em; text-align:center; background:rgba(247, 241, 212, 0.8); color:#6D6214; }
.dem-notice-close{
	position:absolute; top:0; right:0; padding:5px; cursor:pointer; line-height:.6; font-size:150%;

	&:hover{ color:#D26616 }
}

.dem-star{ font-size:90%; vertical-align:baseline; padding-left:0.3em; color:#ff4e00; }

.dem-poll-note{ font-size:90%; padding:0.5em; opacity:0.8; line-height:1.3; }

.dem-add-answer{
	position:relative;

	> *{ display:block; }
	a{ display:inline-block; }
}
input.dem-add-answer-txt{ width:100%; box-sizing:border-box; }
.dem-add-answer-close{
	position:absolute; right:0; padding:0 .7em; cursor:pointer; color:#333;

	&:hover{ color:#ff2700; }
}

.dem-edit-link{
	display:block; position:absolute; top:0; right:0; line-height:1; text-decoration:none !important; border:none !important;

	svg{ width:1.2em!important; fill:#6c6c6c; }
	&:hover svg{ fill:#35A91D;  }
}

.dem-loader{
	display:none; position:absolute; top:0; left:0; width:100%; height:100%;

	> *{ display:table-cell; vertical-align:middle; text-align:center; }
	svg{ width:20%; max-width:100px; min-width:80px; margin-bottom:15%; }
	[class^="dem-"]{ margin-bottom:15%; }
}

.dem__collapser{
	display:block; cursor:pointer; text-align:center; font-size:150%; line-height:1;

	&:hover{ color:#FF3311; background:rgba(255, 255, 255, 0.3); }
	&.expanded{ position:relative; height:1em; }
	&.collapsed{ position:absolute; top:0; bottom:0; right:0; left:0; }
	.arr{ display:block; position:absolute; bottom:0; width:100%;  }
	&.collapsed .arr::before{ content:"▾"; }
	&.expanded  .arr::before{ content:"▴"; }
}

/** / TYPICALLY DON'T CHANGE */

/** SHORTCODE */
.dem-poll-shortcode{ margin-bottom:1.5em; }

/** ARCHIVE PAGE */
.dem-archives{
	.dem-elem-wrap{ margin-bottom:2em; padding-bottom:20px; border-bottom:1px dashed rgba(0,0,0,.1); }
	.dem-archive-link{ display:none; }
}

.dem-paging{
	text-align:center; margin:1.5em auto;

	> *{ display:inline-block; padding:.3em .8em; border-radius:.2em;
		background:#e2e2e2; color:#333; text-decoration:none; text-transform:lowercase; user-select:none; }
	> a{ color:#333; }
	> a:hover{ background:#ccc; color:#333; text-decoration:none; }
	.current{ background:#656565; color:#fff; }
	.dots{ background:none; }
}

/**  / PRESETS --------------------------------- */