@charset "utf-8";
/* CSS Document */

.poll_wrap{
padding: 1.5em;
width: 100%;
margin: 0 auto;
border: 1px solid #ccc;
background: #f5f5f5;
border-radius: 3px;
position: relative;
}

.poll_wrap_title{
font-weight: 700;
display: block;
margin-bottom: 1.125em;
font-size: 1.5em;
line-height: 1.5em;
}

/* Poll Form ============================================*/
.poll_form_wrap{
}

.poll_wrap .poll_label_wrap{
padding: 0 36px;
position: relative;
}

.poll_wrap .poll_label_wrap input[type="radio"] {
position: absolute;
width: 18px;
height: 18px;
color: #36383A;
border: 2px solid #ccc;
border-radius: 15px;
appearance: none;
outline: 0;
cursor: pointer;
transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
top: 3px;
left: 10px;
background: #fff;
}
.poll_wrap .poll_label_wrap input[type="radio"]:focus {
outline:2px solid #1297d5;
}
.poll_wrap .poll_label_wrap input[type="radio"]::before {
position: absolute;
content: '';
display: block;
top: 4px;
left: 4px;
width: 6px;
height: 6px;
opacity: 0;
background: #fff;
border-radius: 10px;
}
.poll_wrap .poll_label_wrap input[type="radio"]:checked {
color: #fff;
border-color: #068418;
background: #068418;
}
.poll_wrap .poll_label_wrap input[type="radio"]:checked::before {
opacity: 1;
}
.poll_wrap .poll_label_wrap input[type="radio"] ~ label::before {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.poll_wrap .poll_label_wrap label{
position: relative;
cursor: pointer;
font-weight: 400;
font-size: 1.125em;
line-height: 1.4em;
user-select: none;
margin-bottom: 5px;
display: inline-block;
}

.poll_wrap .poll_form_field{
margin-bottom:1.5em;
}
.poll_wrap .poll_form_field.poll_email_wrap{
padding-top:1em;
}
.poll_wrap .poll_form_field .poll_field_label{
font-size:1em;
line-height: 1.4em;
margin-bottom: 5px;
display: block;
font-weight: 700;
}
.poll_wrap .poll_form_field input[type="text"],
.poll_wrap .poll_form_field input[type="email"]{
border:1px solid #bbb;
background-color:#fff;
font-size:1em;
padding:10px;
border-radius: 3px;
width: 100%;
max-width: 500px;
}
.poll_wrap .poll_form_field input[type="text"]:focus,
.poll_wrap .poll_form_field input[type="email"]:focus{
outline:2px solid #1297d5;
outline-offset: 2px;
}
.poll_wrap .poll_form_field input[type="text"]:disabled,
.poll_wrap .poll_form_field input[type="email"]:disabled{
color: #999;
background: #ddd;
}

.poll_wrap .poll_form_field input[type="text"].error,
.poll_wrap .poll_form_field input[type="email"].error{
border-color:#C91A1D;
background-color: #FBD5D5;
}
.poll_wrap .poll_form_field label.error{
color:#C91A1D;
margin-top:5px;
font-size:1em;
line-height: 1.4em;
display: block;
}

.poll_wrap .poll_form_field p{
font-size:1em;
line-height: 1.5em;
}
.poll_wrap .poll_form_field p a,
.poll_wrap .poll_form_field p a:hover{
color:#000;
text-decoration: underline;
}
.poll_wrap .poll_form_field p a:focus{
outline: 2px solid #1297d5;
}

.poll_wrap .poll_btn_wrap{
text-align: center;
}

.poll_wrap .poll_submit{
border:none;
border-radius: 3px;													
background: #ea1f1f;
color:#fff;
text-decoration: none;
font-weight:700;
font-size: 1.125em;
text-transform: uppercase;
padding: 0.75em 3em;
text-align: center;
}
.poll_wrap .poll_submit:hover{
background-color:#ff0000;
cursor: pointer;
}
.poll_wrap .poll_submit:focus{
outline: 2px solid #1297d5;
outline-offset:2px;	
}
.poll_wrap .poll_form_field small{
font-size: 10px;
padding: 10px 0 0 3px;
display: block;
}

.poll_wrap .poll_alert{
padding:1em;
margin-bottom: 1.5em;
border-radius: 3px;
font-size:1em;
font-weight: 700;
}
.poll_wrap .poll_alert p{
line-height: 1.5em;
margin-bottom: 10px;
}
.poll_wrap .poll_alert p:last-of-type{
margin:0;
}
.poll_wrap .poll_alert_fail{
background-color: #FBD5D5;
color: #C91A1D;
}
.poll_wrap .poll_alert_success{
background-color:#D2F1CF;
color:#15A01C;
}
.poll_wrap .poll_alert_success a,
.poll_wrap .poll_alert_success a:hover{
color:#15A01C;
text-decoration: underline;
}
.poll_wrap .poll_alert_success a:focus{
outline: 2px solid #1297d5;	
}

@media (max-width: 500px) {
	.poll_wrap .poll_submit{
	width:75%;
	padding: 1em 0;
	}
	.poll_wrap .poll_label_wrap input[type="radio"]{
	top: 1px;
    left: 0;
	}
	.poll_wrap .poll_label_wrap{
	padding:0 0 0 24px;
	}
}


/* Results ============================================*/
.poll_result_wrap{
}

.poll_wrap .poll_btn_small{
display: inline-block;
border:none;
border-radius: 3px;	
background: #666;
color:#fff;
text-decoration: none;
font-weight:700;
font-size: 12px;
text-transform: uppercase;
padding:8px 1.5em;
text-align: center;
}
.poll_wrap .poll_btn_small:hover{
background-color:#888;
cursor: pointer;
}
.poll_wrap .poll_btn_small:focus{
outline: 2px solid #1297d5;
outline-offset:2px;	
}

.poll_results_graph{
list-style: none;
}
.poll_results_graph li{
margin-bottom:1.5em
}
.poll_result_label{
position: relative;
cursor: pointer;
font-size: 1.125em;
line-height: 1.4em;
user-select: none;
margin-bottom: 5px;
display: inline-block;
}
.poll_result_label span{
color:#777;
}
.poll_result_bar_wrap{
width:100%;
height:20px;
background: #ddd;
}
.poll_result_bar{
height:20px;
background: #ea1f1f;
}

.poll_vote_link_wrap{
display:none;
}


.lds-ring {
display: none;
position: absolute;
width: 80px;
height: 80px;
top:30%;
left:50%;
transform: translate(-50%, -50%);
opacity: 0.5;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 64px;
height: 64px;
margin: 8px;
border: 8px solid #ea1f1f;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #ea1f1f transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}




