/********************
	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[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: 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: #262626;
}

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

.form-control, .form-control:focus {
    color: #070707;
}

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

label.form-control-label.field-required:after {
  content: '*';
  color: red;
}

.form-group .form-control {
  width: 100%;
}

.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 #dddddf;
  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
}

/*
--------------------------------------
Register form
--------------------------------------
*/

.register-form > p {
  margin-bottom: 1em;
}