/********************
	Style général des forms
********************/

/********************
	Part - Style input-group
********************/

.input-group .form-control:focus {
	outline: none
}

.input-group .input-group-btn > .btn {
	border: 0;
	box-shadow: none;
	color: #fff;
	font-size: .6875rem;
	font-weight: 400;
	margin-left: 0;
	padding: .225rem .5rem;
	text-transform: uppercase;
	height: 100%;
	display: flex;
	align-items: center;
}

.input-group .input-group-btn > .btn-default {
	background: var(--color-primary);
	border-radius: 0 50px 50px 0;
}

.input-group .input-group-btn > .btn[data-action=show-password] {
	background: var(--color-grey-font-default);
	padding: .78rem 1rem
}

/********************
	Part - Style input
********************/
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
	color: var(--color-grey-font-default)
}

input::-moz-placeholder, textarea::-moz-placeholder {
	color: var(--color-grey-font-default)
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
	color: var(--color-grey-font-default)
}

input:-moz-placeholder, textarea:-moz-placeholder {
	color: var(--color-grey-font-default)
}

input:active::-webkit-input-placeholder, textarea:active::-webkit-input-placeholder {
	color: var(--color-black-default)
}

input:active::-moz-placeholder, textarea:active::-moz-placeholder {
	color: var(--color-black-default)
}

input:active:-ms-input-placeholder, textarea:active:-ms-input-placeholder {
	color: var(--color-black-default)
}

input:active:-moz-placeholder, textarea:active:-moz-placeholder {
	color: var(--color-black-default)
}

/********************
	Part - Style form-control
********************/
.form-control-select {
	height: 2.625rem;
	-moz-appearance: none;
	-webkit-appearance: none;
	background: #F8F4F0 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAPklEQVR4Ae3TwREAEBQD0V/6do4SXPZg7EsBhsQ8IEmSMOsiuEfg3gL3oXC7wK0bd1G4o8X9F4yIkyQfSrIByQBjp7QuND8AAAAASUVORK5CYII=") no-repeat scroll right .5rem center/1.25rem 1.25rem;
	padding: 0 .5rem
}

.form-control-valign {
	padding-top: .5rem
}

.form-control-comment {
	font-size: .875rem;
	padding-top: .5rem;
	color: var(--color-grey-font-default)
}

.form-control-submit.disabled {
	background: #5bc0de;
	color: #fff
}

/********************
	Part - Style form-group
********************/

.form-group {
	margin: 0 0 1rem;
	display: flex;
	flex-direction: column;
}

.form-group .form-control-label,
.form-group .form-control-label ~ * {
	text-align: left;
}

.form-group .form-control-label {
	font-weight: 500;
}

.form-group .form-control {
	border-radius: 7px;
	width: 100%;
}

.form-group.has-error input,
.form-group.has-error select {
	outline: .1875rem solid #ff4c4c
}

.form-group.has-error .help-block {
	color: #ff4c4c
}

.form-group .form-control-label.required {
	position: relative;
}

.form-group-element .form-control-label.required:after {
	position: absolute;
	content: '*';
	color: #ff4c4c;
}

/********************
	Part - Style custom-radio
********************/

.custom-radio {
	display: inline-block;
	position: relative;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	cursor: pointer;
	border-radius: 50%;
	border: 2px solid var(--color-grey-font-default);
	background: #fff;
	margin-right: 1.25rem
}

.custom-radio input[type=radio] {
	opacity: 0;
	cursor: pointer
}

.custom-radio input[type=radio]:checked + span {
	display: block;
	background-color: var(--color-secondary);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	position: absolute;
	left: .125rem;
	top: .125rem
}

.custom-radio input[type=radio]:focus + span {
	border-color: var(--color-grey-font-default)
}

/********************
	Part - Style custom-checkbox
********************/
.custom-checkbox {
	position: relative
}

.custom-checkbox input[type=checkbox] {
	margin-top: .25rem;
	opacity: 0;
	cursor: pointer;
	position: absolute
}

.custom-checkbox input[type=checkbox] + span {
	margin-right: 3px;
	display: inline-block;
	width: .9375rem;
	height: .9375rem;
	vertical-align: middle;
	cursor: pointer;
	border: 2px solid var(--color-black-default)
}

.custom-checkbox input[type=checkbox] + span .checkbox-checked {
	display: none;
	margin: -.25rem -.125rem;
	font-size: 1.1rem;
	color: var(--color-black-default)
}

.custom-checkbox input[type=checkbox]:checked + span .checkbox-checked {
	display: block
}

.custom-checkbox input[type=checkbox]:focus + span {
	border-color: var(--color-grey-font-default)
}

.custom-checkbox label {
	text-align: left
}