/* ##### FORM-FLOATING ##### */
.form-floating {
    position: relative;
}

.form-floating > input,
.form-floating > select,
.form-floating > textarea {
    width: 100%;
    font-size: 14px;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: var(--radius-default);
    background-color: var(--color-white);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    height: 50px;
    font-weight: 600;
    padding:20px 15px 5px 15px;
}

.form-floating > textarea {
    height: 250px;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    display: block;
}

.form-floating > input:focus,
.form-floating > select:focus,
.form-floating > textarea:focus {
    border-color: var(--color-primary-hover);
}

.form-floating > label {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    padding: 0 5px;
    pointer-events: none;
    transition: all 0.2s ease-in-out;
    color: var(--color-primary);
    font-size: 14px;
}

.form-floating > input:not(:placeholder-shown) ~ label,
.form-floating > input:focus ~ label,
.form-floating > input:-webkit-autofill ~ label,
.form-floating > input:-webkit-autofill:focus ~ label,
.form-floating > textarea:not(:placeholder-shown) ~ label,
.form-floating > textarea:focus ~ label,
.form-floating .bootstrap-select.valid ~ label,
.form-floating > select ~ label {
    top: 2px;
    font-size: 12px;
    opacity: 1;
    transform: translateY(0);
    padding: 0 5px;
}
.form-floating .bootstrap-select:not(.valid) .filter-option{opacity:0;}
.form-floating .bootstrap-select .btn-select {font-size: 14px; padding:20px 15px 5px 15px; height: 50px; font-weight: 600;}

/* Variants for medium (v-md) */
.form-floating.v-md > input,
.form-floating.v-md > select,
.form-floating.v-md > textarea {
    font-size: 13px;
    padding: 14px 15px 0 15px;
    height:50px;
}
.form-floating.v-md label{font-size: 13px;}
.form-floating.v-md > input:not(:placeholder-shown) ~ label,
.form-floating.v-md > input:focus ~ label,
.form-floating.v-md > input:-webkit-autofill ~ label,
.form-floating.v-md > input:-webkit-autofill:focus ~ label,
.form-floating.v-md > textarea:not(:placeholder-shown) ~ label,
.form-floating.v-md > textarea:focus ~ label,
.form-floating.v-md .bootstrap-select.valid ~ label,
.form-floating.v-md > select ~ label {
    font-size: 13px;
    top: 3px;
}

.form-floating.v-md .bootstrap-select .btn-select{ font-size: 13px ; padding: 14px 15px 0 15px; height:50px;}

/* Variants for medium (v-sm) */
.form-floating.v-sm > input,
.form-floating.v-sm > select,
.form-floating.v-sm > textarea {
    font-size: 12px;
    padding: 12px 13px 0 13px;
    height:40px;
}
.form-floating.v-sm label{font-size: 14px;}
.form-floating.v-sm > input:not(:placeholder-shown) ~ label,
.form-floating.v-sm > input:focus ~ label,
.form-floating.v-sm > input:-webkit-autofill ~ label,
.form-floating.v-sm > input:-webkit-autofill:focus ~ label,
.form-floating.v-sm > textarea:not(:placeholder-shown) ~ label,
.form-floating.v-sm > textarea:focus ~ label,
.form-floating.v-sm .bootstrap-select.valid ~ label,
.form-floating.v-sm > select ~ label {
    font-size: 10px;
    top: 2px;
}

.form-floating.v-sm .bootstrap-select .btn-select{ font-size: 14px ; padding: 12px 13px 0 13px; height:40px;}

/* ##### required ##### */
.form-floating input[required], .form-floating textarea[required], .form-floating select[required], .form-floating .bootstrap-select.required .btn.dropdown-toggle {
    background-image: url(../../img/front/req-ico.png);
    background-repeat: no-repeat;
    background-position: calc(100% - 5px) 5px;
}

/* ##### VALIDATE ERROR ##### */
.form-floating .selectpicker.error + .btn-select{border: 1px solid red;}
.form-floating label.error:not(.bootstrap-select){
    display: flex;
    justify-content: end;
    align-items: end;
    color: red;
    height: max-content;
    top: calc(100% - 9px) !important;
    transform: unset;
    max-width: 90%;
}


.form-floating input.error:not([disabled]), .form-floating textarea.error:not([disabled]), .form-floating select.error {border-color: var(--color-red) !important;}
.form-floating label.error {display: none; color: var(--color-red); background-color:var(--color-white); border: 1px solid var(--color-red); border-radius: var(--radius-default); font-size: 11px !important; line-height: normal !important; font-weight: normal; margin: 0;}
.form-floating label[generated="true"] {display: inline-block;}

/* ##### .i-ico-input ##### */
.form-floating .i-ico-input {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--color-primary);
}
.form-floating .i-ico-input:hover {color: var(--color-primary3);}

.form-floating input[readonly="readonly"], .form-floating input[readonly], .form-floating input[disabled="disabled"], .form-floating input[disabled] {
    background-color: var(--color-gray4) !important;
    border-color: var(--color-gray3) !important;
    color: var(--color-gray2) !important;
}

@media all and (max-width: 991px) {
    .form-floating > input,
    .form-floating > select,
    .form-floating > textarea {
        font-size: 13px;
        padding: 14px 15px 0 15px;
        height:40px;
    }
    .form-floating label{font-size: 13px;}
    .form-floating > input:not(:placeholder-shown) ~ label,
    .form-floating > input:focus ~ label,
    .form-floating > textarea:not(:placeholder-shown) ~ label,
    .form-floating > textarea:focus ~ label,
    .form-floating .bootstrap-select.valid ~ label,
    .form-floating > select ~ label {
        font-size: 11px;
        top: 2px;
    }
    .form-floating .bootstrap-select .btn-select{ font-size: 13px ; padding: 14px 15px 0 15px; height:40px;}

    .form-floating label.error:not(.bootstrap-select) {
        font-size: 10px;
        top: calc(100% - 7px) !important;
    }
}