/* Styling for modal forms */

.modal-header {
	background-color: var(--portalThemeColor4) !important;
	/* the bootrap 5 modal plugin for D365 has a broken modal header */
	display: inline; 
}

.modal-title {
	color: #ffffff !important;
}


/* end of modal styling */
/* bootstrap background colours */
.bg-primary {
	background-color: var(--portalThemeColor1) !important;
}
.text-primary {
	color: var(--portalThemeColor1)
}
/* end of bootstrap colours */

/* card styleing */
legend.section-title {
	/* secondary color */
	/*background-color: var(--portalThemeColor2) !important;*/
	color: var(--portalThemeColor2) !important;
	border-radius: 0.5em;
}
legend.section-title h3 {
	color: var(--portalThemeColor4) !important;
	font-weight: 700;
	text-align: center;
}
legend.section-title.primary-header {
	/* secondary color */
	/*background-color: var(--portalThemeColor1) !important;*/
	color: var(--portalThemeColor2) !important;
}
legend.section-title.primary-header h3 {
	color: #ffffff;
	font-weight: 700;
	text-align: center;
}


/* end of card card styling */

/* grid table display */
/*
div.view-grid table.table thead {
	
	background-color: var(--portalThemeColor3) !important;
}
div.view-grid table.table thead a {
	color: #ffffff;
	font-weight: 600;
}
*/
/* end of grid table display */

/* multi-step styling */
.progress.list-group {
	--bs-list-group-active-bg: var(--portalThemeColor1) !important;
    --bs-list-group-active-border-color: #fff !important;
	
}


.progress li.list-group-item-success {
	background-color: var(--portalThemeColor1) !important;
	color: #fff !important;
}

.progress li.list-group-item {
	/*color: #ffffff !important; */
	font-weight: 600;
	
}

.progress-bar {
	background-color: var(--portalThemeColor2) !important;
	color: #000000 !important;
    font-size: medium;
    font-weight: 600;
	text-align: center;
}

div.progress-numeric {
	/*border-color: var(--portalThemeColor4) !important;*/
	background-color: var(--portalThemeColor2) !important;
	color: #fff;
	font-weight: 700;
}
div.progress-numeric span.number {
    background-color: var(--portalThemeColor1) !important;
}

/* end of multi-step styling */

/* style the entity form when displaying the tab header */

.entity-form h2.tab-title {
	text-align: center;
	background-color: var(--portalThemeColor2);
	color: #fff !important;
}

/* end of entity form styling for the tab header */

/* styling for validation errors */
.validation-header {


	--bs-text-opacity: 1;
	color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}

.validation-summary a {
	--bs-text-opacity: 1;
	color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}
.validation-summary-errors a {
	--bs-text-opacity: 1;
	color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}
/* end of styling for validation errors */

/* instructions loaded on multistep forms */
div.instructions {
	font-weight: 600 !important;
	color: var(--bs-info) !important;
	text-transform: capitalize;
	text-align: center;
}
/* end of instructions */

/* set the minimum width for the side canvas */
#right-side-canvas {
	width: 45%;
}
.offcanvas-50 {
	width: 50%;
}
.offcanvas-100 {
	width: 100%;
}
.offcanvas-70 {
	width: 70%;
}
.offcanvas-80 {
	width: 80%;
}


/* todo: we need to set the width based on the viewport size */
/* end of side canvas styling */

/* mute the desription text */
div.description {
	--bs-text-opacity: 1;
  	color: var(--portalThemeColor8) !important
}

/* beginning of generic loader styling */
#global-loader .loader-backdrop {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.4);
        z-index: 9998;
    }

#global-loader .loader-box {
	position: fixed;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	background: white;
	padding: 20px 30px;
	border-radius: 8px;
	z-index: 9999;
	text-align: center;
	font-size: 16px;
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.spinner {
	border: 4px solid #eee;
	border-top: 4px solid var(--portalThemeColor1);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	margin: 0 auto 10px;
	animation: spin 0.8s linear infinite;
}
@keyframes spin {
	100% { transform: rotate(360deg); }
}

/* target the new list grid control */

/* Force the table to size itself based on content, not containers */
.entity-grid .view-grid table.table {
    table-layout: auto !important;
    width: 100% !important;
}

/* Prevent text from wrapping into multiple awkward lines */
.entity-grid .view-grid table.table th, 
.entity-grid .view-grid table.table td {
    white-space: nowrap !important;
    width: auto !important;
}


/* end of new list control target */
/* end of generic loader styling*/

/* padding for the main content */
div#mainContent {
	padding-left: 50px;
	padding-right: 50px;
}

/* fluent-ui list grid control hovering */

/* Header hover fix for ms-DetailsHeader-cell */
.ms-DetailsHeader-cell:hover,
.ms-DetailsHeader-cell.is-actionable:hover {
    background-color: var(--portalThemeColor1) !important;  
    color: #ffffff !important;            
    border-bottom-color: var(--portalThemeColor2) !important;          
}

/* Also target child elements if text/icons are still hard to read */
.ms-DetailsHeader-cell:hover .ms-DetailsHeader-cellTitle,
.ms-DetailsHeader-cell:hover .ms-DetailsHeader-cellName {
    color: #ffffff !important;
}

/* If needed, more specific for the whole header row */
.ms-DetailsHeader {
    background-color: var(--portalThemeColor2) !important;  /* reinforce base style */
}
/* end of fluent list grid control hovering */