/********************
	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);
}

.input-group .input-group-btn > .btn[data-action=js-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         : var(--color-grey-default) 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 {
  width      : 100%;
  background : var(--color-white-default);
}

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

.form-group.has-error .help-block {
  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-primary);
  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
}