/*Top bar is 64px*/
h1, h2, h3, h4, p, a{
    color: #1565C0;
}
h2{
  margin-left: 24px;
}
.images{
  background-color:snow;
  height:100px;
  color: #1764c0;
  font-size:16px;
  font-family:'Roboto';
  font-weight: 300;
  text-align:center;
  line-height:100px;
  display:block;
  overflow-x: scroll;
  white-space: nowrap;
}
.activation-photo{
  height:90px;
  margin:5px;
  width: 80px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: inline-block;
}
.container{
  height: 100%;
  top: 64px;
  position: relative;
  bottom:0;
}
.row{
  width: 100%;
  display: flex;
}
.col{
  flex:1;
  padding: 0 8px;
}
.emotion .bar{
  content: '';
  position: absolute;
  height: 2px;
  width:0px;
  background-color: #1565C0;
  transition: 2s;
  top: 0;
  left: 0;
}

#overall-report{
  overflow:visible;
}
.sentiment{
  width: 100%;
  overflow: scroll;
  margin-bottom:16px;
  background-color: rgba(255, 255, 255, 0.35);

}
.sentiment h2{
  font-size:20px;
  font-weight: 400;
  text-align: left;
}

.interaction-stats h2{
  font-size:20px;
  font-weight: 400;
  text-align: left;
}

.summary-block p {
  font-size:16px;
  padding:0px 24px;
}

.summary h2{
  font-size:20px;
  font-weight: 400;
  text-align: left;
}

.stat{
  /* border:1px solid gray; */
  border-radius: 4px;
  background-color: white;
  -webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.22);
-moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.22);
box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.22);
}

#deployment-report{
  overflow: visible;
}
.comments{
  width: 100%;
  overflow: scroll;
  margin-bottom:16px;
  background-color: rgba(255, 255, 255, 0.35);
}
.comment{
  padding: 8px 24px;
  font-family: 'Roboto';
  color: #1565C0;
}
.leaderboard-entry{
  margin:4px 20px;
  width:calc(100% - 40px);
  position: relative;
  display: inline-block;
  height: 35px;
  opacity: 0.9;
  transition: 0.8s;
}
.leaderboard{
  background-color: rgba(255, 255, 255, 0.35);
}
.leaderboard:hover .leaderboard-entry{
  opacity:1;
}
.leaderboard:hover .leaderboard-entry-bar{
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.4);
width:100% !important;
}
.leaderboard:hover .leaderboard-entry-count{
opacity:1 !important;
transition-delay:0.5s;
}
.leaderboard-entry-bar{
  transition: 0.5s;
  transition-timing-function: ease-out;
  width:0%;
  height:35px;
  border-bottom-right-radius: 35px;
  border-top-right-radius: 35px;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  background-color:#1565C0;
  overflow: hidden;
  position: absolute;
  z-index: 2;
  box-shadow: 0px 1px 30px rgba(0, 0, 0, 0.1);
}
.leaderboard-entry-title-cut{
  margin:0;
  padding-left:10px;
  width:100%;
  line-height:35px;
  color:white;
  font-weight:400;
  white-space: nowrap;
}
.leaderboard-entry-title{
  margin:0;
  padding-left:10px;
  width:100%;
  line-height:35px;
  color:#1565C0;
  font-weight:400;
  position: absolute;
  z-index: 1;
}
.leaderboard-entry-count{
    float: right;
    text-align: right;
    margin: 0;
    right: 0;
    line-height: 35px;
    color: #1565C0;
    font-weight: 400;
    position: absolute;
    z-index: 3;
    font-size: 12px;
    background-color: white;
    border-radius: 35px;
    padding: 0px 10px;
    opacity: 0;
    transition:0.5s;

}

.top-bar{
  position: absolute;
  margin:0px;
  padding: 0px 18px;
  background-color:white;
}
.top-bar a{
  font-family:'Roboto';
  font-size: 16px;
    padding: 0px 8px;
    text-decoration: none;
}
.top-bar.right{
  position: absolute;
  right:0;
  margin:0px;
  padding: 0px 18px;
  background-color:white;
}
.top-bar.right a{
    text-decoration: underline !important;
}
.box{
  width:66px;
  height:66px;
  position: absolute;
  background: whitesmoke;
  top:0;
  left:0;
  z-index:-1;
}

.top-bar>h2{
  margin: 0;
  line-height: 6vmin;
  font-size: 3vmin;
  font-weight: 400;
  display: inline-flex;
  vertical-align: middle;
}

.reportHeader{
  font-family:'Roboto';
  padding: 32px;
  font-weight: 300;
  font-size:6vmin;
  flex:1;
  opacity: 0;
}

.interactionsHeader{
  font-family:'Roboto';
  text-align: center;
  font-weight: 300;
  font-size:6vmin;
  flex:1;
  opacity: 0;
}
.interactionsHeader>.count{
  font-family:'Roboto';
  font-weight: 400;
  font-size:8vmin;
}