/* ShareYourStories
------------------------------------------------

- Index

 (global)
------------------------------------------------ */

div.message.error {
	background-color: #f2dede;
	border: 1px solid #a64242;
	border-radius: 20px;
	color: #a64242;
	font-family: "Neutraface", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 0 0 20px 0;
	padding: 20px 40px;
}

/* Index
------------------------------------------------ */

#share_your_story_index_c {
	background-color: rgba(235, 243, 250, 0.75);
	border-radius: 20px;
	font-family: "Neutraface", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding: 20px;
}

#share_your_story_index_c form {
	display: grid;
	row-gap: 40px;
	width: 100%;
}

#share_your_story_index_c form div.row_c,
#share_your_story_index_c form div.files_c {
	column-gap: 20px;
	display: grid;
	row-gap: 20px;
}

#share_your_story_index_c form div.files_c div.file_outer_c {
	align-items: center;
	display: flex;
}

#share_your_story_index_c form div.files_c div.file_outer_c div.input.file {
	flex: 1;
}

#share_your_story_index_c form div.files_c div.file_outer_c div.delete {
	background-color: red;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	flex: 0 0 40px;
	margin: 0 0 0 20px;
	padding: 10px 5px;
	text-align: center;
}

#share_your_story_index_c form div.files_c div.file_outer_c div.delete svg {
	height: 24px;
}

#share_your_story_index_c form div.files_c #add_file {
	-webkit-appearance: none;
	appearance: none;
	background-color: #2964b7;
	border: none;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	font-size: 1.0em;
	padding: 15px;
	text-align: center;
}

#share_your_story_index_c form div.files_c p {
	margin: 0;
}

#share_your_story_index_c form div.input {
	display: flex;
	flex-direction: column;
}

#share_your_story_index_c form div.input label {
	font-family: "Neutraface", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 0 0 10px 0;
}

#share_your_story_index_c form div.input.checkbox label {
	font-size: 0.8em;
}

#share_your_story_index_c form div.input label span {
	color: red;
	font-size: 0.7em;
}

#share_your_story_index_c form div.input:not(.checkbox) input,
#share_your_story_index_c form div.input textarea {
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid #707070;
	border-radius: 10px;
	font-family: "Neutraface", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding: 10px;
}

#share_your_story_index_c form div.input:not(.checkbox) input {
	width: calc(100% - 22px);
}

#share_your_story_index_c form div.input textarea {
	resize: none;
}

#share_your_story_index_c form div.input input:focus,
#share_your_story_index_c form div.input input:focus-visible {
	outline: max(2px, 0.1em) solid #0065bd;
	outline-offset: 0.25em;
}

#share_your_story_index_c form div.input.checkbox label {
	align-items: center;
	display: flex;
}

#share_your_story_index_c form div.input.checkbox label input {
	margin: 0 1em 0 0;
}

#share_your_story_index_c form div.input div.error-message {
	color: red;
	margin: 5px 0 0 0;
}

#share_your_story_index_c form p,
#share_your_story_index_c form div.header {
	font-family: "Neutraface", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#share_your_story_index_c form div.header {
	margin: 0 0 10px 0;
}

#share_your_story_index_c form div.header span {
	color: red;
	font-size: 0.7em;
}

#share_your_story_index_c form input[type='submit'] {
	background-color: #ffbf3d;
	border: none;
	border-radius: 3px;
	box-shadow: rgba(18, 25, 97, 0.08) 0 1px 4px 0;
	color: blue;
	cursor: pointer;
	font-family: "Neutraface", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 24px;
	line-height: 38px;
	padding: 0 16px;
	margin-top: 10px;
}

@media screen and (min-width: 768px) {
	#share_your_story_index_c {
		padding: 40px;
	}

	#share_your_story_index_c form div.row_c {
		grid-template-columns: repeat(2, 1fr);
	}

	#share_your_story_index_c form div.input:not(.checkbox) input {
		padding: 10px;
	}
}