Ver categorias

Como aplicar CSS personalizado no seu Checkout da FortPay

12 minutos de leitura

A área de CSS personalizado no checkout da FortPay permite que você modifique o visual da página de finalização de compra de forma prática e eficaz.

Com ela, você pode ajustar cores, fontes, tamanhos e outros elementos visuais para que a experiência do cliente fique mais atrativa e alinhada com a identidade visual da sua marca.

Onde personalizar o checkout com CSS?
Você pode inserir seu código CSS diretamente no painel da FortPay, na seção de configurações do checkout.

Acesse o produto que deseja realizar a personalização do Checkout;

Acesse o Checkout;

Clique em Configurações para adicionar os seu elementos em CSS;

Adicione o seu código em CSS.


Quer mudar a aparência do seu checkout, mas não tem um código personalizado?
Confira abaixo como seu checkout vai ficar com cada estilo aplicado. É só copiar o código e colar no campo de CSS personalizado no painel da FortPay.

Modo Dark:

/* Fundo geral escuro e texto cinza claro */
body,
.bg-gray-200,
.bg-indigo-50,
.bg-yellow-50,
.bg-orange-200,
.bg-teal-50,
.bg-white {
    background-color: #1e1e1e !important;
    color: #CCCCCC !important;
}

/* Texto escurecido convertido para cinza claro */
.text-black,
.text-gray-900,
.text-orange-900,
.text-blue-700,
.text-red-600,
.text-red-700,
.text-green-600,
.text-yellow-800,
.text-orange-700,
.text-green-700,
.text-teal-700 {
    color: #CCCCCC !important;
}

/* Bordas e divisores escurecidos */
.border,
.border-orange-300,
.border-orange-200,
.border-gray-100,
.border-indigo-200 {
    border-color: #3a3a3a !important;
}

/* Inputs e selects com fundo escuro e texto cinza claro */
input[data-v-116bb652],
select[data-v-116bb652],
input[data-v-c351f17b],
select[data-v-c351f17b],
input[data-v-65bd1885],
select[data-v-65bd1885] {
    background-color: #2a2a2a !important;
    color: #CCCCCC !important;
    border: 1px solid #444 !important;
}

/* Botões e blocos com fundo escuro e texto cinza claro */
.bg-green-600,
.bg-blue-700,
.bg-amber-600,
.bg-orange-300 {
    background-color: #333333 !important;
    color: #CCCCCC !important;
}

/* Sombras sutis no modo dark */
.shadow-md {
    --tw-shadow: 0 2px 15px rgba(0, 0, 0, 0.6);
}

/* Placeholder mais claro */
::placeholder {
    color: #999999;
}

/* Destaque para Aprovação Imediata */
.aprovacao-imediata,
.text-aprovacao {
    color: #00ff99 !important;
    font-weight: bold;
}

Quer mudar a aparência do seu checkout, mas não tem um código personalizado?
Confira abaixo como seu checkout vai ficar com cada estilo aplicado. É só copiar o código e colar no campo de CSS personalizado no painel da FortPay.

| Vermelho: #ff3131

.bg-green-600 {
    background-color: #ff3131; /* Vermelho */
}

.bg-blue-700 {
    background-color: #ff3131; /* Vermelho */
    border-radius: 8px;
}

.bg-green-50 {
    --tw-bg-opacity: 1;
    background-color: #ff313103; /* Transparente com vermelho */
}

.ring-green-600\/20 {
    --tw-ring-color: #ff3131bd; /* Vermelho com opacidade */
}

.ring-1 {
    --tw-ring-shadow: var(-tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) #ff3131;
}

.text-green-700 {
    color: #ff3131; /* Vermelho */
}

.fill-blue-500 {
    fill: #ff3131; /* Vermelho */
}

.fill-green-500 {
    fill: #ff3131; /* Vermelho */
}

.rounded-md {
    border-radius: 12px;
}

input[data-v-116bb652], select[data-v-116bb652] {
    border-radius: 12px;
}

.bg-indigo-50 {
    border-radius: 12px;
}

