/* Forms */
form label {
	font-weight: normal;
}

textarea {
	resize: vertical;
}

select {
	border: 1px solid #E5E7E9;
	border-radius: 6px;
	outline: none;
    &:not([multiple]) {
	    appearance: none;
	    -webkit-appearance: none;
	    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	    background-size: .6em;
	    background-position: calc(100% - 1em) center;
	    background-repeat: no-repeat;
	    padding-right: 2em;
    }

    &.select-style-1 {
    	background-color: #f4f4f4;
    	border: 0;
    	color: #333;
    	font-weight: 700;
    	&:not(.form-control-sm):not(.form-control-lg) {
    		line-height: 2.7;
    	}
    	&:focus {
    		background-color: #f4f4f4;
    		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(109, 109, 109, 0.3);
    	}
    }
}

.label {
	font-weight: normal;
}

.form-group {
	&:after {
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}
	@include if-not-extension() {
		& + .form-group {
			border-top: 1px solid #f3f3f3;
		    padding-top: 1rem;
		}
	}
}

// Form Control
.form-control {
	height: auto;
	&:not(.form-control-lg) {
		font-size: 0.75rem;
		line-height: 1.3;
	}

	&:not(.form-control-sm):not(.form-control-lg) {
		font-size: 0.85rem;
		line-height: 1.85;
		min-height: 2.4rem; // ie fix
	}

	&.form-control-focused {
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
		border-color: #CCC;
	}

	&:focus {
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
		border-color: #CCC;
	}

	&.error {
		border-color: #a94442;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		&:focus {
			border-color: #843534;
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
		}
	}

	// Form Control Modern
	&.form-control-modern {
		border-color: #e7e7e7;
		&:not(.form-control-sm):not(.form-control-lg) {
			line-height: 2.3;
		}

		& + .select2-container--bootstrap .select2-selection--single,
		& + .select2-container--bootstrap .select2-selection--multiple {
			border-color: #e7e7e7;
			line-height: 2.8;
			height: 50px;
			padding: 6px 24px 6px 17px;
		}

		& + .select2-container--bootstrap .select2-selection--multiple .select2-search__field{
			width: 100% !important;
			line-height: 2.8;
		    height: 39px;
		    padding: 6px 24px 6px 6px;
		}

		& + .select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
			background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23777%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23777%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
		    background-size: .6em;
		    background-position: calc(100% - 1.3em) center;
		    background-repeat: no-repeat;
	        width: 27px;
	        right: -2px;
			b {
				display: none;
			}
		}
	}
}

.help-block {
	display: block;
	margin-top: 5px;
	margin-bottom: 10px;
	color: #737373;
	font-size: 0.75rem;
}

// IOS OVERRIDE
// -----------------------------------------------------------------------------
/* Form - iOS Override */
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea {
	-webkit-appearance: none;
}

