.yop-poll[data-template="classic"] {
font-size: 14px;
padding: 20px;
background: #fff;
box-sizing: border-box; color: #1d2327;
} .yop-poll .yop-poll[data-template="classic"] {
background: transparent;
} .yop-poll,
.yop-poll *,
.yop-poll *::before,
.yop-poll *::after {
box-sizing: border-box;
} .yop-poll .yop-poll-ballot,
.yop-poll .yop-poll-answer-row,
.yop-poll .yop-poll-inline-result {
margin: 0;
padding: 0;
} .yop-poll .yop-poll-answers {
margin: 0;
padding: 0;
}
.yop-poll .yop-poll-question {
margin-block-start: 0;
margin-inline: 0;
padding: 0;
} .yop-poll .yop-poll-fieldset {
border: 0;
margin: 0;
padding: 0;
min-inline-size: 0;
}
.yop-poll .yop-poll-fieldset > .yop-poll-question {
display: block;
inline-size: 100%;
}
.yop-poll .yop-poll-element {
margin-inline: 0;
}
.yop-poll .yop-poll-footer {
margin-block-end: 0;
margin-inline: 0;
padding: 0;
}
.yop-poll .yop-poll-message {
margin-block-start: 0;
margin-inline: 0;
}
.yop-poll-question {
font-size: var(--yop-q-ts, 16px);
font-weight: var(--yop-q-tw, 600);
color: var(--yop-q-tc, inherit);
margin-block-end: var(--yop-q-gap, 12px);
text-align: var(--yop-el-ta, center);
} .yop-poll-ballot > .yop-poll-element:first-child,
.yop-poll-ballot > :first-child > .yop-poll-element,
.yop-poll-results > .yop-poll-element:first-child,
.yop-poll-results > :first-child > .yop-poll-element {
padding-top: 0;
} .yop-poll .yop-poll[data-template] {
padding: 0;
container-type: normal;
container-name: none;
} .yop-poll-element {
padding-top: var(--yop-el-pt, 0);
padding-right: var(--yop-el-pr, 0);
padding-bottom: var(--yop-el-pb, 0);
padding-left: var(--yop-el-pl, 0); margin-top: var(--yop-el-mt, 0);
margin-bottom: var(--yop-el-mb, 0);
}
.yop-poll-answers {
display: flex;
flex-direction: column;
gap: var(--yop-ans-gap, 8px);
} .yop-poll .yop-poll-answer {
display: flex;
align-items: center;
gap: var(--yop-ans-mg, 8px);
cursor: pointer;
margin: 0;
padding: var(--yop-ans-pt, 4px) var(--yop-ans-pr, 0) var(--yop-ans-pb, 4px) var(--yop-ans-pl, 0);
font-weight: var(--yop-ans-tw, normal);
line-height: 1.4;
letter-spacing: normal;
text-transform: none;
} .yop-poll .yop-poll-answer input[type="radio"],
.yop-poll .yop-poll-answer input[type="checkbox"],
.yop-poll .yop-poll-gdpr input[type="checkbox"] { -webkit-appearance: none;
-moz-appearance: none;
appearance: none; min-inline-size: 0;
min-block-size: 0;
inline-size: var(--yop-ans-ms, 13px);
block-size: var(--yop-ans-ms, 13px);
margin: 0;
padding: 0;
border: 1.5px solid #9aa2ab; background-color: var(--yop-poll-bg, #fff);
background-image: none;
box-shadow: none;
vertical-align: middle;
flex-shrink: 0; position: relative;
display: inline-flex;
cursor: pointer;
}
.yop-poll .yop-poll-answer input[type="radio"] {
border-radius: 50%;
} .yop-poll.yop-poll input[type="radio"]::after,
.yop-poll.yop-poll input[type="checkbox"]::after {
content: none;
} .yop-poll .yop-poll-answer input[type="checkbox"],
.yop-poll .yop-poll-gdpr input[type="checkbox"] {
border-radius: max(2px, calc(var(--yop-ans-ms, 13px) / 6));
}
.yop-poll .yop-poll-answer input:checked,
.yop-poll .yop-poll-gdpr input[type="checkbox"]:checked {
border-color: var(--yop-ans-acc, #0073aa);
} .yop-poll .yop-poll-answer input[type="radio"]:checked {
--yop-ans-dot: calc(var(--yop-ans-ms, 13px) * 0.23);
background-image: radial-gradient(circle at 50% 50%, var(--yop-ans-acc, #0073aa) var(--yop-ans-dot), var(--yop-poll-bg, #fff) var(--yop-ans-dot)) !important;
} .yop-poll .yop-poll-answer input[type="checkbox"]:checked::before,
.yop-poll .yop-poll-gdpr input[type="checkbox"]:checked::before {
content: "" !important; position: absolute;
top: 50%;
left: 50%;
inline-size: calc(var(--yop-ans-ms, 13px) * 0.28);
block-size: calc(var(--yop-ans-ms, 13px) * 0.55);
border: solid var(--yop-ans-acc, #0073aa);
border-width: 0 2px 2px 0;
transform: translate(-50%, -59%) rotate(45deg);
} @media (forced-colors: active) {
.yop-poll .yop-poll-answer input[type="radio"],
.yop-poll .yop-poll-answer input[type="checkbox"],
.yop-poll .yop-poll-gdpr input[type="checkbox"] {
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
border: 0; background-image: none;
}
.yop-poll .yop-poll-answer input::before,
.yop-poll .yop-poll-gdpr input[type="checkbox"]::before {
content: none;
}
}
.yop-poll-answer-text {
font-size: var(--yop-ans-ts, 14px);
color: var(--yop-ans-tc, inherit);
font-weight: var(--yop-ans-tw, normal);
} .yop-poll .yop-poll-vote-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: var(--yop-btn-pt, 6px) var(--yop-btn-pr, 16px) var(--yop-btn-pb, 6px) var(--yop-btn-pl, 16px);
margin: 0; min-height: 0;
background: var(--yop-btn-bg, #fff);
border-width: var(--yop-btn-bw, 1px);
border-style: var(--yop-btn-bs, solid);
border-color: var(--yop-btn-bc, #999);
border-radius: var(--yop-btn-br, 3px);
box-shadow: none;
color: var(--yop-btn-tc, inherit);
font-size: var(--yop-btn-ts, 14px);
font-weight: var(--yop-btn-tw, normal); line-height: 1.35; letter-spacing: normal;
text-transform: none;
text-decoration: none;
text-align: center;
cursor: pointer;
outline: none;
} .yop-poll .yop-poll-vote-button:hover,
.yop-poll .yop-poll-vote-button:focus,
.yop-poll .yop-poll-vote-button:active {
background: var(--yop-btn-bg, #fff);
border-color: var(--yop-btn-bc, #999);
box-shadow: none;
color: var(--yop-btn-tc, inherit);
text-decoration: none; filter: brightness(0.92);
} .yop-poll .yop-poll-vote-button:focus:not(:hover):not(:active) {
filter: none;
} .yop-poll .yop-poll-btn-prev,
.yop-poll .yop-poll-btn-prev:hover,
.yop-poll .yop-poll-btn-prev:focus,
.yop-poll .yop-poll-btn-prev:active {
background: transparent; border-width: max(1px, var(--yop-btn-bw, 1px));
border-style: solid;
border-color: var(--yop-btn-bc, var(--yop-btn-bg, #999));
color: var(--yop-btn-bc, var(--yop-btn-bg, inherit));
filter: none;
} .yop-poll .yop-poll-vote-button--secondary,
.yop-poll .yop-poll-vote-button--secondary:hover,
.yop-poll .yop-poll-vote-button--secondary:focus,
.yop-poll .yop-poll-vote-button--secondary:active {
border-width: 1px;
border-style: solid;
border-color: var(--yop-btn-bg, #2271b1);
background: transparent;
color: var(--yop-btn-bg, #2271b1);
} .yop-poll .yop-poll-vote-button--secondary:hover,
.yop-poll .yop-poll-vote-button--secondary:active {
background: color-mix(in srgb, var(--yop-btn-bg, #2271b1) 8%, transparent);
filter: none;
} .yop-poll-result-bar {
background: #e0e0e0;
border-radius: 3px;
height: 20px;
margin-block-start: 4px;
overflow: hidden;
} .yop-poll-result-fill {
background: #0073aa;
height: 100%; transform-origin: left center;
} @media (prefers-reduced-motion: no-preference) {
@keyframes yop-poll-fill {
from {
transform: scaleX(0);
}
}
.yop-poll-result-fill {
animation: yop-poll-fill 0.6s ease-out;
}
}
.yop-poll-result-text {
font-size: 13px;
color: var(--yop-ans-tc, inherit);
display: flex;
justify-content: space-between;
gap: 0.5em;
margin-block-start: 4px;
} .yop-poll-answers--horizontal {
flex-direction: row;
flex-wrap: wrap;
} .yop-poll .yop-poll-field-error {
margin: 6px 0 0;
color: #b32d2e;
font-size: 0.875em;
font-weight: 600;
line-height: 1.4;
}
.yop-poll .yop-poll-field-error::before {
content: "! ";
}
.yop-poll .yop-poll-element--invalid {
border-inline-start: 3px solid #b32d2e;
padding-inline-start: 10px;
} .yop-poll .yop-poll-answer-row:has(> .yop-poll-answer-link) {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 4px;
}
.yop-poll .yop-poll-answer-row:has(> .yop-poll-answer-link) > .yop-poll-inline-result {
flex-basis: 100%;
}
.yop-poll .yop-poll-answer-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: 24px;
min-block-size: 24px;
color: var(--yop-ans-acc, #0073aa);
text-decoration: none;
border-radius: 4px;
}
.yop-poll .yop-poll-answer-link:hover {
text-decoration: underline;
}
.yop-poll .yop-poll-answer-link:focus-visible {
outline: 2px solid currentcolor;
outline-offset: 1px;
}
.yop-poll-answers--horizontal > .yop-poll-answer-row {
flex: 1;
min-width: 0;
}
.yop-poll-answers--columns-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.yop-poll-answers--columns-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.yop-poll-answers--columns-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
} .yop-poll-answers--horizontal,
.yop-poll-answers--columns-2,
.yop-poll-answers--columns-3,
.yop-poll-answers--columns-4 {
gap: 12px;
} .yop-poll-answers--align-center {
align-items: center;
}
.yop-poll-answers--align-right {
align-items: flex-end;
}
.yop-poll-answers--horizontal.yop-poll-answers--align-center,
.yop-poll-answers--columns-2.yop-poll-answers--align-center,
.yop-poll-answers--columns-3.yop-poll-answers--align-center,
.yop-poll-answers--columns-4.yop-poll-answers--align-center {
justify-content: center;
}
.yop-poll-answers--horizontal.yop-poll-answers--align-right,
.yop-poll-answers--columns-2.yop-poll-answers--align-right,
.yop-poll-answers--columns-3.yop-poll-answers--align-right,
.yop-poll-answers--columns-4.yop-poll-answers--align-right {
justify-content: flex-end;
}
.yop-poll-element[data-element-type="standard-image"] img {
max-width: 100%;
height: auto;
display: block;
} .yop-poll .yop-poll-text-input,
.yop-poll .yop-poll-other-input,
.yop-poll .yop-poll-textarea { -webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
margin: 0;
min-height: 0;
padding: var(--yop-fld-pt, 13px) var(--yop-fld-pr, 12px) var(--yop-fld-pb, 13px) var(--yop-fld-pl, 12px); font-family: inherit;
font-size: var(--yop-fld-ts, 15px);
font-weight: var(--yop-fld-tw, normal);
line-height: 1.35;
letter-spacing: normal;
text-transform: none;
color: var(--yop-fld-tc, #1d2327);
background-color: var(--yop-fld-bg, #fff);
border-width: var(--yop-fld-bw, 1px);
border-style: solid;
border-color: var(--yop-fld-bc, #8a96a4);
border-radius: var(--yop-fld-br, 8px);
box-shadow: none;
outline: none;
box-sizing: border-box;
} .yop-poll .yop-poll-text-input::placeholder,
.yop-poll .yop-poll-other-input::placeholder,
.yop-poll .yop-poll-textarea::placeholder {
color: var(--yop-fld-pc, #73767c); opacity: 1;
} .yop-poll .yop-poll-text-input:focus,
.yop-poll .yop-poll-other-input:focus,
.yop-poll .yop-poll-textarea:focus {
border-color: var(--yop-fld-fc, #2271b1);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--yop-fld-fc, #2271b1) 25%, transparent);
outline: none;
}
.yop-poll .yop-poll-textarea {
min-height: var(--yop-fld-tah, 96px);
resize: vertical;
} .yop-poll-other-answer {
flex-wrap: wrap;
}
.yop-poll-other-wrap {
display: contents;
}
.yop-poll-other-label {
font-size: var(--yop-ans-ts, 14px);
color: var(--yop-ans-tc, inherit);
font-weight: var(--yop-ans-tw, normal);
} .yop-poll-other-field {
flex-basis: 100%;
width: 100%;
}   .yop-poll hr.yop-poll-divider {
height: 0;
background: none;
opacity: 1;
box-sizing: content-box;
border: none;
border-top: 1px solid #000;
margin: 0;
} .yop-poll-text-block {
font-size: 14px;
line-height: 1.5;
} .yop-poll-preview-banner {
margin-block-end: 16px;
border: 1px solid #c3c4c7;
border-left: 4px solid #2271b1;
border-radius: 4px;
background: #f6f7f7;
padding: 10px 14px;
color: #1d2327;
font-size: 13px;
line-height: 1.5;
} .yop-poll-total-votes {
font-size: 13px;
color: #666;
} .yop-poll-start-date,
.yop-poll-end-date {
color: #666;
} .yop-poll-countdown {
font-size: 14px;
font-variant-numeric: tabular-nums;
} .yop-poll-countdown:not([data-yop-countdown-live]) {
visibility: hidden;
} .yop-poll-results-pie {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
margin: 8px 0;
}
.yop-poll-results-pie__chart {
flex: 0 0 auto;
display: block;
}
.yop-poll-results-pie__legend {
flex: 1 1 160px;
list-style: none;
margin: 0;
padding: 0;
}
.yop-poll-results-pie__legend-item {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 2px 0;
font-size: 14px;
}
.yop-poll-results-pie__swatch {
flex: 0 0 auto;
width: 12px;
height: 12px;
border-radius: 2px;
}
.yop-poll-results-pie__legend-item .yop-poll-result-label {
flex: 1 1 auto;
min-width: 0;
} .yop-poll-results-pie__legend-item .yop-poll-other-answers-list {
flex: 1 0 100%;
}
.yop-poll-results-pie__legend-detail {
flex: 0 0 auto;
color: #666;
} .yop-poll-gdpr {
display: flex;
align-items: center;
gap: 8px;
line-height: 1.4;
} .yop-poll-gdpr--center {
justify-content: center;
}
.yop-poll-gdpr--right {
justify-content: flex-end;
} .yop-poll .yop-poll-gdpr label {
color: var(--yop-ans-tc, inherit);
}
.yop-poll-gdpr input[type="checkbox"]:focus {
outline: none;
} .yop-poll-captcha {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
font-size: 14px;
}  .yop-poll-message {
box-sizing: border-box;
color: var(--yop-msg-tc, #000);
font-size: var(--yop-msg-ts, 14px);
font-weight: var(--yop-msg-tw, normal); line-height: 1.5;
} .yop-poll-message--success,
.yop-poll-message--error {
min-height: calc(1.5em + var(--yop-msg-pt, 0px) + var(--yop-msg-pb, 0px));
border-left-width: var(--yop-msg-blw, 10px);
border-left-style: solid;
border-radius: var(--yop-msg-br, 0);
padding-top: var(--yop-msg-pt, 0);
padding-bottom: var(--yop-msg-pb, 0);
padding-left: var(--yop-msg-pl, 10px);
padding-right: var(--yop-msg-pr, 10px);
margin-bottom: 12px;
}
.yop-poll-message--success {
border-left-color: var(--yop-msg-bcs, #008000);
background-color: var(--yop-msg-bg, color-mix(in srgb, var(--yop-msg-bcs, #008000) 12%, transparent));
}
.yop-poll-message--error {
border-left-color: var(--yop-msg-bce, #f00);
background-color: var(--yop-msg-bg, color-mix(in srgb, var(--yop-msg-bce, #f00) 12%, transparent));
} .yop-poll-captcha__external-container[data-yop-captcha="recaptcha_v2_checkbox"],
.yop-poll-captcha__external-container[data-yop-captcha="hcaptcha"] {
min-height: 76px;
}
.yop-poll-captcha__external-container[data-yop-captcha="turnstile"] {
min-height: 65px;
} .yop-poll .yop-poll-text-input--small {
width: min(100%, max(50%, 22ch));
}
.yop-poll .yop-poll-text-input--medium {
width: min(100%, max(75%, 34ch));
}
.yop-poll .yop-poll-text-input--large {
width: 100%;
}
.yop-poll-text-input--left {
display: block;
margin-left: 0;
margin-right: auto;
}
.yop-poll-text-input--center {
display: block;
margin-left: auto;
margin-right: auto;
}
.yop-poll-text-input--right {
display: block;
margin-left: auto;
margin-right: 0;
}
.yop-poll .yop-poll-textarea--small {
width: min(100%, max(50%, 22ch));
}
.yop-poll .yop-poll-textarea--medium {
width: min(100%, max(75%, 34ch));
}
.yop-poll .yop-poll-textarea--large {
width: 100%;
}
.yop-poll-textarea--left {
display: block;
margin-left: 0;
margin-right: auto;
}
.yop-poll-textarea--center {
display: block;
margin-left: auto;
margin-right: auto;
}
.yop-poll-textarea--right {
display: block;
margin-left: auto;
margin-right: 0;
} @container yop-poll (max-width: 400px) {
.yop-poll .yop-poll-text-input--small,
.yop-poll .yop-poll-text-input--medium,
.yop-poll .yop-poll-textarea--small,
.yop-poll .yop-poll-textarea--medium {
width: 100%;
}
} .yop-poll-page-nav {
display: flex;
gap: 8px;
margin-block-start: 12px;
} .yop-poll-page-nav[hidden],
.yop-poll .yop-poll-btn-prev[hidden] {
display: none;
}
.yop-poll-page-nav--center {
justify-content: center;
}
.yop-poll-page-nav--right {
justify-content: flex-end;
}
.yop-poll-footer {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-block-start: 12px;
} .yop-poll-footer > .yop-poll-gdpr,
.yop-poll-footer > .yop-poll-captcha,
.yop-poll-footer > .yop-poll-total-votes {
flex: 1 1 100%;
} .yop-poll-voted-note {
margin: 0;
}
.yop-poll-footer--center {
justify-content: center;
}
.yop-poll-footer--right {
justify-content: flex-end;
} .yop-poll-footer--full > .yop-poll-vote-button {
flex: 1 1 100%;
box-sizing: border-box;
} .yop-poll-actions {
display: inline-flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
box-sizing: border-box;
} .yop-poll-footer--full > .yop-poll-actions {
display: flex;
flex: 1 1 100%;
} .yop-poll-other-answers-list {
margin-top: 4px;
padding-left: 8px;
border-left: 3px solid #eee;
}
.yop-poll-other-answer-item {
font-size: 13px;
color: #555;
padding: 2px 0;
}  .yop-poll {
container-name: yop-poll;
container-type: inline-size;
position: relative; max-width: var(--yop-poll-max-width, 760px);
}
.yop-poll .yop-poll-perm-overlay {
position: absolute; inset: 0 0 auto;
min-height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center; padding: 12px;
z-index: 100;
} .yop-poll-perm-overlay[hidden] {
display: none;
} .yop-poll .yop-poll-perm-overlay__inner {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
max-width: 320px;
padding: 20px;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
text-align: start;
}
.yop-poll .yop-poll-perm-overlay__title {
margin: 0;
font-size: 16px;
font-weight: 600;
line-height: 1.3;
color: #1e1e1e;
}
.yop-poll .yop-poll-perm-overlay__blurb,
.yop-poll .yop-poll-perm-option__note {
margin: 0;
font-size: 13px;
line-height: 1.4; color: #50575e;
}
.yop-poll .yop-poll-perm-overlay__options {
display: flex;
flex-direction: column;
gap: 12px;
}
.yop-poll .yop-poll-perm-option {
display: flex;
flex-direction: column;
gap: 4px;
} .yop-poll .yop-poll-perm-option .yop-poll-vote-button {
width: 100%;
} .yop-poll .yop-poll-perm-overlay__cancel {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
align-self: center;
min-height: 44px;
padding: 8px 16px;
background: none;
border: 0;
border-radius: 3px;
color: #50575e;
font-size: 13px;
line-height: 1.4;
text-decoration: underline;
cursor: pointer;
}
.yop-poll-inline-detail {
margin-inline-start: 0.5em;
font-size: 0.875em;
color: var(--yop-ans-tc, #666);
white-space: nowrap;
} .yop-poll .yop-poll-answer input[type="radio"]:focus-visible,
.yop-poll .yop-poll-answer input[type="checkbox"]:focus-visible,
.yop-poll .yop-poll-gdpr input:focus-visible,
.yop-poll .yop-poll-vote-button:focus-visible,
.yop-poll .yop-poll-perm-overlay__cancel:focus-visible {
outline: 2px solid var(--yop-focus, #0073aa);
outline-offset: 2px;
} .yop-poll .yop-poll-decoy {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
} .yop-poll .yop-poll-results:focus-visible {
outline: 2px solid var(--yop-focus, #0073aa);
outline-offset: 4px;
} .yop-poll .yop-poll-results:focus:not(:focus-visible) {
outline: none;
} .yop-poll .yop-poll-ballot:focus:not(:focus-visible) {
outline: none;
}