.view-job-opportunity .views-row {
    padding: 1rem .5rem;
    border: 1px solid var(--border_gray);
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 2rem -1rem;
}
.view-job-opportunity .view-header h3:not(.section--title) { 
    margin-top: 4rem;
    margin-bottom: 0;
    font-size: 24px;
    font-weight: 500;
    color: #000;
}
.view-job-opportunity .view-header h3:not(.section--title) + .views-row { 
    margin: 1rem 0 2rem 0; 
}

.view-job-opportunity .views-row .views-field-field-single-url {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
}

.view-job-opportunity .views-row .views-field-field-ref-job-status {
    position: relative;
    padding: .5rem 1rem;
    border: 2px solid var(--border_gray);
    color: var(--border_gray);
    font-weight: 400;
    border-radius: 3rem;
    margin: .5rem auto 1.5rem 0;
    width: fit-content;
}

.view-job-opportunity .views-row.open .views-field-field-ref-job-status,
.view-job-opportunity .views-row.apply .views-field-field-ref-job-status {
    border: 2px solid var(--main_blue);
    color: var(--main_blue);
    padding-right: 3rem;
    background-image: url(../../assets/icons/icon_arrow_right_blue.svg);
    background-position: calc(100% - 1rem) center;
    background-size: 1.25rem 1.25rem;
    background-repeat: no-repeat;
}
.view-job-opportunity .views-row.under-evaluation .views-field-field-ref-job-status {
    background-color: var(--border_gray);
    color: var(--text_color);
}
.view-job-opportunity .views-row.archived .views-field-field-ref-job-status {
    border: 2px solid darkred;
    color: darkred;
}



.view-job-opportunity .views-row .views-field-title h3 {
    padding: 0 0 .5rem 0;
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5em;
}

.view-job-opportunity .views-row .views-field-field-job-opportunity-post-text {
    padding: 0 0 .5rem 0;
    margin: 0 0 1rem 0;
    font-size: 14px;
    line-height: 1.5em;
    font-weight: 300;
    color: var(--text_color);
    border-bottom: 1px solid var(--border_gray);
}

