.fluentform{

    input{
        color: var(--wp--preset--color--text-primary);
        background-color: rgba(45, 107, 238, 0.5);
        padding: 14px 20px;
        font-size: 16px;
        font-weight: 400;
        border: solid 1px var(--wp--preset--color--secondary);
        border-radius: 44px;
        outline: 0px;
        transition: 0.3s;

        &:focus{
            border-color: color-mix(in srgb, var(--wp--preset--color--secondary), white 30%);;
        }

        &[type="checkbox"], &[type="radio"]{
            position: relative;
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            padding: 5px;
            margin: 0;
            border: 1px solid var(--wp--preset--color--secondary);
            background-color: #183a81;
            border-radius: 3px;
            cursor: pointer;

            &::after {
                content: '';
                position: absolute;
                display: block;
                width: 10px;
                height: 10px;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%) scale(0);
                transition: transform 0.2s ease-in-out;
            }
        }

        &[type="radio"] {
            border-radius: 50%;
        }

        &[type="checkbox"]:checked::after {
            content: '';
            position: absolute;
            width: 6px;
            height: 10px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: translate(-50%, -50%) rotate(45deg) scale(1);
        }

        &[type="radio"]:checked::after {
            background-color: var(--wp--preset--color--text-primary);
            border-radius: 50%;
            width: 8px;
            height: 8px;
            transform: translate(-50%, -50%) scale(1);
        }
    }

    button{
        color: var(--wp--preset--color--text-primary);
        border: 1px solid var(--wp--preset--color--tertiary);
        background: var(--wp--preset--color--tertiary);
        box-shadow: 0 0 15px 0 var(--wp--preset--color--tertiary);
        border-radius: 50px;
        padding: 20px 30px;
        transition: all 0.6s ease;
        height: auto;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;

        &:hover{
            box-shadow: 0 0 0 0 transparent;
        }
    }

    /* Flecha selector */
    .iti__arrow {
        color: var(--wp--preset--color--text-secondary);
    }

    /* Padding para que las banderas de prefijos no tape los números*/
    .ff-el-phone{
        padding-left: 55px !important;
    }

    /* Lista prefijo paises */
    .iti__country-list{
        background-color: rgb(24 58 129);
        border-radius: 10px;
        border: 1px solid var(--wp--preset--color--secondary);
        max-height: 150px;
    }

    /* Margen para el texto de los check */
    .ff-el-form-check-label span{
        margin-left: 5px;
    }

    .fluentform .ff_t_c{
        padding-left: 5px;
    }

    /* Mensaje confirmación y error */
    .ff-message-success, .ff-message-error{
        border: none;
        text-align: center;
        color: white;
        border-radius: 20px;
    }

    .ff-message-success{
        background: #009200;
    }

    .ff-message-error{
        background: #920000;
    }
}