Artigos sobre: Produtos

Como aplicar CSS customizado no seu Checkout da TriboPay?

O espaço para CSS customizado do checkout de vendas serve para personalizar a aparência da página de finalização de compras. Ele permite ajustar cores e outros elementos visuais para proporcionar uma experiência de usuário mais agradável e alinhada à identidade visual da marca.

Onde personalizo meu checkout através de CSS?



Escolha o produto cadastrado que deseja personalizar o checkout com CSS, vá em Checkout e em Configurações :



Logo em seguida essa janela irá abrir a direita. Cole seu código desejado no espaço indicado!



Não tem um código personalizado mas quer mudar um pouco da aparência do seu checkout? Sem problemas! A Tribopay selecionou alguns códigos para você com as seguintes cores, veja como ficará depois de alterado.


LARANJA #f68e2f



.bg-green-600 {
    background-color: #FF8C00; /* Laranja Escuro */
}

.bg-blue-700 {
    background-color: #FF8C00; /* Laranja Escuro */
    border-radius: 8px;
}

.bg-green-50 {
    --tw-bg-opacity: 1;
    background-color: #FF8C0003; /* Transparente com laranja escuro */
}

.ring-green-600\/20 {
    --tw-ring-color: #FF8C00BD; /* Laranja Escuro com opacidade */
}

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

.text-green-700 {
    color: #FF8C00; /* Laranja Escuro */
}

.fill-blue-500 {
    fill: #FF8C00; /* Laranja Escuro */
}

.fill-green-500 {
    fill: #FF8C00; /* Laranja Escuro */
}

.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: #FF8C00; /* Laranja Escuro */
}

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

.bg-amber-600 {
    background-color: #FF8C00EB; /* Laranja Escuro */
}

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

.text-teal-700 {
    --tw-text-opacity: 1;
    color: #FF8C00; /* Laranja Escuro */
}

.bg-teal-50 {
    --tw-bg-opacity: 1;
    background-color: #FF8C0008; /* Transparente com laranja escuro */
}

.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: #FF8C0008; /* Transparente com laranja escuro */
}

.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: #FF8C00BD; /* Laranja Escuro com opacidade */
}

.text-yellow-800 {
    color: #FF8C00; /* Laranja Escuro */
}

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

.ring-orange-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: #FF8C005E; /* Laranja Escuro com opacidade */
}

.border-orange-300 {
    --tw-border-opacity: 1;
    border-color: #FF8C005E; /* Laranja Escuro com opacidade */
}

.border-orange-200 {
    --tw-border-opacity: 1;
    border-color: #FF8C005E; /* Laranja Escuro 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: rgb(22, 163, 74);
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: rgb(22, 163, 74);
}

.text-green-600 {
    --tw-text-opacity: 1;
    color: #FF8C00; /* Laranja Escuro */
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: #FF8C00; /* Laranja Escuro */
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: #FF8C00; /* Laranja Escuro */
}

.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;
}


PRETO #000000



.bg-green-600 {
    background-color: #000000; /* Preto */
}

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

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

.ring-green-600\/20 {
    --tw-ring-color: #000000BD; /* Preto com opacidade */
}

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

.text-green-700 {
    color: #000000; /* Preto */
}

.fill-blue-500 {
    fill: #000000; /* Preto */
}

.fill-green-500 {
    fill: #000000; /* Preto */
}

.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: #000000; /* Preto */
}

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

.bg-amber-600 {
    background-color: #000000EB; /* Preto */
}

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

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

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

.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: #00000008; /* Transparente com preto */
}

.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: #000000BD; /* Preto com opacidade */
}

.text-yellow-800 {
    color: #000000; /* Preto */
}

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

.ring-orange-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: #0000005E; /* Preto com opacidade */
}

.border-orange-300 {
    --tw-border-opacity: 1;
    border-color: #0000005E; /* Preto com opacidade */
}

.border-orange-200 {
    --tw-border-opacity: 1;
    border-color: #0000005E; /* Preto 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: rgb(22, 163, 74);
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: rgb(22, 163, 74);
}

.text-green-600 {
    --tw-text-opacity: 1;
    color: #000000; /* Preto */
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: #000000; /* Preto */
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: #000000; /* Preto */
}

.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;
}


VERMELHO #cf0101



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

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

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

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

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

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

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

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

.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: #cf0101; /* Vermelho Escuro */
}

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

.bg-amber-600 {
    background-color: #cf0101EB; /* Vermelho Escuro */
}

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

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

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

.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: #cf010108; /* Transparente com vermelho escuro */
}

.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: #cf0101BD; /* Vermelho Escuro com opacidade */
}

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

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

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

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

.border-orange-200 {
    --tw-border-opacity: 1;
    border-color: #cf01015E; /* Vermelho Escuro 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: rgb(22, 163, 74);
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: rgb(22, 163, 74);
}

.text-green-600 {
    --tw-text-opacity: 1;
    color: #cf0101; /* Vermelho Escuro */
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: #cf0101; /* Vermelho Escuro */
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: #cf0101; /* Vermelho Escuro */
}

.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 #08b9ce



.bg-green-600 {
    background-color: #08b9ce; /* Azul Claro */
}

.bg-blue-700 {
    background-color: #08b9ce; /* Azul Claro */
    border-radius: 8px;
}

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

.ring-green-600\/20 {
    --tw-ring-color: #08b9ceBD; /* Azul Claro com opacidade */
}

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

.text-green-700 {
    color: #08b9ce; /* Azul Claro */
}

.fill-blue-500 {
    fill: #08b9ce; /* Azul Claro */
}

