.engagementWidget {
    min-height: 400px;
    position: relative;
}

.engagementWidget .scrollingContainer {
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2;
    position: relative;
}

.engagementWidget .chartGradient {
    border-bottom: none; /*border shown above navigation instead*/
}


.engagementWidget .panningContainer {}

.engagementWidget .studentList {
    height: auto;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top:-2px;
    min-height: 100%;
    float: left;
    clear: none;
    overflow: visible;
    transition: width 200ms, padding 200ms, opacity 200ms;
    box-sizing: border-box;
    overflow: hidden;
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, #F4F6F9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,#F4F6F9));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,#F4F6F9 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,#F4F6F9 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,#F4F6F9 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,#F4F6F9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(255,255,255,1)', endColorstr='#F4F6F9',GradientType=0 );
}

.engagementWidget.IE .chartSVG {
 margin-right:-20px;
}

.engagementWidget .studentList li {
    list-style: none;
    white-space: nowrap;
    font-weight: 300;
    cursor: pointer;
    padding-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.engagementWidget .studentList li.highlight {
    font-weight: 600;
}

.engagementWidget .navigationContainer .topicLabelHider {
    position: relative;
    top: 6px;
    left: 0;
/*    background-color: #FFF;*/
    z-index: 3;
    background: -moz-linear-gradient(left,  rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(90%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 90%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left,  rgba(255,255,255,1) 90%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left,  rgba(255,255,255,1) 90%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right,  rgba(255,255,255,1) 90%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );


}
.engagementWidget svg {
    float: left;
    clear: none;
    box-sizing: border-box;
}

.engagementWidget circle.studentScore {
    fill: #1C8BF1;
    transition: opacity 400ms;
    opacity: 0.6;
    stroke: #666;
    cursor: pointer;
    stroke-width: 0px;
}
.engagementWidget circle.studentScore.notApplicable {
    fill: #ccc;
}
.engagementWidget text.notApplicable {
    fill: #ccc !important;
    font-weight: 300 !important;
}

.engagementWidget g.student.highlight circle.studentScore {
    fill: #3B64C4;
    opacity: 0.8;
}
.engagementWidget g.student.highlight
circle.studentScore.notApplicable {
    opacity: 0;
    fill: #ccc;
}

.engagementWidget text {
    text-anchor: middle;
}

.engagementWidget text.studentName {
    transform: translate(20px, -5px);
    text-transform: capitalize;
}

.engagementWidget text.studentName.faceOnBottom {
    transform: translate(22px, 65px);
}
/*===STUDENTS====*/

.engagementWidget g.student {
    cursor: pointer;
}

.engagementWidget g.student.filterOut {
    opacity: 0;
    display: none;
}

.engagementWidget g.student.filterIn circle {
    opacity: 0.9;
}
/* score label */

.engagementWidget text.scoreLabel {
    fill: #333;
    opacity: 0;
    pointer-events: none;
    font-weight: 600;
}

.engagementWidget text.scoreLabel.fadeIn {
    opacity: 1;
}

.engagementWidget .topicBg {
    fill: #fff;
    opacity: 0;
    transition: fill 200ms;
}

.engagementWidget .header .topicBg {
    stroke: #ccc;
    stroke-width: 1px;
    opacity: 1;
}

.engagementWidget circle.circleBg {
    fill: none;
}

.engagementWidget g.topic {
    opacity: 1;
    transition: opacity 800ms 400ms, transform 400ms 400ms;
}

.engagementWidget g.topic.unselected {
    transition: opacity 200ms 0ms;
    opacity: 0;
}

.engagementWidget g.topic.header rect.topicBg {
    fill: #eee;
}

.engagementWidget g.topic g.face {
    transform: translate(-22px, -70px);
}

.engagementWidget g.topic g.face.faceOnBottom {
    transform: translate(-22px, 22px);
}

.engagementWidget g.topic image.face {
    clip-path: url(#faceMask);
}
.widget .prevArrow {
    margin-left:0px;
}
#redGreenGradient stop.green {
    stop-color: rgb(0, 255, 0);
    stop-opacity: 0.6;
}

#redGreenGradient stop.red {
    stop-color: rgb(255, 0, 0);
    stop-opacity: 0.6;
}

div.caret {
    display: block;
    position: absolute;
    left: 46px;
    transform: rotateX(180deg);
    border-top: 8px solid #ccc;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    pointer-events: none;
}

.cursorGrab {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
}

.engagementCaption {
  text-align: center;
  font-size: 20px;
  margin-top: -20px;
  margin-bottom: 50px;
}