/* Change the font color of the label when the input is disabled */

.main-cpfl-webform-service input[disabled]+label {
    color: #717171 !important;
    /* Change to your desired color for disabled state */
}

.main-cpfl-webform-service input[read-only]+label {
    color: #717171 !important;
    /* Change to your desired color for disabled state */
}

/* Change the font color when the input is disabled */
.main-cpfl-webform-service input[disabled]::placeholder,
.main-cpfl-webform-service input[read-only]::placeholder {
    color: #717171 !important;
    /* Change to your desired color for disabled state */
}

/* Change the background color of the wrapper div to grey if the input is disabled */
.main-cpfl-webform-service .form-type-textfield:has(input[type="text"]:disabled),
.main-cpfl-webform-service .form-type-textfield:has(input[type="text"]:read-only) {
    background-color: #DFE0E1 !important;
    /* Sets the background color */
}

/**************FIELDS**************/

.main-cpfl-webform-service .form-type-textfield,
.main-cpfl-webform-service .form-type-number,
.main-cpfl-webform-service .form-type-select {
    height: 56px;
    border: 1px solid #DFE0E1;
    border-radius: 12px;
    padding: 8px 24px;
    justify-content: center;
}

.main-cpfl-webform-service .form-type-textfield label,
.main-cpfl-webform-service .form-type-number label,
.main-cpfl-webform-service .form-type-select label {
    font-size: 12px;
    margin-bottom: 4px;
    font-weight: 400;
}

.main-cpfl-webform-service .form-type-textfield input,
.main-cpfl-webform-service .form-type-number input,
.main-cpfl-webform-service .form-type-select input {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 16px;
}

.main-cpfl-webform-service .form-type-textfield input::placeholder,
.main-cpfl-webform-service .form-type-number input::placeholder,
.main-cpfl-webform-service .form-type-select input::placeholder {
    color: #2D2D2D;
}


.main-cpfl-webform-service .form-type-textfield select,
.main-cpfl-webform-service .form-type-number select,
.main-cpfl-webform-service .form-type-select select {
    background: transparent;
    padding: 0;
    border: 0;
    color: unset;
    /* background-image: url(../assets/icons/seta-baixo.svg);
            background-repeat: no-repeat;
            background-position: right 0.7rem top 50%;
            background-size: 1rem auto; */
}

.main-cpfl-webform-service .form-type-textfield.js-form-item.form-item.js-form-type-select.form-type-select,
.main-cpfl-webform-service .form-type-number.js-form-item.form-item.js-form-type-select.form-type-select,
.main-cpfl-webform-service .form-type-select.js-form-item.form-item.js-form-type-select.form-type-select {
    padding: 0px 8px 0px 24px;
    background-image: url(../assets/icons/seta-baixo-azul.svg);
    background-repeat: no-repeat;
    background-position: right 1rem top 50%;
    background-size: 1rem auto;
}


.main-cpfl-webform-service textarea {
    border-radius: 12px;
    background: #fff;
    padding: 16px 24px;


}

.main-cpfl-webform-service textarea:focus-visible {
    outline-color: #00ADE1;
}