/*
 * This class is being used for p:panelGrid components that represent input forms, to style the column that holds labels
 *
 */
.vd-form-label {
	/* do not add line breaks for labels in forms */
/* 	white-space: nowrap;  */
}

/*
 * This class is being used for p:panelGrid components that represent input forms, to style the column that holds input components
 */
.vd-form-input {

}

/*
 * This class is being used for a combination of input components within forms.
 * It is set on the div (h:panelGroup with layout='block') that surrounds those components.
 */
.vd-embedded-component-group {
	width: 100%;
	display: flex;
    flex-wrap: wrap;
}

/*
 * This class is being used for actionable components, like p:commandButton and p:commandLink,
 * when they are displayed within a column of a p:dataTable. By doing so, the actionable
 * component takes the full width of the dataTable column.
 */
.vd-actioncomponent-in-datatable {
	display: block;
}

/*
 * This leads to wizard step titles all having an equal width.
 * TODO this needs to be moved to the getPageStyle() method for
 * Anlageassistent.
 */
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
	width: 120px;
}

/*
 * This is needed in order to let long item label text for a selectBooleanCheckbox appear on
 * the right side of the actual check box instead of beneath it.
 */
.ui-chkbox.vd-chkbox-with-long-label {
    width: 100%;
    height: auto;
}

.ui-chkbox.vd-chkbox-with-long-label .ui-chkbox-label {
	display: initial;
}


/*
 * With this you can get rid of borders around forms and other divs.
 */
/*
.vd-panel-grid-for-structural-container > div,
.vd-panel-grid-for-data-container > div,
.vd-panel-grid-columns-ltr-1-1 > div,
.vd-panel-grid-columns-ltr-2-1 > div,
.vd-panel-grid-columns-ltr-2-2 > div {
 	border: none;
}
*/

/*
 * These styles make input forms look better when they are displayed on a wide screen.
 */
.vd-panel-grid-columns-ltr-1-1,
.vd-panel-grid-columns-ltr-2-1,
.vd-panel-grid-columns-ltr-3-1,
.vd-panel-grid-for-data-container  {
	max-width: 600px;
/*     max-width: fit-content; */
}

/*
 * This class is being used to style the developer panel grid or datatable, e.g. to set a maximum width.
 */
.vd-default-max-width {
	max-width: 600px;
}

.vd-error-indication {
	color: red;
}


/*
 * The following style ensures that buttons in toolbars are still positioned
 * side-by-side even if there is a width of 100% for .ui-fluid .ui-button.
 * This problem occurs when you use ui-fluid class for div that are enclosing
 * p:toolbar tags. (mmt 18-Apr-2019)
 */
body .ui-toolbar .ui-button {
	width: auto;
}

/*
 * Otherwise, the border-width would be 2px, which differed from
 * other div's border widths.
 */
body .ui-toolbar {
	border-width: 1px;
}

/*
 * adjusted margin-top to properly display the button icon vertically aligned
 */
body .ui-toolbar .ui-button-text-icon-left .ui-icon {
	margin-top: -8px;
}


/*
 * With this style, the megamenu doesn't get too wide.
 */
.layout-megamenu {
	width: auto;
}

/*
 * Ths is required since the California menu does not display disabled menu items different than enabled menu items.
 */
.vd-disabled-menu-item {
	opacity: 0.6;
	pointer-events: none;
    cursor: default;
    text-decoration: none;
}

/*
 * This was to get rid of horizontal scrollbar in case no data was found in a p:dataTable.
 * However, the original problem seems to not having been caused by css styling.
 * Left here for documentation purposes. (mmt 15-Aug-2018)
 */
/* .ui-datatable table { */
/* 	border-collapse: separate; */
/* } */

/* --- this cannot be done here since we need JavaScript to achieve the goal --- */
/* --- search for o:onloadScript in the templates to find the solution       --- */
/* div:has(> label.vd-form-component-without-label) { */
/* 	width: 100%; */
/* 	white-space: wrap; */
/* } */

/* div:has(> span.vd-form-placeholder) { */
/* 	width: 0%; */
/* } */


/*
 * To avoid a super wide button component. Note that for a link this is not a problem
 * since normally only text is displayed for a link.
 */
.ui-fluid .vd-panel-grid-for-data-container .vd-form-component-without-label.ui-button {
	width: auto;
}