// PLACEHOLDERS
// -----------------------------------------------------------------------------
.form-control,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea {
	@include placeholder-color(#bdbdbd);
}

.multiselect-container {
	box-shadow: 0 6px 12px rgba(0,0,0,.175);
	> li {
		> a {
			> label {
				padding: 5px 20px 5px 12px;
				font-size: 0.8rem;
				input {
					position: relative;
					top: 2px;
					margin-right: 3px;
				}
			}
		}
		&.active {
			> a {
				> label {
					color: #FFF;
				}
			}
		}
		&.multiselect-group {
			label {
				font-size: 0.8rem;
				padding: 5px 20px 5px 12px;
			}
		}
	}
	.input-group {
		input {
			max-width: 78%;
		}
	}
}

// DARK - FORM
// -----------------------------------------------------------------------------
html.dark {
	.form-control {
		background-color: $dark-color-3;
		border-color: $dark-color-3;
		color: #EEE;
	}

	.form-control[disabled],
	.form-control[readonly],
	fieldset[disabled] .form-control {
		background-color: $dark-color-2;
	}
}

// BOOTSTRAP OVERRIDE
// -----------------------------------------------------------------------------
/* Form - Bootstrap Override */
.btn-lg,
.btn-group-lg > .btn {
	line-height: 1.334;
}

.input-group-btn {

	.btn {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

}

select {
	&.form-control-sm,
	&.form-control-lg {
		line-height: 1;
		height: auto !important;
	}
}

.bootstrap-timepicker-widget {
	input {
		border: 0;
	}
	table {
		td {
			input {
				width: 40px;
			}
		}
	}
}

.fileupload .btn {
    line-height: 20px;
    margin-left: -5px;
}

.date-time-field {
	display: flex;
	flex-direction: column;
	.date {
		width: 100%;
	}
	.time {
		display: flex;
		align-items: center;
		margin-top: 20px;
		> input {
			width: 50%;
		}
	}
}

@media(min-width: 992px) {
	.date-time-field {
		flex-direction: row;
		.date {
			width: 60%;
		}
		.time {
			width: 40%;
			margin-top: 0;
		}
	}
}

// CUSTOM FIELDS
// -----------------------------------------------------------------------------
/* Form - Custom Fields */
.required {
	display: inline-block;
	color: $color-danger;
	font-size: 0.8em;
	font-weight: bold;
	position: relative;
	top: -0.2em;
}

label.error {
	color: #B94A48;
	margin-top: 2px;
}

// FORM GROUP (OVERRIDE)
// -----------------------------------------------------------------------------
/* Form - Group Override */
@include if-not-extension() {
	.form-group {
		&:after {
			clear: both;
			display: block;
			content: '';
		}

		&:last-child,
		&:last-of-type {
			margin-bottom: 0;
		}
	}
}

// DARK - BORDERED FORM
// -----------------------------------------------------------------------------
/* Dark - Form - Bordered */
html.dark {
	.form-bordered {
		.form-group {
			border-bottom: 1px solid darken($dark-color-4, 5%);
			padding-bottom: 15px;
			margin-bottom: 15px;
		}
	}
}


// VERTICAL GROUP / STACKED
// -----------------------------------------------------------------------------
/* Form - Vertical Group / Stacked */
.form-group-vertical {
	position: relative;
	white-space: nowrap;

	.form-control {
		border-radius: 0;
		margin-top: -1px;
		z-index: 1;

		&:first-child,
		&:first-of-type {
			border-radius: 4px 4px 0 0;
		}

		&:last-child,
		&:last-of-type {
			border-radius: 0 0 4px 4px;
		}

		&:focus {
			position: relative;
			z-index: 2;
		}
	}

	.input-group {
		margin-top: -1px;

		.form-control {
			margin-top: 0;
		}

		&:first-child,
		&:first-of-type {
			.form-control {
				border-radius: 0 4px 0 0;
			}
		}

		&:last-child,
		&:last-of-type {
			.form-control {
				border-radius: 0 0 4px 0;
			}
		}

		&.input-group-icon {

			&:first-child,
			&:first-of-type {
				.form-control {
					border-radius: 4px 4px 0 0;
				}
			}

			&:last-child,
			&:last-of-type {
				.form-control {
					border-radius: 0 0 4px 4px;
				}
			}

		}
	}

}

// INPUT (OVERRIDE)
// -----------------------------------------------------------------------------
/* Form - Input Override */
.form-control-lg {
	border-radius: 4px;
}

// ROUND INPUT
// -----------------------------------------------------------------------------
/* Form - Round Input */
input.input-rounded {
	border-radius: 500px;
}

#{if($admin-ext, '.card-admin ', '')}.input-group-rounded {
	input.form-control {
		border-radius: 500px;

		&:first-child,
		&:last-child {
			border-radius: 500px;
		}
	}
}

// CHECKBOX
// -----------------------------------------------------------------------------
/* Form - Checkbox */
.checkbox {
	> label {
		display: flex;
		line-height: 1.6;
		> input[type="checkbox"] {
			margin-right: 5px;
			margin-top: 3px;
		}
	}
}

input[type="checkbox"] {
	&.checkbox-style-1 {
		width: 17px;
		height: 17px;
		opacity: 0.3;
		&:checked {
			opacity: 1;
		}
	}
}

/* Form - Custom Checkbox */
.checkbox-custom {
	position: relative;
	padding: 0 0 0 25px;
	margin-bottom: 7px;
	margin-top: 0;

	&.checkbox-inline {
		display: inline-block;
		vertical-align: middle;

		.form-group & {
			margin-top: 7px;
			padding-top: 0;
		}
	}

	&:last-child,
	&:last-of-type {
		margin-bottom: 0;
	}

	input[type="checkbox"] {
		opacity: 0;
		position: absolute;
		top: 50%;
		left: 3px;
		margin: -6px 0 0 0;
		z-index: 2;
		cursor: pointer;

		&:checked {
			& + label:after {
				position: absolute;
				display: inline-block;
				font-family: 'Font Awesome 5 Free';
   				font-weight: 900;
				content: '\F00C';
				top: 50%;
				left: 4px;
				margin-top: -5px;
				font-size: 11px;
				line-height: 1;
				width: 16px;
				height: 16px;
				color: #333;
			}
		}

		&:disabled {
			cursor: not-allowed;

			&:checked + label:after {
				color: #999;
			}

			& + label {
				cursor: not-allowed;
			}

			& + label:before {
				background-color: #eee;
			}
		}
	}

	label {
		cursor: pointer;
		margin-bottom: 0;
		text-align: left;
		line-height: 1.5;

		&:before {
			content: '';
			position: absolute;
			top: 50%;
			left: 0;
			margin-top: -9px;
			width: 19px;
			height: 18px;
			display: inline-block;
			border-radius: 2px;
			border: 1px solid #bbb;
			background: #fff;
		}

		& + label.error {
			display: block;
		}
	}

}

html.dark {
	.checkbox-custom {
		label {
			&:before {
				background: $dark-color-3;
				border-color: $dark-color-2;
			}
		}
		input[type="checkbox"] {
			&:checked + label:after {
				color: #fff;
			}
			&:disabled + label:before {
				background: $dark-color-5;
				border-color: $dark-color-5;
			}
		}
	}
}

@each $state in $states {
	html.dark .checkbox-#{nth($state,1)},
	.checkbox-#{nth($state,1)} {

		input[type="checkbox"]:checked + label:after {
			color: #fff;
		}

		label:before {
			background: #{nth($state,2)};
			border-color: darken( nth($state,2), 5% );
		}
	}

	html.dark .checkbox-text-#{nth($state,1)},
	.checkbox-text-#{nth($state,1)} {
		input[type="checkbox"]:checked + label:after {
			color: #{nth($state, 2)};
		}
	}
}

