:root {
  --tab-active-color: white;
  --tab-color: #ccc;
  --background-color: rgb(128, 128, 128);
  --text-color: black;
  --text-unfocused-color: #666;
  --text-disabled-color: rgb(131, 131, 131);
  --form-background-color: rgb(224, 224, 224);
  --form-shadow-color: rgba(0, 0, 0, 0.1);  
  --form-submit-background-color: #4ccc51;
  --form-submit-background-hover-color: rgb(0, 213, 34);
  --text-failure-color: #ff0000;
  --feedback-unfocused-text-color: rgb(75, 157, 79);
}
body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	min-width: 375px;
	color: var(--text-color);
}

#logo_header {
	background-color: var(--background-color);
	margin: 0;
	padding: 0;
}

.tab-content {
	display: none;
}

.tab-content.active {
	display: block;
}

.tabs {
  top: 0;
  position: sticky;
  list-style: none;
  padding: 0;
  margin: 0;
  padding: 10px 0 0 0;
  margin: 0;
  text-align: center; /* Center the tabs */
  background-color: var(--background-color);
  z-index: 1000;
  display: block;
  border: 0px solid white;
  border-width: 0 0 5px 0;
}

.tab {
	display: inline-block;
	padding: 15px 0 10px 0;
	margin: 0 0 -4px 0;
	cursor: pointer;
	width: 40%;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	overflow: hidden;
	background-color: var(--tab-color);
	color: var(--text-unfocused-color);
}

.tab.active {
	color: var(--text-color);
	background-color: var(--tab-active-color);
	font-size: larger;
	margin: 0 0 -6px 0;
}

#share-content {
	max-width: 700px;
	margin: 0 auto;
}
	
form {
	background-color: var(--form-background-color);
	box-shadow: 0 0 10px var(--form-shadow-color);
	margin: 3rem 0 10rem 0;
	padding: 30px;
	border-radius: 20px;
	border-radius: 8px;
}

label {
	display: block;
	margin-bottom: 8px;
}

input[type="text"],
textarea,
input[type="file"] {
	width: 100%;
	padding: 10px;
	margin-bottom: 15px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
}

input[type="text"]:disabled,
input[type="submit"]:disabled,
input[type="submit"]:disabled:hover {
	background-color: rgb(211, 211, 211);
	color: rgb(131, 131, 131);
	cursor: default;		
}

/* Adjusted styling for checkbox and its label */
.checkbox-container {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.checkbox-container input[type="checkbox"] {
	margin-right: 10px;
	margin-left: 15px;
}

.checkbox-container label {
	flex: 1;
	min-width: 5rem;
	text-align: left;
	font-size: smaller;
}

textarea {
	resize: vertical;
}

.optionals {
	padding: 20px 30px;
	margin-bottom: 30px;
	border: 1px solid rgb(195, 195, 195);
	border-radius: 4px;		
}

.optionals h1 {
	margin: 0;
	padding: 0;
	font-size: 1.2rem;
}

.optionals h1 + p {
	margin-bottom: 30px;
	text-align: left;
}

.optionals p {
	font-size: 0.8rem;
}

input[type="submit"] {
	background-color: var(--form-submit-background-color);
	color: #fff;
	padding: 10px 15px;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	width: 100%;
	color: white;
}

input[type="submit"]:hover {
	background-color: var(--form-submit-background-hover-color);
	cursor: pointer;
}

/* Optional: Style for error messages */
.error-message {
	color: var(--text-failure-color);
	margin-top: 5px;
}

footer.highlight_bar {
	position: fixed;
	bottom: 0;
	display: block;
	text-align: center;
	padding: 10px 0;
	width: 100%;
	margin: 0 auto;
	background-color: rgb(252, 252, 252);
	box-shadow: 0 0 10px rgb(230, 230, 230);
	color: rgb(155, 155, 155);
}

footer.disclaimer {
	display: none;
	background-color: #333;
	padding: 20px 4%;
	text-align: center;
	position: fixed;
	bottom: 0;
	width: 92%;
	font-size: smaller;
	color: rgb(211, 211, 211);
}

#submission_feedback {
	border: 1px solid #61cb65;
	background-color: #a4e4a7; /* Green background color */
	box-shadow: 0 0 30px color(display-p3 0.695 0.887 0.676);
	color: black;
	padding: 30px;
	margin: 40px 0 0 0;
	text-align: center;
	font-size: 18px;
	border-radius: 5px;
	display: none;
}

#submission_feedback.show {
	display: block; /* Show the message when the 'show' class is applied */
}

.sharing_link {
	border-radius: 5px;
	border: 1px solid black;
	background-color: white;
	padding: 20px 0;
}

.sharing_link a {
	font-size: 1rem; /* Set an initial font size */
	white-space: nowrap; /* Prevent text from wrapping */
	overflow: hidden; /* Hide overflow content */
	display: block;
	text-decoration: none;			
}

.sharing_details {
	font-size: smaller;
	display: block;
	max-width: 700px;
	color: var(--feedback-unfocused-text-color);
}

.styled_link {
	color: #3498db;
	cursor: pointer;
}

.styled_link:hover {
	color: #2980b9;;
}

/* Style for the dismiss button */
.styled-button {
	display: block;
	padding: 10px 20px;
	background-color: #3498db; /* Change the background color to your preference */
	color: #fff;
	cursor: pointer;
	border-radius: 5px;
	margin: 20px auto;
	max-width: 150px;
	text-decoration: none;
}

.styled-button:hover {
	background-color: #2980b9; /* Change the hover background color to your preference */
}