input[data-v-c351f17b], select[data-v-c351f17b] {
    border-radius: 12px;
}

.border {
    border-radius: 12px;
}

.bg-orange-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(229, 231, 235 / var(--tw-bg-opacity));
}

.text-orange-700 {
    color: #ff3131; /* Vermelho */
}

.text-amber-700 {
    color: #fff;
}

.bg-amber-600 {
    background-color: #ff3131eb; /* Vermelho com opacidade */
}

.ring-1 {
    --tw-ring-shadow: var(-tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) #ff3131;
}

.text-teal-700 {
    --tw-text-opacity: 1;
    color: #ff3131; /* Vermelho */
}

.bg-teal-50 {
    --tw-bg-opacity: 1;
    background-color: #ff313108; /* Transparente com vermelho */
}

.border-indigo-200 {
    --tw-border-opacity: 1;
    border-color: rgb(255, 255, 255 / var(--tw-bg-opacity));
}

.bg-indigo-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255, 255, 255 / var(--tw-bg-opacity));
}

.ring-white {
    --tw-ring-opacity: 1;
    --tw-ring-color: #ff313108; /* Transparente com vermelho */
}

.rounded-b-lg {
    border-bottom-left-radius: 0rem;
    border-bottom-right-radius: 0rem;
}

input[data-v-65bd1885], select[data-v-65bd1885] {
    border-radius: 12px;
    border: 1px solid #202020;
    height: 40px;
}

.ring-yellow-600\/20 {
    --tw-ring-color: #ff3131bd; /* Vermelho com opacidade */
}

.text-yellow-800 {
    color: #ff3131; /* Vermelho */
}

.bg-yellow-50 {
    --tw-bg-opacity: 1;
    background-color: #fef7ff;
}

.ring-orange-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: #ff31315e; /* Vermelho com opacidade */
}

.border-orange-300 {
    --tw-border-opacity: 1;
    border-color: #ff31315e; /* Vermelho com opacidade */
}

.border-orange-200 {
    --tw-border-opacity: 1;
    border-color: #ff31315e; /* Vermelho com opacidade */
}

.bg-orange-200 {
    --tw-bg-opacity: 1;
    background-color: #eeffee;
}

.text-orange-900 {
    --tw-text-opacity: 1;
    color: #111827;
}

.text-blue-700 {
    --tw-text-opacity: 1;
    color: #111827;
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: #ff3131;
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: #ff3131;
}

.text-green-600 {
    --tw-text-opacity: 1;
    color: #ff3131;
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: #ff3131;
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: #ff3131;
}

.shadow-md {
    --tw-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
}

.bg-gray-200 {
    background-color: #f0f4f8;
    font-family: Arial, sans-serif;
}

.text-gray-900 {
    color: rgb(101, 101, 101);
}

.px-3 {
    padding-left: 22px;
    padding-right: 22px;
}

.text-black {
    --tw-text-opacity: 1;
    color: rgb(101, 101, 101);
}

.w-8 {
    width: 1.5rem;
}

.h-8 {
    height: 1.5rem;
}

.border-t-4 {
    border-top-width: 0px;
    border-left-width: 1.5px;
    border-right-width: 1.5px;
}

.border-gray-100 {
    --tw-border-opacity: 1;
    border-color: #f0f4f8;
}

| Azul: #004aad

.bg-green-600 {
    background-color: #004aad; /* Azul */
}

.bg-blue-700 {
    background-color: #004aad; /* Azul */
    border-radius: 8px;
}

.bg-green-50 {
    --tw-bg-opacity: 1;
    background-color: #004aad03; /* Transparente com azul */
}

.ring-green-600\/20 {
    --tw-ring-color: #004aadbd; /* Azul com opacidade */
}

.ring-1 {
    --tw-ring-shadow: var(-tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) #004aad;
}

.text-green-700 {
    color: #004aad; /* Azul */
}

.fill-blue-500 {
    fill: #004aad; /* Azul */
}

.fill-green-500 {
    fill: #004aad; /* Azul */
}

.rounded-md {
    border-radius: 12px;
}

