/*
Variables to change colors
*/


:root {
	/*example usage : var(--body-background-color)*/
	--body-background-color: #0054CD;
	--form-background-color: #ffffff;
	
	--breadcrumb-color: #000080;
	--breadcrumb-bottom-color: #666666;
	--breadcrumb-bottom-color-active: #0054cd;
	
	--section-heading-text-color: #0054cd;
	--section-heading-bottom-color: #0054cd;
	
	/*Commented out due to Summary conflicts 2024-01-11*/
	/*
	--wrapper-switcher-background-color: #0054cd;
	--wrapper-switcher-foreground-color: #ffffff;
	--wrapper-switcher-text-color: #000000;
	*/
	--add-container-background-color: #297a49;
	--add-container-text-color: #ffffff;
	
	--remove-container-border-color: red;
	--remove-container-background-color:white;
	--remove-container-color:#666666;

	--form-label-color: #000080;
	--form-asterisk-color: #C20000;
	--form-label-sub-heading-color: #666666;
	--form-radio-button-color: #0054cd;
	
	--button-background-color: #0056b3;
	--button-border-color: #0056b3;
	--button-text-color: #ffffff;
}


body div.page-content, body div.inner {
  max-width: 100% !important;
}



/*Main Workflow Area*/
div#workflow-background-wrapper {
	background: var(--form-background-color);
	float: unset!important;/*anonymous*/
	margin-top: 0rem !important;/*anonymous*/
}




/*********
Small Viewport/Screen Fixes
:Exit Workflow text is not displayed so we have to set width specifically for just the "Exit" icon only
*********/
/*Exit Workflow small screen fix*/
@media screen and (max-width: 850px) {
	#exit-workflow {
		width:12px !important;
	}
}



/**********
Main Background Color and shadow
********/
#divWorkflowContent{
	background-color: var(--body-background-color);
	padding: 30px;
	box-sizing: border-box;/*Fix box model display due to inline 100% width CSS*/
}
#workflow-wrapper{
	box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.2) !important;
}






/**********
Tabs
***********/
.section-breadcrumb-item {
	color: var(--breadcrumb-color);
	border-bottom: 5px solid var(--breadcrumb-bottom-color);
	font-size: 14px;
}
.section-breadcrumb-item.active {
	border-bottom: 5px solid var(--breadcrumb-bottom-color-active);
}






/**********
Section Headings
***********/
.recordForm .formFieldWrapper.heading-wrapper h3, 
.workflowContent .formFieldWrapper.heading-wrapper h3, 
.form-element-wrapper[data-type="heading"] .heading-label-wrapper .editable-text, 
.form-element-wrapper[data-type="heading"] .heading-label-wrapper input{
	color:  var(--section-heading-text-color);
	border-bottom: 2px solid var(--section-heading-bottom-color);
	font-size: 32px;
	font-weight: 700;
}




/*************
Form Labels
**************/
.form-label{
	color:var(--form-label-color);
	font-size: 18px;
	font-weight: 400;
}
.form-label-required span[role="presentation"] {
	color: var(--form-asterisk-color);
	font-size: 18px;
	font-weight: 700;
}

/************
Form Label Sub Heading
************/
.formFieldWrapper .sub-heading, .form-element-wrapper .editable-text-wrapper.sub-heading-wrapper > span, .form-element-wrapper .editable-text-wrapper.sub-heading-wrapper > input {
	color: var(--form-label-sub-heading-color);
	font-size: 16px;
	line-height: 2;
	font-weight: 400;
}

/************
Radio button Labels
*************/
.formFieldWrapper .radio-checkbox-label, .form-element-wrapper .radio-checkbox-label {
	color: var(--form-radio-button-color);
	font-size: 18px;
	font-weight: 500;	
}


/**********************
Container Collapse Button
**********************/
/*Commented out due to Summary conflicts 2024-01-11*/
/* .wrapper-switcher { */
  /* background-color: var(--wrapper-switcher-background-color) !important; /*This color must have sufficient contrast to the below rule*/ 
/* } */
/* .wrapper-switcher::after{ */
	/* border-color: var(--wrapper-switcher-foreground-color)!important; /*This color must have sufficient contrast to the above rule*/ 