// CUSTOM RADIO
// -----------------------------------------------------------------------------
/* Form - Custom Radio */
.radio-custom {
	position: relative;
	padding: 0 0 0 25px;
	margin-bottom: 7px;
	margin-top: 0;

	&.radio-inline {
		display: inline-block;
		vertical-align: middle;

		.form-group & {
			margin-top: 7px;
			padding-top: 0;
		}
	}

	&:last-child,
	&:last-of-type {
		margin-bottom: 0;
	}

	input[type="radio"] {
		opacity: 0;
		position: absolute;
		top: 50%;
		left: 3px;
		margin: -6px 0 0 0;
		z-index: 2;
		cursor: pointer;

		&:checked {
			& + label:after {
				content: '';
				position: absolute;
				top: 50%;
				left: 4px;
				margin-top: -5px;
				display: inline-block;
				font-size: 11px;
				line-height: 1;
				width: 10px;
				height: 10px;
				background-color: #444;
				border-radius: 50px;
				box-shadow: 0px 0px 1px #444;
			}
		}

		&:disabled {
			cursor: not-allowed;

			&:checked + label:after {
				color: #999;
			}

			& + label {
				cursor: not-allowed;
			}

			& + label:before {
				background-color: #eee;
			}
		}
	}

	label {
		cursor: pointer;
		margin-bottom: 0;
		text-align: left;
		line-height: 1.2;

		&:before {
			content: '';
			position: absolute;
			top: 50%;
			left: 0;
			margin-top: -9px;
			width: 18px;
			height: 18px;
			display: inline-block;
			border-radius: 50px;
			border: 1px solid #bbb;
			background: #fff;
		}

		& + label.error {
			display: block;
		}
	}

}

html.dark {
	.radio-custom {
		label {
			&:before {
				background: $dark-color-3;
				border-color: $dark-color-2;
			}
		}
		input[type="radio"]{
			&:checked + label:after {
				background-color: #fff;
			}
			&:disabled + label:before {
				background: $dark-color-5;
				border-color: $dark-color-5;
			}
		}
	}
}

@each $state in $states {
	html.dark .radio-#{nth($state,1)},
	.radio-#{nth($state,1)} {

		input[type="radio"]:checked + label:after {
			background: #{nth($state,2)};
			box-shadow: 0px 0px 1px #{nth($state,2)};
		}

	}
}

