/* ALL FORMS */

.content-container{
	container-type: inline-size;
}

label {
	font-weight: 600;
	margin-bottom: .25rem;
}

input.invalid{
	box-shadow: 0 0 4px red!important;
}

.form-wrapper {
	background-color: #fff;
	padding: 2rem;
	border-radius: 3px;
}

.form-range::-moz-range-track {
	background-color: #dee2e6;
}

.form-range::-moz-range-thumb {
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--second-color);
	border-radius: 1.25rem;
	box-shadow: 0 0 0 2px #fff;
}

.form-range:focus::-moz-range-thumb {
	box-shadow: 0 0 0 1px #fff,0 0 0 .25rem rgba(226, 94, 135, 0.34);
}

.form-check-input {
  cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--second-color);
  border-color: var(--second-color);
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 150, 136, 0.25);
}

.form-check.form-switch .form-check-input {
	width: 3rem;
	height: 1.75rem;
}

@container (min-width: 480px) {
	.form-group.inline {
		display: grid;
		grid-template-columns: 150px 1fr;
		align-items: stretch;
		border-radius: 12px;
	}
	
	.form-group.inline label {
		display:flex;
		margin: 0;
		align-items: center;
		height:42px;
	}
	.form-group.inline .input-with-help{
		text-align:right;
	}
}

.form-submit{
	margin:15px 0 0 0;
	display:flex;
	justify-content: flex-end;
}

input.custom-file-input {
	height: auto;
	border-radius: initial;
	background: none;
}

.form-control{
	padding:.75rem;
}

.form-select {
	padding: .75rem 2.25rem .75rem .75rem;
	border: none;
	background-color: #f2f2f2;
}

.form-control[disabled]{
	background-color:var(--body-color-darker);
	color:#999;
}

.form-control:focus,
.form-select:focus {
	border-color: var(--second-color);
	outline: 0;
	-webkit-box-shadow: inset 0 0 0 2px var(--second-color);
	box-shadow: inset 0 0 0 2px var(--second-color);
}


input.form-control,
textarea.form-control
{
	border: none;
	background: #f2f2f2;
}

select.form-control{
	background:var(--body-color-darker);
	box-shadow: 0 1px 1px rgba(0,0,0,.075);
}

.form-info {
	font-size: 12px;
	color: #9fa1a2;
	/* text-align: right; */
	display: block;
	padding: 5px 0;
}

.form-group .invalid-input {
	padding: 3px 0;
	color: var(--second-color);
	display:none;
}
.invalid .invalid-input{
	display:block;
}
.form-group .form-help{
	padding: 3px 0;
	color: var(--font-color-lighter);
}

input[type="date"] {
}