@charset "utf-8";
/* CSS Document */

.form-group {
    margin-bottom: 1rem;
}

.rq-champs-obligatoire {
    color: #dc3545;
    font-size: .5rem;
    vertical-align: super;
    padding-right: 0.25rem;
}

.label, label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

input[data-val-regex-pattern="(^[0-9-]*$)"],
input.masque-telephone,
input[type="number"],
input[data-type="tel"],
input[inputmode="numeric"]{
    -moz-appearance: textfield;
    text-align: right;
}
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form-select:has(:only-child){
	background-color: var(--bs-secondary-bg);
}

.form-select:has(option[value="null"]:checked) {
    color: #595C5F;
}

.rq-form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.form-check{
    padding-left: 1rem;
	margin-bottom: 0.5rem
}
.form-check label {
    cursor: pointer;
    display: inline-flex;
    align-items: flex-start;
    margin-bottom: 0;
    width: auto;
    justify-content: start;
	line-height: 1.4
}
.form-check:not(.form-switch) input[type="radio"],
.form-check:not(.form-switch) input[type="checkbox"]{
    position: absolute;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    bottom: 0;
    left: 50%;
    outline: none;
    border: 0;
    overflow: hidden;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.form-check label>span {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
	margin-right: 0.75rem
}
.form-check label:has(input:disabled){
	color: var( --gstm-color-grey-medium)!important;
	pointer-events: none;
}
.form-check i:not(.rq-champs-obligatoire){
	font-size: 1.5rem
}
.form-check label>span::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	content:'';
    width: 1.5rem;
    height: 1.5rem;
	border-radius: .2rem;
	background-color: white;
	transition: background-color .5s ease
}
.form-check label:has(input:not(:disabled))>span::before{
	 border: 2px solid var(--gstm-color-blue-dark);
}
.form-check label:has(input:disabled)>span::before{
	 border: 2px solid var( --gstm-color-grey-medium);
}

.is-invalid .form-check label>span::before,
.form-check label:has(.is-invalid)>span::before{
	border: 2px solid var(--gstm-error-color)!important;
	background-color: rgba(220,53,69,.04)
}
.form-check label>span::after {
    display: block;
    position: absolute;
    left: 1px;
    top: 1px;
	color: white;
	font-family: var(--fa-font-family);
	content: '\f00c';
	width: 1.5rem;
    height: 1.5rem;
	opacity: 0;
	transition: opacity .5s ease;
	text-align: center;
}

.form-check.compact label>span::after{
	 top: -1px;
}

.form-check label>span.type-radio::after {
	content: "";
  	border-radius: 50%;
  	display: inline-block;
	border: 2px solid white;
	width: 1.25rem;
	height: 1.25rem;
	top: 2px;
	left: 2px;
}
.form-check.compact label>span,
.form-check.compact label>span::after,
.form-check.compact label>span::before{
	 width: 1.25rem;
     height: 1.25rem;
}
.form-check.compact label>span.type-radio::after {
 	width: 1rem;
	height: 1rem;
}
.form-check label:has(input:checked:not(:disabled)) >span::before {
	background-color: var( --gstm-color-blue-regular);
	border-color: var( --gstm-color-blue-regular);
}
.form-check label:has(input:checked:disabled) >span::before {
	background-color: var( --gstm-color-grey-medium);
	border-color: var( --gstm-color-grey-medium);
}
.form-check label:has(input:checked) >span::after {
   opacity: 1
}
.form-check label:has(input:focus) >span{
    box-shadow: var(--gstm-form-control-shadow);
	border-radius: .2rem;
}
.form-check label>span.type-radio::before,
.form-check label:has(input:focus) >span.type-radio {
	border-radius: 50%;
}

.rq-form-inline .btn-selection{
	margin-left: .5rem
}

.btn-selection{
	border: 1px solid var(--gstm-color-grey-light);
	transition: all .5s ease;
    border-radius: 6px;
	background-color: white;
	padding: 1rem;
	position: relative;
	z-index: 10
}
.mb-0 + .btn-selection{
	margin-top: 0.75rem
}

.btn-selection .form-check{
	padding-left:0
}

.btn-selection .form-check label{
	width: 100%
}

.btn-selection .form-check label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0, 0, 0, 0);
}

.btn-selection:has(input:checked) {
	border-color: #6b9ac1!important;
	background-color: #e5edf3;
}
.btn-selection.compact{
	padding: 10px;
	line-height: 1;
}
.form-check.btn-selection {
	margin-bottom: 0;
	margin-top: 0.5rem;
	position: relative;
}
.form-check.btn-selection label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0, 0, 0, 0);
}

.btn-selection label:has(abbr) abbr{
	z-index: 2;
	position: relative
}

.form-check.btn-selection label>i{
	text-align: center;
    width: 1.25em;
	font-size: 150%;
	margin-right: 0.5rem
}
	
.form-check.btn-selection.avec-icone label>span,
.form-check.btn-selection.avec-icone label>span {
	position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.form-check.btn-selection.compact  label>span {
	margin-right: 0.5rem
}

.btn-selection  p:is(:last-child) {
    margin-bottom: 0;
}

.btn-selection:not(:disabled):not(.disabled):hover, 
.btn-selection:not(:disabled):not(.disabled):focus{
    border-color: #6b9ac1;
}
.btn-selection.disabled,
.btn-selection:has(input:disabled),
.btn-selection.disabled:hover,
.btn-selection:has(input:disabled):hover{
    color: var(--gstm-color-grey-medium);
    border: 1px solid var(--gstm-color-grey-light) !important;
    background-color: var(--gstm-color-grey-pale);
    cursor: not-allowed;
}

.form-select,
.form-control, 
.input-group-text{
	border-radius: .25rem;
    border-color: var(--gstm-color-grey-medium);
	color: var(--gstm-color-blue-dark);
}

.form-control, 
.input-group-text{
	padding: .375rem .5rem;
}

.form-select:focus,
.form-control:focus{
    box-shadow: var(--gstm-form-control-shadow);
	border-color: var(--gstm-color-grey-medium);
}

.form-select option.defaut {
    font-weight:600;
    background-color: var(--gstm-color-blue-pale)
}

.input-group-text{
    background-color: transparent!important;
}

legend, .rq-form-question {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5rem;
    font-family: var(--gstm-font-family-secondaire);
}
 
.valid-feedback {
    color: var(--gstm-input-succes-color)
}

.form-select.input-validation-error,
.custom-select.input-validation-error, 
.form-control.input-validation-error, 
.is-invalid .form-control, 
.form-control.is-invalid, 
.was-validated .form-control:invalid{
    border-color: var(--gstm-error-color);
    background-color: rgba(220, 53, 69, .04);
	padding-right: 2rem
}

fieldset.is-invalid .btn-selection,
[aria-invalid="true"] .btn-selection,
fieldset.is-invalid .btn-selection-simple-multiple,
[aria-invalid="true"] .btn-selection-simple-multiple,
.is-invalid .selected-tags,
[aria-invalid="true"] .selected-tags,
.is-invalid .form-select,
[aria-invalid="true"] .form-select{
    border-color: var(--gstm-error-color);
    background-color: rgba(220, 53, 69, .04);
}

.field-validation-error {
    display: block;
    width: 100%;
    margin-top: .25rem;
    font-size: 85%;
    color: var(--gstm-error-color);
}

.invalid-feedback{color: var(--gstm-error-color);}

.rq-champs-petit {
    max-width: 100px;
}
.rq-champs-court {
    max-width: 250px;
}
.rq-champs-moyen {
    max-width: 350px;
}
.rq-champs-long {
    max-width: 425px;
}