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

.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            : 10px;
    height           : 10px;
    border-radius    : 50%;
    position         : absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.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
}