/*----------*/
/* FUSD CSS */
/*----------*/
/* THEMES STYLE SHEET */
/* DEFINE COLORS ONLY IN THIS STYLE SHEET */

:root {
	--fusdOffwhite-bg-color: #edf8f9;
}

html,
:host {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
}

body {
	font-size: medium; 
}

/* ANIMATIONS */
@keyframes animNoticeSlide {
	from {
		transform: translateX(-50px);
	}
	to {
		transform: translateX(50px);
	}
}

@keyframes animIconClickAnim {
	0% {transform: scale(1.0); opacity: 1.0; }
	100% {transform: scale(3.0); opacity: 0.0;}
}

@keyframes animGrowShrink {
	0% {transform: scale(1.0);}
	30% {transform: scale(1.0);}
	50% {transform: scale(1.15) rotate(25deg);}
	80% {transform: scale(1.0);}
}

@keyframes animInfoIcon {
	from {
		transform: rotate(10deg);
	}
	to {
		transform: rotate(-10deg);
	}
}

@keyframes animInfoIconScale {
	from {
		transform: scale(1.00) translateY(0px);
	}
	to {
		transform: scale(1.10) translateY(5px);
	}
}

@keyframes animInfoIconNew {
	from {
		transform: rotate(10deg) scale(1.0) translateY(0px); 
	}
	to {
		transform: rotate(-10deg) scale(1.10) translateY(5px); 
	}
}


@keyframes animTextBoxGradient {
	0% { background-position: 0% 50%;}
	50% { background-position: 100% 50%;}
	100% { background-position: 0% 50%;}
}

@keyframes animTextBoxLabelSlide {
	0% {transform: translateX(-20px); }
	50% {transform: translateX(20px);}
	100% {transform: translateX(-20px); }
}

/* Rotation animation */
@keyframes animTextBoxGradientNew {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes animFUSDArrow {
	0% {
		transform: translateY(-10px); 
	}
	
	25% {
		transform: translateY(7px); 
	}
	
	60% {
		transform: translateY(0px); 
	}
	100% {
		transform: translateY(-10px); 
	}
}

.fusdProcFields {
	background-color: orange;
	display: none; 
}

.fusdHSSection {
	width: 85vmin; 
	display: flex; 
	flex-direction: column; 
	white-space: normal; 
	background-color: #ffffff; 
	margin-top: 5px; 
}

.fusdPCSectionHeader {
	margin-top: 20px; 
	font-size:large; 
	font-weight:bold; 
	color:white;
	background-color:black;
	padding:10px;
	display: flex; 
	flex-direction: row; 
	align-items: center; 
	justify-content: space-between; 
	width: 100%; 
	white-space: normal; 
	border: 1px solid #000000;
}

.fusdPCSectionHeader div {
	margin-right: 10px; 
}

.fusdPCSectionHeader div:first-child {
	min-width: 20%
}


.fusdPCSectionSubHeader {
	font-size: medium; 
	font-weight: bold; 
	color: black; 
	background-color: #dddddd;
	padding: 10px;
	border: 1px solid #5d5d5d;
	width: 100%; 
	white-space: normal; 
}

.fusdPCSectionBody {
	width: 100%; 
	display: flex; 
	flex-direction: column; 
}

/* Document Button with Animation */

.fusdButtonDocument {
	white-space: unset; 
	border: 4px solid #00aeff; 
	border-radius: 25px; 
	padding: 15px; 
	min-width: 250px; 
	min-height: 50px; 
	font-size: large; 
	font-weight: bold; 
	margin: 15px 5px; 
	box-shadow: 5px 5px 2px 0 rgba(0,0,0,0.4); 
	background-color: #ecf0f1; 
	display: flex; 
	column-gap: 5px; 
	cursor: pointer; 
	transition: background 0.25s ease-out 0.1s;
}

.fusdButtonDocument:active {
	background-color: #00aeff; 
	transform: scale(0.90);
}

.fusdButtonDocumentLabel {
	color: #000000; 
	padding: 5px; 
	overflow: auto; 
	overflow-wrap: normal; 
	text-align: center; 
	width: 75%; 
}

.fusdButtonDocumentIcon {
	text-align: center; 
	position: relative; 
	display: flex; 
	animation-iteration-count: infinite; 
	animation-duration: 2s; 
	animation-name: animGrowShrink; 
	animation-timing-function: ease-in-out;
}

.fusdButtonDocument:active .fusdButtonDocumentIcon {
	animation-name: animIconClickAnim; 
	animation-iteration-count: 1; 
	animation-duration: 0.25s; 
	animation-timing-function: linear; 
}

.fusdButtonDocument div {
	-webkit-user-select: none; 
	-ms-user-select: none; 
	user-select: none; 
}

/* SLIDER TOGGLE SWITCH */

.fusdToggleSurveyOption {
	display: flex; 
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 15px; 
	white-space: normal; 
	font-weight: normal;
	background-color: #ffffff;
	width: 100%;
	border: 1px solid #cccccc; 
	padding: 5px; 
	/*box-shadow: -1px 2px 6px rgba(0,0,0,0.4); */
}


.fusdToggleSurveyOption div:nth-child(2) {
	margin-right: 10px;
	margin-left: 10px;
}

.fusdToggleSurveyOptionItem {
	width: 35px; 
	height: 25px;
	background-color: #e6ebed;
	padding: 5px; 
	text-align: center;
	white-space: normal; 
	font-weight: normal;
}

/* The switch - the box around the slider */
.fusdSwitch {
  font-size: 1em;
  position: relative;
  display: inline-block;
  width: 3.75em;
  height: 2.25em;
}

/* Hide default HTML checkbox */
.fusdSwitch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.fusdSlider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #ff0000;
  border-radius: 50px;
  border: 2px solid #000000;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fusdSlider:before {
	position: absolute;
	content: "\2716";
	mix-blend-mode: hard-light; /* Keeps white background, makes dark areas red */
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2em;
	width: 2em;
	inset: 0;
	background-color: white;
	border-radius: 25px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.4);
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fusdSlider:active {
	transform: scale(0.90);
}

.fusdSwitch input:checked + .fusdSlider {
  background: #0974f1;
}

.fusdSwitch input:focus + .fusdSlider {
  box-shadow: 0 0 1px #0974f1;
}

.fusdSwitch input:checked + .fusdSlider:before {
	content: "\2714";
	transform: translateX(1.6em);
}


.fusdToggleSurveyOption:has(input[type="checkbox"]:not(checked)) {
	/*background: linear-gradient(180deg, pink, transparent); */
	/*background-color: pink; */
	border: 3px solid crimson;
	transition: background 0.25s ease-out 0.1s; 
}

.fusdToggleSurveyOption:has(input[type="checkbox"]:not(checked)) div:nth-child(3){
	text-decoration-line: line-through; 
	color: crimson;
}


.fusdToggleSurveyOption:has(input[type="checkbox"]:checked){
	/* background: linear-gradient(0deg, #a6d9ff, transparent); */
	background-color: #ccebff; 
	border: 3px solid #00b0ff;
	transition: background 0.25s ease-out 0.1s; 
}

.fusdToggleSurveyOption:has(input[type="checkbox"]:checked) div:nth-child(3){
	text-decoration-line: none; 
	color: black;
}


.divCheckmark, .divExmark {
	display: flex;
	justify-content: center; 
	align-items: center;  
	font-size: large; 
	width: 30px; 
	min-width: 30px; 
	height: 30px; 
	background-color: white; 
	border-radius: 15px; 
	border: 3px solid black;

}

.divExmark {
	border: 3px solid red;
}

.divCheckmark {
	border: 3px solid #2E8B57;
}


.divCheckmark::after {
	content: "\2714";
	filter: invert(41%) sepia(84%) saturate(332%) hue-rotate(94deg) brightness(92%) contrast(90%);
	display: flex; 
}

.divExmark::after {
	content: "\2716";
	filter: invert(20%) sepia(82%) saturate(7459%) hue-rotate(357deg) brightness(97%) contrast(112%);
	display: flex; 
}

.fusdHousingSurveyOption {
	display: flex; 
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 10px; 
	white-space: normal; 
	font-weight: normal;
	background-color: #ffffff;
	width: 100%;
}

.fusdHousingSurveyOptionItem {
	background-color: #e6ebed;
	padding: 5px; 
	text-align: center;
	white-space: normal; 
	font-weight: normal;
}

.fusdHousingSurveyOptionItemLabel {
	width: 90%; 
	border: 2px solid #e6ebed;
	padding: 5px; 
	min-height: 25px; 
	white-space: normal; 
	font-weight: normal;
}

.fusdHousingSurveyOptionItemSelected {
	background-color: #a2ff9a;
	border: 2px solid #000000;

}

.noticeDiv {
	border: 1px solid black; 
	background-color: yellow; 
	box-shadow: -3px 2px 6px 1px #a2a2a2; 
	color: black; 
	margin-top: 10px; 
	padding: 5px;
}

.noticeTitle {
	font-weight: bold; 
	text-align: center;
	animation: animNoticeSlide 5s ease-in-out infinite alternate;
}


.informationDiv {
	margin-top: 30px; 
	margin-bottom: 30px; 
	border-width: 5px; 
	border-style: solid; 
	border-color: #2563eb; 
	padding: 10px; 
	font-weight: normal; 
	white-space: normal; 
	width: 100%;
	background-color: #ffffff;
}

.informationTitleDiv {
	width: 100%; 
	font-size: large; 
	font-weight: bold;
	background-color: #e6ebed; 
	padding: 5px; 
	display: flex; 
	flex-direction: row; 
	align-items: center; 
	justify-content: flex-start;
	align-content: center; 
	white-space: normal; 
	margin-bottom: 25px; 
}

.informationIconDiv {
	width: 68px; 
	max-width: 25vmin; 
	margin-right: 10px; 
	
	animation: animInfoIconNew 1s ease-in-out infinite alternate;

}



.informationDiv p {
	font-weight: normal; 
	color: #000000;
	margin-bottom: 10px; 
}


.fusd-rainbowTextBox {
	border: 4px solid #000000; 
	border-radius: 8px;
	color: #000000; 
	padding: 10px; 
	outline: none; 
	background-color: #ffffff;
	background: linear-gradient(#eae4e4,#ffffff, #cdcdcd);
}

.fusd-rainbowTextBoxContainer {
    position: relative;
    border-radius: 10px;
    padding: 10px;
    color: #000000;
	background-color: #ffffff; 
    /*background: linear-gradient(#eae4e4,#ffffff);*/ /* inner background */
    z-index: 1;
    overflow: hidden;
}

/* Rotating rainbow border layer */
.fusd-rainbowTextBoxBackground {
    content: "";
    position: absolute;
    z-index: -1;

	left: -25%;
	height: 75vmin;
	width: 75vmin; 
	
    border-radius: inherit;
    padding:10px; /* border thickness */

    background: conic-gradient(
        red, orange, yellow, green, blue, indigo, violet, red
    );

    /* Mask to create border effect */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    animation: animTextBoxGradientNew 3s linear infinite;
}

.fusd-rainbowTextBoxBackground:has(+ input:not(placeholder-shown)){
	animation-play-state: paused; 
	background: white; 
	transition: background 0.5s ease-in-out 1s; 
}

.fusd-rainbowTextBoxBackground:has(+ input:placeholder-shown){
	background: conic-gradient(
        red, orange, yellow, green, blue, indigo, violet, red
    );
	animation-play-state: running; 
	transition: background 0.5s ease-in-out 1s; 
}

.fusd-rainbowTextBoxLabel {
	text-align: center; 
	width: 50vmin; 
	margin-top: 5px; 
	margin-bottom: 5px; 
	animation: animTextBoxLabelSlide 5s ease-in-out infinite;
}

.fusd-arrowRight {
	width: 30px; 
	height: 30px; 
	color: #00aeff;
	rotate: -90deg; 
	animation: animFUSDArrow 1.25s cubic-bezier(0,0,0,1.61) infinite; 
}

.fusd-arrowRight:has(+ input[type="checkbox"]:not(checked)) {
	animation-play-state: running; 
}

.fusd-arrowRight:has(+ input[type="checkbox"]:checked) {
	animation-play-state: paused; 
	display: none; 
}