form {
	text-align: center;
}

.form-container {
	/*text-align: center;*/
	width: 300px;
}

.form-container.login .form-field, .form-container.registration .form-field {
	width: 300px;
	padding: 0; 
	/*margin: 0;*/
}

.task-note-form {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/*.form-container.login #username.login_form {
	padding: 0;
	margin-left: 5px;
	width: 278px;
	height: 52px;
}*/

/*.form-container.login .wrapper {*/
	/*text-align: center;*/
	
	
	/*width: 280px;*/
/*}*/

.centered {
	margin-left: auto;
	margin-right: auto;
}

.intro-text {
	margin: 3em 0;
	line-height: 1.65em;
	text-align: center;
}

/*.suggestions-container {
	text-align: left;
	border: solid 1px var(--secondary-grey);
	border-radius: 5px;
	padding: 5px;
}*/

/*[required] .suggestions-cotnainer {
	border-width: 2px;
	border-color: var(--primary)
}*/

.suggestions-container .suggestions-label {
	margin-bottom: 10px;
}

.suggestions-container .suggestions-list {
	text-align: left;
	border: solid 1px var(--secondary-grey);
	border-radius: 5px;
	padding: .5rem;
	min-height: 35px;
	max-height: 150px;
	overflow-y: scroll;
}

.suggestions-container .suggestions-list .suggestions-placeholder {
	font-style: italic;
	margin-top: 7px;
	text-align: center;
	color: var(--secondary-grey);
}

[required] + .suggestions-container .suggestions-list {
	border-width: 2px;
	border-color: var(--primary)
}

/* This is clearly a perfect target for a refactor... */
.task-form, .task-template-form, .wrap-form, .recurring-task-form {
	/* border: 1px solid black; */
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	/*justify-content: space-evenly;*/
	justify-content: space-between;
	width: 100%;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
}

/* Think this was an attempt at flex break that was typoed */
break {
	flex-basis: 100%;
	width: 0px;
	height: 0px;
	overflow: hidden;
}

form .form-subsection-title {
	width: 100%;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

form .form-field {
	width: 100%;
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
}

form .form-field .form-field-label-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-bottom: 5px;
}

form .form-field label {
	font-size: 1rem;
}

[required],
form input[type=text][required],
form input[type='number'][required],
form input[type=password][required],
form input[type=date][required],
form input[type=tel][required] {
	border: 2px solid var(--primary);
}

[required]:focus,
form input[type=text][required]:focus,
form input[type='number'][required]:focus,
form input[type=password][required]:focus,
form input[type=date][required]:focus,
form input[type=tel][required]:focus {
	border: 2px solid var(--primary);
}

[required] + .select2-container .selection .select2-selection {
	border-width: 2px;
	border-color: var(--primary);
}

.required-flag {
	color: var(--secondary-red);
	text-align: left;
}

/* This is clearly a perfect target for a refactor... */
.task-form .form-field,
.task-template-form .form-field,
.wrap-form .form-field,
.recurring-task-form .form-field {
	width: 450px;
	/*margin: 1rem 4rem;*/
	display: flex;
	flex-direction: column;
}

/* Override the above if the field is contained by a field list */
.field-list > .form-field {
	width: 100%;
}

.fields {
	width: 100%;
}

.basic-info {
	margin-right: 40px;
	min-width: 450px;
}

/* .dropdown {
	border-color: lightgreen;
} */


form input[type='email'],
form input[type='password'] {
	line-height: 48px;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid hsla(0, 0%, 0%, 0.3);
	border-radius: 5px;
	/*text-align: center;*/
	margin: 1em 0;
}

/*input#username, input#password {
	text-align: center;
	width: 280px;
}*/

form input[type='email']:focus,
form input[type='password']:focus {
	outline: 0;
	border: 1px solid hsla(0, 0%, 0%, 0.9);
}

form .toggleable-password-container {
	/*margin: 1em 0;*/
	position: relative;
}

form input.password-toggleable {
	margin: 0;
	padding-right: 30px;
}

form input.credential {
	text-align: center;
}

form .toggle-show-password-icon {
	position: absolute;
	font-size: 1.25rem;
	top: 15px;
	right: 15px;
}

/* Custom radio buttons and checkboxes */

/* both */

.radio-option-container .label-text, .checkbox-option-container .label-text {
	margin-left: 10px;
	margin-right: 10px;
}

.radio-option-container input, .checkbox-option-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.radio-option-container, .checkbox-option-container {
	display: flex;
	align-items: center;
	position: relative;
	/*padding-left: 35px;*/
	/*margin-bottom: 12px;*/
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding: 5px;
	border: 2px solid var(--secondary-grey);
	justify-content: space-between;
}

.radio-option-container:not(:last-child), .checkbox-option-container:not(:last-child) {
	margin-bottom: 12px;
}

/* radio buttons */

form .radio-field ul {
	display: flex;
	flex-direction: column;
}

form .radio-field ul li {
	/*margin-right: 10px;*/
	display: flex;
	flex-direction: row;
	align-items: center;
}

.radio-option-container {
	width: 100%;
	/*background-color: white;*/
	border-radius: 17px;
}

.radio-option-container.required {
	border-color: var(--primary);
}

.radio-option-container:hover {
	background-color: #eee;
}

.radio-option-container .radio-option-mark {
	/*position: absolute;
	top: 0;
	left: 0;*/
	height: 25px;
	width: 25px;
	background-color: white;
	border: 2px solid var(--secondary-grey);
	border-radius: 50%;
}

.radio-option-container input:focus ~ .radio-option-mark {
	border-color: var(--primary);
}

.radio-option-container:hover input ~ .radio-option-mark {
	background-color: #eee;
}

.radio-option-container input:checked ~ .radio-option-mark {
	background-color: var(--primary);
}

/* checkboxes */

.checkbox-field {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.checkbox-option-container .checkbox-option-mark {
	position: relative;
	height: 25px;
	width: 25px;
	border: 2px solid var(--secondary-grey);
}

.checkbox-option-mark:after {
	content: "";
	position: absolute;
	display: none;
}

.checkbox-option-container input:checked ~ .checkbox-option-mark:after {
	display: block;
}

.checkbox-option-container .checkbox-option-mark:after {
	left: 8px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.checkbox-option-container.required .checkbox-option-mark {
	border-color: var(--primary);
}

.checkbox-option-container:hover {
	background-color: #eee;
}

/* NOTE that these have identical specifity so last one wins */
.checkbox-option-container input:focus ~ .checkbox-option-mark {
	border-color: var(--primary);
}

.checkbox-option-container input:checked ~ .checkbox-option-mark {
	background-color: var(--primary);
}

.checkbox-option-container input:disabled ~ .checkbox-option-mark {
	background-color: var(--secondary-grey);
}

form .disabled-input {
	background-color: #eee;
	cursor: not-allowed;
}

.select2-container--disabled > span > span {
	cursor: not-allowed !important;
}

[disabled] {
	cursor: not-allowed;
}

form select {
	background: transparent;
	border: solid 1px var(--secondary-grey);
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	font-size: 14px;
	height: 48px;
	width: 100%;
	padding: 5px;
	font-size: 16px;
	text-align-last: center;
}

form .select2-container .select2-selection,
form .select2-selection__arrow {
	min-height: 48px !important;
}


form .select2-selection--single .select2-selection__rendered {
	line-height: 48px !important;
}

form label.mobile-only {
	display: none;
}

form input.errored, form textarea.errored {
	border-color: var(--secondary-red) !important;
}

form .radio-field ul.errored .radio-option-mark {
	border-color: var(--secondary-red);
}

form select.errored + .select2-container .selection .select2-selection {
	border-color: var(--secondary-red) !important;
}

form .submit-action-bar {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

form .submit-action-bar * {
	margin: 10px;
}

/*form .submit-button {
	margin: 0 auto;
}*/

form label {
	font-size: 13px;
	/*color: gray;*/
	margin-bottom: .5rem;
}

form input[type='text'],
form input[type='number'],
form input[type="date"],
form input[type="time"],
form input[type="tel"],
form input[type='password'] {
	display: inline-block;
	line-height: 46px;
	border: 1px solid var(--secondary-grey);
	border-radius: 5px;
	padding-left: .5rem;
	padding-right: .5rem;
	/*margin-bottom: 20px;*/
	box-sizing: border-box;
}

/* removes step controls on webkit browsers */
input[type=date]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	display: none;
}

form input[type='text'][readonly] {
	background-color: #eee;
}

form input[type='text']:focus,
form input[type='number']:focus,
form input[type="date"]:focus,
form input[type="tel"]:focus,
form input[type="time"]:focus  {
	outline: 0;
	border: 1px solid var(--secondary-grey);
}

form .textarea-field {
	width: 100%;
	max-width: 450px;
}

form textarea {
	/*width: 450px;*/
	width: 100%;
	height: 200px;
	max-width: 450px;
	box-sizing: border-box;
	line-height: 1.65rem;
	border: 1px solid var(--secondary-grey);
	border-radius: 5px;
	padding: 0.25rem 1rem;
	margin-bottom: 20px;
}

/*
 * TODO: Refactor this into a generic set of classes that can be used by any
 * type of inputs.
 */

form .date-time-combined-labels,
form .time-time-combined-labels,
form .duration-labels {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

form .date-time-error-lists,
form .time-time-error-lists,
form .duration-error-lists {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

form .date-time-combined-inputs,
form .time-time-combined-inputs,
form .duration-inputs {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

form .date-time-combined-inputs input, form .time-time-combined-inputs input {
	width: 47.25%;
}

form .duration-inputs input {
	width: 30%;
}

.form-error-explanation {
	margin: 10px;
	font-size: 1.5rem;
}

form .form-field-error-list {
	text-align: left;
	margin: 0;
	font-size: 0.75rem;
	color: darkred;
	font-weight: bold;
}

li.form-field-error-item {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

li.form-field-error-item:not(:last-child) {
	margin-bottom: 2px;
}

ul.form-field-error-list  {
	padding-left: 0.2rem;
	margin-top: 5px;
}

/* Beware: placeholder styling is not a part of the CSS spec and may not become one. These are custom and non-standard pseudo-selectors. */

/* Chrome/Opera/Safari */
/*::-webkit-input-placeholder { 
	color: rgb(100, 100, 100);
	font-weight: 400
}*/

/* Firefox 19+ */
/*::-moz-placeholder {
	color: rgb(100, 100, 100);
	font-weight: 400
}*/

/* IE 10+ */
/*:-ms-input-placeholder {
	color: rgb(100, 100, 100);
	font-weight: 400
}*/

/* Firefox 18- */
/*:-moz-placeholder {
	color: rgb(100, 100, 100);
	font-weight: 400
}*/

@media only screen and (max-width: 600px) {
	.form-container {
		width: 100%;
	}
}