@import "_colors";

#dateForm{
  .dateField{
    display:none;
  }
}
 
.orderString{
  display:block;
  color:#666; 
  text-align:center;
  text-transform:uppercase;
  font-style: italic;
  padding:20px;
  padding-left:10px;
  padding-right:10px;

}

.featuredLoader{
  display:grid;
  grid-template-columns:repeat(8,280px);
  grid-column-gap:10px;
  column-gap:10px;
  height:363px;
  
  overflow-x:hidden;
  
  div{
    display:inline-block;
    background-color:#ececec;
    border-radius:20px;
    margin-right:10px;
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;

    .gloss{
      display:block;
      height:600px;
      position:absolute;
      top:-100px;
      left:0px;
      transform:rotate(20deg);
      width:150px;
      background:linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent);
      animation:glossAnimate 1.2s linear infinite;
    }

    @keyframes glossAnimate{
      0%{
        left:-100%;
      }
      100%{
        left:120%;
      }
      
    }
  }

}
 
.dateHeader, .dateHeaderNoStick{
  margin:0px;  
  padding:0px;
 

  color:#fff;
  display:block;


  //margin-top:60px;
  //margin-bottom:20px;
  position:relative;
  height:0px;
  vertical-align:top;


  @media screen and (min-width:600px){
    border-top:0px;

    &.featured{
      margin-left:1px;
      .dateText{
  
        border-top-left-radius:10px;

      }
    }
  }

  @media screen and (min-width:800px){
    &.featured .dateText{
      font-size:24px;
      //width:350px;
    }
  }

  @media screen and (max-width:799px){
    &.featured .dateText{
      font-size:16px;
      
    }
  }


 .dateText{ 
    vertical-align:top; 
    background-color:#fff;
    background-size: 130%;
    width:90px;
    border-bottom-right-radius:20px;
    line-height:30px;
    height:90px;

    white-space:nowrap;
    overflow:hidden;
    text-align:center;
    display:inline-block;
    text-transform:uppercase;
    font-size:30px; 

    small{
      display:block;
      font-size:12px;
      text-align:center;
    }

    @media screen and (min-width:900px){
    //  font-size:16px;
     // width:350px;

    }

    @media screen and (max-width:360px){
 //     width:180px !important;
    }
  }
}

.filterCount{
  width:20px;
  height:20px;
  background-color:$color_orange;
  border-radius:10px;
  line-height:20px;
  color:#fff;
  font-size:12px;
  text-align:center;
  display:none;
}

.viewButton{

}

.headerButtons{
  display:none;
  text-align:center;
  margin-left:auto;
  margin-right:auto;


  @media screen and (min-width:768px){
    text-align:right;
    display:none;
  }

}



.eventsList{
  margin-bottom:50px;
  padding-bottom:150px;
  //min-height:100vh; 
  border-top:1px solid #ececec;
  position:relative;
  
}