.view-job-opportunity .views-row .views-field-field-job-opp-deadline,
.view-job-opportunity .views-row .views-field-field-job-opp-file-notice,
.view-job-opportunity .views-row .views-field-field-job-opportunity-add-docs,
.view-job-opportunity .views-row .views-field-field-attachments,
.view-job-opportunity .views-row .views-field-field-website {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background-color: var(--light_gray);
}
.view-job-opportunity .views-row .views-field-field-job-opp-file-notice { background-color: #fff; }

.view-job-opportunity .views-row .views-field-field-job-opp-deadline .views-label,
.view-job-opportunity .views-row .views-field-field-job-opp-file-notice .views-label,
.view-job-opportunity .views-row .views-field-field-job-opportunity-add-docs .views-label,
.view-job-opportunity .views-row .views-field-field-attachments .views-label,
.view-job-opportunity .views-row .views-field-field-website .views-label {
    margin-bottom: .5rem;
    font-size: 12px;
}

.view-job-opportunity .views-row .views-field-field-job-opp-deadline .field-content,
.view-job-opportunity .views-row .views-field-field-job-opp-file-notice .field-content,
.view-job-opportunity .views-row .views-field-field-job-opportunity-add-docs .field-content *,
.view-job-opportunity .views-row .views-field-field-attachments .field-content,
.view-job-opportunity .views-row .views-field-field-website .field-content {
    font-size: 14px;
    line-height: 1.5em;
}

.view-job-opportunity .views-row .views-field-field-job-opp-deadline + .views-field-field-job-opportunity-add-docs {
    margin-top: 1rem;
}

/* field with no label alignment */
.view-job-opportunity .views-row .views-field-field-attachments,
.view-job-opportunity .views-row .views-field-field-website {
    padding: 0 1rem 1rem 1rem;
}
.view-job-opportunity .views-row .views-field-field-attachments .item-list li {
    list-style: none;
    margin-left: 0;
}

/* field legends */
.view-job-opportunity .views-row .views-field-field-job-opp-deadline > span,
.view-job-opportunity .views-row .views-field-field-job-opp-file-notice > span,
.view-job-opportunity .views-row .views-field-field-job-opportunity-add-docs > span {
    font-size: 14px;
    color: var(--medium_gray);
    text-transform: uppercase;
    margin-right: 1rem;
    width: 100%;
}

/* field content after label */
.view-job-opportunity .views-row .views-field-field-job-opp-deadline .field-content,
.view-job-opportunity .views-row .views-field-field-job-opp-file-notice .field-content,
.view-job-opportunity .views-row .views-field-field-job-opportunity-add-docs .field-content { 
    width: 100%;
}

.view-job-opportunity .views-row .views-field-field-job-opp-file-notice span.file a,
.view-job-opportunity .views-row .views-field-field-attachments span.file a {
    padding-right: 1.5rem;
    background-image: url(../../assets/icons/icon_download.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1rem 1rem;
}

.view-job-opportunity .views-row.deadline-extended .views-field-field-job-opp-deadline time::after {
    content: 'EXTENDED';
    position: relative;
    display: inline;
    margin-left: 1rem;
    font-size: 14px;
    font-weight: 300;
    color: var(--main_blue);
    width: fit-content;
}


@media (min-width: 576px) {
    .view-job-opportunity:not(.carousel) .views-row {
        margin: 2rem 0;
        padding: 1rem;
    }

    .view-job-opportunity:not(.carousel) .views-row .views-field-field-job-opp-deadline .views-label,
    .view-job-opportunity:not(.carousel) .views-row .views-field-field-job-opp-file-notice .views-label,
    .view-job-opportunity:not(.carousel) .views-row .views-field-field-job-opportunity-add-docs .views-label,
    .view-job-opportunity:not(.carousel) .views-row .views-field-field-attachments .views-label,
    .view-job-opportunity:not(.carousel) .views-row .views-field-field-website .views-label {
        font-size: 14px;
    }

    .view-job-opportunity:not(.carousel) .views-row .views-field-field-job-opp-deadline .field-content,
    .view-job-opportunity:not(.carousel) .views-row .views-field-field-job-opp-file-notice .field-content,
    .view-job-opportunity:not(.carousel) .views-row .views-field-field-job-opportunity-add-docs .field-content *,
    .view-job-opportunity:not(.carousel) .views-row .views-field-field-attachments .field-content,
    .view-job-opportunity:not(.carousel) .views-row .views-field-field-website .field-content {
        font-size: 16px;
    }

    .view-job-opportunity:not(.carousel) .views-row .views-field-title h3 {
        padding: 0 0 1rem 0;
        font-size: 22px;
    }
    
    .view-job-opportunity:not(.carousel) .views-row .views-field-field-job-opportunity-post-text {
        font-size: 16px;
    }
}


@media (min-width: 1024px) {
    .view-job-opportunity .view-header h3:not(.section--title) { 
        font-size: 30px;
        margin-bottom: 2rem;
        padding: 0 150px 1rem 0;
    }

    .view-job-opportunity .views-row { padding: 2rem; }

    .view-job-opportunity .views-row .views-field-field-job-opp-deadline,
    .view-job-opportunity .views-row .views-field-field-job-opp-file-notice,
    .view-job-opportunity .views-row .views-field-field-job-opportunity-add-docs,
    .view-job-opportunity .views-row .views-field-field-attachments,
    .view-job-opportunity .views-row .views-field-field-website {
        padding: 1rem 2rem;
        flex-direction: row;
        align-items: baseline;
    }

    .view-job-opportunity .views-row .views-field-field-job-opp-deadline .views-label,
    .view-job-opportunity .views-row .views-field-field-job-opp-file-notice .views-label,
    .view-job-opportunity .views-row .views-field-field-job-opportunity-add-docs .views-label,
    .view-job-opportunity .views-row .views-field-field-attachments .views-label,
    .view-job-opportunity .views-row .views-field-field-website .views-label {
        margin-bottom: 0;
    }

    /* --------------- --------------- --------------- */
    .view-job-opportunity .views-row .views-field-field-attachments,
    .view-job-opportunity .views-row .views-field-field-website {
        padding: 0 2rem 1rem calc(150px + 4rem);
    }
    .view-job-opportunity .views-row .views-field-field-job-opp-deadline > span,
    .view-job-opportunity .views-row .views-field-field-job-opp-file-notice > span,
    .view-job-opportunity .views-row .views-field-field-job-opportunity-add-docs > span {
        width: 150px;
        margin-right: 2rem;
    }
    .view-job-opportunity .views-row .views-field-field-job-opp-deadline .field-content,
    .view-job-opportunity .views-row .views-field-field-job-opp-file-notice .field-content,
    .view-job-opportunity .views-row .views-field-field-job-opportunity-add-docs .field-content { width: calc(100% - 150px - 2rem); }

    .view-job-opportunity .views-row .views-field-field-job-opportunity-add-docs .field-content > p { 
        font-size: 16px; 
        line-height: 1.5em; 
        margin: .75rem 0;
    }
    .view-job-opportunity .views-row .views-field-field-job-opportunity-add-docs .field-content > p:first-child { margin-top: 0; }

    /* --------------- --------------- --------------- */

    .view-job-opportunity .views-row .views-field-field-ref-job-status {
        top: 2rem;
        right: 2rem;
        position: absolute;
    }

    .view-job-opportunity .views-row .views-field-field-job-opportunity-post-text {
        padding: 0 150px 2rem 0;
        margin: 0 0 1.5rem 0;
    }

    .view-job-opportunity .views-row .views-field-field-job-opp-deadline time,
    .view-job-opportunity .views-row .views-field-field-job-opp-file-notice a {
        font-size: 18px;
    }

    .view-job-opportunity .views-row .views-field-title h3 {
        padding: 0 0 0.5rem 0;
    }
    
    .view-job-opportunity .views-row .views-field-field-job-opportunity-post-text {
        padding: 0 150px 1rem 0;
        margin: 0 0 1rem 0;
    }
}