/* } */
/* .container-title .form-label{ */
	/* color: var(--wrapper-switcher-text-color); */
	/* font-size: 18px!important; */
	/* font-weight: 400; */
/* } */


/**********
Container Add/Remove/Trash Buttons
***********/
.form-container-wrapper .add-item-template {
  text-transform: uppercase;
  font-size: 18px!important;
  font-weight: 400;
  background-color: var(--add-container-background-color);
  color: white; /*Background and Color must meet color contrast minimums*/
}
.form-container-wrapper .add-item-template::after {
  content: '+';
  color: var(--add-container-text-color);/*Background and Color must meet color contrast minimums*/
}
.form-container-wrapper .item-template-wrapper.switched-wrapper .element-to-hide .remove-item {
	border: 1px solid var(--remove-container-border-color);
	background-color: var(--remove-container-background-color);
	color: var(--remove-container-color);
}
.form-container-wrapper .item-template-wrapper.switched-wrapper .element-to-hide .remove-item {
	color: var(--remove-container-color);
}

.form-container-wrapper .remove-item-template {
	color: var(--remove-container-color);
	font-size: 18px!important;
	font-weight: 400;
}







/***************
Button Colors 
***************/
#divWorkflowContent .buttonPopup.blue{
	background-color: var(--button-background-color)!important;
	color: var(--button-text-color)!important; /*Background and Color must meet color contrast minimums*/
	border-color: var(--button-border-color) !important;  
	font-size: 18px!important;
	font-weight: 500!important;
}

.form-container-wrapper button:hover,
.form-container-wrapper button:focus {
	border: 1px solid gray!important;
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3) !important;
	box-shadow: 0 0 5px rgba(0, 0, 0, .3) !important;
	font-size: 18px!important;
	font-weight: 500!important;
}


#divWorkflowContent input.form-action-button{
	background-color: var(--button-background-color)!important;
	color: var(--button-text-color)!important; /*Background and Color must meet color contrast minimums*/
	border-color: var(--button-border-color) !important; 
	font-size: 18px!important;
	font-weight: 500!important;
}

#divWorkflowContent input.form-section-next{
	background-color: var(--button-background-color)!important;
	color: var(--button-text-color)!important; /*Background and Color must meet color contrast minimums*/
	border-color: var(--button-border-color) !important; 
	font-size: 18px!important;
	font-weight: 500!important;
}

#divWorkflowContent input.form-change-section{
	background-color: var(--button-background-color)!important;
	color: var(--button-text-color)!important; /*Background and Color must meet color contrast minimums*/
	border-color: var(--button-border-color) !important; 
	font-size: 18px!important;
	font-weight: 500!important;
}

#divWorkflowContent input.form-submit-button{
	background-color: var(--button-background-color)!important;
	color: var(--button-text-color)!important; /*Background and Color must meet color contrast minimums*/
	border-color: var(--button-border-color) !important; 
	font-size: 18px!important;
	font-weight: 500!important;
}

#divWorkflowContent input.form-print-button{
	background-color: var(--button-background-color)!important;
	color: var(--button-text-color)!important; /*Background and Color must meet color contrast minimums*/
	border-color: var(--button-border-color) !important; 
	font-size: 18px!important;
	font-weight: 500!important;
}

#divWorkflowContent input.form-reset-button{
	background-color: var(--button-background-color)!important;
	color: var(--button-text-color)!important; /*Background and Color must meet color contrast minimums*/
	border-color: var(--button-border-color) !important; 
	font-size: 18px!important;
	font-weight: 500!important;
}

#divWorkflowContent input.form-save-button {
	background-color: var(--button-background-color)!important;
	color: var(--button-text-color)!important; /*Background and Color must meet color contrast minimums*/
	border-color: var(--button-border-color) !important; 
	font-size: 18px!important;
	font-weight: 500!important;
}
/*Workflow Right Tab*/
.workflowRightTab{
	display:none; /*To Hide - comment out to show*/
}


/*Main Workflow Area*/
/*When hidding .workflowRightTab you must set this element to 100% width and max-width and turn off right border*/
div#workflow-background-wrapper {
	border-right: 0px;
	width: 100%;
	max-width: 100%;
}
/* Hide Fields */
        #label-element154, #label-element155, #label-element156, #label-element157, #element154, #element155, #element156, #element157 {
              display: none;
}