input[data-v-116bb652], select[data-v-116bb652] {
    border-radius: 12px;
}

.bg-indigo-50 {
    border-radius: 12px;
}

input[data-v-c351f17b], select[data-v-c351f17b] {
    border-radius: 12px;
}

.border {
    border-radius: 12px;
}

.bg-orange-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(229, 231, 235 / var(--tw-bg-opacity));
}

.text-orange-700 {
    color: #004aad; /* Azul */
}

.text-amber-700 {
    color: #fff;
}

.bg-amber-600 {
    background-color: #004aadeb; /* Azul com opacidade */
}

.ring-1 {
    --tw-ring-shadow: var(-tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) #004aad;
}

.text-teal-700 {
    --tw-text-opacity: 1;
    color: #004aad; /* Azul */
}

.bg-teal-50 {
    --tw-bg-opacity: 1;
    background-color: #004aad08; /* Transparente com azul */
}

.border-indigo-200 {
    --tw-border-opacity: 1;
    border-color: rgb(255, 255, 255 / var(--tw-bg-opacity));
}

.bg-indigo-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255, 255, 255 / var(--tw-bg-opacity));
}

.ring-white {
    --tw-ring-opacity: 1;
    --tw-ring-color: #004aad08; /* Transparente com azul */
}

.rounded-b-lg {
    border-bottom-left-radius: 0rem;
    border-bottom-right-radius: 0rem;
}

input[data-v-65bd1885], select[data-v-65bd1885] {
    border-radius: 12px;
    border: 1px solid #202020;
    height: 40px;
}

.ring-yellow-600\/20 {
    --tw-ring-color: #004aadbd; /* Azul com opacidade */
}

.text-yellow-800 {
    color: #004aad; /* Azul */
}

.bg-yellow-50 {
    --tw-bg-opacity: 1;
    background-color: #fef7ff;
}

.ring-orange-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: #004aad5e; /* Azul com opacidade */
}

.border-orange-300 {
    --tw-border-opacity: 1;
    border-color: #004aad5e; /* Azul com opacidade */
}

.border-orange-200 {
    --tw-border-opacity: 1;
    border-color: #004aad5e; /* Azul com opacidade */
}

.bg-orange-200 {
    --tw-bg-opacity: 1;
    background-color: #eeffee;
}

.text-orange-900 {
    --tw-text-opacity: 1;
    color: #111827;
}

.text-blue-700 {
    --tw-text-opacity: 1;
    color: #004aad;
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: #004aad;
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: #004aad;
}

.text-green-600 {
    --tw-text-opacity: 1;
    color: #004aad;
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: #004aad;
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: #004aad;
}

.shadow-md {
    --tw-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
}

.bg-gray-200 {
    background-color: #f0f4f8;
    font-family: Arial, sans-serif;
}

.text-gray-900 {
    color: rgb(101, 101, 101);
}

.px-3 {
    padding-left: 22px;
    padding-right: 22px;
}

.text-black {
    --tw-text-opacity: 1;
    color: rgb(101, 101, 101);
}

.w-8 {
    width: 1.5rem;
}

.h-8 {
    height: 1.5rem;
}

.border-t-4 {
    border-top-width: 0px;
    border-left-width: 1.5px;
    border-right-width: 1.5px;
}

.border-gray-100 {
    --tw-border-opacity: 1;
    border-color: #f0f4f8;
}

| Verde: #00bf63

.bg-green-600 {
    background-color: #00bf63; /* Verde */
}

.bg-blue-700 {
    background-color: #00bf63; /* Verde */
    border-radius: 8px;
}

.bg-green-50 {
    --tw-bg-opacity: 1;
    background-color: #00bf6303; /* Transparente com verde */
}

.ring-green-600\/20 {
    --tw-ring-color: #00bf63bd; /* Verde com opacidade */
}

.ring-1 {
    --tw-ring-shadow: var(-tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) #00bf63;
}

.text-green-700 {
    color: #00bf63; /* Verde */
}

.fill-blue-500 {
    fill: #00bf63; /* Verde */
}

.fill-green-500 {
    fill: #00bf63; /* Verde */
}

