﻿/* Job Box */
.job-box { padding: 10px; }
.job-box-wrapper { height: 100%; cursor: pointer; border-radius: 10px; position: relative; }
.job-box-wrapper { transition: all linear .5s }
.job-box-wrapper:hover { background: #faebeb; transform: translateY(-8px); }
.job-box-wrapper:hover .button .btn { background: #a86565; }
.job-box > div { background: #fff; }

.job-box .details, .job-box .title-wrapper { font-family: "Open Sans", sans-serif; }

.job-box .title-wrapper { display: flex; flex-wrap: wrap; justify-content: center; }
.job-box .title-wrapper > div { padding: 10px 0; }
.job-box .logo { width: 35%; padding-left: 10px; text-align: center; }
.job-box.full-row .title-row { width: 65%; }
.job-box .logo > img { width: calc(100% - 20px); margin: auto; }

.job-box.full-row .logo { width: 120px;  }
.job-box .logo > img { width: 100%; }

.job-box .content-wrapper { padding: 20px; }
.job-box .content-wrapper { -webkit-box-shadow: 5px 5px 10px 5px rgba(210,210,210,0.8); box-shadow: 5px 5px 10px 5px rgba(210,210,210,0.8); }

.job-box .title-row { font-size: 1.3em; line-height: 1.4em; font-weight: bold; }
.job-box .title-row .title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 48px; width: 100%; }
.job-box.full-row .title-row .title { height: auto; max-height: 48px; }
.job-box.full-row .title-row { width: calc(100% - 120px); padding: 10px 20px; display: flex; flex-wrap: wrap; }
.job-box.full-row .title-row .title-wrapper { width: calc(100% - 140px); }
.job-box.full-row .title-wrapper { justify-content: left; align-items: center; }
.job-box.full-row .title-row .title-wrapper > div { padding: unset; }
.job-box.full-row .title-row .status-bar { width: 140px; text-align: right; }
.job-box.full-row .title-row .status-bar .status { margin: 0 10px 0 0; width: 100px; }
.job-box.full-row .title-row .job-status { display: block; width: 100px; }

.job-status { display:inline-block; padding: 1px 10px; margin: 10px 10px 0 0; font-size: 0.7em; font-weight:normal; border-radius: 5px; text-align: center; }
.job-status i { margin-right: 5px; }
.job-status.fulltime { color: #fff; background-color: #5f8a5a; border: 1px solid #5f8a5a; }
.job-status.parttime { color: #fff; background-color: #999c08; border: 2px solid #999c08; }
.job-status.temporary { color: #fff; background-color: #0d0e5c; border: 2px solid #0d0e5c; }
.job-status.contractor { color: #fff; background-color: #4f0a78; border: 2px solid #4f0a78; }
.job-status.top-pick { color: #fff; background-color: #ED7700; border: 2px solid #ED7700; }

@media (max-width: 768px){
    .job-box.full-row .logo { width: 70px; }
    .job-box.full-row .title-row { width: calc(100% - 70px); }
    .job-box.full-row .title-row .title-wrapper { width: calc(100% - 100px); }
    .job-box.full-row .title-row .status-bar { width: 100px; }

}
@media (max-width: 576px){
    .job-box.full-row .title-row { width: calc(100% - 70px); display: block; }
    .job-box.full-row .title-row .title-wrapper { width: 100%; }
    .job-box.full-row .title-row .status-bar { display: none; }
}

.job-box .details { width: 100%; padding: 20px 0; }
.job-box .details { font-size: 1.1em; line-height: 1.5em; }
.job-box.full-row .details { padding: 0 0 20px;}

.job-box.full-row .highlight-row > div { display: inline-block; padding-right: 0 20px; }

.job-box .details .location { font-weight: bold; font-size: 0.9em; font-family: 'Montserrat', sans-serif; }
.job-box .details .location > span { display: block; padding-left: 22px; }
.job-box .details > div:last-of-type { margin-bottom: 40px; }
                    
.job-box .details i { margin: auto 5px; color: #d1c5a9; }
.job-box .details .opt { color: #bbb; }

.job-box .description { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; padding-top: 20px; }
.job-box.full-row .description { -webkit-line-clamp: 2; }

.job-box .button { width: 100%; text-align: center; padding: 10px; }
.job-box .button { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); }
.job-box .button .btn { width: 90%; }

/* Pager */
.pager-wrapper { display: flex; flex-wrap: wrap; align-items: center; padding: 0 10px; }
.pager-wrapper .show-records { width: 50%; }
.pager-wrapper .show-records > span { color: #800e0e; }
.pager-wrapper .ctrlPager { width: 50%; }
.pager-wrapper .pager { margin: auto; justify-items: end; }
.pager-wrapper .pager li > span { border-radius: 5px; cursor: pointer; margin: 0 4px; }
.pager-wrapper .pager li > span:hover { background: #faebeb; }
.pager-wrapper .pager li.selected > span { background: #800e0e; color: #eee; cursor: default; }

.top-pager.pager-wrapper { margin-bottom: 10px; }
.bottom-pager.pager-wrapper { margin-top: 10px; }