/*@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=greek');*/
@import url("/bspweb/jakarta.faces.resource/fonts.css.xhtml?ln=fonts&v=3_4");
@import url("/bspweb/jakarta.faces.resource/css/all.min.css.xhtml?ln=fa&v=6_2_1");

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 12pt;
    font-weight: 300;
    color: #3d5265;
    min-width: 380px;
    overflow: hidden;
}

body.login {
    background: url("/bspweb/jakarta.faces.resource/img/bg.jpg.xhtml?ln=bsp&v=2_0_1") no-repeat center #3d5265;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

textarea {
    font-family: 'Open Sans', sans-serif;
}

a {
    transition: color, background, background-color .2s;
}

a:hover {
    transition: color, background, background-color .2s;
}

.loginPanel {
    width: 25em;
    box-shadow: 0 0 3em rgba(0, 0, 0, .5);
    background: #fff;
    transition: width .3s;
}

.loginPanel .logo {
    height: 5em;
    background-color: #3d5265;
}

.loginPanel .platform {
    font-size: 1em;
}

.loginPanel h1 {
    margin: 1.2rem 2rem 0 2rem;
}

.loginPanel #oauthForm,
.loginPanel #loginForm {
    padding: 0 2em 1em 2em;
}

.loginPanel .buttonPanel {
    width: 100%;
    padding: 2em 0 0 0;
    text-align: right;
}

.loginPanel button.oauth {
    width: 100%;
    padding-left: 2em;
    /*text-align: left;*/
    background-repeat: no-repeat;
    background-position: .8em center;
}

.loginPanel div.separator {
    height: 1px;
    background: rgba(0, 0, 0, .15);
    width: 100%;
    margin-top: 2em;
    text-align: center;
}

.loginPanel div.separator > .label {
    display: inline-block;
    position: relative;
    top: -1em;
    padding: .3em 1em;
    background: #fff;
}

.loginPanel .languagePanel a {
    color: #3d5265;
}

.loginPanel .languagePanel a:hover {
    color: #000;
}

.layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.layoutTop {
    display: flex;
    align-items: stretch;
    flex-grow: 0;
    height: 5rem;
    background: #3d5265;
}

.layoutCenter {
    display: flex;
    flex-grow: 1;
    height: calc(100% - 5rem);
}

.layoutLeft {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    background: #0a88cb;
    /*min-height: 30em;*/
}

.layoutRight {
    flex-grow: 1;
    height: 100%;
    overflow: auto;
}

.logoWrapper {
    flex-grow: 0;
    max-width: 35%;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: .5em;
}

.logo img {
    height: 4em;
}

.platform {
    flex-grow: 1;
    font-size: 1.2em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    align-self: center;
    margin-left: .5em;
}

.topMenu {
    flex-grow: 0;
    display: flex;
    align-items: center;
    padding-right: .5em;
    white-space: nowrap;
}

.topMenu a {
    font-size: 2em;
    margin-right: .3em;
    padding: .2em;
    color: rgba(255, 255, 255, .8);
    outline: none;
}

.topMenu a:hover,
.topMenu a:focus {
    color: #fff;
    text-shadow: 0 0 .2em #fff;
}

.ui-overlaypanel.topMenuItem {
    display: none;
}

.topMenuItem {
    font-size: .9rem;
    display: flex;
    flex-direction: column;
    min-width: 15em;
}

.topMenuItem .ui-overlaypanel-content {
    padding: 0;
}

.topMenuItem .title {
    font-weight: 600;
    border-bottom: 1px solid #ddd;
    padding: .7em 1em;
}

.topMenuItem .title .subtitle {
    font-weight: 300;
}

.topMenuItem a {
    font-size: 1rem;
    display: block;
    margin: .2em 1px;
    padding: .5em .7em;
}

.topMenuItem a:hover,
.topMenuItem a:focus {
    color: #0a88cb;
    background: rgba(0, 0, 0, .1);
    text-shadow: none;
}

.topMenuItem a .fa {
    margin-right: 0.3em;
    min-width: 1.4em;
    text-align: center;
    color: #3d5265;
    font-size: 1.2em;
}

.leftMenu {
    flex-grow: 1;
    margin-top: 3em;
}

.leftMenu .menuItem {
    display: flex;
    align-items: center;
    height: 4rem;
    min-width: 16rem;
    font-weight: 400;
    text-decoration: none;
    color: rgba(255, 255, 255, .8);
    background: rgba(0, 0, 0, .15);
    margin: .25em 0 0 .3em;
    padding: 0 .6em;
    border-radius: 2em 0 0 2em;
    outline: none;
}