.eventsList, .eventsListFeatured{
  background-color:#fff;

  margin-left:auto;
  margin-right:auto;
  display:block;

  border-bottom:1px solid #ececec;

  @media screen and (min-width:768px){
    border-radius:10px;
    border-left:1px solid #ececec;
    border-right:1px solid #ececec;
    //overflow:hidden;
  }



  

  .dateHeaderButtons{
    width:100%;
    text-align:right;
    z-index:1;
    position:sticky;
    //left:auto;
    top:50px;

    @media screen and (max-width:768px){
      top:64px;
    }
    

    .dateHeaderButtonText{
      transition:width 0.3s ease-in-out;
      width:fit-content;
      overflow:hidden;
      display:inline-block;
      vertical-align:middle;
    }

    svg{
      transition:margin 0.3s ease-in-out;
    }

    .dateHeaderButton{
      transition:width 0.3s linear;
      white-space: nowrap;
      overflow:hidden;

      &.filterButton{
        width:120px;
      }

      &.calendarButton{
        width:180px;
      }
    }

    &.stick{

      @media screen and (max-width:500px){
        .dateHeaderButton{
          transition:width 0.3s linear;
          width:62px;
        }

        
          
      }
      
    }

    .dateHeaderButton{
      display:inline-block;
      padding:10px;
      background-color:#fff;
      
      padding-left:20px;
      padding-right:20px;
      height:46px;
      font-size:12px;
      text-transform:uppercase;
      vertical-align:top;
      font-weight:normal;
      line-height:26px;
      cursor:pointer;
      position:relative;
      margin:5px;
      border-radius:20px;
      background-color:$color_purple;
      color:#fff;
      z-index:3;

      svg{
        width:26px;
        display:inline-block;
        vertical-align: top;
        transition:transform 0.3s ease-in-out;
        transform-origin:center right;
        margin-right:12px;
      }

      @media screen and (max-width:768px){
        .filterCount{
          position:absolute;
          bottom:5px;
          right:5px;
        }
      }

      @media screen and (min-width:768px){
        .filterCount{
          position:absolute;
          bottom:10px;
          right:0px;
        }
      }


      @media screen and (max-width:500px){
        .dateHeaderButtonText{
    //      display:none;
        }

        svg{
        //  margin-right:0px;
        }
      }


      &:hover{
        svg{
          transform:scale(1.1);
        }
      }

      .filterCount{
        position:absolute;
        bottom:5px;
        right:5px;
      }

      @media screen and (max-width:500px){
        .dateHeaderButtonText{
    //      display:none;
        }

        svg{
    //      margin-right:0px;
        }
      }


      &:hover{
        svg{
          transform:scale(1.1);
        }
      }
    }
  }

  
.dateSpacer{
  display:block;
  clear:both;
  height:60px;
}

  .dateHeader{
    margin:0px;
    padding:0px;
    clear:both;

    color:#fff;
    display:block;


    //margin-top:60px;
    //margin-bottom:20px;
    position:sticky;
    top:70px;
    height:0px;
    vertical-align:top;
    z-index:1;

    &:first-of-type{
      margin-top:0px;
    }


  

    &.stick{
   
      z-index:0 !important;
    }

    .dateText{
      vertical-align:top;
      background:#fff;
      background-size: 130%;
      width:50px;
      border-bottom-right-radius:20px;
      line-height:30px;
      height:90px;
      float:left;
      padding-top:20px;
      color:$color_purple;
      text-align:center;
      display:inline-block;
      text-transform:uppercase;
      z-index:1;
      
      .smallText{
        display:block;
        line-height:30px;
      }

      .bigText{
        display:none;
        line-height:30px;
      }
      @media screen and (min-width:700px){
        width:90px;
        .smallText{
          display:none;
        }
  
        .bigText{
          display:block;
        }
      }


    }
    @media screen and (min-width:700px){
      top:50px;
    }

    &.stick{
      position:fixed;
      width:100%;
      left:0px;
      margin-top:0px;
      margin-bottom:0px;
      //background-color:#fff;
      //border-bottom:1px solid #ececec;
      border-top:0px;
      z-index:0;
      .dateText{
        border-top-left-radius:0px;
      }






    }
  }

  .noListings{
    display:flex;
    padding:20px;
    justify-content:center;
    align-items:center;
    min-height:36vh;
    flex-direction:column;

    svg{
      width:60px;
      color:#ccc;
      margin-left:auto;
      margin-right:auto;
      display:block;
    }

    span{
      display:block;
      text-align:center;
      color:#ccc;
      font-size:18px;
      padding:10px;
    }
  }

  .event{
    display:block;
    position:relative;
    padding:20px;
    overflow:hidden;
    font-size:16px;
    
    z-index:0;
    user-select:none;
    margin-left:50px;
    margin-right:auto;
    text-decoration:none;
    color:#000;

    @media screen and (min-width:700px){
      margin-left:90px;
    }

    @media screen and (max-width:600px){
      padding:5px;
      border-top-left-radius:20px;
      border-bottom-left-radius:20px;
    }

    &.featured{
      margin-top:6px;

      .eventHolder{
        max-width:500px;
        margin-left:auto;
        margin-right:auto;
      }
    }

    .featuredLabel{
      display:block;
      margin-right:auto;
      width:-webkit-fit-content;
      width:fit-content;
      font-size:12px;
      background-color:$color_purple;
      color:#fff;
      border-radius:4px;
      padding:4px;
      line-height:12px;

      font-weight:bold;
      text-transform:uppercase;
      margin-bottom:5px;

    }

    .userListing{
      margin-left:20px;
      font-size:14px;
      .edit{
        position:absolute;
        top:0px;
        right:0px;
        padding:12px;
        padding-top:6px;
        padding-bottom:6px;
        background-color:#ececec;
        color:$color_purple; 
        font-weight:bold;
        border-left:1px solid #ececec;
        border-bottom:1px solid #ececec;
        border-bottom-left-radius:20px;
        text-decoration:none;

        &:hover{
          background-color:$color_purple;
          color:#fff;
        }
      }

      .statusBar{
        display:block;
        padding:5px;
        border-bottom-left-radius:20px;
        padding-left:20px;
        
        text-transform:uppercase;
        line-height:1.4em;
        text-align:left;

        svg{
          display:inline-block;
          width:16px;
          
        }

        a{
          font-weight:bold;
          font-size:14px;
        }

        &.active{
          background-color:#e8f5e9;
        }

        &.paused{
          background-color:#fff3e0;
        }

        &.pending{
          background-color:#fffde7;
        }
      }

      @media screen and (max-width:768px){
        margin-left:0px;
        font-size:12px;
        

        .statusBar{
          padding-right:100px;
          text-align:center;
          
          border-bottom-left-radius: 0px;
          a{
            text-align:center;
            display:block;
          }
        }
      
      }
    }


    .eventbg{
      display:none;
      z-index:0;
    }

    .eventDate{
      position:absolute;
      display:flex;
      background:#184787;
      color:#fff;
      border-top-left-radius:20px;
      border-bottom-right-radius:20px;
      width:60px;
      height:60px;
      align-items:center;
      justify-content: center;
      left:0px;
      top:0px;
      padding:10px;
      text-align:center;
      text-transform:uppercase;
      font-weight:bold;
      font-size:20px;
      line-height:20px;


      .eventDateHolder{
        display:inline-block;
        line-height:1em;
        span.day{
          font-size:10px;
          display:block;
          line-height:10px;

          i{
            font-weight:normal;
            font-style:normal;
          }

        }
      }

    }

    &.showImage{


      padding-left:0px !important;
      padding-right:0px !important;

      @media screen and (min-width:600px){
        .eventHolder{
          .eventDetails{
            padding-left:120px;
          }
          
        }


        .eventImage{
          position:absolute;
          left:10px;
          border:1px solid #ececec;
          top:10px;
          width:120px;
          aspect-ratio:3/2;
          background-color:#ececec;
          overflow:hidden;
          border-top-left-radius:18px;
          border-bottom-right-radius:18px;

          img{
            width:100%;
            height:100%;
            object-fit:cover;
            display:block;
          }

        }
      }
    }

    table.eventTimes{

      border-collapse:collapse;
      margin:0px;
      padding:0px;
      font-size:13px;

      td{
        padding:4px;
        padding-left:0px;
        padding-right:10px;
        border-bottom:1px solid #ececec;


      }

      tr:first-child{
        td{
      //    border-top:1px solid #ececec;
        }
      }


      tr:last-child{
        td{
          border-bottom:0px;
        }
      }
    }

    .eventHolder{
      position:relative;
      overflow:hidden;
      z-index:1;
      cursor:pointer;

      display:block;
      border-radius:20px;
      background-color:#fcfcfc;
      box-shadow:0px 2px 5px rgba(0,0,0,0.1);
      border:1px solid #ececec;

      transition:all 0.3s ease-in-out;

      &:hover{
 //       transform:scale(1.02) translateY(-3px);
 //       box-shadow:0px 6px 6px rgba(0,0,0,0.2);

      }

      .text{
        padding:20px;
      }

      h3{
        margin:0px;
        padding:0px;
        line-height:1.2em;

        @media screen and (max-width:600px){
          font-size:1em;
        }



        a{
          text-decoration:none;
          color:#000;
          line-height:1.2em;
        }

      }

      &.standardListing{
        .eventImage{
          width:130px;
          height:100%;
          overflow:hidden;
          border-top-left-radius:20px;
          border-bottom-left-radius:20px;

          @media screen and (max-width:600px){
            width:100px;
          }

          img.main{
            width:100%;
            height:100%;
            display:block;
            object-fit:contain;
            object-position:center center;
            position:relative;
            z-index:2;
          }

          img.bg{
            position:absolute;
            display:block;
            top:-20%;
            left:-20%;
            width:140%;
            height:140%;
            filter:blur(10px);
            object-fit:cover;
            object-position:center center;
            z-index:1;
          }
        }

        .text{
          padding-left:150px;
        }
        @media screen and (max-width:600px){
          .text{
            padding-left:110px;
          }
        }
      }
      .eventTags{
        display:block;

        .tag{
          display:inline-block;
          padding:3px;
          line-height:11px;
          font-size:11px;
          color:#fff;
          background-color:#999;
          border-radius:3px;
          margin-right:3px;
        }
      }

      .subText{
        display:block;
        font-size:0.8em !important;
        opacity:0.8 !important;
        margin-top:0px !important;
        margin-bottom:0px !important;
        text-align:left !important;
        white-space: nowrap;
        text-overflow:ellipsis;
        overflow:hidden;
      }

      .eventTime{
        display:block;
        font-size:0.8em;
        font-weight:bold;
        color:#184787;
        white-space: nowrap;
        text-overflow:ellipsis;
        overflow:hidden;

        &.today{
          background-color:$color_orange;
          color:#fff;
          border-radius:3px;
          padding:4px;
          padding-left:6px;
          padding-right:6px;
          width:-webkit-fit-content;
          width:fit-content;
          margin-right:auto;
          line-height:0.8em;

        }
      }
    }

    .eventImage{
      position:absolute;
      left:0px;
      top:0px;
      img{
        display:none;
      }

    }

    &.featured{
      background-color:#184787;

      .eventHolder{
        padding-left:0px;
        border-top:1px solid rgba(255,255,255,0.5);
        border-left:1px solid rgba(255,255,255,0.5);
        border-right:1px solid #ccc;
        border-bottom:1px solid #ccc;
        box-shadow:0px 5px 10px rgba(0,0,0,0.1);

      }

      .eventbg{
        display:block;
        position:absolute;
        top:-5%;
        left:-5%;
        width:110%;
        height:110%;
        object-fit:cover;
        object-position:center center;
        filter:blur(10px);
        -webkit-filter:blur(10px);

        opacity:0.8;
      }

      .eventImage{
        position:relative;
        display:block;
        width:100%;
        aspect-ratio:3/2;
        background-color:#ececec;
        border-top-left-radius:20px;
        border-top-right-radius:20px;
        overflow:hidden;

        img{
          display:block;
          width:100%;
          height:100%;
          border-top-left-radius:20px;
          border-top-right-radius:20px;
          object-fit:cover;
          object-position: center top;
        }


      }
    }
  }




  .dateLoader{
    display:block;
    position:relative;
    padding:20px;
    overflow:hidden;
    font-size:16px;
    z-index:0;
    user-select:none;
    margin-left:auto;
    margin-right:auto;
    min-height:60px;
    margin-left:50px;

    @media screen and (min-width:700px){
      margin-left:90px;
    }

    @media screen and (max-width:600px){
      padding:5px;
    }


    .line{
      position:relative;
      overflow:hidden;
      z-index:1;
      min-height:100px;
      margin-bottom:20px;
      display:block;

      border-radius:20px;
      background-color:#ececec;
//      box-shadow:0px 2px 5px rgba(0,0,0,0.1);
      border:1px solid #ececec;

      padding-left:60px;
      cursor:pointer;

      &::after{
        content:'';
        position:absolute;
        width:80px;
        height:100%;
        top:0px;
        background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0.6),rgba(255,255,255,0));
        display:block;
        animation: dateLoaderGloss 1.5s linear infinite;

      }
    }
  }

}

