/*============================================================
    Columbine Mortgage LLC             
    Author: M Atkinson                 
    last updated 01/17/2026  v.2.01

    v2.01 -- Add styling for Shareable Link Button
                                      
============================================================*/


/*==========================================================*/
/* ------------------ DATA TABLE STYLING ------------------ */
/*==========================================================*/

	.DynamicTableContainer {
		display: block;
		height: 0px;
		max-height: 0px;
		width: 100%;
		margin: 5px 0px 5px 0px;
		vertical-align: top;
		text-align: center;
		opacity: 0;
		visibility: hidden;
		overflow: hidden;

		transition-property: height, max-height, opacity, visibility;
		transition-delay: 0s, 0s, 0.2s, 0.2s;
		-webkit-transition-delay: 0s, 0s, 0.2s, 0.2s;
		transition-duration: 0.7s, 0.7s, 0.7s, 0.7s;
		-webkit-transition-duration: 0.7s, 0.7s, 0.7s, 0.7s;
		transition-timing-function: ease-out, ease-out, ease-out, ease-out;
	}

		.DynamicTableContainer.Revealed {
			display: block;
			height: 180px;
			max-height: 180px;
			width: 100%;
			margin: 5px 0px 5px 0px;
			vertical-align: top;
			text-align: center;
			opacity: 1;
			visibility: visible;
			overflow: hidden;

			transition-property: height, max-height, opacity, visibility;
			transition-delay: 0s, 0s, 0.2s, 0.2s;
			-webkit-transition-delay: 0s, 0s, 0.2s, 0.2s;
			transition-duration: 0.7s, 0.7s, 0.7s, 0.7s;
			-webkit-transition-duration: 0.7s, 0.7s, 0.7s, 0.7s;
			transition-timing-function: ease-out, ease-out, ease-out, ease-out;
		}

	table.StdDataTable {
		margin-top: 10px;
		border-collapse: collapse;
		border: none;
		width: 100%;
		font-family: Calibri, Arial, sans-serif;
		font-weight: normal;
		color: #7b7b7b;
	}

		table.StdDataTable thead.TableHeaderRow{
			border: none;
		}

		table.StdDataTable tr.EvenRow {
			vertical-align: middle;
			background-color: #f9f2ff;
		}

		table.StdDataTable tr.OddRow {
			vertical-align: middle;
			background-color: #eedbff;
		}

		table.StdDataTable tr.TotalRow {
			box-sizing: border-box;
			border-top: 2px solid #66319c;
			border-right: none;
			border-bottom: 3px double #66319c;
			border-left: none;
			vertical-align: bottom;
			background-color: #ffffff;
			font-weight: bold;
			color: #66319c;
		}

		table.StdDataTable th {
			box-sizing: border-box;
			border: none;
			padding: 6px 3px 6px 3px;
			text-align: center;
			font-family: Calibri, Arial, sans-serif;
			font-weight: normal;
			font-size: 0.8em;
			line-height: 1.0em;
			vertical-align: bottom;
			color: #ffffff;
		}

			table.StdDataTable th.ColumnTitle.RowTitle {
				box-sizing: border-box;
				border: none;
				padding: 6px 3px 6px 3px;
				text-align: center;
				font-family: Calibri, Arial, sans-serif;
				font-weight: normal;
				vertical-align: bottom;
				background-color: transparent;
				color: #ffffff;
			}

			table.StdDataTable th.ColumnTitle {
				box-sizing: border-box;
				border: 1px solid #ffffff;
				padding: 6px 3px 6px 3px;
				text-align: center;
				font-family: Calibri, Arial, sans-serif;
				font-weight: normal;
				vertical-align: bottom;
				background-color: #66319c;
				color: #ffffff;
			}

		table.StdDataTable td {
			 box-sizing: border-box;
			border: 1px solid #ffffff;
			padding: 4px 3px 4px 3px;
			vertical-align: bottom;
			text-align: center;
			font-family: Calibri, Arial, sans-serif;
			font-weight: normal;
			font-size: 0.8em;
			line-height: 1.0em;
		}

			table.StdDataTable td.RowTitle {
				text-align: left;
				font-weight: bold;
				color: #66319c;
			}

			table.StdDataTable td.ColumnTotal {
				padding: 8px 3px 4px 3px;
				font-weight: bold;
				color: #66319c;
			}


/*==========================================================*/
/* ----------------- RADIO BUTTON STYLING ----------------- */
/*==========================================================*/

	.RadioElementContainer {
		display: inline-flex;
		align-items: center;
		justify-content: left;
	}

		.RadioElementContainer input[type='radio'] {
			appearance: none;
			background: none;
			border: 2px solid #66319c;
			height: 20px;
			min-height: 20px;
			width: 20px;
			min-width: 20px;
			margin: 8px 5px 7px 5px;
			border-radius: 50%;
			vertical-align: middle;
			position: relative;
		}

		.RadioElementContainer input[type='radio']::before {
			content: "";
			position: absolute;
			margin: auto;
			left: 0;
			right: 0;
			bottom: 0;
			overflow: hidden;
			top: 0;
		}

		.RadioElementContainer input[type='radio']:checked::before {
			border: 5px solid #66319c;
			border-radius: 50%;
			background: #66319c;
			margin: 1px;
		}

		.RadioElementContainer input[type='radio']:focus {
			outline: none;
			outline-offset: 0px;
		}

		.RadioElementContainer label {
			display: inline-flex; 
			align-items: center;
			box-sizing: border-box;
			height: 35px;
			width: 100%;
			border-left: none;
			padding: 0px 0px 0px 0px;
			font-size: 1.25em;
			font-family: Century Gothic, Arial, sans-serif;
			font-weight: bold;
			text-align: left;
			color: #66319c;
			background: transparent;
		}


