/*.event-list {
    @import "C:/Projects/SC-FFB/creativeexchange/ffbatiment/-/media/Themes/FFB/ffbatiment/FFBatiment/sass/base/richtext/_richtext-files-icons.scss";
@import "C:/Projects/SC-FFB/creativeexchange/ffbatiment/-/media/Themes/FFB/ffbatiment/FFBatiment/sass/base/richtext/_richtext.scss";

    background: $event-list-bg;
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @include border-basic(bottom, $event-list-title-border);
    }
    ul {
        margin: $small-margin 0;
    }
    li {
        @include border-basic();
        @extend %eventWrapper;
        margin-left: 0;
        box-sizing: border-box;
        padding: 15px 15px 40px 15px;
        position: relative;
        margin: $small-margin 0;
        >.scLooseFrameZone {
            @extend %eventWrapper;
            >.scEmptyPlaceholder {
                flex-basis: 100%;
            }
        }
    }
    .event-list-time {
        .scWebEditInput {
            display: inline;
        }
        order: 1;
        flex-grow: 1;
        font-weight: bold;
        min-width: 115px;
        max-width: 20%;
    }
    .event-list-info {
        order: 1;
        flex-grow: 2;
        margin: 0 15px;
        max-width: 75%;
    }
    .event-list-name {
        font-size: 16px;
        font-weight: bold;
    }
    .event-list-place,
    .event-list-link {
        position: absolute;
        bottom: 5px;
        padding-left: 15px;
        &:before {
            @include fa-icon();
            transform: translateY(-50%);
            position: absolute;
            top: 50%;
            left: 0;
        }
    }
    .event-list-place {
        left: 10px;
        &:before {
            content: $fa-var-map-marker;
        }
    }
    .event-list-link {
        right: 10px;
        a {
            font-size: 1em;
            color: $link-text-color;
            &:hover {
                color: $link-text-color-active;
                text-decoration: none;
                border-bottom: 1px solid $link-border;
            }
        }
        &:before {
            content: $fa-var-calendar-o;
        }
    }
    .scWebEditInput {
        @include opensans-font-stack();
    }
}*/
.event-list .event-temp {
  display: none;
}

.event-list .swiper-container-vertical {
  position: relative;
}

.event-list .swiper-container-vertical .swiper-wrapper {
  max-height: 400px;
}

.event-list .swiper-container-vertical .swiper-nav {
  float: left;
  position: relative;
  margin-left: -1px;
  padding: 48px 0 0 0;
}

.event-list .swiper-container-vertical::before {
  content: "";
  height: 80px;
  width: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(50%, white));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 50%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 50%);
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  mix-blend-mode: hard-light;
}

.component.secondary-bg .event-list .swiper-container-vertical::before {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(50%, #F9F9F9));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #F9F9F9 50%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #F9F9F9 50%);
}

.event-list .swiper-container-vertical.reach-end::before {
  opacity: 0;
  pointer-events: none;
}

.event-list ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

.event-list ul li {
  position: relative;
}

.event-list ul li .event-container {
  padding: 0px 40px 48px 40px;
  text-decoration: none;
  position: relative;
}

.event-list ul li .event-container .date {
  display: block;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #86929D;
}

.event-list ul li .event-container .date > div {
  display: inline-block;
}

.event-list ul li .event-container .date > div:first-child {
  margin-right: 6px;
}

.event-list ul li .event-container .sort {
  display: block;
  font-size: 14px;
  line-height: 23px;
  color: #86929D;
}

.event-list ul li .event-container .title {
  display: block;
  font-size: 24px;
  line-height: 30px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 600;
  color: #434B52;
  margin-bottom: 4px;
  -webkit-transition: 0.2s ease, font-size 0s ease, line-height 0s ease;
  transition: 0.2s ease, font-size 0s ease, line-height 0s ease;
}

.event-list ul li .event-container .location {
  display: block;
  font-size: 16px;
  line-height: 18px;
  color: #434B52;
}

.event-list ul li .event-container .link {
  position: absolute;
  left: 0px;
  top: 0px;
  font-size: 0px;
  width: 100%;
  height: 100%;
}

.event-list ul li .event-container .link a {
  width: 100%;
  height: 100%;
  text-decoration: none;
  border: none;
}

.event-list ul li .event-container:hover .title {
  color: #9BCF10;
}

.event-list ul li .event-container:hover:before, .event-list ul li .event-container:hover:after {
  border-color: #9BCF10;
}

.event-list ul li .event-container:active .title {
  color: #80AD07;
}

.event-list ul li .event-container:before, .event-list ul li .event-container:after {
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  border-right: 2px solid;
  content: "";
  display: block;
  height: 16px;
  margin-top: -12px;
  position: absolute;
  -webkit-transform: rotate(130deg);
  -ms-transform: rotate(130deg);
  transform: rotate(130deg);
  right: 20px;
  top: 50%;
  width: 0;
  border-color: #317FCB;
}

.event-list ul li .event-container:after {
  margin-top: -2px;
  -webkit-transform: rotate(50deg);
  -ms-transform: rotate(50deg);
  transform: rotate(50deg);
}

.event-list ul li::before {
  content: "";
  width: 2px;
  height: 100%;
  background-color: #E7E9EB;
  position: absolute;
  left: 11px;
  top: 0px;
  opacity: 0.8;
}

.event-list ul li::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 4px solid #317FCB;
  border-radius: 50%;
  background-color: #F9F9F9;
  position: absolute;
  top: 0px;
  left: 0px;
  -webkit-transition: 0.2s ease, font-size 0s ease, line-height 0s ease;
  transition: 0.2s ease, font-size 0s ease, line-height 0s ease;
  pointer-events: none;
}

.event-list ul li:hover:after {
  border: 4px solid #9BCF10;
}

.event-list ul li.event-target:not(:hover):after {
  border: 4px solid #80AD07;
}

.event-list ul li.event-target:not(:hover) .event-container .title {
  color: #80AD07;
}

.event-list ul li.event-target:not(:hover) .event-container:before, .event-list ul li.event-target:not(:hover) .event-container:after {
  border-color: #80AD07;
}

body.on-page-editor .event-list ul li .event-container .link {
  display: block;
  position: relative;
  left: inherit;
  top: inherit;
  font-size: inherit;
  width: inherit;
  height: inherit;
}