#dateForm{
  padding-bottom:0px;
}

#filterExpand{
  background-color:#fff;
  box-shadow:0px 0px 10px rgba(0,0,0,0.1);
  padding:14px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  cursor:pointer;
  .popupElementHolder{
    max-height:none !important;
    overflow:hidden;
  }

  .popupElementScroll{
    display:grid;
    overflow:hidden !important;
    grid-template-rows:50px 1fr 50px;
    padding:0px !important;
    max-height:80vh !important;

    @media screen and (max-height:600px){
      height:100%;
      grid-template-rows:50px 460px 50px;
    }


    .toggle{
      display:block;
      line-height:20px;
      padding:15px;
      font-size:13px;
      text-transform:uppercase;
      color:#666;

      cursor:pointer;

      svg{
        width:20px;
        vertical-align:top;
        margin-right:20px;
      }
    }

    .inputs{
      overflow-y:auto;
      border-top:1px solid #ececec;
      padding:10px;

      @media screen and (max-height:750px){
        border-bottom:1px solid #ececec;
      }
    }

    .buttons{
      padding:5px;
      button{
        background:$color_gradient;
        background-size:150%;
        border-radius:20px;
        border:0px;
        // margin-right:10px;

        
        -webkit-appearance:none;
        transform-origin:bottom right;

        color:#fff;
        float:right;
        padding:10px;
        padding-left:20px;
        padding-right:20px;
        line-height:20px;
        font-size:16px;
        cursor:pointer;


        &.secondary{
          background:transparent;
          color:$color_purple;
          float:left;
          font-weight:normal;
          transform-origin:bottom left;
          text-decoration:underline;
        }
      }
    }
  }

  .popupSelect_toggle{
    display:block;
    padding:10px;
    opacity:1;

    border:1px solid #ececec;


  }

  label{
    display:block;
    padding:8px;
    border-bottom:1px solid #fcfcfc;
    cursor:pointer;

    &:last-of-type{
      border-bottom:0px;
    }

    .count{
      font-size:0.8em;
      color:#666;
    }
  }

}

