@import "~cosmoUiVariables";
@import "~cosmoui/src/components/styles/mixins/paddings";
@import "~cosmoui/src/components/styles/mixins/margins";

// container
$job-details-bg-color: $color-gray-400;
$job-details-container-padding: 40px;
$job-details-padding-y: 26px;

.contents {
    background-color: $white;
    min-height: min-content;
    width: 100%;
    overflow: auto;
}

.actions {
    margin-left: auto;
    height: 18px;
}

.title {
    height: 40px;
}

.actionIcon {
    cursor: pointer;
    margin-right: $margin-100;
    margin-left: $margin-100;
}

.section {
    padding-bottom: $job-details-padding-y;
    padding-top: $job-details-padding-y;
    @include padding-x($job-details-container-padding);
    border-bottom: 1px solid $job-details-bg-color;
}

.header {
    border-bottom: 0;
}

.featureBar {
    @include padding-x($job-details-container-padding);
}

.infoSection {
    flex-basis: 25%;
    flex-wrap: wrap;
    padding-right: 5px;
}

.infoItem {
    margin-bottom: 5px;
}

.infoItemLabel {
    flex-basis: 35%;
    font-weight: bold;
}

.infoItemValue {
    flex-basis: 64%;
}

.arrowPrevious, .arrowNext {
    flex: 0 0 40px;
    height: 164px;
    padding-top: 70px;
    padding-left: 20px;
    cursor: pointer;

    div {
        transform: scale(1.75, 4);
        color: $card_icon_color;
    }

}


.auditItem {
    width: 100%;
    padding-bottom: $padding-200;
}


.auditTable {
    th {
        color: $brand-primary;
    }
}