@import "_colors";
@import "_fonts";

#events{
  .eventListingPreview{
    border:1px solid #ececec;
    border-radius:20px;
    padding:10px;
    text-align:center;
    background-color:#fff;

    h1{
      padding:0px;
      margin:0px;
      font-size:18px;
      text-align:center;
      line-height:24px;
      margin-bottom:10px;
    }

    table.eventTimes{
      width:100%;
      max-width:400px;
      border-collapse:collapse;
      margin:0px;
      padding:0px;
      margin-left:auto;
      margin-right:auto;
  
      td{
        padding:8px;
        padding-left:0px;
        padding-right:0px;
        font-size:14px;
        border-bottom:1px solid #ececec;
  
  
      }
  
      tr:first-child{
        td{
      //    border-top:1px solid #ececec;
        }
      }
  
      tr:last-child{
        td{
          border-bottom:0px;
        }
      }
  
    }
  }

  .postingDetails{
    display:block;
    //padding:50px;
    //padding-top:0px;
    padding-bottom:50px;

    .left{
      width:50%;
      background-color:#100043;
      //background-image:var(--purpleBG);
      background-size:cover;
      background-position:top right;
      color:#fff;
      display:inline-block;
      vertical-align:top;

      position:relative;
      //box-shadow:-3px 0px 10px rgba(0,0,0,0.2);
      padding:50px;
      z-index:1;

      .vCenter{
        min-height:500px;
      }

      .bgIcon{
        svg{
          width:400px;
          height:400px;
          position:absolute;
          top:-60px;
          right:-60px;
          transform:rotate(16deg);
          opacity:0.1;
        }
      }

      h2{
        font-size:35px;
        line-height:1.3em;
        text-align:left;
        margin-top:0px;
        padding-top:0px;
        font-family:$boldFont;
        color:$color_offwhite;
      }

      big{
        opacity:1;
        display:block;
        max-width:90%;
        line-height:2em;
        font-family:$boldFont;
        font-weight:300;

        span{
          opacity:0.8;
        }

        u{
          color:#00e8ff;

          font-family:$boldFont;
          font-weight:700;

        }
      }

    }

    .right{
      display:inline-block;
      width:50%;
      //min-height:700px;
      padding:50px;
      //background-color:#fff;
      //box-shadow:-10px 0px 15px rgba(0,0,0,0.2);
      position:relative;
      z-index:2;
      text-align:center;
      padding:20px;
      h3{
        font-family:$accentFont;
        font-size:35px;
        line-height:1.1em;
      }

      big{
        font-size:16px;
        line-height:2em;
        text-align:center;
        display:block;
      }

      .vCenter{
        //min-height:700px;
      }
    }


  }

  .userDetails{
    text-align:center;
    color:#333;
    font-weight:100;
    font-size:30px;
    font-family:$boldFont;
    u{
      color:$color_purple;
      font-weight:bold;
      text-decoration:none;
    }

    .switchAccount{
      display:block;
      padding:4px;
      text-align:center;
      font-size:12px;
      color:#666;

      a{
        width:fit-content;
        width:-webkit-fit-content;   width:-moz-fit-content;
        display:inline-block !important;
        color:#666;

      }
    }
  }

  .postLogin
  {

    h4{
      text-align:center;
      color:#333;
      //text-transform:uppercase;
      font-family:$accentFont;
      font-size:34px;


    }

    .register{
      text-align:center;
      color:#333;
      font-family:$accentFont;
      font-size:24px;
      margin-top:20px;

      .button{
        background-color:#2e7d32;
        background:linear-gradient(to bottom right,#4caf50,#2e7d32);
        background-size:150% auto;
        box-shadow:0px 2px 4px rgba(0,0,0,0.2);
        color:#fff;
        height:40px;
        text-decoration:none;
        line-height:0px;
        width:fit-content;
        text-shadow:-1px -1px 0px rgba(0,0,0,0.3);
        width:-webkit-fit-content;   width:-moz-fit-content;
        display:block;
        margin-left:auto;
font-family:$boldFont;
        margin-right:auto;

      }
    }

    .loginLink{

      display:block;
      width:300px;
      border-radius:10px;
      background-color:#fff;
      max-width:100%;
      margin-left:auto;
      margin-right:auto;
      padding:20px;
      font-size:18px;
      text-transform:uppercase;
      font-weight:bold;
      text-align:center;
      color:#423a64;
      border:1px solid #ececec;

      background:linear-gradient(to bottom right,#fff,#fff,#e3f2fd);
      background-size:150% auto;
      box-shadow:0px 2px 4px rgba(0,0,0,0.2);
      text-shadow:1px 1px 1px #fff;

      cursor:pointer;
      font-family:$boldFont;


      transition:all 0.3s ease-in-out;

      &:hover{
        transform:scale(1.1);
        box-shadow:0px 3px 6px rgba(0,0,0,0.2);
      }

      img{
        width:200px;
        display:block;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:10px;
      }
    }
  }
}

#checkoutInvoice{
  .invoice{
    width:300px;
    display:grid;
    grid-template-columns:auto 30%;
    margin-left:auto;

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


  }
}

.checkoutTotal{
  display:block;
  width:300px;
  margin-left:auto;
  border-bottom:1px solid #ccc;
  //margin-bottom:15px;

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

  .item, .price{
    text-align:left;

    display:inline-block;
    vertical-align: bottom;
    padding:20px;
    padding-right:5px;
    width:70%;
  }

  .info{
    text-align:center;
    font-size:1em;
    padding:0px;
    padding-bottom:10px;

    @media screen and (min-width:501px){
      text-align:right;

    }
  }


  .price{
    width:30%;
    font-weight:bold;
    text-align:right;
  }
}

#postLoader{
  display:none;
  transition:opacity 0.3s ease-in-out;
  opacity:0;
  &.show{
    opacity:1;
    display:block;
  }

}

@media screen and (max-width:980px){
  #events{
    .postingDetails{
      padding:10px;
      .left, .right{
        margin-top:0px;
        padding:30px;

        ul.featureList{
          li{
            &.featureHeader{
              text-align:center;

            }
          }
        }

        h2{
          font-size:30px;
          line-height:36px;
          text-align:center !important;
        }

        big{
          font-size:16px;
        }

        width:100%;
        min-height:auto;
        text-align:center;

        .bgIcon{
          display:none;
        }

        .vCenter{
          min-height:auto;
          display:block;
          .vCenterHolder{
            width:100%;
          }
        }
      }
    }
  }
}

#businessListingsFound{
  h3{
    font-size:36px;
    line-height:1.1em;
    font-family:$accentFont;
  }
}