.rounded-md {
    border-radius: 12px;
}

input[data-v-116bb652], select[data-v-116bb652] {
    border-radius: 12px;
}

.bg-indigo-50 {
    border-radius: 12px;
}

input[data-v-c351f17b], select[data-v-c351f17b] {
    border-radius: 12px;
}

.border {
    border-radius: 12px;
}

.bg-orange-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(229, 231, 235 / var(--tw-bg-opacity));
}

.text-orange-700 {
    color: #00bf63; /* Verde */
}

.text-amber-700 {
    color: #fff;
}

.bg-amber-600 {
    background-color: #00bf63eb; /* Verde com opacidade */
}

.ring-1 {
    --tw-ring-shadow: var(-tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) #00bf63;
}

.text-teal-700 {
    --tw-text-opacity: 1;
    color: #00bf63; /* Verde */
}

.bg-teal-50 {
    --tw-bg-opacity: 1;
    background-color: #00bf6308; /* Transparente com verde */
}

.border-indigo-200 {
    --tw-border-opacity: 1;
    border-color: rgb(255, 255, 255 / var(--tw-bg-opacity));
}

.bg-indigo-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255, 255, 255 / var(--tw-bg-opacity));
}

.ring-white {
    --tw-ring-opacity: 1;
    --tw-ring-color: #00bf6308; /* Transparente com verde */
}

.rounded-b-lg {
    border-bottom-left-radius: 0rem;
    border-bottom-right-radius: 0rem;
}

input[data-v-65bd1885], select[data-v-65bd1885] {
    border-radius: 12px;
    border: 1px solid #202020;
    height: 40px;
}

.ring-yellow-600\/20 {
    --tw-ring-color: #00bf63bd; /* Verde com opacidade */
}

.text-yellow-800 {
    color: #00bf63; /* Verde */
}

.bg-yellow-50 {
    --tw-bg-opacity: 1;
    background-color: #fef7ff;
}

.ring-orange-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: #00bf635e; /* Verde com opacidade */
}

.border-orange-300 {
    --tw-border-opacity: 1;
    border-color: #00bf635e; /* Verde com opacidade */
}

.border-orange-200 {
    --tw-border-opacity: 1;
    border-color: #00bf635e; /* Verde com opacidade */
}

.bg-orange-200 {
    --tw-bg-opacity: 1;
    background-color: #eeffee;
}

.text-orange-900 {
    --tw-text-opacity: 1;
    color: #111827;
}

.text-blue-700 {
    --tw-text-opacity: 1;
    color: #00bf63;
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: #00bf63;
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: #00bf63;
}

.text-green-600 {
    --tw-text-opacity: 1;
    color: #00bf63;
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: #00bf63;
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: #00bf63;
}

.shadow-md {
    --tw-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
}

.bg-gray-200 {
    background-color: #f0f4f8;
    font-family: Arial, sans-serif;
}

.text-gray-900 {
    color: rgb(101, 101, 101);
}

.px-3 {
    padding-left: 22px;
    padding-right: 22px;
}

.text-black {
    --tw-text-opacity: 1;
    color: rgb(101, 101, 101);
}

.w-8 {
    width: 1.5rem;
}

.h-8 {
    height: 1.5rem;
}

.border-t-4 {
    border-top-width: 0px;
    border-left-width: 1.5px;
    border-right-width: 1.5px;
}

.border-gray-100 {
    --tw-border-opacity: 1;
    border-color: #f0f4f8;
}

| Amarelo: #ffde59

.bg-green-600 {
    background-color: #ffde59; /* Amarelo */
}

.bg-blue-700 {
    background-color: #ffde59; /* Amarelo */
    border-radius: 8px;
}

.bg-green-50 {
    --tw-bg-opacity: 1;
    background-color: #ffde5903; /* Transparente com amarelo */
}

.ring-green-600\/20 {
    --tw-ring-color: #ffde59bd; /* Amarelo com opacidade */
}

.ring-1 {
    --tw-ring-shadow: var(-tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) #ffde59;
}

.text-green-700 {
    color: #ffde59; /* Amarelo */
}

