#title{
  font-size:72px;
  /*color:#9ed8d5;*/
  text-align:center;
  font-family: 'Do Hyeon', sans-serif;
  padding-top:20px;
}

.alert-bar{
  width:100%;
  border-bottom-width:1px;
  border-bottom-style:solid;
  height:40px;
  text-align:center;
  font-size:32px;
  line-height:40px;
  vertical-align:middle;
  position:fixed;
  z-index:25;
}

.alert-close{
  cursor:pointer;
  display:inline-block;
  font-size:24px;
  line-height:40px;
  float:right;
  margin: 1px 6px;
  vertical-align: middle;
}

.stream{
  /*Should be 300px wide*/
  border-width:1px;
  /*border-color:white;*/
  border-style:solid;
  padding:1px 5px 5px 5px;
  margin:19px;
  position:relative;
  display:inline-block;
  width:250px;
  height:230px;
  overflow:hidden;
  vertical-align:bottom;
}

.stream_logo{
  float:left;
  display:inline-block;
}
.stream_logo img{
  padding:5px 3px 5px 0;
  width:60px;
  height:60px;
  border-radius:50%;
}
.stream_user{
  padding-bottom:2px;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
.stream_game{
  overflow-x: hidden;
  text-overflow: ellipsis;
}

#report_underlay{
  display:none;
  position:fixed;
  top:-10%;
  left:-10%;
  width:120%;
  height:120%;
  background-color:rgba(0,0,0,0.4);
  z-index:30;
}

#report_overlay{
  max-width:100vw;
  max-height:100vh;
  display:none;
  position:fixed;
  background-color:#000000;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:50;
  padding:20px 20px 40px 20px;
  border-width:1px;
  border-style:solid;
  border-color:#FFFFFF;
}

#report_overlay .title {
  text-align: center;
}

#report_user{
  font-size:1.4em;
  padding-bottom:8px;
}

#report_selection{
    padding: 0 20px;
}

#report_submit{
  font-size:24px;
  border-radius:4px;
  border-style:solid;
  border-color:black;
  border-width:1px;
  padding:4px 8px;
  color:black;
  display:inline-block;
  cursor:pointer;
  bottom:5px;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  margin-bottom:8px;
}

.stream_report{
  display:none;/*TODO: Remove this when reports are live*/
  /*width:110px;*/
  color:orange;
  padding:6px 6px 6px 2px;
}
.stream_report > div{
  display:inline-block;
  opacity:0;
  padding-left:6px;
}
.stream_report:hover > div{

  opacity:1;
}

.stream_top_overlay{
  height:70px;
}

.stream_preview{
  width:250px;
  height:140px;
  position:relative;
}

.stream_preview img{
  position:absolute;
  left:0px;
  bottom:0px;
}

.stream_viewers{
  color:#DD3333;
  text-shadow: 1px 1px 0 #000;
  float:left;
  padding-left:2px;
}
.stream_time{
  float:right;
  text-shadow: 1px 1px 0 #000;
  padding-right:2px;
}

.stream_bottom_overlay{
  position:absolute;
  width:100%;
  bottom:0px;
  padding-bottom:2px;
  padding-top:10px;
  background-image: linear-gradient(to bottom , rgba(0,0,0,0), rgba(0,0,0,0.6), rgba(0,0,0,0.8), rgba(0,0,0,0.8));
}

.stream_div{
  position:absolute;
  bottom:4px;
}

#sort_streams{
  height:70px;
  width:95%;
  /*border-bottom-color:white;*/
  border-bottom-width:1px;
  border-bottom-style:solid;
  margin: 15px auto 25px auto;
  padding:10px 10px 20px 10px;
  vertical-align:top;
  white-space:nowrap;
}

.sort{
  cursor:pointer;
}

.sort i{
  padding-right:4px;
}

.tag_wrapper{
  padding-top:4px;
  white-space:normal;
  width:calc( 100% - 200px );
}

#sort_order{
  display:inline-block;
  margin-right:30px;
  vertical-align:top;
}

#sort_direction{
  display:inline-block;
}
#sort_direction i{
  cursor:pointer;
  font-size:24px;
}

#stream_html{
  width:width:calc(100% - 40px);
  margin: 0 20px;
  margin-bottom: 50px;
}