:root{
   --primary-event-font : "adlery-pro", sans-serif;
   --secondary-event-font : "neue-haas-grotesk-display", Sans-serif;
   --text-event-font : "freight-neo-pro", sans-serif;
}

/* Elementor Get Events Widget - Styles personnalisés */
#events-list-filters{
   position: relative;
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
   gap : 1rem;
   margin-top : 1rem;
   margin-bottom : 1rem;
   justify-content: space-between;
   z-index: 1;
}

#events-list-filters #event-month-selector{
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
   gap : 1rem;
   width: 100%;
   justify-content: space-between;
}

#events-list-filters #event-current-month{
   font-family: var(--primary-event-font);
   text-transform: capitalize;
   font-size: 1.5rem;
   font-weight: 400;
   color : var(--e-global-color-secondary);
}

#events-list-filters #event-navigation{
   display: flex;
   align-items: center;
}

#events-list-filters #event-navigation span{
   position: relative;
   padding : 1rem;
   cursor: pointer;
}

#events-list-filters #event-navigation span:after{
   content : "";
   position : absolute;
   width : 3rem;
   height : 3rem;
   color: var(--e-global-color-secondary);
   background-color: var(--e-global-color-1d512c3);
   transition : all .3s ease;
   top : 50%;
   left : 50%;
   border-radius: 50%;
   transform: translate(-50%, -55%);
   opacity: 0.5;
   transition: .3s all ease;
   z-index: -1;
}

#events-list-filters #event-navigation span:hover:after,
#events-list-filters #event-navigation span:focus:after{
   opacity: 1;
}

#events-list-filters #event-navigation span svg{
   width: 2rem;
}

#events-list-filters #event-navigation #event-previous-month.disabled,
#events-list-filters #event-navigation #event-next-month.disabled {
    opacity: .3;
    pointer-events: none;
    cursor: default;
}

#events-list-filters #event-navigation i:hover:after, #events-list-filters #event-navigation i:focus:after{
   background-color: rgba(0,0,0,.2);
}

/* Event cat selector */
#events-list-filters #event-cat-selector{
   position: relative;
   display: none;
}

#events-list-filters #event-cat-selector summary{
   list-style: none;
   list-style-type: none;
   cursor: pointer;
}

#events-list-filters #event-cat-selector summary a{
   display: flex;
   flex-wrap: nowrap;
   gap : 1rem;
   padding : .7rem 1rem;
   border-radius: 5px;
   border : 1px solid #eee;
   color : var(--e-global-color-secondary);
   align-items: center;
   transition: background-color .3s ease;
}

#events-list-filters #event-cat-selector summary a:hover, #events-list-filters #event-cat-selector summary a:focus{
   background-color : #eee;
}

#events-list-filters #event-cat-selector summary a:hover, #events-list-filters #event-cat-selector summary a svg{
   width: 2rem;
   fill : #fff;
}

#events-list-filters #event-cat-selector > summary::-webkit-details-marker {
   display: none;
}

 /* Close the dropdown with outside clicks */
 #events-list-filters #event-cat-selector > summary::before {
   display: none;
 }
 
 #events-list-filters #event-cat-selector[open] > summary::before {
     content: ' ';
     display: block;
     position: fixed;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     z-index: 1;
 }
 
#events-list-filters #event-cat-selector summary:focus {
   outline: none;
}
 
#events-list-filters #event-cat-selector summary:focus a.button {
   /*border: 2px solid white;*/
}
 
#events-list-filters #event-cat-selector summary:focus {
   outline: none;
}

#events-list-filters #event-cat-selector .event-cat-list {
   position: absolute;
   padding: 1rem;
   width: calc(var(--dropdown-width) * 1.5);
   right: 0;
   margin-left: calc((var(--dropdown-width) / 2) * -1);
   box-sizing: border-box;
   z-index: 2;
   background: var(--dropdown-background);
   border-radius: 6px;
   list-style: none;
   display: flex;
   flex-direction: column;
   border : 1px solid #eee;
 }


#events-list-filters #event-cat-selector .event-cat-item{
   position: relative;
   padding : .5rem .5rem .5rem 2rem;
   cursor: pointer;
}

#events-list-filters #event-cat-selector .event-cat-item:hover, #events-list-filters #event-cat-selector .event-cat-item:focus{
   background-color : #f9f9f9;
}

#events-list-filters #event-cat-selector .event-cat-item:before{
   content: "";
   position: absolute;
   width : 10px;
   height : 10px;
   background-color: var(--color);
   left : 10px;
   top : 50%;
   transform: translateY(-50%);
   border-radius: 50px;
}
 
#events-list{
   position: relative;
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   gap : 1rem;
   padding-left: 0.8rem;
   opacity : 1;
   transition: opacity .3s ease;
   overflow: hidden;
   padding: 0;
   padding-top: 0.5rem;
   z-index: 1;
}

#events-list.loading{
   opacity : .3;
}

#events-list #no-events{
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   gap : 1rem;
   border : 1px solid rgba(0,0,0,.2);
   color : rgba(0,0,0,.4);
   border-radius: 15px;
   padding : 4rem;
   justify-content: center;
   align-items: center;
   background-color: var(--e-global-color-1d512c3);
}

