@import "_colors";
#jobs{
  .jobPopup{
    position:fixed;
    top:0px;
    left:-100%;
    width:100%;
    height:100vh;
    justify-content: center;
    align-items:center;
    z-index:99999999;
    background:rgba(0,0,0,0.4);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    display:flex;
    transition:opacity 0.3s ease-in-out;
    opacity:0;
    &.show{
      left:0px;
      opacity:1;

    }

    .jobPopupHolder{
      display:inline-block;
      width:500px;
      max-width:96%;
      height:700px;
      padding:0px !important;
      max-height:65vh;
      position:relative;
      background-color:#fff;
      box-shadow:0px 4px 10px rgba(0,0,0,0.2);

      .jobPopupClose{
        position:absolute;
        right:10px;
        top:10px;
        color:#fff;
        width:30px;
        height:30px;
        background-color:$color_purple;
        text-align:center;
        line-height:30px;
        cursor:pointer;
        font-size:20px;
        transition:transform 0.3s ease-in-out;
        z-index:2;

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

      .jobPopupScroll{
        width:100%;
        height:100%;
        overflow-x: hidden;
        overflow-y:scroll;
        padding:15px;
        z-index:1;

      }

      &.withHeader{
        display:grid;
        grid-template-rows:100px auto;
        height:100% !important;

      }

      &.withHeaderFooter{
        display:grid;
        grid-template-rows:100px auto 70px;
        height:100% !important;

        &::after{
          display:block;
          content:'';
          position:absolute;
          bottom:70px;
          left:0px;
          //background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,1));
          width:100%;
          height:50px;
        }

        .jobPopupScrollHolder{
          padding-bottom:50px;
        }
      }


      .jobPopupFooter{
        background-color:#ececec;
        border-top:1px solid #ccc;
        padding:10px;
        box-shadow:0px -2px 5px rgba(0,0,0,0.3);
        z-index:2;
      }

      .jobPopupHeader{
        background-color:$color_purple;
        color:#fff;
        font-size:14px;
        line-height:18px;
        text-align:center;
        font-weight:normal;
        padding:20px;
        position:relative;
        display:flex;
        justify-content: center;
        align-items:center;

        .jobPopupHeaderHolder{
          display:inline-block;
        }

        svg{
          position:absolute;
          z-index:0;
          color:#fff;
          width:120px;
          height:120px;
          transform:rotate(-33deg);
          opacity:0.2;
          left:0px;
          top:0px;
        }

        b{

          font-size:22px;
          line-height:26px;
          text-align:center;
          display:block;
          margin-bottom:5px;
          font-weight:900;
        }
      }



    }

    .jobCompanyLogo{
      width:120px;
      height:auto;
      display:block;
      margin:10px;
      margin-left:auto;
      margin-right:auto;
    }

    .jobTitle{
      display:block;
      text-align:center;
      font-size:20px;
      line-height:24px;
      font-weight:bold;
    }

    .jobCompany{
      display:block;
      text-align:center;
      text-transform:uppercase;
      font-size:14px;
      line-height:18px;
      color:#666;
    }

  }
}

#applyPopup{
  .jobPopupScroll{
    display:flex;
    vertical-align: middle;
    align-items:center;
    justify-content: center;

    .jobPopupScrollHolder{
      display:inline-block;
    }
  }
}