/* Avoid showing interpolation text ins Vue instances until fully load. */
[v-cloak] {
    display: none;
}

/* Allows to see the BlockUI screen. */
.p-blockui-container {
	position: static !important;
}
.p-blockui {
	position: fixed !important;
}

/* Disable highlighting in tree selection */
.p-treenode-content.p-treenode-selectable.p-highlight {
	background: transparent !important;
	color: inherit !important;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler {
	color: inherit !important;
}

/* Makes the bootstrap error messages to appear. */
span.invalid-feedback {
	display: block !important;
}

/* Removes the extra margin to the right of the datatable buttons with icons */
.btn:not(.rounded-circle)>i {
	margin-right: 0px !important;
}

/* Removes the grey background from the datatables headers */
.p-datatable .p-datatable-header {
	background-color: white !important;
}

/* Removes the top border on datatable header */
.p-datatable .p-datatable-header {
	border: none !important;
}

/* Adds a blocking color to disabled selects. */
select.form-control:disabled {
	background-color: #f1f4f8 !important;
}

/* Gives styles to multistep tabs */
.multistep.nav-pills .nav-item {
	border: 1px solid #dde4ea !important;
	margin: 2px !important;
	border-radius: 4px !important;
	background-color: #ddd !important;
	color: #666 !important;
}
.multistep.nav-pills .nav-item a {
	color: #444444 !important;
}
.multistep.nav-pills .nav-item.active {
	background-color: #0062ab !important;
}
.multistep.nav-pills .nav-item.active a {
	color: #fff !important;
}

/* Centers bootstrap icons inside label with btn class */
label.btn .bi::before {
	vertical-align: -0.45rem !important;
}

/* Removes the highlighting over the selected options in multiselect. */
.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
	color: inherit !important;
	background: inherit !important;
}

/* Aligns the placeholder in multiselects. */
.p-multiselect-label.p-placeholder, .p-multiselect.p-multiselect-label, .p-multiselect .p-multiselect-label,
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label  {
	padding: 0px !important;
}

/* Aligns the trigger icon in a multiselect. */
.p-multiselect-trigger {
	align-items: start !important;
}

/* Changes the style of chips in multiselects. */
.p-multiselect.p-multiselect-chip .p-multiselect-token {
	padding: 0 0.25rem !important;
	border-radius: 5px !important;
	background: #ddd !important;
}

/* Set the border color similar to inputs. */
.p-multiselect.p-component.p-inputwrapper.p-multiselect-chip.form-control{
	border: 1px solid #dde4ea !important;
}