@keyframes dateLoaderGloss{
  0%{
    left:-50px;
  }

  100%{
    left:100%;
  }
}

.eventsListFeatured{
  width:100%;
  border:0px;
  margin-bottom:10px;
  background:transparent;
  padding:5px;
  position:relative;



  .arrowLeft, .arrowRight{
    background-color:rgba(0,0,0,0.8);
    color:#fff;
    display:none;
    justify-content:center;
    align-items: center;
    font-size:20px;
    width:50px;
    height:70px;
    position:absolute;
    top:30%;
    top:calc(50% - 35px);
    cursor:pointer;
    z-index:1;
    user-select:none;
    -webkit-user-select:none;

    svg{
      width:30px;
      color:#fff;
    }

    
    &.show{
      display:flex;
    }
  }

  .arrowLeft{
    left:0px;
    border-top-right-radius:35px;
    border-bottom-right-radius:35px;
  }

  .arrowRight{
    right:0px;
    border-top-left-radius:35px;
    border-bottom-left-radius:35px;
  }


  .scroller{
    display:grid;
    grid-auto-flow:column;
    grid-column-gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type: x proximity;
    -ms-overflow-style:none;
    scrollbar-width:none;
    width:min-content;
    max-width:100%;

    &::-webkit-scrollbar{
      display:none;
    }


    .event.featured{
      scroll-snap-align: center;

      width:280px;
      display:inline-block; 
      padding:5px;
      border-radius:20px;
      margin-left:0px;
      .eventHolder{
        height:100%;

        .eventTime{
          position:relative;
          top:-4px;
        }

        h3{ 
          -webkit-line-clamp: 3;
          display: -webkit-box;
          overflow:hidden;
          -webkit-box-orient: vertical;

        }
      }
    }
  }
}

