/** color **/
:root {
  --primary: #666;
  --sliderbg: #0080c0;
  --sliderakzent: #0076ae;
  --linkfarbe: #09c;
  --tooltipbg: hsla(0, 0%, 20%, 0.9);
  --tooltiptext: #fff;
  --textfarbe: #999;
  --tabbg: #fafafa;
  --tabbghover: #f1f6fa;
  
  --masse1: 20px;
  --masse2: 40px;
  --masse3: -7px;
}

a {	color: var(--linkfarbe, #09c);}
/** popup when external needed **/
#emo_votebody #emo-modal {transform: scale(0, 0);}

#emo-player-icon:hover, #emo_user_icon:hover { transform: scale(3); box-shadow: 1px 1px 2px #000000; z-index: 11;}
#emo_user_icon, #emo-player-icon {z-index: 10; border-radius: 50%; position: relative; transform-origin: 0 0; transition: transform 200ms ease-in; transform: scale(1); background: URL('/_icons/emo_user.passiv.svg') no-repeat; background-size: cover;}
#emo_user_icon {transform-origin: 100% 0; background: URL('https://vote.emotionum.com/_icons/emo_user.passiv.svg') no-repeat; background-size: cover;}
.loggedin #emo_user_icon {background-image: URL('https://vote.emotionum.com/_icons/emo_user.active.svg');}

#emo-form {background: white; max-width: 550px; max-height: 750px; margin: auto;position: absolute; top:0; bottom: 0%; left: 0; right: 0; height: 100%; border: 1px solid #ddd; border-radius: 6px; overflow: hidden;}
#emo-form * {box-sizing: border-box;font-family: sans-serif;font-size: 14px;}
#emo-form small {font-size: 0.65em;}
#emo-form .trow {display: table-row;}
#emo-individual-form {display: block; width: 100%; height: calc(100% - 105px); position: relative;}
#emo-individual-form * {vertical-align: middle;}
#emo-individual-form .input {display: table-row; width: 100%;}
#emo-individual-form .lastinput {display: table-cell; width: 100%; vertical-align: bottom;}
#emo-individual-form .input table {height: 100%;}
#emo-individual-form .input label {display: table-cell; width: 30%;}
#emo-individual-form .input > div {display: table-cell; width: 900px;}
#emo-individual-form .input output {display: table-cell; width: 10%; position: relative;}
#emo-individual-form fieldset {padding:0; margin:0; height:100%; border: 0; overflow-y: auto;} 
#emo-individual-form fieldset > .emotab-pane {padding:0; margin:0; min-height:99%; height: 100%; display: table; width: 100%;} 
#emo-individual-form label.labelCell {    position: relative;text-overflow: ellipsis; max-width: 122px; white-space: nowrap; overflow: hidden; text-align: right; padding-right: 10px;}
#emo-form #emo-labels {position: absolute; bottom:0; left:0; right:0;}
#emo-form #emo-title {position: relative; height: 50px; overflow: none;text-align: center; background: var(--tabbg, #fafafa); border-bottom: 1px solid silver;}
#emo-form #emo-title h3{line-height: 2.2em;padding: 0;margin: 0px;}

input[type=range]:focus {
  outline: none;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

.input:hover input[type=range]::-webkit-slider-thumb{
  transition: all 200ms ease-in;
  transform: scale(1.25);
  /*box-shadow: 1px 1px 2px #000000;*/
}
.input:hover input[type=range]::-moz-slider-thumb{
  transition: all 200ms ease-in;
  transform: scale(1.25);
  /*box-shadow: 1px 1px 2px #000000;*/
}
.input:hover input[type=range]::-ms-slider-thumb
{
  transition: all 200ms ease-in;
  transform: scale(1.25);
  /*box-shadow: 1px 1px 2px #000000;*/
}

input[type=submit] {
	position: realtive;
    min-width: 100%;
}

/* tabs */
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

#emo-form > input[id^=emotab]{
	display: none;
}

#emo-form label[for^=emotab] {
  display: block;
  float: left;
  margin: 0;
  padding: 15px 10px;
  font-weight: 600;
  text-align: center;
  color: var(--textfarbe, #bbb);
  border: 0px solid red;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--tabbg, #fafafa);
}

#emo-form #emotab1:checked ~ #emo-labels > label[for=emotab1],
#emo-form #emotab2:checked ~ #emo-labels > label[for^=emotab2],
#emo-form #emotab3:checked ~ #emo-labels > label[for^=emotab3],
#emo-form #emotab4:checked ~ #emo-labels > label[for^=emotab4],
#emo-form #emotab5:checked ~ #emo-labels > label[for^=emotab5]  
{
  	border-bottom: 1px solid white;
    border-right: 1px solid white;
    border-left: 1px solid var(--linefarbe, #bbb);;
    border-top: 1px solid var(--linefarbe, #bbb);;
    color: var(--textfarbe, var(--linefarbe, #bbb););
    background: var(--tabbghover, #f7f7f7);
}
#emo-form fieldset[id^=emofieldset] {display: none; padding: 10px;}
#emo-form #emo-individual-form {border-top: 0px solid #ddd;}

#emo-form #emotab1:checked ~ #emo-individual-form > #emofieldset1,
#emo-form #emotab2:checked ~ #emo-individual-form > #emofieldset2,
#emo-form #emotab3:checked ~ #emo-individual-form > #emofieldset3,
#emo-form #emotab4:checked ~ #emo-individual-form > #emofieldset4,
#emo-form #emotab5:checked ~ #emo-individual-form > #emofieldset5  {
  display: block;
  -webkit-animation: fadeIn 0.5s;
  animation: fadeIn 1s;
}

fieldset .lastinput table, fieldset table .input {width: 100% !important;}
fieldset .lastinput table td {padding: 5px;}

.emo-preview {text-align: center; display: table-cell; height: 80%;}
.emo-preview img, .emo-preview object {       max-height: 45vh;
    max-width: 40vh;}

/*tooltips*/
[data-tooltip] {
    position: absolute;
    left: 5%;
    margin-top: 5%;
    z-index: 2;
    cursor: pointer;
    width: 90%;
    height: 0;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -50%;
  padding: 7px;
  width: 100%;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: var(--tooltipbg, #bbb);
  color: var(--tooltipfarbe, #fff);
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
  font-size: 11px;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 18%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid var(--tooltipbg, #bbb);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}
/* redeclaration for ms browser only */
@supports (-ms-ime-align:auto) {
   [data-tooltip]:after { border-top:5px solid hsla(0, 0%, 20%, 0.9) !important; }
   [data-tooltip]:before { background-color: hsla(0, 0%, 20%, 0.9) !important; }
   [data-tooltip] {margin-top: 3%;}
   #emo-form .valueout:after {background: #2497E3 !important;}
   #emo-form .valueout {border-color: #2497E3;}
}
/*ie10+*/
@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
 	 [data-tooltip]:after { border-top:5px solid hsla(0, 0%, 20%, 0.9) !important; }
   	[data-tooltip]:before { background-color: hsla(0, 0%, 20%, 0.9) !important; }
   [data-tooltip] {margin-top: 3%;}
}
/* Show tooltip content on hover */
label:hover ~ [data-tooltip]:before,
label:hover ~ [data-tooltip]:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

#emo-form fieldset .lastinput [data-tooltip]:after,
#emo-form fieldset .lastinput [data-tooltip]:before {
	bottom: 65px;
}

#emo-individual-form fieldset[id^=emofieldset] .lastinput input, #emo-individual-form fieldset[id^=emofieldset] .lastinput select {
    padding: 8px 15px;
    border-radius: 5px;
    background: #ededed;
    width: 75%;
}

/* arrow */
#emo-form .valueout {
    /* left: -9px; */
    background: transparent;
    position: relative;
    /* width: 90%; */
    height: 24px;
    border-radius: 4px;
    border-color: var(--sliderbg, #2497E3);
    color: white !important;
    margin: 0 0 0 15%;
    padding: 5px 5%;
    z-index:1;
    font-weight: bold;
    min-width: 60px;
    background: transparent;
}

#emo-form .valueout:before, #emo-form .valueout:after {
    position: absolute;
    content: "";
    display: block;
    border-width: 9px;
    border-color: transparent;
    border-style: solid;
    /* left: -15px; */
}

#emo-form .valueout:before {
    top: 50%;
    transform: translateY(-50%);
    left: 4px;
    border-top-color: transparent;
    border-right-color: inherit;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-left-width: 0;
    width: 0;
    height: 0;
}
#emo-form .valueout:after {
   border-width: 8px;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
    background: var(--sliderbg, #2497E3);
    border-radius: 5px;
    width: auto;
    height: 26px;
    z-index: -1;
}

#emo-form label[for^=emotab] {
  width: 16.666%;
  max-width: 16.666%;
}
#emo-form #emotab1:checked ~ #emo-labels > label[for=emotab1],
#emo-form #emotab2:checked ~ #emo-labels > label[for^=emotab2],
#emo-form #emotab3:checked ~ #emo-labels > label[for^=emotab3],
#emo-form #emotab4:checked ~ #emo-labels > label[for^=emotab4],
#emo-form #emotab5:checked ~ #emo-labels > label[for^=emotab5]  {
  width: 33.33%;
  max-width: 33.33%;
}

/* fan votum */
.emoradio-group * {
	box-sizing: border-box;
}

.emoradio-group > div {  position: relative;  display: table !important; table-layout: fixed;
    width: 100%;}
    

.emoradio-group input[type=radio] {
  position: absolute;
  visibility: hidden;
  display: none;
}

.emoradio-group label {
  color: var(--sliderbg, #bbb);
  cursor: pointer;
  font-weight: bold;
  display: table-cell;
  text-align: center;
  padding: 2px;
  margin: 0;
  line-height: 125%;
  transition: background-color 300ms linear;
}

.emoradio-group input[type=radio]:checked + label {
  color: #fff;
  background: var(--sliderbg, #bbb);
}

.emoradio-group label + input[type=radio] + label {
  border-left: solid 1px var(--sliderbg, #bbb);
}

.emoradio-group > div {
  border: solid 1px var(--sliderbg, #bbb);
  display: inline-block;
  margin: 0px;
  border-radius: 5px;
  width: 100%;
  overflow: hidden;
}

#snackbar {
    visibility: hidden;
    max-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: -45px;
    font-size: 17px;
    border-radius: 10px;
}

#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 4.5s;
    animation: fadein 0.5s, fadeout 0.5s 4.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: -40px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: -40px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: -40px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: -40px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

/* http://www.cssarrowplease.com/ */
.arrow_box {
	position: relative;
	background: #159;
}
.arrow_box:after {
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-width: 10px;
}

.arrow_box.arrow_left:after {
	right: 100%;
	top: 50%;
	margin-top: -10px;
	border-right-color: #333;
}
.arrow_box.arrow_right:after {
	left: 100%;
	top: 50%;
	margin-top: -10px;
	border-left-color: #333;
}
.arrow_top:after {
	bottom: 100%;
	left: 50%;
	margin-left: -10px;
	border-bottom-color: #333;
}
.arrow_bottom:after {
	top: 100%;
	left: 50%;
	margin-left: -10px;
	border-top-color: #333;
}