.leftMenu .menuItem:hover,
.leftMenu .menuItem:active {
    background: rgba(0, 0, 0, .3);
}

.leftMenu .menuItem .fa {
    font-size: 1.7em;
    line-height: 1em;
    margin-left: .2em;
    margin-right: .3em;
    min-width: 1.2em;
    text-align: center;
}

.languagePanel {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, .9);
    margin: .4rem;
}

.languagePanel > * {
    margin: .2rem;
}

.languagePanel .fa {
    font-size: 2em;
    color: rgba(0, 0, 0, .5);
}

.languagePanel .fa.separator {
    font-size: .5em;
}

.languagePanel .fa.separator::before {
    content: "\f142";
}

.languagePanel > a {
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
}

.languagePanel > a:hover {
    color: #fff;
}

.mainPanel {
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.mainPanel > .header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5em;
    padding-left: .5rem;
    padding-bottom: .5em;
    border-bottom: 1px solid #ddd;
}

.mainPanel > .header > .title {
    flex-grow: 0;
    font-size: 1.8em;
    font-weight: 400;
    margin: 0;
}

.mainPanel > .header > .title .subtitle {
    font-size: .7em;
    margin-left: 1rem;
    color: rgba(61, 82, 101, .7);
}

.mainPanel > .header > .actions {
    flex-grow: 1;
}

.mainPanel > .header > .actions a {
    font-size: 1.5em;
    color: rgba(61, 82, 101, 0.8);
    display: inline-block;
    outline: none;
}

.mainPanel > .header > .actions a:hover {
    color: #3d5265;
}


.mainPanel > .header > .actions a,
.mainPanel > .header > .actions .ui-selectbooleanbutton {
    vertical-align: middle;
    margin: 0 .5em;
}

.mainPanel > .header > .titleLoader {
    flex-grow: 0;
    display: none;
}

.FIXED_WIDTH .mainPanel .content {
    width: 100%;
    max-width: 1200px;
    align-self: center;
}

.dashboard {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.dashboardItem {
    color: #fff;
    flex-grow: 1;
    width: 40%;
    min-width: 30rem;
    margin: .5rem;
    padding: .9rem;
}

.dashboardItem a {
    color: #fff;
    text-decoration: none;
}

.dashboardItem a.headerIcon {
    font-size: 1em;
    font-weight: 500;
    flex-grow: 0;
    min-width: 10em;
    margin-right: 1rem;
    text-align: center;
    padding: 1rem;
}

.dashboardItem a.headerIcon:hover {
    background: rgba(0, 0, 0, .1);
}

.dashboardItem .headerIcon .fa,
.dashboardItem .headerIcon .fas {
    display: block;
    font-size: 3em;
    margin-bottom: .1em;
}

.dashboardItem > .header {
    font-size: .9em;
    display: flex;
    padding-left: .5rem;
    margin-bottom: 1em;
    align-items: center;
}

.dashboardItem .headerTitle {
    font-size: 4.5em;
    flex-grow: 1;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, .3);
    padding: .3em;
}

.dashboardItem .ui-datatable th,
.dashboardItem .ui-datatable tbody,
.dashboardItem .ui-datatable td,
.dashboardItem .ui-datatable tr {
    background: none;
    border: none;
    color: #fff;
}

.dashboardItem .ui-datatable thead {
    display: none;
}

.dashboardItem .ui-datatable td.date {
    width: 1em;
    white-space: nowrap;
    font-size: .9em;
}

.dashboardItem .ui-datatable td.reference {
    font-weight: 400;
}

.dashboardItem .ui-datatable td.description {
    width: 100%;
    overflow-wrap: break-word;
}

.dashboardItem .ui-datatable td.progress,
.dashboardItem .ui-datatable td.download {
    text-align: right;
    white-space: nowrap;
}

.dashboardItem .ui-progressbar,
.uploadPanel .ui-fileupload-content .ui-progressbar {
    background: rgba(0, 0, 0, .2);
    border: none;
    border-radius: 1em;
    display: inline-block;
    height: 4px;
    width: 5em;
    vertical-align: middle;
}

.dashboardItem .ui-progressbar .ui-progressbar-value,
.uploadPanel .ui-fileupload-content .ui-progressbar .ui-progressbar-value {
    border: none;
    border-radius: 1em;
    position: static;
    margin: 0;
    background: rgba(255, 255, 255, .8);
}

