@import "_colors";
body, html{
  margin:0px;
  padding:0px;  
}

.eventPopup{
    position:fixed;
    left:0px;
    width:100%;
    opacity:0;  
    bottom:0px; 
    display:flex;
    transition:all 0.4s ease-in-out;
    height:100%;
    top:100%;
    background:rgba(0,0,0,0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index:999999999;
    overflow:hidden;




    .eventPopupContent{
      width:90%;
      height:90%;
      border-radius:20px;
      display:block;
      margin-left:auto;
      margin-right:auto;
      position:relative;
      top:5%;
      //border-top-left-radius:20px;
      //border-bottom-left-radius:20px;

      max-width:600px;
      background-color:#fff;
      box-shadow:-4px 0px 8px rgba(0,0,0,0.1);
      
      padding:0px;
      
      transform:scale(0);
      transform-origin:center bottom;
      transition:transform 0.4s ease-in-out;
      //height:calc(100% - 44px); 
      overflow:hidden;

      border-top:1px solid rgba(255,255,255,0.5);
      border-left:1px solid rgba(255,255,255,0.5);
      border-right:1px solid rgba(0,0,0,0.6);
      border-bottom:1px solid rgba(0,0,0,0.6);

      box-shadow:0px 4px 10px rgba(0,0,0,0.2);
/*
      @media screen and (max-width:768px){
        height:calc(100% - 64px);
        top:64px;
      }
*/
      iframe, .contentHolder{
        width:100%;
        margin:0px;
        padding:0px;
        height:100%;
        height:calc(100% - 44px);
        border:0px;
        overflow-x:hidden;
        overflow-y:auto;
        
      }

    }

    .eventPopupClose{
      cursor:pointer;
      display:block;
      font-size:16px;
      text-align:right;
      padding:10px;
      padding-left:20px;
      color:#666;
      border-bottom:1px solid #ececec;

      svg{
        color:#666;
        height:16px;
        margin-right:10px;
        vertical-align:middle;
        position:relative;
        top:-2px;
      } 
    }

    &.show{
      
      &::before{
        content:'';
        display:block;
        position:fixed;
        top:0px;
        left:0px;
        width:100%;
        height:80px;
        background:linear-gradient(to bottom,$color_header,transparent);
      }
      
      top:0px;
      opacity:1;
      transition:all 0.4s ease-in-out;
      .eventPopupContent{
        transform:scale(1);
        transition:transform 0.4s ease-in-out;

      }
    }


}

.eventLoader{
  display:flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:100%;
  font-family:sans-serif;

  .eventLoaderHolder{
    display:inline-block;
    text-align:center;
    line-height:20px;
    font-size:12px;
  }
}