.fill-blue-500 {
    fill: #ffde59; /* Amarelo */
}

.fill-green-500 {
    fill: #ffde59; /* Amarelo */
}

.rounded-md {
    border-radius: 12px;
}

input[data-v-116bb652], select[data-v-116bb652] {
    border-radius: 12px;
}

.bg-indigo-50 {
    border-radius: 12px;
}

input[data-v-c351f17b], select[data-v-c351f17b] {
    border-radius: 12px;
}

.border {
    border-radius: 12px;
}

.bg-orange-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(229, 231, 235 / var(--tw-bg-opacity));
}

.text-orange-700 {
    color: #ffde59; /* Amarelo */
}

.text-amber-700 {
    color: #fff;
}

.bg-amber-600 {
    background-color: #ffde59eb; /* Amarelo com opacidade */
}

.ring-1 {
    --tw-ring-shadow: var(-tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) #ffde59;
}

.text-teal-700 {
    --tw-text-opacity: 1;
    color: #ffde59; /* Amarelo */
}

.bg-teal-50 {
    --tw-bg-opacity: 1;
    background-color: #ffde5908; /* Transparente com amarelo */
}

.border-indigo-200 {
    --tw-border-opacity: 1;
    border-color: rgb(255, 255, 255 / var(--tw-bg-opacity));
}

.bg-indigo-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255, 255, 255 / var(--tw-bg-opacity));
}

.ring-white {
    --tw-ring-opacity: 1;
    --tw-ring-color: #ffde5908; /* Transparente com amarelo */
}

.rounded-b-lg {
    border-bottom-left-radius: 0rem;
    border-bottom-right-radius: 0rem;
}

input[data-v-65bd1885], select[data-v-65bd1885] {
    border-radius: 12px;
    border: 1px solid #202020;
    height: 40px;
}

.ring-yellow-600\/20 {
    --tw-ring-color: #ffde59bd; /* Amarelo com opacidade */
}

.text-yellow-800 {
    color: #ffde59; /* Amarelo */
}

.bg-yellow-50 {
    --tw-bg-opacity: 1;
    background-color: #fef7ff;
}

.ring-orange-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: #ffde595e; /* Amarelo com opacidade */
}

.border-orange-300 {
    --tw-border-opacity: 1;
    border-color: #ffde595e; /* Amarelo com opacidade */
}

.border-orange-200 {
    --tw-border-opacity: 1;
    border-color: #ffde595e; /* Amarelo com opacidade */
}

.bg-orange-200 {
    --tw-bg-opacity: 1;
    background-color: #eeffee;
}

.text-orange-900 {
    --tw-text-opacity: 1;
    color: #111827;
}

.text-blue-700 {
    --tw-text-opacity: 1;
    color: #ffde59;
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: #ffde59;
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: #ffde59;
}

.text-green-600 {
    --tw-text-opacity: 1;
    color: #ffde59;
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: #ffde59;
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: #ffde59;
}

.shadow-md {
    --tw-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
}

.bg-gray-200 {
    background-color: #f0f4f8;
    font-family: Arial, sans-serif;
}

.text-gray-900 {
    color: rgb(101, 101, 101);
}

.px-3 {
    padding-left: 22px;
    padding-right: 22px;
}

.text-black {
    --tw-text-opacity: 1;
    color: rgb(101, 101, 101);
}

.w-8 {
    width: 1.5rem;
}

.h-8 {
    height: 1.5rem;
}

.border-t-4 {
    border-top-width: 0px;
    border-left-width: 1.5px;
    border-right-width: 1.5px;
}

.border-gray-100 {
    --tw-border-opacity: 1;
    border-color: #f0f4f8;
}

| Rosa: #ff66c4

.bg-green-600 {
    background-color: #ff66c4; /* Rosa Chiclete */
}

.bg-blue-700 {
    background-color: #ff66c4; /* Rosa Chiclete */
    border-radius: 8px;
}

.bg-green-50 {
    --tw-bg-opacity: 1;
    background-color: #ff66c403; /* Transparente com rosa */
}

