.body {
	background-color: #f8f8f8 !important;
	
}
/* Styling for modal forms */

.modal-header {
	background-color: #1562ab !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: #1562ab !important;
}
.text-primary {
	color: var(--portalThemeColor1)
}
/* end of bootstrap colours */

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


/* end of card card styling */

/* grid table display */
table.table thead {
	/* primary color */
	background-color: var(--portalThemeColor3) !important;
}
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(--portalThemeColor4) !important;
	color: #fff !important;
}

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

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

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

/* end of multi-step styling */

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

.entity-form h2.tab-title {
	text-align: center;
	color: var(--portalThemeColor3) !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%;
}

.offcanvas iframe {
	background-image: url('/loader-black.gif');
	background-repeat: no-repeat;
}
/* 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: #6c757d !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 #0078d4;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	margin: 0 auto 10px;
	animation: spin 0.8s linear infinite;
}
@keyframes spin {
	100% { transform: rotate(360deg); }
}

/* end of generic loader styling