.bsp .workflowTable table {
    border-spacing: 1px 3px;
}

.workflowTable td.date,
.workflowTable td .date {
    font-size: .9em;
}

.workflowTable td .date {
    display: block;
}

.workflowTable td.reference,
.workflowTable td.state {
    font-weight: 600;
    text-align: center;
}

.workflowTable table td.stateFlag {
    border-left: 1em solid;
}

.workflowTable table th.stateFlag {
    border-left: 1em solid #ffffff;
}

.workflowTable table th .ui-selectcheckboxmenu {
    background: rgba(0, 0, 0, .15);
    transition: background .2s;
}

.workflowTable table th .ui-selectcheckboxmenu:hover,
.workflowTable table th .ui-selectcheckboxmenu:focus {
    background: rgba(0, 0, 0, .2);
    transition: background .2s;
}

.ui-selectmanybutton.stateFilterSmall {
    white-space: nowrap;
    font-size: 1.3em;
}

.ui-selectmanybutton.stateFilterSmall .ui-button {
    display: inline-flex;
    align-items: stretch;
    padding: 0;
    min-width: auto;
    background: rgba(0, 0, 0, .2);
}

.ui-selectmanybutton.stateFilterSmall .ui-button .ui-button-text {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding: .5em;
    min-width: 2em;
}

.ui-selectmanybutton.stateFilterSmall .ui-button:first-child .ui-button-text {
    border-top-left-radius: .1em;
    border-bottom-left-radius: .1em;
}

.ui-selectmanybutton.stateFilterSmall .ui-button:last-child .ui-button-text {
    border-top-right-radius: .1em;
    border-bottom-right-radius: .1em;
}

.ui-selectmanybutton.stateFilterSmall .ui-button.ui-state-active input[value='RUNNING'] + span {
    background: #257cb7;
}

.ui-selectmanybutton.stateFilterSmall .ui-button.ui-state-active input[value='COMPLETED'] + span {
    background: #6da738;
}

.ui-selectmanybutton.stateFilterSmall .ui-button.ui-state-active input[value='CANCELED'] + span {
    background: #d84a4a;
}

.ui-selectmanybutton.stateFilterSmall .ui-button.ui-state-active input[value='ACTIVE'] + span {
    background: #393;
}

.ui-selectmanybutton.stateFilterSmall .ui-button.ui-state-active input[value='INACTIVE'] + span {
    background: #888;
}

.ui-selectmanybutton.stateFilterSmall .ui-button input[value='RUNNING'] + span::before {
    content: "\f0ae";
}

.ui-selectmanybutton.stateFilterSmall .ui-button input[value='COMPLETED'] + span::before,
.ui-selectmanybutton.stateFilterSmall .ui-button input[value='ACTIVE'] + span::before {
    content: "\f00c";
}

.ui-selectmanybutton.stateFilterSmall .ui-button input[value='CANCELED'] + span::before,
.ui-selectmanybutton.stateFilterSmall .ui-button input[value='INACTIVE'] + span::before {
    content: "\f00d";
}

.ui-autocomplete.users .ui-autocomplete-panel {
    font-size: .9em;
    font-weight: 400;
}

.ui-autocomplete.users.large .ui-autocomplete-panel {
    min-width: 40em; /* appendTo must be defined */
}

.dashboardItem.pendingActions {
    background: #ef7725;
}

.dashboardItem.active {
    background: #257cb7;
}

.dashboardItem.completed {
    background: #6da738;
}

.dashboardItem.failed {
    background: #d84a4a;
}

.workflowItem.PENDING {
    border-color: #ef7725;
}

.workflowItem.RUNNING,
.workflowTable .stateFlag.RUNNING {
    border-color: #257cb7;
}

.workflowItem.COMPLETED,
.workflowTable .stateFlag.COMPLETED {
    border-color: #6da738;
}

.workflowItem.CANCELED,
.workflowTable .stateFlag.CANCELED {
    border-color: #d84a4a;
}

.step.PENDING {
    color: #ef7725;
}

.step.AWAITING,
.workflowTable .state.RUNNING {
    color: #257cb7;
}

.step.DONE,
.step.COMPLETED,
.workflowTable .state.COMPLETED {
    color: #6da738;
}

.step.CANCELED,
.workflowTable .state.CANCELED {
    color: #d84a4a;
}

label.task {
    font-size: .9em;
    font-weight: 500;
}

.step.fa,
.task.fa {
    min-width: 1.7em;
    text-align: center;
}

