/* Styling master Job Search form */

:root {
    --ButtonColor: #F05C8F;
    --ButtonRadius: 150px;
    --ButtonTextColor: #fff;
    --SelectboxFont: 'Oxygen', sans-serif;
    --ButtonColorHover: #3450BF;
}

#masterSearchJobs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    row-gap: 25px;
    align-items: center;
    background: #fff;
    padding: 25px;
    width: 1170px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -80px;
    border-radius: 10px;
    box-shadow: 1px 1px 10px #bdbdbd;
    box-sizing: border-box;
    z-index: 2;
    position: relative;
}

@media only screen and (max-width: 600px) {
  #masterSearchJobs {
    grid-template-columns: 100%;
    gap: 10px;
  }
  
  #btnApplyDirect {
      display: none;
  }
  
  #masterSearchJobs input#btnSearchJobs {
      width: 100%;
  }
  
   #masterSearchJobs input[type="select"] {
       -webkit-appearance: none;
   }
}

#masterSearchJobs label { 
    display: none;
}

#masterSearchJobs select {
    border-radius: var(--ButtonRadius);
    padding: 10px 10px;
    font-size: 15px;
    border: 1px solid #ccc;
    font-family: var(--SelectboxFont);
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    background-image: url(../images/caret-down.png);
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: calc(98%);
}

#masterSearchJobs select option:nth-child(1) { 
    color: #787878;
}

#masterSearchJobs input#btnSearchJobs {
    padding: 10px 25px;
    text-align: center;
    background: var(--ButtonColor);
    border-radius: var(--ButtonRadius);
    border: none;
    color: var(--ButtonTextColor);
    font-weight: 600;
    height: 45px;
}

#masterSearchJobs input#btnSearchJobs:hover {
    background: var(--ButtonColorHover);
    cursor: pointer;
    transition: 0.2s;
    color: var(--ButtonTextColor);
}

#jobLocation {
    border: 1px solid #ccc;
    border-radius: 50px;
    font-family: var(--SelectboxFont);
    font-size: 15px;
    text-transform: uppercase;
    padding: 12px;
}

#jobLocation::placeholder {
    text-transform: initial;
}

#btnApplyDirect {
    color: var(--ButtonColor);
    font-family: var(--SelectboxFont);
    font-weight: 600;
    margin-left: 10px;
}

#btnApplyDirect:hover {
    text-decoration: underline;
    cursor: pointer;
}