#events-list #no-events .no-event-wrapper{
   display: flex;
   flex-direction: column;
   gap: 2rem;
   justify-content: center;
   align-items: center;
   max-width : 300px;
   width : 90%;
   font-size: 1.3rem;
   font-weight : 200;
   text-align: center;
}

#events-list #no-events .no-event-wrapper svg{
   width: 4rem;
   display: block;
   margin: auto;
}

#events-list .event-item{
   display: flex;
   position: relative;
   flex-wrap: nowrap;
   width: 100%;
   padding : 2rem;
   background-color: var(--e-global-color-1d512c3);
   border-radius: 120px 80px 70px 50px;
   box-shadow : 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
   justify-content: space-between;
   align-items: center;
   gap : 1rem;
}

#events-list .event-item.passed{
   background-color: #f9f9f9;
}

#events-list .event-item:before{
   content : "";
   position: absolute;
   right : 100%;
   top : 0;
   height : 100%;
   width : 1.5rem;
   border-top-left-radius: 15px;
   border-bottom-left-radius: 15px;
   background-color: var(--bg-color);
   z-index: -1;
   transform: translateX(12px);
}

#events-list .event-item .date-box{
   display: flex;
   flex-direction: column;
   gap: .1rem;
   padding : 0 1.5rem 0 .5rem;
   align-items: center;
   justify-content: center;
   font-family: var(--text-event-font);
   max-height: 10rem;
}

#events-list .event-item .date-box.long-event{
   display: flex;
   flex-direction: column;
   gap: .1rem;
}

#events-list .event-item .date-box i{
   font-size: 0.6rem;
}

#events-list .event-item .event-image{
   position : relative;
   width : 10rem;
   max-height: 10rem;
   overflow: hidden;
   background-color: #efefef;
   aspect-ratio: 1 / 1;
   mask-image: url(../../../../../themes/teds-theme-main/assets/images/main-image-mask.svg) ;
   mask-position: center;
}

#events-list .event-item .event-image img{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   font-family: 'object-fit: cover;';
   object-position: center;
   min-height: 100%;
}

#events-list .event-item.passed .event-image img{
   -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

#events-list .event-item .event-image img.reyssouze-logo{
   left : 50%;
   width: 80%;
   object-fit: scale-down;
   font-family: 'object-fit: scale-down;';
   transform: translateX(-50%);
}

#events-list .event-item .event-infos{
   display: flex;
   flex-direction: column;
   gap : .7rem;
   width: 70%;
   padding : 0 1rem;
}

#events-list .event-item .event-infos .event-practical-infos{
   display: flex;
   flex-direction: column;
   gap : .5rem;
   font-weight: bold;
}

#events-list .event-item .event-infos .event-practical-infos > div{
   display: flex;
   gap : .3rem;
   color: var(--e-global-color-text);
   font-family: var(--e-global-typography-text-font-family), Sans-serif;
   font-size: 1rem;
}

#events-list .event-item .event-infos .event-practical-infos > .event-desc{
   flex-direction: column;
   opacity: .8;
   margin-top: 1rem;
   font-weight: normal;
   font-family: var(--secondary-event-font);
}

#events-list .event-item .event-infos .event-practical-infos > .event-desc.truncated {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;  
   overflow: hidden;
   position: relative;
}

.event-toggle {
  display: inline-block;
  margin-top: 8px;
  cursor: pointer;
  color: var(--e-global-color-accent);
  font-weight: bold;
}

#events-list .event-item .event-infos h3{
   color: var(--e-global-color-accent);
   font-family: var(--primary-event-font);
   font-size: 2rem;
   font-weight: normal;
   line-height: 1;
   margin: 0;
}

#events-list .event-item .event-infos h3 a{
   color: var(--e-global-color-accent);
   font-family: var(--primary-event-font);
   font-size: 2rem;
   font-weight: normal;
   letter-spacing: 0.2px;
}

#events-list .event-item .event-infos svg{
   width: 1rem;
   fill: var(--e-global-color-text);
}

#events-list .event-item .event-infos svg.icon-plus,
#events-list .event-item .event-infos svg.icon-minus{
   fill: var(--e-global-color-accent);
}

#events-list .event-item.passed .event-infos i, #events-list .event-item.passed .date-box .day, #events-list .event-item.passed .date-box .month, #events-list .event-item.passed .event-infos h3 a, #events-list .event-item.passed .event-infos .event-practical-infos > div{
   color: #7A7A7A;
}

#events-list .event-item .event-actions{
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-end;
   width : 10rem;
   height: 100%;
}

.event-button{
   font-weight: 400;
   color: #FFFFFF;
   background-color: var(--e-global-color-accent);
   padding: .5rem 2rem;
   border-radius: 5px;
   transition: all .3s ease;
   font-family: var(--secondary-event-font);
   border-radius: 170px 88px 126px 71px;
   border : 1px solid var(--e-global-color-accent);
}

.event-button:not(.complete):hover, .event-button:not(.complete):focus{
   background-color : var(--e-global-color-secondary);
   color : var(--e-global-color-accent);
}