/*
 * This class is being used to style the developer tooltip, e.g. to set a maximum width.
 */
.vd-dev-tooltip {
	max-width: 600px;
}

table.vd-dev-tooltip, table.vd-dev-tooltip th, table.vd-dev-tooltip td {
   border: 1px solid black;
}

.vd-dev-tooltip-label {
	font-weight: bold;
}

/* ----------------------------- */
/* --- developer bar styling --- */
/* ----------------------------- */
#html_developerBarForm\:developerBarPanel {
	border: 3px dashed red;
}

#html_developerBarForm\:developerBarPanelGrid.ui-panelgrid .ui-grid-responsive .ui-panelgrid-cell {
	border: 1px solid black;
}

#html_developerBarForm\:developerBarPanel,
#html_developerBarForm\:developerBarPanel .ui-button,
#html_developerBarForm\:developerBarPanel .ui-inputfield {
	font-size: 12px;
}


/* ----------------------------------------- */
/* --- California Layout doesn't provide --- */
/* --- support for navigation icons in   --- */
/* --- p:timeline. These styles fix the  --- */
/* --- issue by using fontawesome icons  --- */
body .timeline-frame .timeline-navigation .ui-icon {
    display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
	font-size: 2em
	width: 1.28571429em;
	text-align: center;
	text-indent: inherit;
	vertical-align: middle;
}

body .timeline-frame .timeline-navigation .ui-icon.ui-icon-circle-arrow-w:before {
    content: "\f060";
}
  
body .timeline-frame .timeline-navigation .ui-icon.ui-icon-circle-arrow-e:before {
    content: "\f061";
}

body .timeline-frame .timeline-navigation .ui-icon.ui-icon-circle-zoomin::before {
	content: "\f055";
}

body .timeline-frame .timeline-navigation .ui-icon.ui-icon-circle-zoomout::before {
	content: "\f056";
}

/*
 to make <p:panelGrid> with multiple columns let the columns appear
 beneath each other when the browser width is small
 */
@media screen and (max-width: 1024px) {
	.ui-panelgrid .ui-grid-row {
	    flex-wrap: wrap;
	}
}

/* ------------------------------------------------------------- */
/* --- default min-width values for multi-column panel grids --- */
.ui-grid-row .vd-panel-grid-columns-ltr-2-1,
.ui-grid-row .vd-panel-grid-columns-ltr-2-2 {
	    min-width: 500px; /* 1024/2 = 512 */
}

.ui-grid-row .vd-panel-grid-columns-ltr-3-1,
.ui-grid-row .vd-panel-grid-columns-ltr-3-2,
.ui-grid-row .vd-panel-grid-columns-ltr-3-3 {
	    min-width: 330px; /* 1024/3 = 341 */
}

.ui-grid-row .vd-panel-grid-columns-ltr-4-1,
.ui-grid-row .vd-panel-grid-columns-ltr-4-2,
.ui-grid-row .vd-panel-grid-columns-ltr-4-3,
.ui-grid-row .vd-panel-grid-columns-ltr-4-4 {
	    min-width: 258px; /* 1024/4 = 256 */
}

.ui-grid-row .vd-panel-grid-columns-ltr-5-1,
.ui-grid-row .vd-panel-grid-columns-ltr-5-2,
.ui-grid-row .vd-panel-grid-columns-ltr-5-3,
.ui-grid-row .vd-panel-grid-columns-ltr-5-4,
.ui-grid-row .vd-panel-grid-columns-ltr-5-5 {
	    min-width: 200px; /* 1024/5 = 204 */
}

.ui-grid-row .vd-panel-grid-columns-ltr-6-1,
.ui-grid-row .vd-panel-grid-columns-ltr-6-2,
.ui-grid-row .vd-panel-grid-columns-ltr-6-3,
.ui-grid-row .vd-panel-grid-columns-ltr-6-4,
.ui-grid-row .vd-panel-grid-columns-ltr-6-5,
.ui-grid-row .vd-panel-grid-columns-ltr-6-6 {
	    min-width: 160px; /* 1024/6 = 170 */
}

.ui-grid-row .vd-panel-grid-columns-ltr-7-1,
.ui-grid-row .vd-panel-grid-columns-ltr-7-2,
.ui-grid-row .vd-panel-grid-columns-ltr-7-3,
.ui-grid-row .vd-panel-grid-columns-ltr-7-4,
.ui-grid-row .vd-panel-grid-columns-ltr-7-5,
.ui-grid-row .vd-panel-grid-columns-ltr-7-6,
.ui-grid-row .vd-panel-grid-columns-ltr-7-7 {
	    min-width: 140px; /* 1024/7 = 146 */
}

