@import "_fonts";
@import "_colors";
#jobs{

  .searchResponse{
    display:block;
    width:900px;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    font-size:24px;
    color:#333;
    padding:10px;
    line-height:1.3em;
    font-family:$boldFont;
    font-weight:300;


    b{
      display:block;
      color:#666;
      text-align:center;
      margin-bottom:20px;
      font-weight:700;


    }

    u{
      color:#333;
    }
  }

  .listingOwner{
    display:grid;
    grid-template-columns:1fr 1fr;
    padding:20px;




    .ownerText{
      text-align:center;
      display:flex;
      justify-content: center;
      align-items: center;

      .textHolder{
        display:inline-block;
      }
      .bigIcon{
        svg{
          width:50px;
          height:50px;
          display:block;
          margin-left:auto;
          margin-right:auto;
          opacity:0.3;

        }
      }

      h3{
        margin-bottom:0px;
        padding-bottom:4px;
      }

      .expires{
        display:block;
        text-align:center;
        font-size:14px;
        opacity:0.8;

        svg{
          width:20px;
          height:20px;
          vertical-align:top;
          display:inline-block;
        }
      }
    }

    ul{
      list-style:none;
      display:block;
      width:300px;
      max-width:100%;
      padding:0px;
      margin-left:auto;
      margin-right:auto;
      li{
        list-style:none;
        margin:0px;
        padding:0px;
        border-bottom:1px solid #ececec;

        &:last-child{
          border-bottom:0px;
        }

        span{
          width:220px;
          display:block;
          margin-left:auto;
          margin-right:auto;
        }

        a{
          display:block;
          padding:10px;
          text-decoration:none;
          color:$color_purple;
          transition:all 0.3s ease-in-out;

          &:hover{
            font-weight:bold;
          }

          svg{
            display:inline-block;
            width:20px;
            height:20px;
            vertical-align:top;
            margin-right:10px;

          }
        }
      }
    }
  }

  @media screen and (max-width:600px){
    .listingOwner{
      display:block;

      .ownerText{
        display:block;
        width:fit-content;
        width:-moz-fit-content;
        width:-webkit-fit-content;
        margin-left:auto;
        margin-right:auto;
        position:relative;
        padding-left:80px;
        .bigIcon{
          position:absolute;
          left:0px;
          top:0px;

        }

        h3{
          margin-top:0px;
          padding-top:0px;
        }
      }

    }
  }

  .jobListingList{
    display:block;
    color:#000;
    text-decoration:none;
    margin-left:auto;
    margin-right:auto;

    border-radius:10px;
    background-color:#fff;
    box-shadow:0px 2px 6px rgba(0,0,0,0.1);
    position:relative;

    width:800px;
    max-width:100%;
    margin-bottom:20px;

    .featureTag{
      width:100px;
      height:20px;
      font-size:12px;
      line-height:20px;
      text-align:center;
      color:#fff;
      text-transform:uppercase;
      background-color:$color_purple;
      position:absolute;
      top:0px;
      left:0px;
      border-top-left-radius:10px;
      border-bottom-right-radius:10px;

    }

    &.success{
      padding:20px;
      box-sizing:border-box;
      background-color:#e8f5e9;
      margin-bottom:20px;
      h3{
        text-align:center;

      }
    }

    .text{
      padding:20px;
      padding-bottom:0px;
      width:100%;
      position:relative;

      &.withLogo{
        display:grid;
        grid-template-columns:auto 100px;
        grid-column-gap:10px;

      }

      .textHeader{



      }



    }
    .subText{
      font-size:12px !important;
      padding:20px;
      margin-top:0px !important;

      padding-top:0px;
      text-align:left !important;

      .tagHolder{
        margin-top:10px !important;
      }

    }

    .category{
      display:block;
      font-weight:normal;
      font-size:12px;
      line-height:22px;
      text-decoration:none;

      svg{
        width:14px;
        height:14px;
        display:inline-block;
        vertical-align:top;
        top:3px;
        position:relative;

      }
    }
    .userListing{
      display:block;
      padding:6px;
      background-color:#e8f5e9;
      text-align:left;
      border-top-left-radius:10px;
      border-top-right-radius:10px;

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

      &.expired{
        background-color:#ffab91;


      }


      &.unpaid{
        background-color:red;
        .expireTime, .edit{
          color:#fff;
        }



      }
      .edit{
        float:right;
        display:inline-block;
        padding:3px;
        font-size:12px;
        font-weight:bold;

      }
      .expireTime{
        color:#333;
        padding:3px;
        display:inline-block;
        float:left;
        font-size:12px;
        svg{
          width:14px;
          height:14px;
          margin:2px;
          display:inline-block;
          vertical-align:top;
        }
      }
    }


    .tagHolder{
      padding-bottom:6px;
    }

    .tag{
      display:inline-block;
      padding:6px;
      padding-left:12px;
      padding-right:12px;
      background-color:#666;
      color:#fff;
      font-size:12px;
      line-height:12px;
      text-transform:uppercase;
      margin:5px;
      margin-left:0px;
      border-radius:3px;
    }


    .logoImage{
      position:absolute;
      right:20px;
      top:20px;
      max-width:100px;
      max-height:65px;
    }

    h3{
      margin:0px;
      padding:0px;
      font-size:26px;
      text-transform:uppercase;
      font-weight:bold;

    }

    a{
      color:$color_purple;
    }

    .alert{
      display:block;
      color:#fff;
      padding:10px;
      text-align:center;
      font-size:14px;
      line-height:1.3em;
      border-radius:10px;
      border-bottom-left-radius:0px;
      border-bottom-right-radius:0px;
      background-color:$color_red;


      .button{
        display:block;
        width:fit-content;
        width:-webkit-fit-content;   width:-moz-fit-content;
        border-radius:5px;
        text-decoration:none;
        padding:10px;
        padding-left:20px;
        padding-right:20px;
        margin:10px;
        background-color:#fff;
        color:$color_red;
        margin-left:auto;
        margin-right:0px;
      }
    }


    i{
      display:block;
      font-style:normal;
      margin-top:5px;
      margin-bottom:15px;
    }

    .jobListingDescriptionExpand{
      display:block;
    }

    .description{
      display:none;

      &.show{
        display:block;
      }
    }

    .jobListingDescriptionExpand, .moreLink
    {
      color:#666;
      font-size:12px;
      line-height:20px;
      cursor:pointer;
      text-transform:uppercase;
      text-decoration:none;

      svg{
        display:inline-block;
        width:20px;
        height:20px;
        vertical-align:top;
      }
    }

    .moreLink{
      display:block;
      margin-bottom:10px;
    }


  }

  .jobListingPage{
    background-color:#fff;
    font-size:16px;
    line-height:1.8em;
    padding:20px;
    border:1px solid #ececec;

    .userListing{
      display:block;
      padding:10px;
      background-color:#cedee8;
      text-align:left;
      margin-bottom:20px;
      .edit{
        float:right;
        display:inline-block;
        padding:3px;
        font-size:12px;
        font-weight:bold;

      }
      .expireTime{
        color:#333;
        padding:3px;
        display:inline-block;
        float:left;
        font-size:12px;
        svg{
          width:14px;
          height:14px;
          margin:2px;
          display:inline-block;
          vertical-align:top;
        }
      }
    }


    .headerRight{
      float:right;
      width:fit-content;
      width:-webkit-fit-content;   width:-moz-fit-content;
      text-align:right;
    }

    @media screen and (max-width:600px){
      .headerRight{
        float:none !important;
        width:100%;
        text-align:center;

        .applyLink{
          margin-left:auto;
          margin-right:auto;
          display:block;
          width:fit-content;
          width:-webkit-fit-content;   width:-moz-fit-content;
          float:none !important;
        }

        .datePosted{
          width:100%;
          text-align:center !important;
        }
      }
    }

    h1{
      line-height:1.3em;
      margin-bottom:0px;
    }

    .datePosted{
      color:#333;
      display:block;
      text-align:right;
      svg{
        width:16px;
        height:16px;
        margin:2px;
        display:inline-block;
        vertical-align:top;
      }
    }

    .description{
      padding:20px;

      div{
        max-width:100% !important;
      }
    }

    .tagHolder{
      padding:10px;
      display:block;
    }

    .logoImage{
      float:left;
      margin-right:20px;
      max-width:150px;
      max-height:150px;
    }

    @media screen and (max-width:600px){
      &{
        .description{
          *{
            float:none !important;
          }
        }

        .logoImage{
          float:none;
          display:block;
          width:200px;
          max-width:200px;
          max-height:200px;
          margin:10px;
          margin-left:auto;
          margin-right:auto;
        }

        .datePosted{
          display:block;
          width:fit-content;
          width:-webkit-fit-content;   width:-moz-fit-content;
          margin-left:auto;
          margin-right:auto;
        }

        h1{
          text-align:center;
        }
      }
    }
  }
}