body {
color: #09090B;
font-weight: 300;
background: #E5E6E7 url('../../img/backgrounds/sdplus-shape.png');
background-size: cover;
background-position: top center;
}
body.dev {
background: #FFF url('../../img/backgrounds/dev.svg');
}
#page-body {
margin-top: 0;
}
#page-jobs {
width: calc(100% - 3rem);
margin: 0 auto;
}
#pj-header {
margin: 2.5rem 2rem 0 2rem;
display: flex;
font-size: 1.5rem;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#pj-header img {
width: 11rem;
display: block;
}
#pj-sel-lang {
width: 13rem;
height: 4rem !important;
}
#pj-subpage {
margin-top: 3rem;
}
.libsel {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
padding: 0 0.75rem;
box-sizing: border-box;
width: 150px;
height: 3rem;
border-radius: 0.75rem;
border: 1px solid #CBD8E0;
cursor: pointer;
background-color: #FFF;
}
.libsel.disabled {
cursor: not-allowed;
color: #666;
background-color: #F0F0F0;
}
.libsel.no-selection {
color: #888;
}
.libsel .icon-angle-down {
color: #888;
transition: all 0.3s;
}
.libsel .item {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex: 1 1 auto;
align-self: stretch;
overflow: hidden;
}
.libsel .item.hint-below {
flex-direction: column;
align-items: flex-start;
gap: 0.3rem;
}
.libsel .item.center-header {
justify-content: center;
}
.libsel .item.hint-below.center-header {
align-items: center;
}
.libsel .item .icon {
font-size: 1.25rem;
margin-right: 1rem;
}
.libsel .item .label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.libsel .item .hint {
color: #888;
margin-left: 1.25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.libsel .unselect {
display: flex;
flex: 0 0 30px;
align-items: center;
justify-content: center;
height: 30px;
color: #BBB;
font-size: 1.3rem;
border-radius: 0.5rem;
border: 1px solid transparent;
}
.libsel:not(.disabled) .unselect:hover {
cursor: pointer;
border-color: #C0C0C0;
background-color: #F8F8F8;
}
.libsel.disabled .unselect,
.libsel.no-selection .unselect {
display: none;
}
.libsel.no-selection.highlight-no-selection:not(.disabled) {
background-color: #FFAD93;
}
.libsel.no-selection.highlight-no-selection:not(.disabled),
.libsel.no-selection.highlight-no-selection:not(.disabled) .fa {
color: #333;
}
.libsel:not(.disabled):hover, .libsel.hovered {
color: #333;
border-color: #666;
}
.libsel.hovered              .icon-angle-down,
.libsel:not(.disabled):hover .icon-angle-down {
color: #333;
}
.libsel.hovered .icon-angle-down {
transform: scaleY(-1);
}
.libsel.hovered              .unselect .fa,
.libsel:not(.disabled):hover .unselect .fa {
color: #D76751;
}
.libsel-body {
top: 0;
left: 0;
position: fixed;
background-color: #FFF;
border-radius: 0.5rem;
border: 1px solid #666;
box-shadow: 0.2rem 0.2rem 0.3rem rgba(0, 0, 0, 0.4);
padding: 0.5rem;
box-sizing: border-box;
}
.libsel-body-table-wrapper {
overflow-y: auto;
overflow-x: hidden;
max-height: 250px;
}
.libsel-body-table {
width: 100%;
border-collapse: collapse;
}
.libsel-body-table td {
padding: 0 0.5rem;
line-height: 2.75rem;
}
.libsel-body-table td.hint-below {
padding: 0.75rem 0.5rem;
line-height: 1.75rem;
}
.libsel-body-table td.icon,
.libsel-body-table td.label,
.libsel-body-table td.checkbox {
width: 1%;
white-space: nowrap;
}
.libsel-body-table tr.selected       td.checkbox .unchecked { display: none; }
.libsel-body-table tr:not(.selected) td.checkbox .checked   { display: none; }
.libsel-body-table td.icon {
font-size: 1.25rem;
}
.libsel-body-table td.hint {
color: #888;
padding-left: 1rem;
}
.libsel-body-table tr.separator-before td {
height: 0;
padding-top: 0.5rem;
padding-bottom: 0;
border-bottom: 1px solid #BBB;
}
.libsel-body-table tr.separator-after td {
height: 0;
padding-top: 0.5rem;
}
.libsel-body-table tr.selected,
.libsel-body-table tr.selectall,
.libsel-body-table tr.selectable:hover {
cursor: pointer;
}
.libsel-body-table tr.selectall td {
color: #465AC5;
font-weight: bold;
}
.libsel-body-table tr.selectall .label .fa {
margin-right: .5rem;
}
.libsel-body-table tr.selectable.selected {
background-color: #175E9A;
}
.libsel-body-table tr.selectall:hover,
.libsel-body-table tr.selectable:hover {
background-color: #0F3C62;
}
.libsel-body-table tr.selectall:hover     td,
.libsel-body-table tr.selectable:hover    td,
.libsel-body-table tr.selectable.selected td,
.libsel-body-table tr.selectable:hover    .hint,
.libsel-body-table tr.selectable.selected .hint,
.libsel-body-table tr.selectable:hover    td .fa,
.libsel-body-table tr.selectable.selected td .fa {
color: #EEE !important;
}
.libsel-body-table tr.disabled {
color: #999;
}
.libsel-filter-container {
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid #BBB;
margin-bottom: 0.5rem;
}
.libsel-filter-container input[name=filter] {
flex-grow: 1;
padding: 0 0.5rem;
box-sizing: border-box;
color: #666;
font-style: italic;
height: 3.25rem;
line-height: 3.25rem;
border-width: 0;
border-radius: 0;
}
.libsel-filter-container .clear-filter-icon-container {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
color: #999;
border-radius: 0.5rem;
border: 1px solid transparent;
cursor: pointer;
}
.libsel-filter-container .clear-filter-icon-container:hover {
color: #D76751;
border-color: #C0C0C0;
background-color: #F8F8F8;
}