@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800&subset=latin-ext");

html, .widget-EventList li > div {
    transform: rotateX($rotate_x) rotateY($rotate_y);
}

.widget-EventList {
    font-weight: 800;
    font-size: 14px;
    font-family: "Open Sans";
    overflow: hidden;
    color: #fff;
    list-style: none;
    padding: 0;
    text-transform: uppercase;
    position: relative;
    background: $background;
    transform: rotate(180deg);
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 10px;
}

.widget-EventList, .widget-EventList * {
    box-sizing: border-box;
}

.widget-EventList li {
    transform: rotate(-180deg);
    overflow: hidden;
    margin-bottom: 0.1em;
}

.widget-EventList li > div:last-child {
    /*padding: 0 10px;*/
    height: 60px;
  line-height:60px;
  width:300px;
    overflow: hidden;
    position: relative;
    z-index: 10;
    text-align: right;
    display: inline-block;
    float: right;
    white-space: nowrap;
  padding-right:10px;
  position:relative;
  left:0
}

.widget-EventList .tag {
    float: right;
    margin: 0 0.25em;
    display: inline-block;
}

.widget-EventList .message {
    float: right;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 0.25em;
    display: inline-block;
}

.widget-EventList li:first-child div:last-child {
    background: rgba(3,3,3,0.8);
    color: #fff;
}

.widget-EventList li:nth-child(2) div:last-child {
    color: #fff;
}

.widget-EventList li:nth-child(3) div:last-child {
    color: #fff;
}

.widget-EventList li > div:last-child {
    animation: grow 0.5s forwards;
    -webkit-animation: grow 0.5s forwards;
}

.widget-EventList li:nth-child(n+ $max_events ) {
    animation: fadeOut 1.5s forwards;
    -webkit-animation: fadeOut 1.5s forwards;
}

@keyframes grow {
    0% {
        left: 330px;
        padding-top: 0;
        padding-bottom: 0;
    }
}

@-webkit-keyframes grow {
    0% {
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}
.widget-EventList li.twitch-follow > div:before {background:url(http://overlay.zmsk.pl/buttons/follow.png)center center no-repeat;position:absolute;content:'';top:0;bottom:0;margin:auto;height:56px;left:5px;;width:57px;z-index:999;display:block;}
.widget-EventList li.twitch-host > div:before {background:url(http://overlay.zmsk.pl/buttons/host.png)center center no-repeat;position:absolute;content:'';top:0;bottom:0;margin:auto;height:56px;left:5px;;width:57px;z-index:999;display:block;}
.widget-EventList li.donation > div:before {background:url(http://overlay.zmsk.pl/buttons/donate.png)center center no-repeat;position:absolute;content:'';top:0;bottom:0;margin:auto;height:56px;left:5px;;width:57px;z-index:999;display:block;}