/**
 * override body hardcoded font-size for mobile
 */
@media(max-width: 768px) {
        body {
                font-size: inherit !important;
        }
}

/**
 * Make the form at the top of the page look good
 */
.jobsForm {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 20px;
        background-color:#656972;
        color: black;
        text-align: center;
}
.jobsForm input[type=text] {
        -webkit-appearance: searchfield;
}
.jobsForm input[type=button] {
        -webkit-appearance: button-bevel;
}
.jobsForm input, .jobsForm select, .jobsForm button {
        height: 40px;
        border-radius: 5px;
}
.jobsForm #SearchString {
        padding-left: 10px;
}
.jobsForm #zip {
        width: 90px;
        padding-left: 10px;
}
.jobsForm tr td {
        padding: 8px 10px;
        display: inline-block;
}
.jobsForm #miles {
        background-color: white;
}
.jobsForm #search {
        background-color:#dd9f38; 
        color:white;
}
.jobsForm #allJobs {
        background-color:white; 
        color:#dd9f38;
}

/**
 * Make the listed jobs look good
 */
#jobsTable {
        margin: auto;
        margin-bottom:15px;
        width:80%;
        border-collapse: separate;
        border-spacing: 0px 10px;
}

.jobRow {
        border-color:black;
        outline: solid thin #656972;
}
.jobRow td {
        padding: 10px;
        background-color: #eeeeee;
        color: black;
        border-left: solid thin #656972;
}
.jobRow .title {
        background-color: #159bc0;
        color: white;
        font-weight: bold;
        cursor: pointer;
}
.jobRow .apply {
        text-align: center;
}
.jobRow .apply input[type=button]{
        background-color: #dd9f38;
        color: white;
        cursor: pointer;
        border-radius: 5px;
        -webkit-appearance: button-bevel;
}

/**
 * Job descriptions
 */
.descriptionRow {
        padding: 5px;
}
.descriptionRow td {
        padding: 5px;
}

/**
 * make pagination look good
 */
.pagination {
    display: inline-block;
    float: right;
}
.pagination span {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
}
.pagination span.active {
    background-color: #159bc0;
    color: white;
}
.pagination span:hover {
    background-color: #eeeeee;
    color: black;
}
.pagination .unclickable {
    pointer-events: none;
    cursor: default;
    color: #656972;
}

/**
 * overriding multiselect style
 */
.ms-options-wrap > button:focus, .ms-options-wrap > button {
        color: white;
        background-color: #656972;
        width: 150px;
}
.ms-options-wrap > .ms-options {
        color: white;
        background-color: #656972;
        width: inherit;
        left: auto;
        height: auto;
        text-align: left;
}
.ms-options-wrap > .ms-options > ul label {
        font-weight: inherit;
        font-size: 13px;
}
.ms-options-wrap > .ms-options > ul li.selected label {
        background-color: darkgrey;
}
.ms-options-wrap > .ms-options > ul input[type="checkbox"] {
        height: auto;
}
.ms-options-wrap > .ms-options > .ms-search input {
        color: black;
}
.ms-options-wrap > .ms-options > ul label.focused, .ms-options-wrap > .ms-options > ul label:hover {
        background-color: dimgrey;
}