/*
 * 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%;
}

/*
 * 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;
}


/*
 * 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 other 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-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;
}

/* ----------------------------------------------------------------------------- */
/* --- 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;
}