.ring-green-600\/20 {
    --tw-ring-color: #ff66c4bd; /* Rosa com opacidade */
}

.ring-1 {
    --tw-ring-shadow: var(-tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) #ff66c4;
}

.text-green-700 {
    color: #ff66c4; /* Rosa Chiclete */
}

.fill-blue-500 {
    fill: #ff66c4; /* Rosa Chiclete */
}

.fill-green-500 {
    fill: #ff66c4; /* Rosa Chiclete */
}

.rounded-md {
    border-radius: 12px;
}

input[data-v-116bb652], select[data-v-116bb652] {
    border-radius: 12px;
}

.bg-indigo-50 {
    border-radius: 12px;
}

input[data-v-c351f17b], select[data-v-c351f17b] {
    border-radius: 12px;
}

.border {
    border-radius: 12px;
}

.bg-orange-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(229, 231, 235 / var(--tw-bg-opacity));
}

.text-orange-700 {
    color: #ff66c4; /* Rosa Chiclete */
}

.text-amber-700 {
    color: #fff;
}

.bg-amber-600 {
    background-color: #ff66c4eb; /* Rosa com opacidade */
}

.ring-1 {
    --tw-ring-shadow: var(-tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) #ff66c4;
}

.text-teal-700 {
    --tw-text-opacity: 1;
    color: #ff66c4; /* Rosa Chiclete */
}

.bg-teal-50 {
    --tw-bg-opacity: 1;
    background-color: #ff66c408; /* Transparente com rosa */
}

.border-indigo-200 {
    --tw-border-opacity: 1;
    border-color: rgb(255, 255, 255 / var(--tw-bg-opacity));
}

.bg-indigo-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(255, 255, 255 / var(--tw-bg-opacity));
}

.ring-white {
    --tw-ring-opacity: 1;
    --tw-ring-color: #ff66c408; /* Transparente com rosa */
}

.rounded-b-lg {
    border-bottom-left-radius: 0rem;
    border-bottom-right-radius: 0rem;
}

input[data-v-65bd1885], select[data-v-65bd1885] {
    border-radius: 12px;
    border: 1px solid #202020;
    height: 40px;
}

.ring-yellow-600\/20 {
    --tw-ring-color: #ff66c4bd; /* Rosa com opacidade */
}

.text-yellow-800 {
    color: #ff66c4; /* Rosa Chiclete */
}

.bg-yellow-50 {
    --tw-bg-opacity: 1;
    background-color: #fef7ff;
}

.ring-orange-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: #ff66c45e; /* Rosa com opacidade */
}

.border-orange-300 {
    --tw-border-opacity: 1;
    border-color: #ff66c45e; /* Rosa com opacidade */
}

.border-orange-200 {
    --tw-border-opacity: 1;
    border-color: #ff66c45e; /* Rosa com opacidade */
}

.bg-orange-200 {
    --tw-bg-opacity: 1;
    background-color: #eeffee;
}

.text-orange-900 {
    --tw-text-opacity: 1;
    color: #111827;
}

.text-blue-700 {
    --tw-text-opacity: 1;
    color: #ff66c4;
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: #ff66c4;
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: #ff66c4;
}

.text-green-600 {
    --tw-text-opacity: 1;
    color: #ff66c4;
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: #ff66c4;
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: #ff66c4;
}

.shadow-md {
    --tw-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
}

.bg-gray-200 {
    background-color: #f0f4f8;
    font-family: Arial, sans-serif;
}

.text-gray-900 {
    color: rgb(101, 101, 101);
}

.px-3 {
    padding-left: 22px;
    padding-right: 22px;
}

.text-black {
    --tw-text-opacity: 1;
    color: rgb(101, 101, 101);
}

.w-8 {
    width: 1.5rem;
}

.h-8 {
    height: 1.5rem;
}

.border-t-4 {
    border-top-width: 0px;
    border-left-width: 1.5px;
    border-right-width: 1.5px;
}

.border-gray-100 {
    --tw-border-opacity: 1;
    border-color: #f0f4f8;
}
Quais são seus sentimentos

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *