@supports (color: var(--prop)) {
				:root {
					--portal-page-bg-color: #666666;
					--portal-nav-link-hover-color: #DBDBDB;
					--portal-nav-link-selected-color: rgba(102, 102, 102, 0.15);
					--portal-nav-menu-icon-bg-color: #838383;
					--portal-nav-menu-icon-border-color: #535353;
					--portal-nav-menu-open-bg-color: #838383;
					--portal-nav-menu-open-border-top-color: #9D9D9D;
					--portal-button-bg-color: #666666;
					--portal-button-hover-bg-color: #717171;
					--portal-button-active-bg-color: #4E4E4E;
					--portal-progress-bar-color: #666666;
					--portal-footer-text-color: #000000;
					--portal-emphasis-color: #F2F2F2;
					--psy-color-nav-background: var(--psy-color-white); --psy-color-primary-strong: #666666; --psy-color-primary-moderate: rgba(102, 102, 102, 0.7);; --psy-color-primary-weak: rgba(102, 102, 102, 0.5);; --psy-color-primary-weakest: rgba(102, 102, 102, 0.1);; 
				}
			}

			/* common.css */
			.ProgressBar__Bar {
				background-color: #666666;
			}

			.EventMessage {
				background-color: #F2F2F2;
				border: 1px solid #666666;
				border-radius: 4px;
			}

			/* portal-cobranded.css */

			#Nav ul > li a:hover, #Nav ul > li a:active {
				color: #DBDBDB;
			}

			body:not(.r-app) .Button input,
			body:not(.r-app) .Button button {
				background: #666666;
			}

			body:not(.r-app) .Button:hover input,
			body:not(.r-app) .Button:hover button {
				background: #717171;
			}

			body:not(.r-app) .Button:active input,
			body:not(.r-app) .Button:active button {
				background: #4E4E4E;
			}

			body:not(.ff):not(.edgehtml) input[type="radio"].responses-radio:hover, 
			body:not(.ff):not(.edgehtml) input[type="radio"].responses-radio:focus {
				border: 1px solid #4E4E4E;
			}

			body:not(.ff):not(.edgehtml) input[type="checkbox"].responses-checkbox:hover, 
			body:not(.ff):not(.edgehtml) input[type="checkbox"].responses-checkbox:focus {
				border: 1px solid #4E4E4E;
			}

			/* portal-cobranded-availability.css */
			.AvailableTimeSlot, a.AvailableTimeSlot:link, a.AvailableTimeSlot:visited {
				background-color: #666666;
			}

			a.AvailableTimeSlot:hover {
				background: #717171;
			}

			a.AvailableTimeSlot:active {
				background: #4E4E4E;
			}

			.navBackgroundColor { 
				background-color: #222222;
			}

			.pageBackgroundColor { 
				background-color: #666666;
			}

			.appointmentDetailsBackgroundColor { 
				background-color: #666666;
				border: 1px solid #666666;
			}

			.pendingAppointmentBackgroundColor { 
				background: repeating-linear-gradient( -45deg, #F6F6F6, #F6F6F6 2px, #666666 4px, #666666 6px);
				border: 1px solid #666666;
			}

			.appointmentDetailsCanceledContainer { 
				border: 1px solid #666666;
			}

			.appointmentDetailsInnerContainer { 
				border-left: 1px solid #666666;
				border-top: 1px solid #D2D2D2;
				border-bottom: 1px solid #D2D2D2;
				border-right: 1px solid #D2D2D2;
				margin-top: -1px;
				margin-bottom: -1px;
				margin-right: -1px;
			}

			.UpcomingAppointmentListItemIconNavItem{
				padding-left: 10px;
				color: #666666;
			}

			.PendingDocumentListItemIconNavItem,
            .AlwaysAvailableDocumentListItemIconNavItem,
            .CompletedDocumentListItemIconNavItem{
				padding-left: 10px;
				padding-top: 1px;
				display: inline-block;
				color: #666666;
			}

			.DashboardPendingDocumentsListItem_NavIcon,
			.DashboardPendingPaymentsListItem_NavIcon {
				color: #666666;
			}

			.UpcomingAppointmentImminentAppointment {
				padding: 10px;
				background-color: #F2F2F2;
				border: 1px solid #666666; 
				border-left: none;
				border-radius: 0px 4px 4px 0px;
			}

			.StatusTag {
				background-color: #CCCCCC;
			}

			.secondaryActionButton button { 
				border: 1px solid #D6D6D6 !important;
				color: #222222 !important;
			}

            .EmphasisColor {
				background-color: #F2F2F2;
			}

			a:hover .EmphasisColorOnHover, a:active .EmphasisColorOnHover {
				background-color: #F2F2F2;
			}

			.customIconColor{
				color: #222222 !important;
			}

            .buttonBackgroundColor { 
				background-color: #666666;
			}

			.buttonBackgroundColorAsColor { 
				color: #666666;
			}

            .PortalColorBanner {

                padding: 10px;
	            margin-top: 1px;
	            border-radius: 4px;
                background-color: #F2F2F2;
                border: 1px solid  #666666;
            }

			#Footer, #Footer a, #Footer a:link, #Footer a:visited, #Footer a:hover, #Footer a:active {
				color: #000000;
				text-decoration: none;
			}

			.portalThemeColorSvg .a {
				stroke: #666666;
			}

			.portalThemeColorSvg.fill .a {
				fill: #666666;
				stroke: var(--psy-color-white);
			}

			.portalThemeColorSvg .b {
				stroke: #666666;
			}

			.portalThemeColorSvg.fill .b {
				fill: #666666;
				stroke: var(--psy-color-primary-weak);
			}

			.questionnaire-response {
				padding: var(--psy-space-m);
				margin-bottom: 10px;
				border: 1px solid #ddd;
				border-radius: 4px;
				background-color: white;
				display: flex;
			}

			label.questionnaire-response:focus-within,
			label.questionnaire-response:hover {
				padding: var(--psy-space-m);
				margin-bottom: 10px;
				border: 1px solid #4E4E4E;
				cursor:pointer;
				border-radius: 4px;
				background-color: var(--psy-color-surface-middle);
			}

			.questionnaire-response-active {
				padding: var(--psy-space-m);
				margin-bottom: 10px;
				border: 1px solid #4E4E4E;
				border-radius: 4px;
				background-color: #f8f8f8;
				display: flex;
			}