/* State */
@each $state in $states {
	.has-#{nth($state,1)} .help-block,
	.has-#{nth($state,1)} .control-label,
	.has-#{nth($state,1)} .radio,
	.has-#{nth($state,1)} .checkbox,
	.has-#{nth($state,1)} .radio-inline,
	.has-#{nth($state,1)} .checkbox-inline,
	.has-#{nth($state,1)}.radio label,
	.has-#{nth($state,1)}.checkbox label,
	.has-#{nth($state,1)}.radio-inline label,
	.has-#{nth($state,1)}.checkbox-inline label {
		color: #{nth($state,2)};
	}

	.has-#{nth($state,1)} .form-control {
	    border-color: #{nth($state,2)} !important;
	    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075) !important;
	}
}

// ERROR CONTAINER
// -----------------------------------------------------------------------------
/* Form - Error Container */
.validation-message ul {
	display: none;
	list-style: none;
	margin: -20px -20px 30px -20px;
	padding: 20px 20px 10px 20px;
	border-bottom: 1px solid #FFCBCB;
	background: #FFEFEF;

	label.error {
		display: block;
		padding-left: 22px;
		position: relative;

		&:before {
			font-family: 'Font Awesome 5 Free';
   			font-weight: 900;
			content: '\f00d';
			position: absolute;
			top: 0;
			left: 0;
			font-size: 16px;
			color: #D9534F;
			display: inline-block;
		}
	}
}

// SELECT2 FIX
// -----------------------------------------------------------------------------
.select2-drop-mask {
    z-index: 10010;
}

.select2-drop {
    z-index: 10011;
}

.select2-search {
    z-index: 10012;
}

.select2-container--bootstrap.select2-container--open {
	z-index: 10013;
}

.select2-container--bootstrap .select2-selection--single {
    height: 38.5px;
    line-height: 1.7;
    padding: 6px 24px 6px 12px;
}

.select2-container--bootstrap .select2-selection--multiple {
    height: 38.5px;
}

.select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered {
    line-height: 1.8;
}

@media (max-width: 991px) {
	.select2-container--bootstrap {
		width: auto !important;
	}
}

.input-group-select-append {
	.btn-group > .btn:first-child {
	    border-radius: 0 0.25rem 0.25rem 0;
	}
}

// TAGS INPUT
// -----------------------------------------------------------------------------
.bootstrap-tagsinput {
	padding: 7px 6px 6.2px;
}

// TAGS INPUT
// -----------------------------------------------------------------------------
.spinner-buttons.btn-group-vertical .btn {
	height: 21px !important;
}

.spinner-buttons.btn-group-vertical .btn:last-child {
	height: 20px !important;
}

// MAXLENGTH FIX
// -----------------------------------------------------------------------------
.bootstrap-maxlength {
	z-index: 999999 !important;
}

// DARK - FILE UPLOAD
// -----------------------------------------------------------------------------
html.dark {
	.fileupload .uneditable-input {
		background-color: $dark-color-3;
		border-color: $dark-color-3;
	}

	.fileupload-new .input-append .btn-file {
		border-color: $dark-color-2;
	}
}

// FORM GROUP INVISIBLE
// -----------------------------------------------------------------------------
/* Form Group Invisible */
.form-group-invisible {
	position: relative;

	&.focus {
		.control-label-invisible {
			color: #0088cc;
		}
	}

	.control-label-invisible {
		bottom: 0;
		display: block;
		float: none;
		left: 0;
		line-height: 64px;
		margin: 0;
		padding-left: 50px;
		position: absolute;
		right: 0;
		top: -15px;
		transition: color ease-in-out .15s;
		width: auto;
	}

	.form-control-invisible {
		&,
		&:focus,
		&:active,
		& + .bootstrap-tagsinput {
			background: transparent !important;
			border-color: transparent !important;
			box-shadow: none !important;
		}

		& + .bootstrap-tagsinput {
			margin-bottom: 4px;
		}
	}
}

@media only screen and (max-width: 767px) {
	.form-group-invisible {
		padding-top: 30px;

		.control-label-invisible {
			padding-left: 27px;
		}
	}
}

/* Forms Validations */
label.valid {
	display: inline-block;
	text-indent: -9999px;
}

label.error {
	color: #C10000;
	font-size: 0.9em;
	margin-top: -5px;
	padding: 0;
}

/* Spinner */
.spinner-buttons.btn-group-vertical .btn i {
    position: relative;
    top: -6px;
}

/* File Upload */
.fileupload .uneditable-input {
	height: 37px;
}

/* Input Group */
.input-group {
	.btn {
		&, &.active, &:active {
			box-shadow: none !important;
		}
	}
}