/*==========================================================*/
/* --------------- MINI RADIO BUTTON STYLING -------------- */
/*==========================================================*/

	.MiniRadioButtonArrayContainer {
		display: flex;
		flex-direction: row;
		padding: 5px;
	}

	.MiniRadioElementContainer {
		display: inline-flex;
		box-sizing: border-box; 
		align-items: center;
		justify-content: center;
		min-width: 105px;
		margin: auto;
		padding: 3px;
	}

	.MiniRadioButtonContainer {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin: auto;
	}

		.MiniRadioButtonContainer input[type='radio'] {
			appearance: none;
			background: none;
			border: 2px solid #a5a5a5;
			height: 14px;
			min-height: 14px;
			width: 14px;
			min-width: 14px;
			margin: 0px 5px 0px 5px;
			border-radius: 50%;
			vertical-align: middle;
			position: relative;
		}

		.MiniRadioButtonContainer input[type='radio']::before {
			content: "";
			position: absolute;
			margin: auto;
			overflow: hidden;
		}

		.MiniRadioButtonContainer input[type='radio']:checked::before {
			border: 5px solid #66319c;
			border-radius: 50%;
			background: #66319c;
			margin: 0px;
		}

		.MiniRadioButtonContainer input[type='radio']:focus {
			outline: none;
			outline-offset: 0px;
		}

		.MiniRadioButtonContainer label {
			display: inline-flex; 
			align-items: center;
			box-sizing: border-box;
			height: 18px;
			width: auto;
			margin: auto;
			padding: 0px 5px 0px 0px;
			font-size: 0.8em;
			font-family: Calibri, Arial, sans-serif;
			color: #a5a5a5;
			background: transparent;
		}


/*======================================================*/
/* ----------------- CHECKBOX STYLING ----------------- */
/*======================================================*/

	.CheckBoxElementContainer {
		display: inline-flex;
		align-items: center;
		justify-content: left;
	}

		.CheckBoxElementContainer input[type='checkbox'] {
			appearance: none;
			background: none;
			border: 2px solid #66319c;
			height: 20px;
			min-height: 20px;
			width: 20px;
			min-width: 20px;
			margin: 8px 5px 7px 5px;
			border-radius: 50%;
			vertical-align: middle;
			position: relative;
		}

		.CheckBoxElementContainer input[type='checkbox']::before {
			content: "";
			position: absolute;
			margin: auto;
			left: 0;
			right: 0;
			bottom: 0;
			overflow: hidden;
			top: 0;
		}

		.CheckBoxElementContainer input[type='checkbox']:checked::before {
			border: 5px solid #66319c;
			border-radius: 50%;
			background: #66319c;
			margin: 1px;
		}

		.CheckBoxElementContainer input[type='checkbox']:focus {
			outline: none;
			outline-offset: 0px;
		}

		.CheckBoxElementContainer label {
			display: inline-flex; 
			align-items: center;
			box-sizing: border-box;
			height: 35px;
			width: 100%;
			border-left: none;
			padding: 0px 0px 0px 0px;
			font-size: 1.25em;
			font-family: Century Gothic, Arial, sans-serif;
			font-weight: bold;
			text-align: left;
			color: #66319c;
			background: transparent;
		}


/*==========================================================*/
/* ---------------- DROP DOWN MENU STYLING ---------------- */
/*==========================================================*/

	.DropDownContainer {
		position: relative;
		box-sizing: border-box;
		height: 35px;
		width: 100%;
		min-width: 180px;
		margin: auto;
		border: 1px solid #e6e6e6;
		background-color: #ffffff;	
	}

		.DropDownContainer:hover .DropDownIconContainer{
			background-color: #66319c;
		}

		.DropDownContainer:hover .DropDownIcon{
			fill: #ffffff;
		}

		input[type='text'].DropDown {
			box-sizing: border-box;
			width: 100%;
			height: 33px;
			margin: auto;
			border: none;
			outline: none;
			padding: 0px 0px 0px 3px;
			font-size: 1.2em;
			font-family: Century Gothic, Arial, sans-serif;
			font-weight: bold;
			text-align: left;
			color: #66319c;
			cursor: pointer;
			z-index: 100;
		}

		input[type='text'].DropDown::placeholder {
			font-size: 0.9em;
			color: #dbdbdb;
		}

		.DropDownIconContainer {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 5px;
			height: 28px;
			width: 28px;
			border-radius: 5px;
			pointer-events: none; 
		}

		.DropDownIcon {
			position: relative;
			top: 50%;
			transform: translateY(-50%);
			width: 20px;
			height: 20px;
			fill: #66319c;
		}

		.DropDownOptions {
			position: absolute;
			box-sizing: border-box;
			top: 36px;
			left: 0px;
			display: none;
			flex-direction: column;
			width: 100%;
			margin:auto;
			background-color: #ffffff;
			border: 1px solid #e6e6e6;
			z-index: 99;
		}

		.DropDownOption {
			display:flex;
			align-items: center;
			box-sizing: border-box;
			width: 100%;
			position: relative;
			height: 33px;
			margin: auto;
			border: none;
			outline: none;
			padding: 0px 0px 0px 5px;
			font-size: 1.0em;
			font-family: Century Gothic, Arial, sans-serif;
			font-weight: bold;
			text-align: left;
			vertical-align: middle;
			color: #66319c;
			cursor: pointer;
			background-color: #ffffff;
			z-index: 99;
		}

		.DropDownOption:hover {
			font-size: 1.0em;
			background-color: #eedbff;
		}