.listingAdminOptions{
  display:block;
  margin:5px;
  border-top:1px solid #ececec;

  .listingStatus{
    border-bottom:1px solid #ececec;
    padding:10px;
    font-size:12px;
    line-height:16px;
    text-transform:uppercase;
    text-align:center;
  }

  ul{
    display:grid;
    grid-auto-flow:column;
    margin:0px;
    padding:0px;

    li{
      list-style:none;
      border-left:1px solid #ececec;
      margin:0px;

      a{
        display:block;
        padding:8px;
        color:#000;
        text-decoration:none;
        text-align:center;
        transition:all 0.3s ease-in-out;

        &:hover{
          font-weight:bold;
          color:$color_purple;
        
          svg{
            color:$color_purple;
          }
        }
      }

      font-size:14px;
      line-height:14px;

      svg{
        display:inline-block;
        width:20px;
        vertical-align:top;
        color:#666;
        margin-right:10px;
      }

      &:first-child{
        border-left:0px;
      }
    }
  }
}


.dateHeaderButton{
  display:inline-block;
  padding:10px;
  background-color:#fff;
  
  padding-left:20px;
  padding-right:20px;
  height:46px;
  font-size:12px;
  text-transform:uppercase;
  vertical-align:top;
  font-weight:normal;
  line-height:26px;
  cursor:pointer;
  position:relative;
  margin:5px;
  border-radius:20px;
  background-color:$color_purple;
  color:#fff;
  z-index:3;

  svg{
    width:26px;
    display:inline-block;
    vertical-align: top;
    transition:transform 0.3s ease-in-out;
    transform-origin:center right;
    margin-right:10px;
  }

  @media screen and (max-width:768px){
    .filterCount{
      position:absolute;
      bottom:5px;
      right:5px;
    }
  }

  @media screen and (min-width:768px){
    .filterCount{
      position:absolute;
      bottom:10px;
      right:0px;
    }
  }


  @media screen and (max-width:500px){
    .dateHeaderButtonText{
//      display:none;
    }

    svg{
      margin-right:0px;
    }
  }


  &:hover{
    svg{
      transform:scale(1.1);
    }
  }

  .filterCount{
    position:absolute;
    bottom:5px;
    right:5px;
  }

  .dateHeaderButtonText{
    transition:width 0.3s ease-in-out;
    overflow:hidden;
  }

  @media screen and (max-width:500px){
    &.stick{
      .dateHeaderButtonText{
        width:0px;
      
      }

      svg{
        margin-right:0px !important;
      }
    }
  }


  &:hover{
    svg{
      transform:scale(1.1);
    }
  }
}

#eventListEnd{
  display:block;
 // height:100vh !important;
  width:100%;
}

button.eventsLoadMore{
  background-color:#fff !important;
  border:1px solid #ccc !important;
  padding:10px;
  padding-left:20px;
  padding-right:20px;
  margin:10px;
  width:280px !important;
  text-align:center;
  font-size:18px;
  margin-left:auto !important;
  margin-right:auto !important;
  cursor:pointer !important;
  font-weight:normal !important;
  display:block !important;
  outline:none;

}