.vPoll.minimize  {display:none; transition:display transform .5s}
.vPoll-mask      {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 101;
    background-color:rgba(0,0,0, 0.1)
}

.vPoll-mask.transparent {
    background-color: transparent;;
}

.vPoll {
    box-sizing:border-box;
    position:absolute;
    margin:0 auto;
    padding:10px;
    overflow:auto;
    text-align:left;
    background-color:#fff;
    box-shadow:0 0 4px #000;
    border-radius: 5px;
}

.vPoll.default-position {
    top: 5%;
    left: 0;
    right: 0;
    width: 640px;
    max-width: 95%;
    max-height: 90%;
    z-index:102;
}

.vPoll.quickAnswerMode {
    top: 0 !important;
    text-align: center;
    animation-name: quickAnswerMode;
    animation-iteration-count: infinite;
    animation-duration: 1.5s
}

@keyframes quickAnswerMode {
    0% {
        border: 3px solid #6698f3;
    }
    10% {
        border: 3px solid blue;
    }
    20% {
        border: 3px solid #6698f3;
    }
    100% {
        border: 3px solid #6698f3;
    }
}


.vPoll.cust-position {
    max-width: 400px;
    z-index: 102;
}


.vPoll .subject  {padding:5px 10px; border:1px solid #ccc; border-radius:4px; box-shadow:0 0 4px #ccc}
.vPoll .hotAreaSubject  {padding:5px 10px;}

.vPoll ul    {margin:0}
.vPoll ul.answer {padding:0}
.vPoll ul.answer li  {list-style-type:none}

.vPoll .item input    {float:left; margin:4px 5px 0 0}
.vPoll .item .q       {overflow:hidden; font-weight: normal;}

.vPoll ul li label       {padding:3px; font-size:inherit}
.vPoll ul li input   {margin:0}

.vPoll .panel        {    
    margin-top: 10px;
    margin-bottom: 010px;
    border: none;
    box-shadow: none;
}

.vPoll.quickAnswerMode .panel {
    margin: 0;
}

.vPoll .vPoll-answerInfo {
    margin-top: 10px;
}
.vPoll-answerInfo .vPoll-answer {
    font-weight: bold;
    margin-bottom: 10px;
}

.vPoll-msg.errorMsg .vPoll-answerInfo .vPoll-answer { color:#d9534f; }

.vPoll-msg.correctMsg .vPoll-answerInfo .vPoll-answer { color:#5cb85c; }

.vPoll .panel button { margin-left:10px; }

.maxbtn {opacity:.8; position:absolute; top:5px; left:5px; z-index:999}


.single-line li     {display:inline-block; vertical-align:top; margin-right:20px}
.single-line li .q  {white-space:nowrap}


.position-marker {
    position: absolute;
    z-index: 102;
}

.position-marker.wide-marker {
    z-index: 103;
}


/* triangle */
.position-marker > .triangle {
    position: absolute;
    width: 15px;
    height: 15px;
    overflow: hidden;
    box-sizing: content-box;
}
.position-marker > .triangle:before {
    content: '';
    left: 0px;
    top: 0px;
    width: 21px;
    height: 21px;
    position: absolute;
    background: #fff;
    box-sizing: content-box;
    z-index: 101;
}
.position-marker > .triangle:after {
    content: '';
    left: 0px;
    top: 0px;
    width: 21px;
    height: 21px;
    position: absolute;
    background: transparent;
    border: 1px solid #aaa;
    box-sizing: content-box;
    z-index: 99;
}

/*
    0 1 2
    7   3
    6 5 4
*/

/* triangle */
.position-marker[direction="0"] > .triangle {
    left: -15px;
    top: -16px;
    border-bottom: 1px solid #aaa;
}
.position-marker[direction="0"] > .triangle:before {
    left: -7px;
    top: -6px;
    transform-origin: right bottom;
    transform: rotate(-45deg);
}
.position-marker[direction="0"] > .triangle:after {
    left: -8px;
    top: -8px;
    transform-origin: right bottom;
    transform: rotate(-45deg);
}

.position-marker[direction="2"] > .triangle {
    top: -16px;
    border-bottom: 1px solid #aaa;
}
.position-marker[direction="2"] > .triangle:before {
    top: -6px;
    left: 1px;
    transform-origin: left bottom;
    transform: rotate(45deg);
}
.position-marker[direction="2"] > .triangle:after {
    top: -8px;
    transform-origin: left bottom;
    transform: rotate(45deg);
}

.position-marker[direction="4"] > .triangle {
    border-top: 1px solid #aaa;
}
.position-marker[direction="4"] > .triangle:before {
    top: -21px;
    left: 1px;
    transform-origin: left bottom;
    transform: rotate(45deg);
}
.position-marker[direction="4"] > .triangle:after {
    top: -23px;
    transform-origin: left bottom;
    transform: rotate(45deg);
}

.position-marker[direction="6"] > .triangle {
    left: -15px;
    border-top: 1px solid #aaa;
}
.position-marker[direction="6"] > .triangle:before {
    left: -7px;
    transform-origin: right top;
    transform: rotate(45deg);
}
.position-marker[direction="6"] > .triangle:after {
    left: -8px;
    transform-origin: right top;
    transform: rotate(45deg);
}


/* bubble (narrow marker, edit draggable)*/
.position-marker > .bubble {
    position: absolute;
    width: 50px;
    height: 40px;
    padding: 7px 0px;
    background-color: #FFF;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
    border: 3px solid #6698f3;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    text-align: center;
    font-weight: bold;
    color: #6698f3;
    z-index: 100;
}

.position-marker[direction="0"] > .bubble {
    bottom: -6px;
    right: 3px;
}

.position-marker[direction="2"] > .bubble {
    bottom: -6px;
    left: 3px;
}

.position-marker[direction="4"] > .bubble {
    top: -6px;
    left: 3px;
}

.position-marker[direction="6"] > .bubble {
    top: -6px;
    right: 3px;
}

/* bubble triangle border */
.position-marker > .bubble + .triangle:after {
    border: 3px solid #6698f3;
}
.position-marker[direction="0"] > .bubble + .triangle {
    left: -15px;
    top: -18px;
    border-bottom: 3px solid #6698f3;
}
.position-marker[direction="0"] > .bubble + .triangle:before {
    left: -9px;
    top: -6px;
    transform-origin: right bottom;
    transform: rotate(-45deg);
}
.position-marker[direction="0"] > .bubble + .triangle:after {
    left: -9px;
    top: -9px;
    transform-origin: right bottom;
    transform: rotate(-45deg);
}

.position-marker[direction="2"] > .bubble + .triangle {
    top: -18px;
    border-bottom: 3px solid #6698f3;
}
.position-marker[direction="2"] > .bubble + .triangle:before {
    top: -6px;
    left: 3px;
    transform-origin: left bottom;
    transform: rotate(45deg);
}
.position-marker[direction="2"] > .bubble + .triangle:after {
    top: -12px;
    transform-origin: left bottom;
    transform: rotate(45deg);
}

.position-marker[direction="4"] > .bubble + .triangle {
    border-top: 3px solid #6698f3;
}
.position-marker[direction="4"] > .bubble + .triangle:before {
    top: -21px;
    left: 3px;
    transform-origin: left bottom;
    transform: rotate(45deg);
}
.position-marker[direction="4"] > .bubble + .triangle:after {
    top: -27px;
    transform-origin: left bottom;
    transform: rotate(45deg);
}

.position-marker[direction="6"] > .bubble + .triangle {
    left: -15px;
    border-top: 3px solid #6698f3;
}
.position-marker[direction="6"] > .bubble + .triangle:before {
    left: -9px;
    transform-origin: right top;
    transform: rotate(45deg);
}
.position-marker[direction="6"] > .bubble + .triangle:after {
    left: -12px;
    transform-origin: right top;
    transform: rotate(45deg);
}


/* wide player marker */
.position-marker.wide-marker + .vPoll {
    position: absolute;
    background: #FFF;
}
.position-marker.wide-marker[direction="0"] + .vPoll {
    margin-bottom: -5px; /* a little bit lower than arrow */
    margin-right: 15px; /* connect to arrow */
}
.position-marker.wide-marker[direction="2"] + .vPoll {
    margin-bottom: -5px; /* a little bit lower than arrow */
    margin-left: 15px;  /* connect to arrow */
}
.position-marker.wide-marker[direction="4"] + .vPoll {
    margin-top: -5px; /* a little bit lower than arrow */
    margin-left: 15px;  /* connect to arrow */
}
.position-marker.wide-marker[direction="6"] + .vPoll {
    margin-top: -5px; /* a little bit lower than arrow */
    margin-right: 15px;  /* connect to arrow */
}

/* narrow player marker */
.position-marker.narrow-marker {
    cursor: pointer;
    animation-name: zoomin;
    animation-iteration-count: 1;
    animation-duration: .5s
}

.position-marker.narrow-marker > .bubble {
    animation-name: bubble;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: .4s
}

@keyframes zoomin {
    0% { transform: scale(0); }
    60% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

@keyframes bubble {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}


/* cue point */
.videoPoll.cue-point {
    position: absolute;
    top: 0px;
    width: 2px;
    height: 100%;
    background-color: #FF0;
    margin-left: -2px;
    z-index: 2;
}

.vPoll-msg .msg, .vPoll-msg .note, .vPoll-msg .controls {
    margin-bottom: 10px;
}