.step.fa.PENDING::before {
    content: "\f060";
}

.step.fa.DONE::before {
    content: "\f00c";
}

.step.fa.CANCELED::before {
    content: "\f00d";
}

.step.fa.AWAITING {
    min-width: .5em;
}

.fa.SIGN::before {
    content: "\f5b7";
}

.fa.REVIEW::before {
    content: "\f530";
}

.task.fa.SIGN {
    color: #393;
}

.task.fa.REVIEW {
    color: #9B58A4;
}

/*.ui-button .fa.REVIEW::before {
    content: "\f058";
}*/

.workflowList .ui-datalist-content {
    border: none;
}

.workflowList .ui-datalist-data {
    padding: 0;
}

.flowDetailsOverlay .ui-overlaypanel-content {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.flowDetailsOverlay {
    width: 90%;
    max-width: 30em !important; /* !important required for PF 7.0 */
    font-size: 1rem;
    font-weight: 400;
}

.flowDetailsOverlay .stepsWrapper {
    display: flex;
    flex-direction: column;
    font-size: .9em;
    margin-top: 1em;
    margin-bottom: .5em;
}

.workflowItem {
    display: block;
    margin: 1em 0;
    /*padding: .3em;*/
    color: #1f2e3f;
    font-weight: 400;
    background: rgba(0, 0, 0, .05);
    border-left: 1.1em solid;
    border-right: .3em solid;
    border-radius: 3px;
}

.workflowItem .reference {
    font-weight: 600;
}

.workflowItem .flexRow > * {
    margin: .4rem;
}

.workflowItem .flexRow.topRow {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.workflowItem .flexRow.details {
    margin: 0;
    flex-wrap: nowrap;
    flex-basis: 25em;
}

.workflowItem .flexRow .index,
.flowDetailsOverlay .steps .index,
.stepCheckbox .index {
    font-weight: 300;
    min-width: 1.2em;
    text-align: center;
    color: rgba(0, 0, 0, .4);
}

.workflowItem .flexRow .details > .index {
    font-size: 2em;
}

.stepCheckbox.disabled {
    opacity: .5;
}

.stepCheckbox label {
    cursor: pointer;
}

.grid {
    display: grid;
}

.grid .gridRow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem;
}

.gridRow.row1 {
    grid-row: 1;
}

.gridRow.row2 {
    grid-row: 2;
}

.gridRow.row3 {
    grid-row: 3;
}

.gridRow.col1 {
    grid-column: 1;
}

.ui-dialog.headless .ui-dialog-titlebar {
    padding: 0;
}

.ui-dialog.headless .title {
    font-size: 1.5rem;
    font-weight: 400;
}

.ui-dialog.headless .title .fa {
    font-size: 2em;
    margin-right: .2rem;
}

.ui-dialog.headless .title.success .fa {
    color: #339933;
}

.workflowItem .stepsWrapper {
    flex-basis: 25em;
    align-self: flex-start;
    font-size: .9em
}

.workflowItem .flowDetails,
.flowDetailsOverlay .flowDetails {
    font-size: .95em;
    flex-basis: 25em;
    flex-grow: .5;
}

.workflowItem .flowDetails label,
.flowDetailsOverlay .flowDetails label {
    font-weight: 400;
    display: block;
}

.workflowItem .flowDetails label:not(:first-child) {
    margin-top: .3em;
}

.workflowItem .flowDetails label.PENDING,
.workflowItem .flowDetails label.COMPLETED,
.workflowItem .flowDetails label.CANCELED,
.flowDetailsOverlay .flowDetails label.PENDING,
.flowDetailsOverlay .flowDetails label.COMPLETED,
.flowDetailsOverlay .flowDetails label.CANCELED {
    font-weight: 600;
}

.workflowItem .flowDetails .info,
.workflowItem .steps .info,
.flowDetailsOverlay .flowDetails .info,
.flowDetailsOverlay .steps .info {
    opacity: .8;
    font-size: .9em;
}

.workflowItem .steps .index,
.flowDetailsOverlay .steps .index {
    margin: 0;
}

.workflowItem > .flexRow,
.workflowItem .flexRow.steps,
.flowDetailsOverlay .steps {
    flex-wrap: nowrap;
}

.workflowItem .flexRow.steps,
.flowDetailsOverlay .stepsWrapper .flexRow.steps {
    align-items: flex-start;
}

.workflowItem .flowDetails .comments,
.workflowItem .flexRow.steps .comments,
.flowDetailsOverlay .flowDetails .comments,
.flowDetailsOverlay .steps .comments {
    font-size: .9rem;
    font-style: italic;
    font-weight: 400;
    opacity: .7;
    display: block;
}

.dashboardItem a.file {
    display: inline-block;
    font-size: .9em;
    font-weight: 600;
    color: rgba(255, 255, 255, .7);
    transition: color .3s;
}

.dashboardItem a.file:hover {
    color: #fff;
    transition: color .3s;
}

.workflowItem a.file,
.workflowTable a.file,
a.export {
    font-size: .9em;
    transition: .2s;
}

.workflowItem a.file:hover,
.workflowTable a.file:hover,
a.export:hover {
    color: #1f2e3f;
    transition: color .3s;
}

.workflowItem .buttons {
    text-align: left;
    white-space: nowrap;
    display: flex;
}

.flowDetailsOverlay .attributes,
.workflowItem .attributes {
    font-size: .9em;
    margin-bottom: 1rem;
}

.flowDetailsOverlay .expiration,
.workflowItem .expiration {
    color: #4A148C;
}

.flowDetailsOverlay .expiration .fa,
.workflowItem .expiration .fa {
    margin-left: 1em;
    margin-right: .2em;
}

.flowDetailsOverlay .dueDate .fa,
.workflowItem .dueDate .fa,
.stepCheckbox .dueDate .fa {
    min-width: 1em;
}

.flowDetailsOverlay .creation,
.workflowItem .creation {
    color: #444444;
}

.flowDetailsOverlay .owner,
.workflowItem .owner {
    color: #339933;
    font-weight: 300;
}

.flowDetailsOverlay .creation .fa,
.workflowItem .creation .fa,
.flowDetailsOverlay .owner .fa,
.workflowItem .owner .fa {
    margin-right: .2em;
}

.workflowItem a.file .fa,
.dashboardItem a.file .fa,
.workflowTable a.file .fa,
a.export .fa {
    font-size: 1.2em;
    margin-right: .2em;
    /*vertical-align: middle;*/
}

.fa.clickable {
    cursor: pointer;
    opacity: .7;
    transition: opacity .2s;
    vertical-align: middle;
}

.fa.clickable:hover {
    /*color: #0a88cb;*/
    opacity: 1;
    transition: opacity .2s;
}

.chooseFilePanel .fileDetails,
.chooseFilePanel .description,
.uploadPanel.ui-fileupload {
    box-sizing: border-box;
    display: block;
    margin: 3em auto;
}

.uploadPanel.ui-fileupload {
    max-width: 50em;
    background: #C8DADF;
    padding: .5em;
}

.chooseFilePanel .fileDetails,
.chooseFilePanel .description {
    width: 100%;
    max-width: 30em;
}

.chooseFilePanel .fileDetails {
    margin-top: 2em;
}

.chooseFilePanel .fileDetails .filename {
    font-weight: 500;
}

.uploadPanel .ui-fileupload-buttonbar {
    background: none;
    border: none;
    text-align: center;
    position: relative;
    height: 0;
    padding: 0;
    top: 12em;
    z-index: 10;
}

.uploadPanel .ui-fileupload-buttonbar .ui-button {
    color: #3d5265;
    font-size: 1.3em;
    font-weight: 500;
    background: none;
    border: none;
    padding-top: 9em;
    padding-bottom: 6em;
    top: -9em;
    display: block;
}

.uploadPanel .ui-fileupload-buttonbar .ui-button:hover,
.uploadPanel .ui-fileupload-buttonbar .ui-button:active {
    font-weight: 500;
    color: #1f2e3f;
    background: none;
    border: none;
}

.uploadPanel .ui-fileupload-buttonbar .ui-button .ui-icon {
    display: none;
}

.uploadPanel .ui-fileupload-content {
    height: 22em;
    background: none;
    border: .15em dashed rgba(61, 82, 101, .5);
    position: relative;
}

.uploadPanel .ui-fileupload-content::after {
    font-family: "Font Awesome 5 Free";
    font-size: 6em;
    font-weight: 900;
    text-rendering: auto;
    content: "\f574";
    position: absolute;
    top: .8em;
    width: 2em;
    left: calc(50% - 1em);
    text-align: center;
    opacity: .3;
}

.uploadPanel .ui-fileupload-files td {
    padding: .5em .2em;
}

.uploadPanel .ui-fileupload-files td:nth-child(3) {
    font-weight: 400;
    padding: 0 1em;
    white-space: nowrap;
}

.uploadPanel .ui-fileupload-files td.ui-fileupload-progress {
    width: 100%;
}

.uploadPanel .ui-fileupload-progress {
    width: 10em;
}

.uploadPanel .ui-fileupload-content .ui-progressbar {
    height: .5em;
    width: 100%;
    top: 0;
}

.uploadPanel .ui-button.ui-fileupload-cancel,
.uploadPanel .ui-button.ui-fileupload-cancel:active {
    background: none;
}

.uploadPanel .ui-fileupload-buttonbar .ui-button .ui-button-text {
    display: inline-block;
    padding: 0;
}

.form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.form > label,
.form > .label {
    font-size: .9rem;
    font-weight: 400;
    margin-bottom: .3em;
    margin-left: .2em;
    line-height: 1.5em;
}

.form > label:not(:first-child),
.form > .label {
    margin-top: 1em;
}

.form > .ui-inputfield,
.form > .ui-autocomplete,
.form > .ui-chips {
    width: 100%;
    max-width: 20em;
}

.form > .ui-inputfield.long,
.form > .ui-autocomplete.long,
.form > .ui-selectcheckboxmenu.long,
.form > .ui-chips.long,
.form > .label.long,
.form > .ui-inputgroup.long {
    width: 50%;
    min-width: 25em;
    max-width: 100%;
}

.columns-2 .form > .ui-inputfield.long,
.columns-2 .form > .ui-autocomplete.long,
.columns-2 .form > .ui-selectcheckboxmenu.long,
.columns-2 .form > .ui-chips.long,
.columns-2 .form > .label.long {
    width: 100%;
}

.form > .ui-selectonemenu.full,
.form > .ui-autocomplete.full,
.form > .ui-autocomplete.full > .ui-autocomplete-input,
.form > .ui-chips.full,
.form > .ui-inputgroup.full {
    width: 100%;
    max-width: 100%;
}

.form > .ui-inputfield.expand {
    max-width: 100%;
}

.form .ui-selectonebutton,
.form .ui-selectmanybutton,
.form .booleanButtonWrapper {
    margin: .3em 0 .28em 0;
}

.form .ui-chkbox.matchAll .ui-chkbox-box {
    line-height: unset;
}

.form .ui-chkbox.matchAll .ui-chkbox-icon.ui-icon {
    height: auto;
}

.form > h2 {
    font-size: 1em;
    font-weight: 300;
    width: 100%;
    text-align: center;
    margin-top: 2em;
    margin-bottom: 0;
    padding-bottom: .2em;
    border-bottom: 1px solid rgba(0, 0, 0, .15);
}

.searchField {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.searchField a.clear {
    position: absolute;
    font-size: 1.2em;
    line-height: 1.2em;
    right: .5em;
    color: rgba(0, 0, 0, .3);
    outline: none;
    transition: color .3s;
}

.searchField a.clear:hover {
    color: rgba(0, 0, 0, .5);
    transition: color .3s;
}

.daterange-container {
    display: flex;
    width: 100%;
    min-width: 20em;
    gap: .2em;
}

.daterange-container > .ui-calendar {
    flex-grow: 1;
}

.daterange-container .ui-calendar > input {
    width: 100%;
}

.ui-dialog.small {
    max-width: 20em;
    min-height: 10em;
}

.ui-dialog.smallHeight {
    min-height: 10em;
}

.dialogMessage {
    font-size: .9em;
    font-weight: 600;
    display: inline-block;
    max-width: 40em;
    padding: .2em;
}

.buttonPanel {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.buttonPanel .spacer {
    flex-grow: 1;
}

.columnCenter,
.buttonColumn {
    text-align: center;
}

.buttonColumn {
    width: 2em;
}

.buttonColumn a.ui-commandlink {
    margin-left: .25em;
    margin-right: .25em;
    transition: color .3s;
    outline: none;
    white-space: nowrap;
}

.buttonColumn a.ui-commandlink:hover {
    color: #1f2e3f;
    transition: color .3s;
}

.buttonColumn a.ui-commandlink .label {
    margin-left: .2em;
    font-weight: 600;
}

.buttonColumn .fa,
.buttonColumn .fas {
    font-size: 1.2em;
}

.ui-datatable tbody td.stepOrder.parallel {
    box-shadow: -.4em 0 0;
}

.ui-datatable tbody td.stepOrder.parallel.first {
    border-top-left-radius: .3em;
}

.ui-datatable tbody td.stepOrder.parallel.last {
    border-bottom-left-radius: .3em;
}

.ui-datatable tbody td.stepOrder.parallel.var0,
.ui-datatable tbody td.stepOrder.parallel.var0 a:not(:hover) {
    color: #9B58A4;
}

.ui-datatable tbody td.stepOrder.parallel.var1,
.ui-datatable tbody td.stepOrder.parallel.var1 a:not(:hover) {
    color: #099;
}

.ui-datatable tbody td.stepOrder.parallel.var2,
.ui-datatable tbody td.stepOrder.parallel.var2 a:not(:hover) {
    color: #c58f22;
}

.ui-datatable tbody td.stepOrder.parallel.var3,
.ui-datatable tbody td.stepOrder.parallel.var3 a:not(:hover) {
    color: #c33;
}

.signHeader {
    padding: 1em;
    text-align: center;
}

.subheader {
    font-size: .9em;
    font-weight: 600;
}

.flexRow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.flexRow.columns-2 {
    align-items: flex-start;
}

.flexRow.columns-2 > * {
    margin-right: 1em;
    margin-bottom: 1em;
    flex-grow: 1;
    flex-basis: 40%;
}

.stepCheckbox {
    display: flex;
    align-items: center;
    font-size: .9em;
    font-weight: 400;
    line-height: 1.5rem;
}

.expand {
    flex-grow: 1;
}

.ui-autocomplete.expand > .ui-inputfield {
    width: 100%;
}

.flexRow.vertical {
    flex-direction: column;
    align-self: flex-start;
}

.spacer {
    display: block;
    width: .5em;
    height: 1em;
}

.emphasis {
    font-weight: 400;
}

.archived {
    font-size: .9em;
    font-weight: 300;
    color: rgba(0, 0, 0, .5);
    display: block;
}

.info {
    font-size: .9em;
    font-style: italic;
}

.info.important {
    color: #c33;
}

.paletteColor {
    font-size: 1.3em;
}

.roleList.inline,
.groupList.inline {
    display: inline;
    font-weight: 400;
    font-size: .8em;
    font-style: italic;
    max-width: 25em;
}

.roleList.inline .role {
    background: none;
    font-size: 1em;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

.roleList.inline .role.CREATOR {
    color: #0a88cb;
}

.role.CREATOR {
    background: #0a88cb;
}

.roleList.inline .role.SIGNER {
    color: #393;
}

.role.SIGNER {
    background: #393;
}

.roleList.inline .role.REVIEWER {
    /*color: #099;*/
    color: #9B58A4;
}

.role.REVIEWER {
    /*background: #099;*/
    background: #9B58A4;
}

.roleList.inline .role.OVERSEER {
    color: #4A148C;
}

.role.OVERSEER {
    background: #4A148C;
}

.roleList.inline .role.ADMIN {
    color: #c33;
}

.role.ADMIN {
    background: #c33;
}

.roleList.inline .role.ALL_GROUPS {
    color: #3E2723;
}

.role.ALL_GROUPS {
    background: #3E2723;
}

.groupList.inline {
    color: #c58f22;
}

.group {
    background: #c58f22;
}

.tagList,
.groupList,
.roleList {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 0;
    align-items: flex-start;
    margin: .2em 0 .4em -.3em;
}

.tag.plain {
    font-size: .9em;
}

.tag,
.group,
.role {
    display: inline-block;
    font-size: .8em;
    font-weight: 700;
    color: #fff;
    border-radius: .2em;
    padding: .2em .8em .3em .8em;
    margin: 0 .15em;
    white-space: nowrap;
}

.tag.unselected {
    opacity: .5;
    color: rgba(255, 255, 225, .8);
}

.tag.selected {
    opacity: 1;
}

a.tagButton,
a.groupButton,
a.roleButton {
    display: inline-block;
    opacity: .8;
    margin: .1em 0;
}

a.tagButton:hover,
a.groupButton:hover,
a.roleButton:hover {
    opacity: 1;
}

.userRow.inactive {
    color: rgba(0, 0, 0, .4);
}

.logoPreview img {
    max-width: 10em;
    vertical-align: middle;
    background: url("/bspweb/jakarta.faces.resource/img/checkered.png.xhtml?ln=bsp&v=2_0_1") repeat;
}

.logoPreview .remove {
    margin-left: 1em;
}

.logoPreview .remove .fa {
    font-size: 1.2em;
}

.ui-panel.toggleable .ui-panel-titlebar {
    cursor: pointer;
}

.ui-radiobutton.paletteColor .ui-radiobutton-icon.ui-icon {
    color: inherit;
    font-size: 1.3em;
}

.ui-datatable.small {
    max-width: 50em;
}

.ui-selectbooleanbutton.iconOnly {
    min-width: 1em;
}

.ui-dialog.overflowFix,
.ui-dialog.overflowFix .ui-dialog-content {
    overflow: visible;
}

.ui-selectbooleanbutton.lockButton,
.ui-selectbooleanbutton.lockButton.ui-state-active {
    background: rgba(0, 0, 0, .2);
    opacity: .8;
}

.lockIcon.fa-lock,
.ui-selectbooleanbutton.lockButton {
    color: #c33;

}

.lockIcon.fa-unlock,
.ui-selectbooleanbutton.lockButton.ui-state-active {
    color: #393;
}

.fieldsetGroup .ui-fieldset:first-child {
    border-width: 1px 0 1px 0;
}

.fieldsetGroup .ui-fieldset {
    position: relative;
    padding-top: 3em;
    margin: 0;
    border-width: 0 0 1px 0;
}

.fieldsetGroup .ui-fieldset .ui-fieldset-legend {
    width: calc(100% - 2rem);
    position: absolute;
    top: 0;
    padding: .5rem 0;
    margin: 0;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.5em;
    display: flex;
    flex-direction: row-reverse;
    color: #1f2e3f;
    transition: color .3s;
}

.fieldsetGroup .ui-fieldset .ui-fieldset-legend:hover {
    color: #0a88cb;
    transition: color .3s;
}

.fieldsetGroup .ui-fieldset .ui-fieldset-legend .subtitle {
    font-size: .9em;
    font-weight: 300;
    color: #1f2e3f;
}

.fieldsetGroup .ui-fieldset .ui-fieldset-content > *:first-child {
    display: block;
    margin-top: 1.5em;
}

.fieldsetGroup .ui-fieldset .ui-fieldset-toggler {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    line-height: 3em;
    text-indent: 0;
    flex-grow: 1;
    text-align: right;
}

.fieldsetGroup .ui-fieldset .ui-fieldset-toggler.ui-icon-minusthick::before {
    content: "\f077";
}

.fieldsetGroup .ui-fieldset .ui-fieldset-toggler.ui-icon-plusthick::before {
    content: "\f078";
}

.fa.lockIcon {
    font-size: 1em;
}

.placeholder {
    color: #888;
    opacity: .5;
}

@media (max-width: 1600px) {
    .dashboardItem {
        min-width: 35rem;
    }
}

@media (min-width: 1400px) {
    .dashboardItem {
        min-width: 20em;
        font-size: .95em;
    }

    td.hideSmall {
        display: none !important;
    }
}

@media (min-width: 1620px) {
    .dashboardItem {
        font-size: 1em;
    }

    td.hideSmall {
        display: table-cell !important;
    }
}

@media (max-width: 1000px) {

    .leftMenu .menuItem {
        min-width: initial;
    }

    .leftMenu .menuItem .fa {
        margin-right: 0;
    }

    .leftMenu .menuItem .itemLabel {
        display: none;
    }

    .leftMenu .languagePanel {
        display: flex;
        flex-direction: column;
    }

    .leftMenu .languagePanel > * {
        margin: 0;
    }

    .leftMenu .languagePanel .fa.separator::before {
        content: "\f141";
    }

    .workflowItem > .flexRow {
        flex-wrap: wrap;
    }

    .form > .ui-inputfield.long,
    .form > .ui-autocomplete.long,
    .form > .ui-selectcheckboxmenu.long,
    .form > .ui-chips.long,
    .form > .label.long {
        width: 100%;
        min-width: 20em;
    }

    .hideSmall {
        display: none !important;
    }

    .dashboardItem .ui-progressbar {
        width: 100%;
        min-width: 4em;
    }

    .layoutLeft .languagePanel {
        display: flex;
        flex-direction: column;
    }

    .layoutLeft .languagePanel > * {
        margin: 0;
    }
}

@media (max-width: 600px) {
    .platform {
        font-size: 3vw;
    }

    .dashboardItem {
        min-width: 20rem;
    }

    .dashboardItem .ui-progressbar {
        min-width: 2em;
    }

    .dashboardItem .ui-datatable table td {
        padding: .5em;
    }

    .workflowItem > .flexRow {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 27em) {

    .loginPanel {
        width: 90%;
        transition: width .3s;
    }
}