.event-button.done{
   opacity: .5;
}

.event-know-more{
   font-weight: 400;
   color: var(--e-global-color-accent);
   padding: .5rem 2rem;
   border-radius: 5px;
   transition: all .3s ease;
   font-family: var(--secondary-event-font);
   font-weight: 500;
   border-radius: 170px 88px 126px 71px;
   border : 1px solid var(--e-global-color-accent);
}

.event-know-more:hover, .event-know-more:focus{
   background-color : #fff;
   color : var(--e-global-color-accent);
}

.single .event-button{
   padding: 1rem 3rem;
   font-size: 1.5rem;
}

.event-item .event-color{
   position: absolute;
   height : 100%;
   width : .75rem;
   top : 0;
   left : 0;
}

.event-item .event-image{
   height : 100%;
   background-size: cover!important;
   background-position: center;
}

.event-item .event-remained-tickets{
   font-family: var(--e-global-typography-text-font-family), Sans-serif;
   font-weight: 300;
}

.event-item .event-status-wrapper, .event-item .event-button{
   text-align: right;
}

.event-item .event-status{
   display: inline-block;
   font-family: var(--e-global-typography-text-font-family), Sans-serif;
   font-weight: 400;
   font-size: .8rem;
   padding : .2rem .8rem;
   text-align: center;
   background-color : rgba(0,0,0,.5);
   color: white;
   border-radius: 20px;
}

.event-item .event-status.open{
   background-color : var(--e-global-color-2f63fb7);
}

.event-item .event-status.open.disallowed{
   background-color : #69727d;
}

.event-item .event-status.close{
   background-color : var(--e-global-color-a139bd2);
}

.event-item.passed .event-status.close, .event-item.passed .event-status.open{
   background-color : #7a7a7a;
}



.event-item .date-box{
   line-height: 1.2;
}

#events-list .event-item .date-box .day{
   font-weight: 700;
   font-size: 2rem;
   color : var(--e-global-color-accent);
}

#events-list .event-item .date-box .month{
   font-size: 1rem;
   color : var(--e-global-color-accent);
}

.event-item .date-box .hour{
   width: 100%;
   display: block;
   color: rgba(0,0,0,.4);
}

#events-list .event-item.wrapped{
   align-items: stretch;
}

#events-list .event-item.wrapped > .event-wrapper{
   display: flex;
   padding: 0;
}

#events-list .event-item.wrapped > .event-wrapper:nth-child(1){
   width : 25%;
}

#events-list .event-item.wrapped > .event-wrapper.event-infos-wrapper{
   width : 75%;
   justify-content: space-between;
}

@media screen and (max-width:1200px){
   #events-list-filters{
      padding: 0rem 1.8rem;
   }

   #events-list{
      padding: 1rem 1.8rem;
   }
   
}

@media screen and (max-width:992px){
   #events-list .event-item.wrapped{
      height: auto;
   }

   #events-list .event-item.wrapped > .event-wrapper.event-infos-wrapper{
      flex-direction: column;
   }

   #events-list .event-item.wrapped  > .event-wrapper.event-infos-wrapper .event-infos {
      width: 100%;
   }

   #events-list .event-item.wrapped  > .event-wrapper.event-infos-wrapper .event-actions {
      flex-direction: row;
      justify-content: space-between;
      align-items:center ;
      width: 100%;
      padding: 0 1rem;
   }
}

@media screen and (max-width:768px){
   #events-list .event-item.wrapped{
      height: auto;
   }

   #events-list .event-item.wrapped > .event-wrapper {
      flex-direction: column;
      gap: 1rem;
  }

  #events-list .event-item.wrapped > .event-wrapper:nth-child(1){
      width : 15%;
   }
   
   #events-list .event-item.wrapped > .event-wrapper:nth-child(1) .event-image{
      width: 5rem;
      height: 5rem;
   }

   #events-list .event-item.wrapped > .event-wrapper.event-infos-wrapper{
      width : 85%;
   }
}

@media screen and (max-width:575px){
   #events-list .event-item.wrapped{
      flex-direction: column;
   }

   #events-list .event-item.wrapped > .event-wrapper:nth-child(1) {
      width: 100%;
      align-items: center;
      justify-content: flex-start;
   }

   #events-list .event-item.wrapped > .event-wrapper:nth-child(1) .date-box{
      order : 2;
   }

   #events-list .event-item.wrapped > .event-wrapper:nth-child(1) .event-image{
      order : 1;
   }

   #events-list .event-item.wrapped > .event-wrapper {
      flex-direction: row;
      justify-content: space-between;
   }

   #events-list .event-item.wrapped > .event-wrapper .event-infos{
      width: 100%;
      padding: 0;
   }

   #events-list .event-item.wrapped > .event-wrapper.event-infos-wrapper{
      width: 100%;
   }

   #events-list .event-item.wrapped > .event-wrapper.event-infos-wrapper .event-actions{
      width: 100%;
      padding: 0;
   }

   #events-list .event-item .event-actions .event-button {
      padding: 0.2rem 0.7rem;
      font-size: .8rem;
  }
}