.fill-green-500 {
    fill: #08b9ce; /* Azul Claro */
}

.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: #08b9ce; /* Azul Claro */
}

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

.bg-amber-600 {
    background-color: #08b9ceEB; /* Azul Claro */
}

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

.text-teal-700 {
    --tw-text-opacity: 1;
    color: #08b9ce; /* Azul Claro */
}

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

.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: #08b9ce08; /* Transparente com azul claro */
}

.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: #08b9ceBD; /* Azul Claro com opacidade */
}

.text-yellow-800 {
    color: #08b9ce; /* Azul Claro */
}

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

.ring-orange-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: #08b9ce5E; /* Azul Claro com opacidade */
}

.border-orange-300 {
    --tw-border-opacity: 1;
    border-color: #08b9ce5E; /* Azul Claro com opacidade */
}

.border-orange-200 {
    --tw-border-opacity: 1;
    border-color: #08b9ce5E; /* Azul Claro 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: rgb(22, 163, 74);
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: rgb(22, 163, 74);
}

.text-green-600 {
    --tw-text-opacity: 1;
    color: #08b9ce; /* Azul Claro */
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: #08b9ce; /* Azul Claro */
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: #08b9ce; /* Azul Claro */
}

.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 #ff0084



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

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

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

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

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

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

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

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

.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: #ff0084; /* Rosa */
}

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

.bg-amber-600 {
    background-color: #ff0084EB; /* Rosa */
}

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

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

.bg-teal-50 {
    --tw-bg-opacity: 1;
    background-color: #ff008408; /* 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: #ff008408; /* 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: #ff0084BD; /* Rosa com opacidade */
}

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

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

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

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

.border-orange-200 {
    --tw-border-opacity: 1;
    border-color: #ff00845E; /* 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: #111827;
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(22, 163, 74);
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: rgb(22, 163, 74);
}

.text-green-600 {
    --tw-text-opacity: 1;
    color: #ff0084; /* Rosa */
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: #ff0084; /* Rosa */
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: #ff0084; /* Rosa */
}

.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;
}


ROXO #800080



.bg-green-600 {
    background-color: #800080; /* Roxo */
}

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

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

.ring-green-600\/20 {
    --tw-ring-color: #800080BD; /* Roxo com opacidade */
}

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

.text-green-700 {
    color: #800080; /* Roxo */
}

.fill-blue-500 {
    fill: #800080; /* Roxo */
}

.fill-green-500 {
    fill: #800080; /* Roxo */
}

.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: #800080; /* Roxo */
}

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

.bg-amber-600 {
    background-color: #800080EB; /* Roxo */
}

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

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

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

.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: #80008008; /* Transparente com roxo */
}

.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: #800080BD; /* Roxo com opacidade */
}

.text-yellow-800 {
    color: #800080; /* Roxo */
}

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

.ring-orange-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: #8000805E; /* Roxo com opacidade */
}

.border-orange-300 {
    --tw-border-opacity: 1;
    border-color: #8000805E; /* Roxo com opacidade */
}

.border-orange-200 {
    --tw-border-opacity: 1;
    border-color: #8000805E; /* Roxo 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: rgb(22, 163, 74);
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: rgb(22, 163, 74);
}

.text-green-600 {
    --tw-text-opacity: 1;
    color: #800080; /* Roxo */
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: #800080; /* Roxo */
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: #800080; /* Roxo */
}

.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;
}


MARROM #945821



.bg-green-600 {
    background-color: #945821; /* Laranja Escuro */
}

.bg-blue-700 {
    background-color: #945821; /* Laranja Escuro */
    border-radius: 8px;
}

.bg-green-50 {
    --tw-bg-opacity: 1;
    background-color: #94582103; /* Transparente com laranja escuro */
}

.ring-green-600\/20 {
    --tw-ring-color: #945821BD; /* Laranja Escuro com opacidade */
}

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

.text-green-700 {
    color: #945821; /* Laranja Escuro */
}

.fill-blue-500 {
    fill: #945821; /* Laranja Escuro */
}

.fill-green-500 {
    fill: #945821; /* Laranja Escuro */
}

.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: #945821; /* Laranja Escuro */
}

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

.bg-amber-600 {
    background-color: #945821EB; /* Laranja Escuro */
}

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

.text-teal-700 {
    --tw-text-opacity: 1;
    color: #945821; /* Laranja Escuro */
}

.bg-teal-50 {
    --tw-bg-opacity: 1;
    background-color: #94582108; /* Transparente com laranja escuro */
}

.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: #94582108; /* Transparente com laranja escuro */
}

.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: #945821BD; /* Laranja Escuro com opacidade */
}

.text-yellow-800 {
    color: #945821; /* Laranja Escuro */
}

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

.ring-orange-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: #9458215E; /* Laranja Escuro com opacidade */
}

.border-orange-300 {
    --tw-border-opacity: 1;
    border-color: #9458215E; /* Laranja Escuro com opacidade */
}

.border-orange-200 {
    --tw-border-opacity: 1;
    border-color: #9458215E; /* Laranja Escuro 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: rgb(22, 163, 74);
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: rgb(22, 163, 74);
}

.text-green-600 {
    --tw-text-opacity: 1;
    color: #945821; /* Laranja Escuro */
}

.text-red-700 {
    --tw-text-opacity: 1;
    color: #945821; /* Laranja Escuro */
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: #945821; /* Laranja Escuro */
}

.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;
}

Atualizado em: 08/11/2024

Este artigo foi útil?

Compartilhe seu feedback

Cancelar

Obrigado!