/*===============================================================*/
/* ---------------- MINI TOGGLE SWITCH STYLING ----------------- */
/*===============================================================*/

	.MiniToggleHSwitchArrayContainer {
		display: flex;
		box-sizing: border-box; 
		flex-direction: row;
		padding: 5px;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	
	.MiniToggleVSwitchArrayContainer {
		display: flex;
		box-sizing: border-box; 
		flex-direction: column;
		padding: 10px 5px 5px 5px;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	
	.MiniToggleSwitchElementContainer {
		display: inline-flex;
		box-sizing: border-box; 
		align-items: center;
		justify-content: center;
		margin: auto;
		padding: 0px 10px 0px 10px;
	}

	.MiniToggleSwitchContainer {
		display: inline-flex;
		width: 100%;
		margin: auto;
		vertical-align: middle;
		text-align: center;
	}

	.MiniToggleSliderSwitch {
		position: relative;
		display: inline-block;
		width: 30px;
		min-width: 30px;
		max-width: 30px;
		height: 16px;
	}

		.MiniToggleSliderSwitch input {
			opacity: 0;
			width: 0;
			height: 0;
		}

	.MiniToggleSlider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border: 2px solid #dbdbdb;
		border-radius: 10px;
		background-color: #dbdbdb;
		/* this transition applies to the background coloring when both 'activating' and 'de-activating' the toggle */
		-webkit-transition: 0.75s;
		transition: 0.75s;
	}

		.MiniToggleSlider:before {
			position: absolute;
			content: "";
			height: 12px;
			width: 12px;
			left: 0px;
			bottom: 0px;
			border-radius: 50%;
			background-color: #ffffff;
			/* this transition applies to the speed of the Toggle Button movement when both 'activating' and 'de-activating' the toggle */
			-webkit-transition-delay: 0s;
			transition-delay: 0s;
			-webkit-transition-duration: 0.25s;
			transition-duration: 0.25s;
		}
		
		.MiniToggleSwitch.CautionAlert + .MiniToggleSlider:before {
			position: absolute;
			content: "";
			height: 12px;
			width: 12px;
			left: 0px;
			bottom: 0px;
			border-radius: 50%;  
			background-color: #ffe699;
			/* this transition applies to the speed of the Toggle Button movement when both 'activating' and 'de-activating' the toggle */
			-webkit-transition-delay: 0s;
			transition-delay: 0s;
			-webkit-transition-duration: 0.25s;
			transition-duration: 0.25s;
		}
		
		input:checked + .MiniToggleSlider {
		  border: 2px solid #66319c;
		  background-color: #66319c;
		}

		.MiniToggleSwitch.ContentAlert + .MiniToggleSlider {
		  border: 2px solid #66319c;
		  background-color: #66319c;
		}

		.MiniToggleSwitch.CautionAlert + .MiniToggleSlider {
		  border: 2px solid #bf8f00;
		  background-color: #bf8f00;
		}
		
		input:focus + .MiniToggleSlider {
		  box-shadow: 0 0 0 #66319c;
		}

		input:checked + .MiniToggleSlider:before {
		  -webkit-transform: translateX(14px);
		  -ms-transform: translateX(14px);
		  transform: translateX(14px);
		}

	.MiniToggleLabelContainer {
		display: inline-flex;
		margin: auto;
		margin-left: 4px;
		vertical-align: middle;
	}

	.MiniToggleLabelText {
		font-family: Calibri, Arial, sans-serif;
		font-size: 0.8em;
		line-height: 1em;
		vertical-align: middle;
		color: #a5a5a5;
		/* this transition applies to the Toggle Label when 'deactivating' the toggle */
		-webkit-transition: .75s;
		transition: .75s;
	}

		.MiniToggleLabelContainer.active .MiniToggleLabelText {
			font-weight: normal;
			color: #66319c;
			/* this transition applies to the Toggle Label when 'activating' the toggle */
			-webkit-transition: .75s;
			transition: .75s;
		}

		.MiniToggleLabelContainer.ContentAlert .MiniToggleLabelText {
			font-weight: normal;
			color: #66319c;
			/* this transition applies to the Toggle Label when the toggle block data is entered in the key data fields */
			-webkit-transition: .75s;
			transition: .75s;
		}

		.MiniToggleLabelContainer.CautionAlert .MiniToggleLabelText {
			font-weight: normal;
			color: #bf8f00;
			/* this transition applies to the Toggle Label when the toggle block data is entered in the key data fields */
			-webkit-transition: .75s;
			transition: .75s;
		}
		
	.RevealRowContainer {
		display: block;
		max-height: 0;
		width: 100%;
		margin: 5px 0px 0px 0px;
		vertical-align: top;
		justify-content: center;
		text-align: center;
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
		
		/* these transitions apply to the Reveal Block when 'deactivating'*/
		transition-property: margin, max-height, opacity, visibility;
		transition-delay: 0s, 0s, 0s, 0s;
		-webkit-transition-delay: 0s, 0s, 0s, 0s;
		transition-duration: .5s, .5s, .5s, .5s;
		-webkit-transition-duration: .5s, .5s, .5s, .5s;
		transition-timing-function: ease-out, ease-out, ease-out, ease-out;
	}

		.RevealRowContainer.active {
			display: block;
			max-height: 60px;
			width: 100%;
			margin: 5px 0px 0px 0px;
			vertical-align: top;
			justify-content: center;
			text-align: center;
			opacity: 1;
			visibility: visible;
			overflow: visible;
			
			/* these transitions apply to the Reveal Block when 'activating'*/
			transition-property: margin, max-height, opacity, visibility;
			transition-delay: 0s, 0s, .2s, .2s;
			-webkit-transition-delay: 0s, 0s, .2s, .2s;
			transition-duration: .5s, .5s, .5s, .5s;
			-webkit-transition-duration: .5s, .5s, .5s, .5s;
			transition-timing-function: ease-out, ease-out, ease-out, ease-out;
		}


/*==========================================================*/
/* -------------- RANGE SLIDER INPUT STYLING -------------- */
/*==========================================================*/
	
	.RangeSliderContainer{
		position: relative;
		width: 100%;
		min-width: 230px;
		height: 35px;
		background: transparent;
	}
		
	input[type='range'] {
		-webkit-appearance: none;
		margin: 0px 0px 0px 0px;
		width: 100%;
		min-width: 230px;
	}

		input[type="range"]:focus {
			outline: none;
		}

		input[type='range']::-webkit-slider-runnable-track {
			-webkit-appearance: none;
			margin: -15px 2px 0px 2px;
			width: 100%;
			min-width: 220px;
			height: 3px;
			background: linear-gradient(to right, #66319c, #66319c), #eedbff;
			background-size: var(--background-size, 0%) 100%;
			background-repeat: no-repeat;
			border-radius: 3px;
			animate: 0.2s;
		}

		input[type='range']::-webkit-slider-thumb {
			-webkit-appearance: none;
			width: 11px;
			height: 11px;
			cursor: pointer;
			background: #ffffff;
			border: 3px solid #66319c;
			border-radius: 50%;
			margin-top: -4px;
			box-shadow: 0px 1px 3px rgba(0, 0, 0, 0);
		}

			input[type='range']:hover::-webkit-slider-thumb {
				background: #a877d9;
				opacity: 1;
			}

			input[type='range']:focus::-webkit-slider-thumb {
				background: #a877d9;
				opacity: 1;
			}

			input[type='range']:active::-webkit-slider-thumb {
				background: #66319c;
				box-shadow: 0px 0px 5px 0px #66319c;
				opacity: 1;
			}

	.RangeSliderFloatingPointer {
		content: "";
		visibility: hidden;
		position: absolute;
		width: 0;
		height: 0;
		border-bottom: 10px solid #66319c;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		left: 0px;
		top: 13px;
	}

	.RangeSliderFloatingLabel{
		position: absolute;
		top: 30px;
	}

	.SldrLblTxt{
		width: 80px;
		height: 16px;
		line-height: 16px;
		text-align: center;
		background: #66319c;
		color: #ffffff;
		font-family: Calibri, Arial, sans-serif;
		font-size: 12px;
		display: block;
		position: absolute;
		border-radius: 4px;
		box-shadow: 0px 0px 2px 0px #66319c;
		left: 0px;
		top: -12px;
	}


/*==========================================================*/
/* -------------- CONTAINER ELEMENT STYLING --------------- */
/*==========================================================*/

	.MultiElementRowContainer {
		display: block;
		margin: auto;
		width: 100%;
		min-width: 370px;
		max-width: 550px;
		font-size: 16px;
		line-height: 1em;
		text-align: center;
	}

	.DataElementGrpContainer {
		display: block;
		position: relative;
		width: 95%;
		min-width: 370px;
		padding: 10px 5px 5px 5px;
		border: 2px solid #66319c;
		border-radius: 10px;
		
		margin: 10px 5px 5px 5px;
		text-align: center;
	}

	.DataElementRowContainer {
		display: inline-flex;
		width: 100%;
		margin: 5px 0px 0px 0px;
		vertical-align: top;
		justify-content: center;
		text-align: center;
	}
	
	.DataElementSpacer {
		width: 2%;
		min-width: 2px;
		max-width: 75px;
		line-height: 0px;
		background: #ffffff65;
	}

	.DataElementContainer {
		width: 100%;
		margin: 0px;  
		vertical-align: top;
		background: #ffffff65;
	}

	.DataElementLabelContainer {
		display: inline-flex;
		width: 100%;
		vertical-align: bottom;
	}

	.LabelContainer {
		display: block;
		margin: auto;
		margin-left: 4px;
		vertical-align: bottom;
	}

	.HintContainer {
		display: block;
		position: relative;
		margin: auto;
		margin-right: 4px;
		vertical-align: bottom;
	}

	.DataElementInputContainer {
		display: inline-flex;
		align-items: center;
		width: 100%;
	}

	.FullSizeLblContainer {
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
		height: 35px;
		width: 100%;
		max-width: 300px;
		padding: 0px;
		border: none;
		outline: none;
		margin: auto;
	}

	.PadlockContainer {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		height: 35px;
		width: 22px;
		padding: 2px 2px 0px 4px;
		border: 1px solid #e6e6e6;
		border-right: none;
		margin: auto;
	}
	
	.USDLblContainer {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		height: 35px;
		width: 25px;
		padding: 0px 2px 0px 2px;
		border: 1px solid #e6e6e6;
		border-right: none;
		margin: auto;
	}

	.USDContainer {
		display: block;
		width: 100%;
/*		min-width: 120px;  */
		min-width: 90px;
		margin: auto;
	}

	.PCTContainer {
		display: block;
		width: 100%;
/*		min-width: 60px; */
		min-width: 50px;
		margin: auto;
	}

	.INTGRContainer {
		display: block;
		width: 100%;
		min-width: 55px;
		margin: auto;
	}

	.RATEContainer {
		display: block;
		width: 100%;
		min-width: 60px;
		margin: auto;
	}

	.PMTContainer {
		display: block;
		width: 100%;
		min-width: 95px;
		margin: auto;
	}

	.DATEContainer {
		display: inline-flex;
		width: 100%;
		min-width: 110px;
		margin: auto;
		vertical-align: middle;
	}

	.PCTLblContainer {
		box-sizing: border-box;
		height: 35px;
		width: 25px;
		padding: 7px 0px 0px 2px;
		border: 1px solid #e6e6e6;
		border-left: none;
		margin: auto;
	}

	.YrsLblContainer {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 40%;
		min-width: 35px;
		height: 35px;
		padding: 0px 4px 0px 0px;
		border: 1px solid #e6e6e6;
		border-left: none;
		margin: auto;
	}
	
	.DaysLblContainer {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 40%;
		min-width: 55px;
		height: 35px;
		padding: 0px 4px 0px 0px;
		border: 1px solid #e6e6e6;
		border-left: none;
		margin: auto;
	}

	.SpacerLblContainer {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		height: 35px;
		width: 20%;
		min-width: 10px;
		padding: 0px 4px 0px 0px;
		border: 1px solid #e6e6e6;
		border-left: none;
		margin: auto;
	}

	.PerMonthLblContainer {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		height: 35px;
		width: 30%;
		min-width: 43px;
		padding: 0px 4px 0px 0px;
		border: 1px solid #e6e6e6;
		border-left: none;
		margin: auto;
	}


/*==========================================================*/
/* ---------------- LABEL ELEMENT STYLING ----------------- */
/*==========================================================*/

	.DataGrpLabel {
		position: absolute;
		z-index: 1;
		top: -12px; 
		left: 8px; 
		background-color: #ffffff; 
		padding: 0px 5px 2px 5px; 
		border-radius: 5px;
		font-family: Calibri, Arial, sans-serif;
		font-weight: bold;
		color: #66319c;
	}

	.LabelText {
		padding: 1px 2px;
		font-family: Calibri, Arial, sans-serif;
		font-size: 0.8em;
		line-height: 1.0em;
		vertical-align: bottom;
		color: #a5a5a5;
	}

	.RightTxtLbl {
		font-size: 1.2em;
		font-family: Century Gothic, Arial, sans-serif;
		font-weight: bold;
		margin-right: auto;
		color: #66319c;
		background: transparent;
	}

	.LeftTxtLbl {
		font-size: 1.2em;
		font-family: Century Gothic, Arial, sans-serif;
		font-weight: bold;
		margin-left: auto;
		color: #66319c;
		background: transparent;
	}

	.CenterTxtLbl {
		font-size: 1.2em;
		font-family: Century Gothic, Arial, sans-serif;
		font-weight: bold;
		margin: auto;
		color: #66319c;
		background: transparent;
	}


/*==========================================================*/
/* ------------- TEXT INPUT ELEMENT STYLING --------------- */
/*==========================================================*/

	input[type='text'].USDInput {
		box-sizing: border-box;
		height: 35px;
		width: 100%; 
		padding: 0px 0px 0px 2px; 
		border: 1px solid #e6e6e6;
		border-left: none;
		font-size: 1.25em;
		font-family: Century Gothic, Arial, sans-serif;
		font-weight: bold;
		text-align: left;
		color: #66319c;
		background: transparent;
	}

		input[type='text'].USDInput::placeholder {
			font-size: 0.9em;
			color: #dbdbdb;
		}

	input[type='text'].PCTInput {
		box-sizing: border-box;
		height: 35px;
		width: 100%;
		padding: 0px 0px 0px 0px; 
		border: 1px solid #e6e6e6;
		border-left: none;
		border-right: none; 
		font-size: 1.25em;
		font-family: Century Gothic, Arial, sans-serif;
		font-weight: bold;
		text-align: right;
		color: #66319c;
		background: transparent;
	}

		input[type='text'].PCTInput::placeholder {
			font-size: 0.9em;
			color: #dbdbdb;
		}

	input[type='text'].INTGRInput {
		box-sizing: border-box;
		height: 35px;
		width: 100%;
		min-width: 0px;
		padding: 1px 10px 1px 1px;
		border: 1px solid #e6e6e6;
		border-right: none;
		font-size: 1.25em;
		font-family: Century Gothic, Arial, sans-serif;
		font-weight: bold;
		text-align: right;
		color: #66319c;
		background: transparent;
	}

		input[type='text'].INTGRInput::placeholder {
			font-size: 0.9em;
			color: #dbdbdb;
		}

	input[type='text'].RATEInput {
		box-sizing: border-box;
		height: 35px;
		width: 100%;
		min-width: 0px;
		padding: 0px 0px 0px 0px; 
		border: 1px solid #e6e6e6;
		border-right: none;
		font-size: 1.25em;
		font-family: Century Gothic, Arial, sans-serif;
		font-weight: bold;
		text-align: right;
		color: #66319c;
		background: transparent;
	}

		input[type='text'].RATEInput::placeholder {
			font-size: 0.9em;
			color: #dbdbdb;
		}

	input[type='text'].PMTInput {
		box-sizing: border-box;
		height: 35px;
		width: 100%;
		min-width: 95px;
		padding: 1px 3px 1px 1px;
		border: 1px solid #e6e6e6;
		border-left: none;
		border-right: none;
		font-size: 1.25em;
		font-family: Century Gothic, Arial, sans-serif;
		font-weight: bold;
		text-align: right;
		color: #66319c;
		background: transparent;
	}

		input[type='text'].PMTInput::placeholder {
			font-size: 0.9em;
			color: #dbdbdb;
		}

	input[type='text'].PMTInputEmphasis {
		box-sizing: border-box;
		height: 35px;
		width: 100%;
		min-width: 0px;
		padding: 1px 5px 1px 1px;
		border: none;
		font-size: 1.25em;
		font-family: Century Gothic, Arial, sans-serif;
		font-weight: bold;
		text-align: right;
		color: #66319c;
		background: transparent;
	}

		input[type='text'].PMTInputEmphasis::placeholder {
			color: #ffffff;
		}

	input[type='text'].DATEInput {
		box-sizing: border-box;
		height: 35px;
		width: 100%;
		min-width: 0px;
		padding: 0px 0px 0px 0px; 
		border: 1px solid #e6e6e6;
		border-right: none;
		font-size: 1.25em;
		font-family: Century Gothic, Arial, sans-serif;
		font-weight: bold;
		text-align: center;
		color: #66319c;
		background: transparent;
	}

		input[type='text'].DATEInput::placeholder {
			font-size: 0.9em;
			color: #dbdbdb;
		}


/*==========================================================*/
/* ------------- JQUERY DATE PICKER STYLING --------------- */
/*==========================================================*/

	.ui-datepicker {
/*		display: block;      */
		width: 190px;
		padding: 0.2em;
		font-size: 10px;
		background-color: #66319c; 
		color: #ffffff;
	}

		.ui-datepicker table {
			width: 100%;
			margin: 0;
			line-height: 1.0em;
		}

		.ui-datepicker th {
			padding: 0.4em 0.2em 0.2em 0.2em;
		}
		
		.ui-datepicker .ui-datepicker-header {
			display: block;
			margin: auto;
			vertical-align: middle;
			border: none;
			padding: 0;
			background: #66319c;
			background-color: #66319c;
			opacity: 1;
			font-size: 12px;
			color: #ffffff;
		}

		.ui-datepicker .ui-datepicker-prev {
			top: 2px;
			left: 3px;
			margin: auto;
			border: 1px solid #66319c;
			height: 18px;
			width: 18px;
			background: #66319c;
			background-color: #66319c;
			color: #ffffff;
		}

		.ui-datepicker .ui-datepicker-prev span {
/*			background-image: url('LeftArrowICON-INV.png'); */
			height: 16px;
			width: 16px;
			background-size: 16px 16px;
			background-position: 0px 0px;
			background-repeat: no-repeat;
		}

		.ui-datepicker .ui-datepicker-title {
			height: 22px;
			margin: 2px 0px 0px 0px;
			padding: 0px 0px 2px 0px;
			vertical-align: middle;
			font-size: 12px;
			font-weight: bold;
			background: #66319c;
			background-color: #66319c;
			color: #ffffff;
		}

		.ui-datepicker-title select {
			height: 22px;
			margin: auto;
			vertical-align: middle;
			background: #66319c;
			background-color: #66319c;
			color: #ffffff;
		}

		.ui-datepicker-month {
			height: 20px;
			width: 120px;
			background: #66319c;
			background-color: #66319c;
			color: #ffffff;
		}

		.ui-datepicker select.ui-datepicker-month {
			height: 20px;
			width: 120px;
			font-size: 12px;
			font-weight: bold;
			border: none;
			border-right: 2px solid #ffffff;
			background-color: #66319c;
			color: #ffffff;
		}

		.ui-datepicker-year {
			height: 20px;
			width: 55px;
			background-color: #66319c;
			color: #ffffff;
		}

		.ui-datepicker select.ui-datepicker-year {
			height: 20px;
			width: 55px;
			font-size: 12px;
			font-weight: bold;
			border: none;
			background-color: #66319c;
			color: #ffffff;
		}

		.ui-datepicker .ui-datepicker-next {
			top: 2px;
			right: 3px;
			margin: auto;
			border: 1px solid #66319c;
			height: 18px;
			width: 18px;
			background: #66319c;
			background-color: #66319c;
			color: #ffffff;
		}

		.ui-datepicker .ui-datepicker-next span {
/*			background-image: url('RightArrowICON-INV.png'); */
			height: 16px;
			width: 16px;
			background-size: 16px 16px;
			background-position: 0px 0px;
			background-repeat: no-repeat;
		}

		.ui-datepicker .ui-state-hover {
			border: 1px solid #ffffff;
		}

		.ui-icon {
			color: #ffffff;
			border: none;
		}

		.ui-state-hover .ui-icon {
			border: none;
		}

		.ui-datepicker-calendar {
			border-collapse:collapse;
			background: #ffffff;
			opacity: 1;
			color: #66319c;
		}
		
		.ui-datepicker-calendar td a,
		.ui-datepicker-calendar td span{
			padding: 0.2em 0.2em 1.2em 0.2em;
		}
		
		.ui-datepicker-calendar .ui-state-default {
			border: 1px solid #66319c;
			background: #eedbff;
			background-color: #eedbff;
			color: #66319c;
		}

		.ui-datepicker-calendar .ui-state-highlight {
			border: 1px solid #66319c;
			background: #a2b8f4;
			background-color: #a2b8f4;
			color: #ffffff;
		}

		.ui-datepicker-calendar .ui-state-active {
			border: 1px solid #66319c;
			background: #66319c;
			background-color: #66319c;
			color: #ffffff;
		}

		.ui-datepicker-calendar .ui-state-disabled {
			background-color: #ffffff;
			opacity: 0.25;
			color: #ffffff;
		}

		.ui-datepicker-trigger {
			height: 35px;
			width: 35px;
			margin: auto;
			align-items: center;
			box-sizing: border-box;
			padding: 0px 3px 0px 0px;
			border: 1px solid #e6e6e6;
			border-left: none;
		}


/*==========================================================*/
/* ---------------- DASHBOARD CARD STYLING ---------------- */
/*==========================================================*/

	.DashboardFlexboxContainer{
	  display: flex;
	  position: relative;

	  width: 95%;
	  min-width: 370px;
	  padding: 10px 0px 5px 0px;
	  
	  flex-wrap: wrap;
	  justify-content: center;
	  column-gap: 5px;
	  row-gap: 15px;

	  margin: 10px 5px 5px 5px;

	}
	
	.DashboardCardContainer {
		display: flex;
		position: relative;
		
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		
		flex: 1 1 175px;
		max-width: 265px;
		min-height: 175px;
		padding: 10px 0px 5px 0px;
		border: 2px solid #66319c;
		border-radius: 10px;
		text-align: center;
		
		background: #f9f2ff;
	}
	
	.DashboardCardMetric {
		position: relative;
		margin: 5px;

		height: 50px;
		padding: 10px 5px 0px 5px;

		display: flex;
		align-items: center;
		justify-content: center;

		text-align: center;
		font-family: Calibri, Arial, sans-serif;
		font-size: clamp(1.8rem, 3em, 3em);
		font-weight: bold;
		white-space: nowrap;
		color: #66319c;

		box-sizing: border-box;
	}

	.DashboardCardBeforeText {
		position: relative;
		margin: 20px 5px 5px 5px;

		height: 20px;
		padding: 5px;

		display: flex;
		align-items: center;
		justify-content: center;

		text-align: center;
		font-family: Calibri, Arial, sans-serif;
		font-size: 1.0em;
		font-weight: bold;
		white-space: normal;
		color: #66319c;

		box-sizing: border-box;
	}
	
	.DashboardCardAfterText {
		position: relative;
		margin: 5px 5px 20px 5px;

		height: 10px;
		padding: 5px;

		display: flex;
		align-items: center;
		justify-content: center;

		text-align: center;
		font-family: Calibri, Arial, sans-serif;
		font-size: 1.0em;
		font-weight: bold;
		white-space: normal;
		color: #66319c;

		box-sizing: border-box;
	}
	
	.DashboardCardFootnote {
		margin-top: auto;
		line-height: 0.95em;
		padding: 1px;
		text-align: justify;
		font-family: Century Gothic, Arial, sans-serif;
		font-size: 0.6em;
		font-weight: normal;
		width: 95%;

		white-space: normal;
		color: #66319c;
		word-break: break-word;
	}


/*==========================================================*/
/* ------------------- HINT BOX STYLING ------------------- */
/*==========================================================*/

	.HintBox {
		display: none;
		position: absolute;
		top: -2px;
		right: -5px;
		margin: 0px;
		width: 300px;
		height: 125px;
		background-color: #66319c;
		z-index: 9900;
	}

	.HintBoxHeaderBar {
		display: inline-flex;
		width: 100%;
		position: absolute;
		left: 0px;
		z-index: 9925;
	}

	.HintBoxCloseButton {
		display: block;
		position: relative;
		width: 18px;
		margin: 2px 4px 5px 4px;
		vertical-align: middle;
		z-index: 9999;
	}

	.HintBoxTitle {
		flex:1;
		position: relative;
		width: 100%;
		top: 3px;
		left: 5px;
		text-align: left;
		font-family: Calibri, Arial, sans-serif;
		font-weight: bold;
		color: #f9f2ff;
		z-index: 9950;
	}

	.HintBoxContent {
		position: relative;
		margin: 5px;
		top: 20px;
		left: 0px;
		width: auto;
		height: 85px;
		padding: 5px;
		text-align: justify;
		font-family: Calibri, Arial, sans-serif;
		font-size: 0.8em;
		color: #66319c;
		background-color: #f9f2ff;
		z-index: 9950;
	}


/*==========================================================*/
/* ------------------- SVG ICON STYLING ------------------- */
/*==========================================================*/

	.USDIcon {
		fill: #66319c;
		padding: 3px 0px 0px 0px;
		margin: 0px;
		vertical-align: middle;
		height: 1.3em;
		width: 1.3em;
	}

	.PCTIcon {
		fill: #66319c;
		padding: 1px 0px 0px 0px;
		margin: 0px 1px 0px 0px;
		vertical-align: middle;
		height: 1.3em;
		width: 1.3em;
	}

	.PadlockIcon {
		fill: #a5a5a5;
		width: 0.9em;
		vertical-align: middle;
		transition: fill 0.2s ease;
	}

		.PadlockIcon:hover {
			fill: #66319c;
		}

		.PadlockIcon.active {
			fill: #66319c;
		}
		
		.PadlockIcon.active:hover {
			fill: #a5a5a5;
		}

		.PadlockIcon.error {
			fill: #a0000a;
		}
		
		.PadlockIcon.error:hover {
			fill: #a5a5a5;
		}
		
	.HintIcon {
		fill: #a5a5a5;
		padding: 1px;
		width: 0.9em;
		vertical-align: middle;
	}

	.HintIconSVGPath {
		d: path("M256.01,13.99C114.63,13.99,.01,128.61,.01,269.99s114.62,256,256,256,256-114.62,256-256S397.4,13.99,256.01,13.99Zm-.13,465.44c-23.87-.08-43.12-19.21-43.02-42.74,.1-23.47,19.34-42.29,43.22-42.26,23.79,.03,43.08,19.04,43.08,42.46,0,23.46-19.5,42.62-43.28,42.54ZM402.91,204.88c-3.28,14.72-10.92,27.18-20.88,38.29-12.14,13.53-26.14,24.88-41.18,35.02-9.41,6.34-18.59,12.96-27.08,20.57-12.45,11.17-19.34,24.98-21.02,41.5-.42,4.12-.81,8.24-1.18,12.38-.7,7.72-7.19,13.62-14.94,13.62h-43.98c-7.88,0-14.15-6.59-13.77-14.45v-.14c.6-12.16,1.98-24.23,4.62-36.15,4.52-20.47,15.36-36.84,31.77-49.68,10.82-8.46,21.81-16.71,32.44-25.4,12.97-10.6,23.62-23.21,30.81-38.49,2.3-4.88,3.87-10.01,4.31-15.43,1.03-12.76-4.22-22.45-14.6-29.53-7.75-5.29-16.55-7.8-25.73-9.05-12.15-1.65-24.35-1.75-36.27,1.25-20.92,5.26-32.77,19.32-37.18,40.04-1.48,6.98-7.64,11.98-14.78,11.98h-54.19c-8.09,0-14.38-7.02-13.5-15.06,1.73-15.71,4.99-31.06,10.98-45.75,14.19-34.83,39.89-56.7,75.71-67.07,20.19-5.85,40.88-7.6,61.81-6.94,18.99,.6,37.56,3.61,55.48,10.05,19.57,7.03,36.88,17.53,50.59,33.43,13.04,15.13,20.51,32.77,23.14,52.48,1.89,14.23,1.76,28.47-1.38,42.54Z");
		}

	.CautionAlertIconSVGPath {
		d: path("M505.95,429.73L306.86,31.43c-20.95-41.91-80.75-41.91-101.7,0L6.07,429.73c-18.89,37.8,8.59,82.27,50.85,82.27H455.1c42.26,0,69.74-44.47,50.85-82.27Zm-250.07,49.71c-23.87-.08-43.12-19.21-43.02-42.74,.1-23.47,19.34-42.29,43.22-42.26,23.79,.03,43.08,19.04,43.08,42.46,0,23.46-19.5,42.62-43.28,42.54Zm28.32-126.07c-1.04,6.95-7,12.09-14.03,12.09h-28.1c-7.03,0-12.99-5.14-14.03-12.09,0,0-25.93-210.39-25.93-213.84,0-29.49,15.51-34.07,54.01-34.07s53.78,4.76,53.78,34.07c0,4.02-25.7,213.84-25.7,213.84Z");
		}

	.CloseIcon {
		fill: #f9f2ff;
		width: 0.9em;
		vertical-align: middle;
	}

		.CloseIcon:hover {
			fill: #1f0a33;
		}

	.CloseIconSVGPath {
		d: path("M256.01,13.99C114.63,13.99,.01,128.61,.01,269.99s114.62,256,256,256,256-114.62,256-256S397.4,13.99,256.01,13.99Zm155.09,399.16l-11.93,11.93c-9.88,9.88-25.91,9.88-35.79,0l-107.37-107.37-107.37,107.37c-9.88,9.88-25.91,9.88-35.79,0l-11.93-11.93c-9.88-9.88-9.88-25.91,0-35.79l107.37-107.37-107.37-107.37c-9.88-9.88-9.88-25.91,0-35.79l11.93-11.93c9.88-9.88,25.91-9.88,35.79,0l107.37,107.37,107.37-107.37c9.88-9.88,25.91-9.88,35.79,0l11.93,11.93c9.88,9.88,9.88,25.91,0,35.79l-107.37,107.37,107.37,107.37c9.88,9.88,9.88,25.91,0,35.79Z");
	}


/*==========================================================*/
/* --------------- CHARTJS - BASIC STYLING ---------------- */
/*==========================================================*/

	.GraphContainer {
		display: block;
		position: relative;
		width: 100%;
		text-align: center;
	}

	.GraphTitleContainer {
		position: relative;
		width: 95%;
		top: 10px;
		background-color: #ffffff; 
		padding: 0px 5px 0px 5px;
		margin: auto;
		text-align: center;
		border-radius: 5px;
		font-size: 1.3em;
		font-family: Calibri, Arial, sans-serif;
		font-weight: bold;
		line-height: 1em;
		color: #66319c;
	}

	.GraphCanvasContainer {
		position: relative;
		width: 95%;
		min-height: 380px;
		max-height: 500px;
		padding: 10px 5px 5px 5px;
		margin: auto;
		text-align: center;
	}

	.DisclaimerContainer {
		box-sizing: border-box;
		width: 100%;
		height: auto;
		margin: 5px 0px 0px 0px;
		border: 1px solid;
		padding: 1px;
		white-space: normal;
		font-size: 0.60em;
		font-family: Century Gothic, Arial, sans-serif;
		font-weight: normal;
		line-height: 0.95em;
		text-align: justify;
		color: #66319c;
		background: #ffffff;
	}

/*==========================================================*/
/* ------------ SHAREABLE LINK BUTTON STYLING ------------- */
/*==========================================================*/

.CMLLC-LinkBtn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.CMLLC-LinkBtn:focus {
  outline: none;
}

.CMLLC-LinkBtn-Img {
  display: block;
  margin: 0px;
  width: 36px;
  height: auto;
}

.CMLLC-UserNotificationText {
    position: relative;
    margin: 0px;
    padding: 5px 5px 5px 5px;
    display: block;
	text-align: center;
    font-family: Calibri, Arial, sans-serif;
    font-size: 1.0em;
    font-weight: bold;
    white-space: normal;
    color: #66319c;
}