/* ============================== */
/* === Powered by locomputing === */
/* ============================== */

.error {
font-size:calc(.85em + ((.85vw - 0.1em) * 1));
color:maroon;
font-weight: bold;
}

.voteantbox {
width: calc(13em + ((13vw - 0.1em) * 1));
}

.voteant {
border: 1px solid #d8d8d8;
border-radius: calc(.15em + ((.15vw - 0.1em) * 1));	
font-weight: bold;
min-height: calc(1.25em + ((1.25vw - 0.1em) * 1));
padding:0;
margin: calc(.3em + ((.3vw - 0.1em) * 1)) 0;
}
.voteant .votfl {
font-size: 68%;
line-height: 1;
padding:0 0 0 calc(.3em + ((.3vw - 0.1em) * 1));
color:navy;	
}
.voteant .votfr {	
color:navy;
padding:0 calc(.2em + ((.2vw - 0.1em) * 1));
}

.voteant .votfr span {	
font-size: 60%;
color:navy;
}
.voterg {
font-size: 75%;
}
.votergtop {
font-size: 80%;
font-weight: bold;
margin:0;
padding: calc(.25em + ((.25vw - 0.1em) * 1)) calc(.5em + ((.5vw - 0.1em) * 1));
}
.votfr {
line-height: 0;
font-size: 80%;
}
progress[value] {
appearance: none;
border: none;
width: calc(12.5em + ((12.5vw - 0.1em) * 1)); 
height: calc(.35em + ((.35vw - 0.1em) * 1));
background-color:transparent;
position: relative;
margin:.75em 0 .15em 0; 
border-radius: 0 calc(.2em + ((.2vw - 0.1em) * 1)) calc(.2em + ((.2vw - 0.1em) * 1)) 0;
}
progress[value]::-webkit-progress-bar {
background-color: white;
border-radius: 0 calc(.2em + ((.2vw - 0.1em) * 1)) calc(.2em + ((.2vw - 0.1em) * 1)) 0;
}
progress[value]::-webkit-progress-value {
position: relative;
background-size: 35px 20px, 100% 100%, 100% 100%;
border-radius: 0 calc(.2em + ((.2vw - 0.1em) * 1)) calc(.2em + ((.2vw - 0.1em) * 1)) 0;
}

progress[value]::-webkit-progress-value:after {
content: '';
position: absolute;
width:5px; 
height:5px;
top:7px; 
right:7px;
background-color: white;
border-radius: 100%;
}
progress[value]::-moz-progress-bar {
background:linear-gradient( 180deg,blue 7%,#c3c4ff 20%,blue 50%,#0002c6 85%);
border-radius: 0 calc(.2em + ((.2vw - 0.1em) * 1)) calc(.2em + ((.2vw - 0.1em) * 1)) 0;
}

div[data-value] { 
position: relative; 
font-size: 75%;
}
div[data-value]:after {
  content: attr(data-value) '%';
  position: absolute; right:0;
}
.html5::-webkit-progress-value {
background:-webkit-linear-gradient( 270deg,blue 7%,#c3c4ff 20%,blue 50%,#0002c6 85%);
}
.html5::-moz-progress-bar {
  background:-moz-linear-gradient( 90deg,blue 7%,#c3c4ff 20%,blue 50%,#0002c6 85%);
}

.votebox .inline-label {
display: inline-block;
background-color: #fff;
padding: 1px 10px 1px 5px;
width: calc(14em + ((14vw - 0.1em) * 1));
border: 1px solid #777;
border-radius: 3px;
font-size: 75%;
margin: 1px 0;
}


.votebox input[type='radio'] {
  width:auto;
  display: table-cell;
  margin-right: 1.75em;
  background:transparent;
  border:none;
}
.votebox input[type='radio']:checked,
.votebox input[type='radio']:not(:checked) {
  background: transparent;
  position: relative;
  visibility: hidden;
  margin:0;
  padding:0;
}
.votebox input[type='radio'] + label {
  cursor: pointer;
}
.votebox input[type='radio']:checked + label::before,
.votebox input[type='radio']:not(:checked) + label::before {
    content:'';
    display: inline-block;
    width: calc(.75em + ((.75vw - 0.1em) * 1));
    height:calc(.75em + ((.75vw - 0.1em) * 1));
    position: relative;
    top:calc(.15em + ((.15vw - 0.1em) * 1));
    border: calc(.12em + ((.12vw - 0.1em) * 1)) solid #555;
    background: white;
    margin-right: calc(.5em + ((.5vw - 0.1em) * 1));
    box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);
}
.votebox input[type=radio]:checked + label::before,
.votebox input[type=radio]:not(:checked) + label::before {
  border-radius: 0px;
}
.votebox input[type='radio']:hover  + label::before {
  background:darkgray;
  box-shadow: inset 0 0 0 2px white;
}
.votebox input[type='radio']:checked  + label::before {
  background:black;
  box-shadow: inset 0 0 0 2px white;
}



#butse {
height:calc(1em + ((1vw - 0.1em) * 1));
margin:3px 0 0 calc(.5em + ((.5vw - 0.1em) * 1));
}


#butse #votebut{
display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	border: #555 solid 1px;
	color:navy;
	cursor:pointer;
	background: #eeeeee;
	font-size:calc(.60em + ((.60vw - 0.1em) * 1));
	height:calc(1.2em + ((1.2vw - 0.1em) * 1));
	line-height: calc(1.2em + ((1.2vw - 0.1em) * 1));
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
  font-weight:bold;
  padding:0 calc(2em + ((2vw - 0.1em) * 1));
  border-radius:calc(.2em + ((.2vw - 0.1em) * 1));
}

#butse a {
text-decoration: none;
}

#butse #votebut:hover{
background: white;
color:green;
border: green solid 1px;
-webkit-transition: 1.5s;
transition: 1.5s;
}