@import "_colors";

.jlApplicants{
  display:grid;
  grid-template-columns:1fr 2fr;
  position:relative;
  border:1px solid #ccc;
  min-height:60vh;

  .message{
    display:block;
    height:0px;
    overflow:hidden;
    transition:all 0.3s ease-in-out;
    &.show{
      padding:10px;
      height:auto;
      background-color:#c8e6c9;
      text-align:center;
    }
  }

  &.noApplicants{
    grid-template-columns:1fr;

    div{
      display:flex;
      width:100%;
      height:100%;
      justify-content: center;
      align-items: center;
      font-size:24px;
      color:#666;
    }
  }

  @media screen and (max-width:600px){
    grid-template-columns:1fr;
    display:block;

    ul#applicantList{

    }
    .applicantMenu{
      min-height:auto !important;
      border-bottom:1px solid #ccc;
      border-right:0px !important;
    }
  }




  select{
    width:100%;
    padding:10px;
    -webkit-appearance:none;
    border:0px;
    border-radius:0px;
    border-bottom:1px solid #ccc;
    outline:none;
    background-color:#fff;
  }

  .applicantMenu{
    min-height:100%;
    background-color:#e7ecf9;

    border-right:1px solid #ccc;
  }

  ul#applicantList{
    list-style:none;
    margin:0px;
    padding:0px;




    li{
      list-style:none;
      margin:0px;
      padding:0px;
      border-bottom:1px solid #fff;

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

      &.loader{
        display:flex;
        justify-content: center;
        align-items: center;
        height:100%;
        text-align:center;
      }

      a{
        padding:20px;
        display:block;
        text-decoration:none;
        color:#000;
        cursor:pointer;

        transition:all 0.3s ease-in-out;

        b{
          display:block;

        }

        i{
          display:block;
          opacity:0.8;

          font-size:0.8em;
        }

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

        }

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

      }

      &.read{
        a{
          opacity:0.7;

          b{
            font-weight:normal;
          }


          &.focus{
            opacity:1;

          }
        }

      }

    }
  }

  #applicantContent{
    padding:20px;
    background-color:#fff;
    .controls{
      display:block;
      width:fit-content;
      width:-webkit-fit-content;
      width:-moz-fit-content;
      margin-left:auto;
      text-transform:uppercase;
      color:$color_purple;
      font-size:12px;

      a{
        color:$color_purple;
      }

    }

    .line{
      display:block;
      margin-bottom:10px;
      font-weight:bold;
      b{
        display:block;
        font-size:0.6em;
        font-weight:normal;
        color:#666;
        text-transform:uppercase;
        letter-spacing:1px;

      }

    }
  }

  .attachmentList{
    list-style:none;
    margin:0px;
    padding:0px;
    border:1px solid #ececec;

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

      a{
        text-decoration:none;
      }

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

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

  .jlButton{
    display:inline-block;
    margin:2px;
    border:1px solid #5f6368;
    border-radius:3px;
    padding:3px;
    padding-left:6px;
    padding-right:6px;
    color:#5f6368;
    text-decoration:none;
    cursor:pointer;

    svg{
      float:left;
      margin-right:6px;
      width:15px;
      height:15px;
      vertical-align:top;
    }
  }

}