/* Forms */

.form-group {
	margin-bottom: 1.75rem;
}

.form-label {
	color: var(--form-label-color);
	font-family: var(--form-label-font-family);
	font-size: var(--form-label-font-size);
	font-weight: var(--form-label-font-weight);
	letter-spacing: var(--form-label-letter-spacing);
	text-transform: var(--form-label-text-transform);
}

.form-control, .form-select, .custom-file-input + label {
	background-color: var(--form-control-bg);
	border: 1px solid var(--form-control-border-color);
	border-radius: 0;
	color: var(--form-control-color);
	padding: 0.875rem 1rem;
}

.form-control:focus, .form-select:focus {
	box-shadow: 0 0 .3rem rgba(0,0,0,0.2);
  color: var(--form-control-color);
  background-color: var(--form-control-bg);
  border-color: var(--form-control-border-color);
  outline: 0;
}

.form-control::placeholder {
	color: var(--form-control-color);
  opacity: 0.5;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
	opacity: 1;
}

.form-check {
	display: flex;
	min-height: 0;
  padding-left: 0;
}

.form-check-input {
	height: 16px;
	min-width: 16px;
	width: 16px;
}

.form-check .form-check-input {
	border: 1px solid var(--form-control-border-color)!important;
	border-radius: 0;
	box-shadow: none!important;
	float: none;
	margin: 0.1rem 0.75rem 0 0;
}

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

.form-check label {
	line-height: 1.33;
}

.form-check-input:active {
    filter: brightness(100%);
}

.custom-file-input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.custom-file-input + label {
	border: 1px solid var(--form-control-border-color);
	line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
}

.custom-file-input-inline .custom-file-input + label {
	border: none;
	box-shadow: none!important;
	margin-left: 0.25rem;
	padding: 0;
}

.custom-file-input:focus + label {
	box-shadow: 0 0 .3rem rgba(0,0,0,0.2);
}

.custom-file-input + label svg {
	width: 17px;
  fill: currentColor;
}

.custom-file-input-inline .custom-file-input + label svg {
	margin-left: 0.75rem;
}

.custom-file-input-inline .custom-file-input + label span {
	text-decoration: underline;
}

.qty-spinner-wrapper {
	position: relative;
}

.qty-spinner {
	text-align: center;
}

input.qty-spinner::-webkit-outer-spin-button,
input.qty-spinner::-webkit-inner-spin-button {
    display: none;
    -webkit-appearance: none;
    margin: 0;
}

.qty-spinner-op {
	align-items: center;
	border: 1px solid;
	cursor: pointer;
	display: flex;
	padding: 0 0.65rem;
  user-select: none;
}

.qty-spinner-op.minus {
	border-color: var(--form-control-border-color);
	border-right: none;
}

.qty-spinner-op.plus {
	border-color: var(--form-control-border-color);
	border-left: none;
}

.qty-spinner-op svg {
	height: 2rem;
	width: 2rem;
}

.qty-spinner-op svg path {
	fill: var(--form-control-color);
}


/* Navbar Search */

.navbar-search .form-control {
	border: 1px solid var(--navbar-search-border-colour)!important;
	color: var(--navbar-search-colour);
	font-size: 0.75rem;
	height: 100%;
	padding: 0 calc(2.5rem + 15px) 0 1.25rem;
}

.navbar-search .form-control::placeholder {
	color: var(--navbar-search-colour);
  opacity: 1;
}

.navbar-search .form-control:focus {
	box-shadow: none;
}

.btn-navbar-search {
	background-color: transparent;
	border: none;
	padding: 0;
	position: absolute;
	top: 50%; right: 1.25rem;
	transform: translateY(-50%);
}

.btn-navbar-search svg path {
	fill: var(--navbar-search-icon-colour);
}


/* Form Sidebar */

.form-sidebar svg path {
	fill: var(--color-body);
}

.form-sidebar.text-white svg path {
	fill: #fff;
}

.form-sidebar .social-icons a:not(:last-child) {
	margin-right: 1.5rem;
}


/* Questionnaire */

.questionnaire .form-check-overlay {
	opacity: 0;
	transition: 0.2s ease-out;
}

.questionnaire .form-check.selected .form-check-overlay {
	opacity: 1;
}

.questionnaire .progress {
	border-radius: 0;
	height: 1px;
}

.questionnaire .form-control, .questionnaire .form-select {
	background-color: transparent;
	border: none;
	line-height: 1.33;
	padding: 1rem;	
	font-size: var(--font-size-h3);
	color: var(--color-titles);
	font-family: var(--font-family-titles);
	font-weight: var(--font-weight-titles);
	letter-spacing: var(--letter-spacing-titles);
	text-transform: var(--text-transform-titles);
}

.questionnaire .form-control::placeholder {
    color: var(--color-titles);
    opacity: 1;
}

.questionnaire.text-white .form-control, 
.questionnaire.text-white .form-select, 
.questionnaire.text-white .form-control::placeholder {
	color: #fff;
}