/* Element containing form as a whole */
.form {
	display: flex;
	flex-direction: column; /* Display elements top-down */
	text-align: center;
}

/* Hide the default checkbox */
.form-input-container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

/* Default Label Styling */
label {
  background: grey; /* Default 'unchecked' grey background color */
	border-radius: 2em;
	padding: 0.5em;
}

/* Element containing an input item */
.form-input-container {
  display: flex;
  flex-direction: row;
  user-select: none;
  margin: auto;
  transition: all 0.7s;
}

/* Redecorate Element When Checked */
.form-input-container:has(input[type=checkbox]:checked) {
	background: white; /* Default 'checked' white background color */
}

/* Checkbox Shape */
.checkmark {
  display: flex;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  background: black;
  border-radius: 50px;
  transition: all 0.7s;
  --spread: 20px;
}

/* When the checkbox is checked, add a colorburst background */
.form-input-container input:checked ~ .checkmark {
  background: black;
  box-shadow: -10px -10px var(--spread) 0px var(--bg-one-lite, #ff6666), 
    0 -10px var(--spread) 0px var(--bg-two-lite, #66ff66), 
    10px -10px var(--spread) 0px var(--bg-three-lite, #6666ff), 
    10px 0 var(--spread) 0px var(--bg-four-lite, #ff66ff), 
    10px 10px var(--spread) 0px var(--bg-one-lite, #ff6666), 
    0 10px var(--spread) 0px var(--bg-two-lite, #66ff66), 
    -10px 10px var(--spread) 0px var(--bg-three-lite, #6666ff),
    -10px 0px var(--spread) 0px var(--bg-four-lite, #ff66ff);
}

/* Create the checkmark/indicator */
.form-input-container .checkmark:after {
  display: none;
  margin: auto;
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid #f0f0f0;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

/* Hide checkmark when not checked */
.checkmark:after {
  content: "";
  display: none;
}

/* Show the checkmark when checked */
.form-input-container input:checked ~ .checkmark:after {
  display: flex;
  margin: auto;
}

/* Text Decoration for Name on RSVP Update Page */
.rsvp-header {
	color: goldenrod;
	text-shadow: 
		0px -1px 0px white,
		2px 2px 0px black
}

/* Used as text label for checkbox/radio button */
.check-text {
	display: flex;
}

/* Error Message Styling */
p.error-text {
	display: flex;
	color: red;
	font-style: bold italic;
}

/* System Status Message Styling */
p.status-message {
	display: flex;
	font-style: bold;
}