.ui-grid-row .vd-panel-grid-columns-ltr-8-1,
.ui-grid-row .vd-panel-grid-columns-ltr-8-2,
.ui-grid-row .vd-panel-grid-columns-ltr-8-3,
.ui-grid-row .vd-panel-grid-columns-ltr-8-4,
.ui-grid-row .vd-panel-grid-columns-ltr-8-5,
.ui-grid-row .vd-panel-grid-columns-ltr-8-6,
.ui-grid-row .vd-panel-grid-columns-ltr-8-7,
.ui-grid-row .vd-panel-grid-columns-ltr-8-8 {
	    min-width: 120px; /* 1024/8 = 128 */
}

/*
 This fixes the problem where in PF 6.2 in combination with
 PF California the picklist filter is not visible. 
 */
body .ui-picklist .ui-picklist-filter-container {
    display: unset;
}


/* ---------------------------------------------------------------------------------------------------------- */
/* --- These styles affect some small text or link that you can display in the topbar (see topbar.xhtml)  --- */
body .layout-wrapper .layout-topbar #topbar-info {
    left: 450px;
    line-height: 60px;
    top: 0px;
    height: 60px;
    position: absolute;
    color: white;
}

body .layout-wrapper .layout-topbar #topbar-info span {
    display: inline-block;
}

body .layout-wrapper .layout-topbar #topbar-info a {
	color: white;
}

@media screen and (max-width: 1024px) {
    body .layout-wrapper .layout-topbar #topbar-info {
      left: 230px;
    }
}

@media screen and (max-width: 512px) {
    body .layout-wrapper .layout-topbar #topbar-info {
      display: none;
    }
}



#form-north\:topbar-growl_container.ui-growl {
    left: 4px;
    top: 4px;
    height: 80px;
}


/* ----------------------------------------------------------------------------- */
/* --- Custom wizard tab titles with circles and numbers                     --- */
/* --- New classes: vd-tabtitle, vd-tabtitle-circle, vd-tabtitle-text        --- */
/* --- See also custom-wizard-title.xhtml, where the classes are used        --- */
/* ---                                                                       --- */
li.ui-wizard-step-title.vd-tabtitle {
	font-size: 14px;
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title.vd-tabtitle,
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title.ui-state-highlight.vd-tabtitle {
	border-top: 1px solid #d6d7d9;
}
	
body .ui-wizard .ui-wizard-step-titles li.ui-wizard-step-title.vd-tabtitle,
body .ui-wizard .ui-wizard-step-titles li.ui-wizard-step-title.ui-state-highlight.vd-tabtitle {
	height: 100%;
	background-color: white;
	color: black;
	border-left: none;
	border-right: none;
}

body .ui-wizard .ui-wizard-step-titles li.ui-wizard-step-title.vd-tabtitle:first-child {
	border-left: 1px solid #d6d7d9;
	border-right: none;
}

body .ui-wizard .ui-wizard-step-titles li.ui-wizard-step-title.vd-tabtitle:last-child {
	border-right: 1px solid #d6d7d9;
	border-left: none;
}


body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title .vd-tabtitle-circle {
	border-radius: 50%;
	width: 30px;
	height: 30px;
	/*background-color: transparent;*/
	padding: 10px;
	border: 1px solid black;
	vertical-align: middle;
	text-align: center;
	
	display: flex;
    justify-content: center;
    flex-direction: column;
}

body .ui-wizard .ui-wizard-step-titles :not(.ui-wizard-step-title.ui-state-highlight) .vd-tabtitle-circle {
    background-color: transparent;
}

body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title .vd-tabtitle-text {
    text-align: center;
    margin-top: 8px;
    margin-bottom: 8px;
}

body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title.ui-state-highlight .vd-tabtitle-text {
    font-weight: bold;
}

/*
 If there are editable components in an embedded component group and the embedded component
 group is in a column of a <p:dataTable> or <p:treeTable>, the components should take
 the whole width of the column, making data entry as convenient as possible.
 */
.vd-embedded-component-group.vd-embedded-component-group-editable-in-list {
	justify-content: stretch;
}