::selection{
  color: #fff;
  background: var(--primary);
}
.boxwrapper-poll{
  background-color: var(--lightgray);
  border-radius: 10px;
  padding: 30px 40px;
  width: 100%;
  margin-bottom: 30px;
}
.boxwrapper-poll header{
  font-size: 22px;
  font-weight: 600;
}
.boxwrapper-poll .poll-area{
  margin: 20px 0 15px 0;
}
.poll-area label{
  display: block; position: relative;
  margin-bottom: 10px;
  border-radius: 5px;
  padding: 8px 10px;
  border: 1px solid var(--lightgray2);
  transition: all 0.2s ease;
}
.poll-area label:hover{
  border-color: var(--primary); cursor: pointer;
  background-color: #DFF0FD;
}
label.selected{
  border-color: var(--primary)!important;
}
label .poll-row{
  display: flex;
  pointer-events: none;
  justify-content: space-between;
}
label .poll-row .poll-column{
  display: flex; align-items: center; width: 100%;
}
label .poll-row .circle{
  height: 19px;
  width: 19px;
  display: block;
  border: 2px solid #ccc;
  border-radius: 50%;
  position: relative;
}
label.selected .poll-row .circle{
  border-color: var(--primary);
}
label .poll-row .circle::after{
  content: "";
  height: 11px;
  width: 11px;
  background: var(--primary);
  border-radius: inherit;
  position: absolute;
  left: 2px;
  top: 2px;
  display: none;
}
/* .poll-area label:hover .poll-row .circle::after{
  display: block;
  background: var(--lightgray2);
} */
label.selected .poll-row .circle::after{
  display: block;
  background: var(--primary)!important;
}
label .poll-row span.text{
  font-size: 14px; line-height: 1.3; font-weight: 500;
  width: calc(100% - 20px); padding-left: 10px;
}
label .poll-row .percent{
  display: none;
}
label .progress{
  height: 7px;
  width: 100%;
  position: relative;
  background: #f0f0f0;
  margin: 8px 0 3px 0;
  border-radius: 30px;
  display: none;
  pointer-events: none;
}
label .progress:after{
  position: absolute;
  content: "";
  height: 100%;
  background: #ccc;
  width: calc(1% * var(--w));
  border-radius: inherit;
  transition: all 0.2s ease;
}
label.selected .progress::after{
  background: var(--primary);
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.25) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0.25) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
  animation: etProgressBarStripes 1s linear infinite;
  transition: width 0.5s ease;
}
label.selectall .progress,
label.selectall .poll-row .percent{
  display: block;
}
.polllabel input[type="radio"],
.polllabel input[type="checkbox"]{
  position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 6; top: 0; left: 0;
}


label.pevents{ pointer-events:none; }


@-webkit-keyframes etProgressBarStripes {
  from {
    background-position: 55px 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes etProgressBarStripes {
  from {
    background-position: 55px 0;
  }
  to {
    background-position: 0 0;
  }
}


.poll--question{ margin-bottom: 20px; }
.poll--policy{ font-size: 12px; line-height: 1.3; color: var(--gray); }
.poll--policy a{ color: var(--primary); text-decoration: underline; }


@media (max-width: 1199px){

  .boxwrapper-poll{ padding: 20px; }

}
@media (max-width: 991px){

  .boxwrapper-poll{ margin-bottom: 40px; }

}
@media (max-width: 576px){

  .boxwrapper-poll .poll-area{ margin: 15px 0; }
  .poll--question{ margin-bottom: 15px; }

}




/* popup */
.close-poll{ position: absolute; top: 10px; right: 10px;}
.divpoll-popup{
  position: fixed;
  z-index: 999999;
  bottom: 10px; left: 30px;
  max-width: 380px; width: 90%;
  transition: all 0.3s;
  animation: popup 0.8s ease;
}
@media (max-width: 730px){

  .divpoll-popup{ bottom: 30px;}

}
@media (max-width: 590px){

  .divpoll-popup{ bottom: 50px;}

}
@media (max-width: 425px){

  .divpoll-popup{ left: 50%; transform: translateX(-50%); }

}
@keyframes popup {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}