/*------------------- ================== ELEMENTOS COMUNS GENERICOS ================== GENERICO generico -------------------*/ /* ------------------------------------- MODAL BASE (backdrop, wrap, etc.) ------------------------------------- */ .correc-btn { margin: 16px 0px !important; height: 32px !important; } /* ======================= LOW-PERFORMANCE OVERRIDES (Genéricos/Modais Glass) Ativados via .low-perf (see elem-DOM.js) ======================= */ .low-perf .cadastro-modal-generico-content { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; animation: none !important; box-shadow: var(--shadow-md) !important; } .low-perf .cadastro-modal-generico-content::before, .low-perf .cadastro-modal-generico-content::after { display: none !important; } .low-perf .modal-generico-glass-wrap { background: none !important; box-shadow: none !important; } .low-perf .modal-generico-glass-wrap::before, .low-perf .modal-generico-glass-wrap::after { display: none !important; } .low-perf .modal-generico-overlay { animation: none !important; } .low-perf .btn-ia-glow { box-shadow: none !important; } .low-perf .whatsapp-floating-link { transition: none !important; box-shadow: none !important; } .flex-direction-row { flex-direction: row !important; } .flex-direction-column { flex-direction: column !important; } .btn-ia-glow { position: relative !important; box-shadow: 0 0 12px rgba(162, 89, 255, 0.6) !important; } .btn-ia-glow::before { content: '' !important; position: absolute !important; top: -2px !important; left: -2px !important; width: calc(100% + 4px) !important; height: calc(100% + 4px) !important; background-size: 200% 200% !important; z-index: -1 !important; border-radius: inherit !important; animation: border-glow-animation 3s ease infinite !important; } .btn-menor { height: 32px !important; width: 32px !important; font-size: 14px !important; } @keyframes border-glow-animation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Supondo que .modal-generico-overlay tenha alguma transition ou animation */ .no-transition { transition: none !important; animation: none !important; } .animation-none { animation: none !important; } .var-modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 1026; display: flex; align-items: center; justify-content: center; } .var-modal-wrap { background: #fff; padding: 1.5rem; border-radius: 12px; width: 400px; max-width: 80%; position: relative; } .var-modal-close-btn { position: absolute; top: 10px; right: 10px; background: transparent; border: none; font-size: 1.2rem; cursor: pointer; } .var-modal-message { margin-bottom: 1rem; } .var-modal-ok-btn { display: inline-block; padding: 0.5rem 1rem; border-radius: 6px; background-color: #b598f5; color: #fff; border: none; cursor: pointer; transition: background-color 0.2s; } .var-modal-ok-btn:hover { background-color: #a185e5; } /* ------------------------------------- LAYOUT PRINCIPAL DE CONCLUSÃO ------------------------------------- */ .var-modal-conclusao { text-align: center; font-size: 1rem; line-height: 1.4; padding: 1rem 0; } .var-modal-conclusao-icone { font-size: 3rem; margin-bottom: 0.5rem; animation: varModalPopScale 0.3s ease; } .var-modal-conclusao-texto { font-size: 1rem; color: #444; } /* Sucesso ou erro */ .var_okay i { color: #138e00; /* Exemplo verde */ } .var_notokay i { color: #881c27; /* Exemplo vermelho */ } .var_alert i { color: #f0ad4e; /* Exemplo amarelo */ } @keyframes varModalPopScale { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* Classe para destacar o botão quando está selecionado */ .active-selection { background-color: #db9cf8; /* Ajuste para sua cor preferida */ border: 2px solid #b748eb; color: #fff; /* Texto branco para destacar */ } .active-selection:hover { background-color: #c284e6; /* Cor ajustada (um tom mais escuro que #db9cf8) */ border-color: #9f3ded; /* Cor ajustada para o hover */ color: #fff; /* Mantém o texto branco */ } .no-background { background: none !important; } .justify-content-center { justify-content: center !important; } .justify-content-space-between { justify-content: space-between !important; } .no-shadow { box-shadow: none !important; } .bottom--35 { bottom: -35px !important; } .bottom-100 { bottom: 100px !important; } .bottom-52 { bottom: 52px !important; } .bottom--235 { bottom: -235px !important; } .width-220 { width: 220px !important; } .text-align-left { text-align: left !important; } .padding-left-20 { padding-left: 20px !important; } .padding-top-0 { padding-top: 0 !important; } .padding-0 { padding: 0px !important; } .bold-text { font-family: 'Poppins-Bold' !important; /* Deixe normal se a fonte Poppins-Bold já estiver no peso desejado */ } .no-padding { padding: 0 !important; } /* Overlay do modal */ input::placeholder { font-size: 12px; color: #999; } .cadastro-modal-generico-overlay { display: none; /* você abre com style="display:flex" no JS */ position: fixed; inset: 0; /* top/right/bottom/left: 0 */ align-items: center; justify-content: center; padding: 0px; background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(2px) saturate(120%); backdrop-filter: blur(2px) saturate(120%); z-index: 9965454541515160; /* mantém seu z-index altíssimo */ } .z-index-988 { z-index: 988 !important; } /* ======== Modal estilo Liquid Glass (Sintropia) ======== */ .cadastro-modal-generico-content { /* --- medidas fluidas --- */ /* deixe o conteúdo mandar no tamanho; ajuste o clamp conforme seu layout */ width: auto; max-width: clamp(320px, 90vw, 420px); min-width: 320px; box-sizing: border-box; /* raio e espessura da borda (ajuste à vontade) */ --radius: 30px; --ring: 1.5px; /* “borda gradiente” sem pseudo-elemento */ border: var(--ring) solid transparent; border-radius: var(--radius); background: /* preenchimento do cartão */ linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8)) padding-box, /* anel multicolorido */ conic-gradient(from 270deg, rgba(141, 231, 255, 0.85), rgba(252, 168, 255, 0.78), rgba(200, 118, 255, 0.82), rgba(141, 231, 255, 0.85)) border-box; /* vidro */ -webkit-backdrop-filter: blur(20px) saturate(160%) brightness(1.22); backdrop-filter: blur(20px) saturate(160%) brightness(1.22); /* aparência */ padding: 30px; position: relative; z-index: 1; text-align: center; overflow: hidden; animation: lg-enter 0.38s cubic-bezier(0.16, 0.84, 0.44, 1) both; box-shadow: /* sombra ambiente externa */ 0 28px 60px rgba(31, 10, 63, 0.24), 0 12px 28px rgba(0, 0, 0, 0.12), /* “bisel” luminoso ao redor */ 0 0 0 0.7px rgba(255, 255, 255, 0.35), /* brilho interno topo e sombra no rodapé (espessura) */ inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(60, 20, 120, 0.18), /* véu difuso interno (leiteado) */ inset 0 0 36px rgba(255, 255, 255, 0.32); will-change: transform, filter; z-index: 9965454541515161 !important; } #var-generico-modal-ok-button, .fb-corner-gradient { cursor: pointer; } /* glare interno sem cobrir o anel (recortado pelo padding-box) */ .cadastro-modal-generico-content::before { content: ""; position: absolute; inset: 0; padding: var(--ring); /* respeita a “largura” da borda */ border-radius: inherit; pointer-events: none; background: radial-gradient(160% 90% at 14% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%), radial-gradient(140% 120% at 50% 115%, rgba(255, 255, 255, 0.18), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; mix-blend-mode: screen; } /* halo “líquido” projetado ao redor (atrás do vidro) */ .cadastro-modal-generico-content::after { content: ""; position: absolute; inset: -22px; /* sai um pouco para fora */ border-radius: inherit; z-index: -1; background: radial-gradient(80% 110% at 12% -8%, rgba(141, 231, 255, 0.1), transparent 60%), radial-gradient(90% 120% at 92% 8%, rgba(252, 168, 255, 0.12), transparent 62%), radial-gradient(140% 120% at 50% 100%, rgba(200, 118, 255, 0.12), transparent 65%); opacity: 0.65; /* um pouco mais presente */ filter: blur(22px) saturate(145%); transition: opacity 0.3s ease; /* aparece suavemente */ pointer-events: none; } /* ao abrir: leve subida + fade */ @keyframes lg-enter { 0% { transform: translateY(8px) scale(0.985); opacity: 0; } 60% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } } /* (opcional) um hover para desktop — brilho um pouco mais forte */ @media (hover: hover) { .cadastro-modal-generico-content:hover::after { opacity: 0.75; } } /* acessibilidade: menos movimento se preferido */ @media (prefers-reduced-motion: reduce) { .cadastro-modal-generico-content { animation: none; } } /* === Ajustes finos para o liquid glass === */ /* === Ajustes finos para o liquid glass === */ .modal-generico-glass-wrap { --wrap-radius: 38px; --wrap-ring: 9px; --aa: 0.75px; /* compensação sub-pixel */ /* sem gap real; o anel é desenhado por pseudo, não por padding */ border-radius: var(--wrap-radius); position: relative; /* em vez de absolute */ border-radius: var(--wrap-radius); display: inline-grid; /* abraça o conteúdo */ place-items: center; padding: 9px; /* “largura” do anel */ pointer-events: auto; /* ESSENCIAL: permite hover/click nos filhos */ z-index: 0; /* anel líquido com máscara (mostra só a borda) */ background: radial-gradient(65% 90% at 15% 5%, rgba(141, 231, 255, 0.65), transparent 60%), radial-gradient(70% 90% at 85% 8%, rgba(252, 168, 255, 0.6), transparent 62%), radial-gradient(110% 120% at 50% 100%, rgba(200, 118, 255, 0.62), transparent 65%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; /* sombras externas (profundidade) + internas (volume do anel) */ box-shadow: /* queda ambiente */ 0 32px 70px rgba(31, 10, 63, 0.26), 0 16px 34px rgba(0, 0, 0, 0.14), /* leve brilho colorido rebatido */ 0 6px 22px -8px rgba(170, 120, 255, 0.28), /* micro-realces internos do anel */ inset 0 1px 0.8px rgba(255, 255, 255, 0.75), inset 0 -1px 0.8px rgba(40, 24, 120, 0.18), inset 0 0 22px rgba(200, 118, 255, 0.14); /* mostra só a borda, sem invadir o interior */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); filter: saturate(120%) brightness(1.04); justify-content: center; align-items: center; } /* reflexos longos na borda (specular) */ .modal-generico-glass-wrap::before { content: ""; position: absolute; inset: 0; border-radius: calc(var(--wrap-radius) - var(--aa)); padding: calc(var(--wrap-ring) + var(--aa)); background: /* brilho superior */ linear-gradient(to bottom, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%) top/100% 36% no-repeat, /* >>> novo: brilho/sombra branca no canto inferior esquerdo <<< */ radial-gradient(140% 150% at 0% 100%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 58%), /* reflexo magenta à direita */ radial-gradient(120% 120% at 100% 0%, rgba(200, 118, 255, 0.35), transparent 50%), /* reflexo ciano à esquerda */ radial-gradient(120% 120% at 0% 0%, rgba(141, 231, 255, 0.3), transparent 52%); mix-blend-mode: screen; pointer-events: none; /* mantém só a borda iluminada */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; box-shadow: /* magenta principal (direita/embaixo) */ 0 28px 70px rgba(170, 120, 255, 0.26), /* ciano complementar (esquerda/embaixo) */ -24px 18px 56px rgba(141, 231, 255, 0.22), /* filete interno suave para “assentar” o vidro */ inset 0 0 0 1px rgba(255, 255, 255, 0.28); /* reforça o blur externo respeitando a máscara do ::before */ filter: drop-shadow(0 24px 60px rgba(170, 120, 255, 0.26)) drop-shadow(-18px 12px 44px rgba(141, 231, 255, 0.22)); } /* caústicas/halo difuso atrás do vidro (mais contido) */ .modal-generico-glass-wrap::after { content: ""; position: absolute; inset: calc(var(--wrap-ring) * -1.15); border-radius: inherit; filter: blur(22px) saturate(140%); opacity: 0.55; pointer-events: none; z-index: -1; background: radial-gradient(80% 110% at 12% -8%, rgba(141, 231, 255, 0.12), transparent 60%), radial-gradient(90% 120% at 92% 8%, rgba(252, 168, 255, 0.14), transparent 62%), radial-gradient(140% 120% at 50% 102%, rgba(200, 118, 255, 0.16), transparent 65%); } /* Botão de fechar */ .cadastro-modal-generico-close { position: absolute; top: 10px; right: 20px; font-size: 1.5rem; cursor: pointer; } /* Mensagem do modal */ .cadastro-modal-generico-message { font-size: 1rem; margin-bottom: 20px; color: #333; } /* ----------- PARTE WHATSAPP ------------- */ .whatsapp-floating-link { padding: 0; border-radius: 50%; font-size: 1.2rem; color: #ffffff; background: linear-gradient(145deg, #25d366, #2cda77); border: none; cursor: pointer; width: 60px; height: 60px; display: none; /* Inicialmente escondido */ justify-content: center; align-items: center; transition: transform 0.3s, box-shadow 0.3s, opacity 0.5s ease-in-out; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); position: fixed; bottom: 25px; right: 25px; z-index: 1000; opacity: 0; transform: scale(0.8); /* Inicialmente menor */ flex-shrink: 0; flex-grow: 0; } .whatsapp-floating-link.visible { display: flex; /* Exibido quando visível */ opacity: 1; transform: scale(1); animation: whats-bounce 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; } /* Bounce + brilho + pulsos (duração-alvo: 5s) */ @keyframes whats-bounce { /* === Entrada (replica fs-bounce e adiciona glow) === */ 0% { transform: translateY(6px) scale(0.96); opacity: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(37, 211, 102, 0); } 12% { /* pico do bounce */ transform: translateY(-2px) scale(1.06); opacity: 1; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28), 0 0 0 8px rgba(37, 211, 102, 0.22); } 16% { /* assenta */ transform: translateY(0) scale(1); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(37, 211, 102, 0); } /* === Pulsos ao longo do ciclo (duas batidas bem visíveis + respiro) === */ /* 1ª batida */ 24% { transform: scale(1.08); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26), 0 0 0 10px rgba(37, 211, 102, 0.22); } 30% { transform: scale(1); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(37, 211, 102, 0); } /* 2ª batida */ 40% { transform: scale(1.06); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24), 0 0 0 8px rgba(37, 211, 102, 0.2); } 46% { transform: scale(1); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(37, 211, 102, 0); } /* respiro com micro realce para fechar o ciclo */ 60% { transform: scale(1.03); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2), 0 0 0 6px rgba(37, 211, 102, 0.12); } 70% { transform: scale(1); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(37, 211, 102, 0); } /* fim do ciclo (mantém base limpa) */ 100% { transform: translateY(0) scale(1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(37, 211, 102, 0); } } /* Anéis roxo/rosa (apenas circunferências) */ .whatsapp-floating-link::after { content: ""; position: absolute; inset: -8px; /* nasce um pouco fora do botão */ border-radius: 999px; pointer-events: none; /* dois anéis finos: roxo + rosa, com “miolo” transparente */ background: radial-gradient(circle, rgba(0, 0, 0, 0) 60%, rgba(255, 110, 248, 0.992) 61%, rgba(0, 0, 0, 0) 63%), radial-gradient(circle, rgba(0, 0, 0, 0) 72%, rgba(140, 255, 253, 0.956) 73%, rgba(0, 0, 0, 0) 75%); opacity: 0; transform: scale(0.9); filter: blur(1px); /* suaviza a borda do anel */ z-index: 0; animation: whats-rings 5s ease-out infinite; } /* Crescem e desaparecem em sequência dentro do ciclo de 5s */ @keyframes whats-rings { /* estado base */ 0% { opacity: 0; transform: scale(0.9); } /* 1º anel (roxo) entra, cresce e some */ 10% { opacity: 0.85; transform: scale(1.05); } 22% { opacity: 0.55; transform: scale(1.25); } 30% { opacity: 0; transform: scale(1.35); } /* pausa curta */ 40% { opacity: 0; transform: scale(0.95); } /* 2º anel (rosa) entra, cresce e some */ 50% { opacity: 0.8; transform: scale(1.05); } 62% { opacity: 0.5; transform: scale(1.28); } 70% { opacity: 0; transform: scale(1.38); } /* respiro até fechar o ciclo */ 100% { opacity: 0; transform: scale(0.9); } } .whatsapp-floating-link:hover { background: linear-gradient(145deg, #1ebe50, #28d665); transform: scale(1.1); /* Aumenta levemente ao passar o mouse */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .whatsapp-floating-link::before { content: "\f232"; font-family: "FontAwesome"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.3rem; } .whatsapp-floating-link:hover .tooltip-text-button { visibility: visible; width: 80px; border-radius: 99px; opacity: 1; } .position-absolute { position: absolute !important; } .right-20 { right: 20px !important; } .overflow-auto { overflow: auto !important; } .overflow-x-hidden { overflow-x: hidden !important; } .display-inline { display: inline !important; } .display-flex { display: flex !important; } /* ----------- PARTE DE LARGURA MAXIMA (de 50 até 800, de 10 em 10) ------------- */ .max-width-50 { max-width: 50px !important; } .max-width-60 { max-width: 60px !important; } .max-width-70 { max-width: 70px !important; } .max-width-80 { max-width: 80px !important; } .max-width-90 { max-width: 90px !important; } .max-width-100 { max-width: 100px !important; } .max-width-110 { max-width: 110px !important; } .max-width-120 { max-width: 120px !important; } .max-width-130 { max-width: 130px !important; } .max-width-140 { max-width: 140px !important; } .max-width-150 { max-width: 150px !important; } .max-width-160 { max-width: 160px !important; } .max-width-170 { max-width: 170px !important; } .max-width-180 { max-width: 180px !important; } .max-width-190 { max-width: 190px !important; } .max-width-200 { max-width: 200px !important; } .max-width-210 { max-width: 210px !important; } .max-width-220 { max-width: 220px !important; } .max-width-230 { max-width: 230px !important; } .max-width-240 { max-width: 240px !important; } .max-width-250 { max-width: 250px !important; } .max-width-260 { max-width: 260px !important; } .max-width-270 { max-width: 270px !important; } .max-width-280 { max-width: 280px !important; } .max-width-290 { max-width: 290px !important; } .max-width-300 { max-width: 300px !important; } .max-width-310 { max-width: 310px !important; } .max-width-320 { max-width: 320px !important; } .max-width-330 { max-width: 330px !important; } .max-width-340 { max-width: 340px !important; } .max-width-350 { max-width: 350px !important; } .max-width-360 { max-width: 360px !important; } .max-width-370 { max-width: 370px !important; } .max-width-380 { max-width: 380px !important; } .max-width-390 { max-width: 390px !important; } .max-width-400 { max-width: 400px !important; } .max-width-410 { max-width: 410px !important; } .max-width-420 { max-width: 420px !important; } .max-width-430 { max-width: 430px !important; } .max-width-440 { max-width: 440px !important; } .max-width-450 { max-width: 450px !important; } .max-width-460 { max-width: 460px !important; } .max-width-470 { max-width: 470px !important; } .max-width-480 { max-width: 480px !important; } .max-width-490 { max-width: 490px !important; } .max-width-500 { max-width: 500px !important; } .max-width-510 { max-width: 510px !important; } .max-width-520 { max-width: 520px !important; } .max-width-530 { max-width: 530px !important; } .max-width-540 { max-width: 540px !important; } .max-width-550 { max-width: 550px !important; } .max-width-560 { max-width: 560px !important; } .max-width-570 { max-width: 570px !important; } .max-width-580 { max-width: 580px !important; } .max-width-590 { max-width: 590px !important; } .max-width-600 { max-width: 600px !important; } .max-width-610 { max-width: 610px !important; } .max-width-620 { max-width: 620px !important; } .max-width-630 { max-width: 630px !important; } .max-width-640 { max-width: 640px !important; } .max-width-650 { max-width: 650px !important; } .max-width-660 { max-width: 660px !important; } .max-width-670 { max-width: 670px !important; } .max-width-680 { max-width: 680px !important; } .max-width-690 { max-width: 690px !important; } .max-width-700 { max-width: 700px !important; } .max-width-710 { max-width: 710px !important; } .max-width-720 { max-width: 720px !important; } .max-width-730 { max-width: 730px !important; } .max-width-740 { max-width: 740px !important; } .max-width-750 { max-width: 750px !important; } .max-width-760 { max-width: 760px !important; } .max-width-770 { max-width: 770px !important; } .max-width-780 { max-width: 780px !important; } .max-width-790 { max-width: 790px !important; } .max-width-800 { max-width: 800px !important; } .max-width-790 { max-width: 790px !important; } .max-width-800 { max-width: 800px !important; } .max-width-810 { max-width: 810px !important; } .max-width-820 { max-width: 820px !important; } .max-width-830 { max-width: 830px !important; } .max-width-840 { max-width: 840px !important; } .max-width-850 { max-width: 850px !important; } .max-width-860 { max-width: 860px !important; } .max-width-870 { max-width: 870px !important; } .max-width-880 { max-width: 880px !important; } .max-width-890 { max-width: 890px !important; } .max-width-900 { max-width: 900px !important; } .max-width-910 { max-width: 910px !important; } .max-width-920 { max-width: 920px !important; } .max-width-930 { max-width: 930px !important; } .max-width-940 { max-width: 940px !important; } .max-width-950 { max-width: 950px !important; } .max-width-960 { max-width: 960px !important; } .max-width-970 { max-width: 970px !important; } .max-width-980 { max-width: 980px !important; } .max-width-990 { max-width: 990px !important; } .max-width-1000 { max-width: 1000px !important; } .flex-40perc { flex: 0 0 40% !important; } .flex-35perc { flex: 0 0 35% !important; } /* ----------- FINAL PARTE DE LARGURA ------------- */ .coluna { display: flex; flex-direction: column; } /* ----------- PARTE DE GAP ------------- */ .gap-0 { gap: 0px !important; } .gap-5 { gap: 5px !important; } .gap-10 { gap: 10px !important; } .gap-12 { gap: 12px !important; } .gap-15 { gap: 15px !important; } .gap-20 { gap: 20px !important; } .gap-25 { gap: 25px !important; } .gap-30 { gap: 30px !important; } .gap-35 { gap: 35px !important; } .gap-40 { gap: 40px !important; } .gap-45 { gap: 45px !important; } .gap-50 { gap: 50px !important; } .gap-55 { gap: 55px !important; } .gap-60 { gap: 60px !important; } .gap-65 { gap: 65px !important; } .gap-70 { gap: 70px !important; } .gap-75 { gap: 75px !important; } .gap-80 { gap: 80px !important; } .gap-85 { gap: 85px !important; } .gap-90 { gap: 90px !important; } .gap-95 { gap: 95px !important; } .gap-100 { gap: 100px !important; } /* Continuação GAP (105 → 200) */ .gap-105 { gap: 105px !important; } .gap-110 { gap: 110px !important; } .gap-115 { gap: 115px !important; } .gap-120 { gap: 120px !important; } .gap-125 { gap: 125px !important; } .gap-130 { gap: 130px !important; } .gap-135 { gap: 135px !important; } .gap-140 { gap: 140px !important; } .gap-145 { gap: 145px !important; } .gap-150 { gap: 150px !important; } .gap-155 { gap: 155px !important; } .gap-160 { gap: 160px !important; } .gap-165 { gap: 165px !important; } .gap-170 { gap: 170px !important; } .gap-175 { gap: 175px !important; } .gap-180 { gap: 180px !important; } .gap-185 { gap: 185px !important; } .gap-190 { gap: 190px !important; } .gap-195 { gap: 195px !important; } .gap-200 { gap: 200px !important; } /* ----------- PARTE DE MARGIN-TOP ------------- */ .margin-16-0 { margin: 16px 0 !important; } .margin-0-0 { margin: 0px 0px !important; } .margin-top--5 { margin-top: -5px !important; } .margin-top--10 { margin-top: -10px !important; } .margin-top--15 { margin-top: -15px !important; } .margin-top--20 { margin-top: -20px !important; } .margin-top--25 { margin-top: -25px !important; } .margin-top--30 { margin-top: -30px !important; } .margin-top-0 { margin-top: 0px !important; } .margin-top-1 { margin-top: 1px !important; } .margin-top-2 { margin-top: 2px !important; } .margin-top-3 { margin-top: 3px !important; } .margin-top-4 { margin-top: 4px !important; } .margin-top-5 { margin-top: 5px !important; } .margin-top-6 { margin-top: 6px !important; } .margin-top-7 { margin-top: 7px !important; } .margin-top-8 { margin-top: 8px !important; } .margin-top-9 { margin-top: 9px !important; } .margin-top-11 { margin-top: 11px !important; } .margin-top-12 { margin-top: 12px !important; } .margin-top-13 { margin-top: 13px !important; } .margin-top-14 { margin-top: 14px !important; } .margin-top-10 { margin-top: 10px !important; } .margin-top-15 { margin-top: 15px !important; } .margin-top-20 { margin-top: 20px !important; } .margin-top-23 { margin-top: 20px !important; } .margin-top-25 { margin-top: 25px !important; } .margin-top-30 { margin-top: 30px !important; } .margin-top-35 { margin-top: 35px !important; } .margin-top-40 { margin-top: 40px !important; } .margin-top-45 { margin-top: 45px !important; } .margin-top-50 { margin-top: 50px !important; } .margin-top-55 { margin-top: 55px !important; } .margin-top-60 { margin-top: 60px !important; } .margin-top-65 { margin-top: 65px !important; } .margin-top-70 { margin-top: 70px !important; } .margin-top-75 { margin-top: 75px !important; } .margin-top-80 { margin-top: 80px !important; } .margin-top-85 { margin-top: 85px !important; } .margin-top-90 { margin-top: 90px !important; } .margin-top-95 { margin-top: 95px !important; } .margin-top-100 { margin-top: 100px !important; } .margin-top-105 { margin-top: 105px !important; } .margin-top-110 { margin-top: 110px !important; } .margin-top-115 { margin-top: 115px !important; } .margin-top-120 { margin-top: 120px !important; } .margin-top-125 { margin-top: 125px !important; } .margin-top-130 { margin-top: 130px !important; } .margin-top-135 { margin-top: 135px !important; } .margin-top-140 { margin-top: 140px !important; } .margin-top-145 { margin-top: 145px !important; } .margin-top-150 { margin-top: 150px !important; } .margin-top-155 { margin-top: 155px !important; } .margin-top-160 { margin-top: 160px !important; } .margin-top-165 { margin-top: 165px !important; } .margin-top-170 { margin-top: 170px !important; } .margin-top-175 { margin-top: 175px !important; } .margin-top-180 { margin-top: 180px !important; } .margin-top-185 { margin-top: 185px !important; } .margin-top-190 { margin-top: 190px !important; } .margin-top-195 { margin-top: 195px !important; } .margin-top-200 { margin-top: 200px !important; } .margin-top-205 { margin-top: 205px !important; } .margin-top-210 { margin-top: 210px !important; } .margin-top-215 { margin-top: 215px !important; } /* Continuação MARGIN-TOP (220 → 300) */ .margin-top-220 { margin-top: 220px !important; } .margin-top-225 { margin-top: 225px !important; } .margin-top-230 { margin-top: 230px !important; } .margin-top-235 { margin-top: 235px !important; } .margin-top-240 { margin-top: 240px !important; } .margin-top-245 { margin-top: 245px !important; } .margin-top-250 { margin-top: 250px !important; } .margin-top-255 { margin-top: 255px !important; } .margin-top-260 { margin-top: 260px !important; } .margin-top-265 { margin-top: 265px !important; } .margin-top-270 { margin-top: 270px !important; } .margin-top-275 { margin-top: 275px !important; } .margin-top-280 { margin-top: 280px !important; } .margin-top-285 { margin-top: 285px !important; } .margin-top-290 { margin-top: 290px !important; } .margin-top-295 { margin-top: 295px !important; } .margin-top-300 { margin-top: 300px !important; } /* ----------- PARTE DE MARGIN-BOTTOM ------------- */ .margin-bottom-0 { margin-bottom: 0px !important; } .margin-bottom-1 { margin-bottom: 1px !important; } .margin-bottom-2 { margin-bottom: 2px !important; } .margin-bottom-3 { margin-bottom: 3px !important; } .margin-bottom-4 { margin-bottom: 4px !important; } .margin-bottom-5 { margin-bottom: 5px !important; } .margin-bottom-6 { margin-bottom: 6px !important; } .margin-bottom-7 { margin-bottom: 7px !important; } .margin-bottom-8 { margin-bottom: 8px !important; } .margin-bottom-9 { margin-bottom: 9px !important; } .margin-bottom-10 { margin-bottom: 10px !important; } .margin-bottom-15 { margin-bottom: 15px !important; } .margin-bottom-20 { margin-bottom: 20px !important; } .margin-bottom-25 { margin-bottom: 25px !important; } .margin-bottom-30 { margin-bottom: 30px !important; } .margin-bottom-35 { margin-bottom: 35px !important; } .margin-bottom-40 { margin-bottom: 40px !important; } .margin-bottom-45 { margin-bottom: 45px !important; } .margin-bottom-50 { margin-bottom: 50px !important; } .margin-bottom-55 { margin-bottom: 55px !important; } .margin-bottom-60 { margin-bottom: 60px !important; } .margin-bottom-65 { margin-bottom: 65px !important; } .margin-bottom-70 { margin-bottom: 70px !important; } .margin-bottom-75 { margin-bottom: 75px !important; } .margin-bottom-80 { margin-bottom: 80px !important; } .margin-bottom-85 { margin-bottom: 85px !important; } .margin-bottom-90 { margin-bottom: 90px !important; } .margin-bottom-95 { margin-bottom: 95px !important; } .margin-bottom-100 { margin-bottom: 100px !important; } .margin-bottom-105 { margin-bottom: 105px !important; } .margin-bottom-110 { margin-bottom: 110px !important; } .margin-bottom-115 { margin-bottom: 115px !important; } .margin-bottom-120 { margin-bottom: 120px !important; } .margin-bottom-125 { margin-bottom: 125px !important; } .margin-bottom-130 { margin-bottom: 130px !important; } .margin-bottom-135 { margin-bottom: 135px !important; } .margin-bottom-140 { margin-bottom: 140px !important; } .margin-bottom-145 { margin-bottom: 145px !important; } .margin-bottom-150 { margin-bottom: 150px !important; } .margin-bottom-155 { margin-bottom: 155px !important; } .margin-bottom-160 { margin-bottom: 160px !important; } .margin-bottom-165 { margin-bottom: 165px !important; } .margin-bottom-170 { margin-bottom: 170px !important; } .margin-bottom-175 { margin-bottom: 175px !important; } .margin-bottom-180 { margin-bottom: 180px !important; } .margin-bottom-185 { margin-bottom: 185px !important; } .margin-bottom-190 { margin-bottom: 190px !important; } .margin-bottom-195 { margin-bottom: 195px !important; } .margin-bottom-200 { margin-bottom: 200px !important; } /* ----------- PARTE DE MARGIN-RIGHT ------------- */ .margin-right-0 { margin-right: 0px !important; } .margin-right-5 { margin-right: 5px !important; } .margin-right-10 { margin-right: 10px !important; } .margin-right-15 { margin-right: 15px !important; } .margin-right-20 { margin-right: 20px !important; } .margin-right-25 { margin-right: 25px !important; } .margin-right-30 { margin-right: 30px !important; } .margin-right-35 { margin-right: 35px !important; } .margin-right-40 { margin-right: 40px !important; } .margin-right-45 { margin-right: 45px !important; } .margin-right-50 { margin-right: 50px !important; } .margin-right-55 { margin-right: 55px !important; } .margin-right-60 { margin-right: 60px !important; } .margin-right-65 { margin-right: 65px !important; } .margin-right-70 { margin-right: 70px !important; } .margin-right-75 { margin-right: 75px !important; } .margin-right-80 { margin-right: 80px !important; } .margin-right-85 { margin-right: 85px !important; } .margin-right-90 { margin-right: 90px !important; } .margin-right-95 { margin-right: 95px !important; } .margin-right-100 { margin-right: 100px !important; } .margin-right-105 { margin-right: 105px !important; } .margin-right-110 { margin-right: 110px !important; } .margin-right-115 { margin-right: 115px !important; } .margin-right-120 { margin-right: 120px !important; } .margin-right-125 { margin-right: 125px !important; } .margin-right-130 { margin-right: 130px !important; } .margin-right-135 { margin-right: 135px !important; } .margin-right-140 { margin-right: 140px !important; } .margin-right-145 { margin-right: 145px !important; } .margin-right-150 { margin-right: 150px !important; } .margin-right-155 { margin-right: 155px !important; } .margin-right-160 { margin-right: 160px !important; } .margin-right-165 { margin-right: 165px !important; } .margin-right-170 { margin-right: 170px !important; } .margin-right-175 { margin-right: 175px !important; } .margin-right-180 { margin-right: 180px !important; } .margin-right-185 { margin-right: 185px !important; } .margin-right-190 { margin-right: 190px !important; } .margin-right-195 { margin-right: 195px !important; } .margin-right-200 { margin-right: 200px !important; } /* Negativos úteis */ .margin-right--5 { margin-right: -5px !important; } .margin-right--10 { margin-right: -10px !important; } .margin-right--15 { margin-right: -15px !important; } .margin-right--20 { margin-right: -20px !important; } .margin-right--25 { margin-right: -25px !important; } .margin-right--30 { margin-right: -30px !important; } /* ----------- PARTE DE MARGIN-LEFT ------------- */ .margin-left--5 { margin-left: -5px !important; } .margin-left--10 { margin-left: -10px !important; } .margin-left--15 { margin-left: -15px !important; } .margin-left--20 { margin-left: -20px !important; } .margin-left--25 { margin-left: -25px !important; } .margin-left--30 { margin-left: -30px !important; } .margin-left-0 { margin-left: 0px !important; } .margin-left-5 { margin-left: 5px !important; } .margin-left-10 { margin-left: 10px !important; } .margin-left-15 { margin-left: 15px !important; } .margin-left-20 { margin-left: 20px !important; } .margin-left-25 { margin-left: 25px !important; } .margin-left-30 { margin-left: 30px !important; } .margin-left-35 { margin-left: 35px !important; } .margin-left-40 { margin-left: 40px !important; } .margin-left-45 { margin-left: 45px !important; } .margin-left-50 { margin-left: 50px !important; } .margin-left-55 { margin-left: 55px !important; } .margin-left-60 { margin-left: 60px !important; } .margin-left-65 { margin-left: 65px !important; } .margin-left-70 { margin-left: 70px !important; } .margin-left-75 { margin-left: 75px !important; } .margin-left-80 { margin-left: 80px !important; } .margin-left-85 { margin-left: 85px !important; } .margin-left-90 { margin-left: 90px !important; } .margin-left-95 { margin-left: 95px !important; } .margin-left-100 { margin-left: 100px !important; } .margin-left-105 { margin-left: 105px !important; } .margin-left-110 { margin-left: 110px !important; } .margin-left-115 { margin-left: 115px !important; } .margin-left-120 { margin-left: 120px !important; } .margin-left-125 { margin-left: 125px !important; } .margin-left-130 { margin-left: 130px !important; } .margin-left-135 { margin-left: 135px !important; } .margin-left-140 { margin-left: 140px !important; } .margin-left-145 { margin-left: 145px !important; } .margin-left-150 { margin-left: 150px !important; } .margin-left-155 { margin-left: 155px !important; } .margin-left-160 { margin-left: 160px !important; } .margin-left-165 { margin-left: 165px !important; } .margin-left-170 { margin-left: 170px !important; } .margin-left-175 { margin-left: 175px !important; } .margin-left-180 { margin-left: 180px !important; } .margin-left-185 { margin-left: 185px !important; } .margin-left-190 { margin-left: 190px !important; } .margin-left-195 { margin-left: 195px !important; } .margin-left-200 { margin-left: 200px !important; } /* ----------- COMPLEMENTO: MARGENS, PADDINGS E GAP (EXPANDIDO) ------------- */ /* Margin Top — finer + extended range */ .margin-top-6 { margin-top: 6px !important; } .margin-top-7 { margin-top: 7px !important; } .margin-top-8 { margin-top: 8px !important; } .margin-top-9 { margin-top: 9px !important; } .margin-top-11 { margin-top: 11px !important; } .margin-top-12 { margin-top: 12px !important; } .margin-top-13 { margin-top: 13px !important; } .margin-top-14 { margin-top: 14px !important; } .margin-top-220 { margin-top: 220px !important; } .margin-top-225 { margin-top: 225px !important; } .margin-top-230 { margin-top: 230px !important; } .margin-top-235 { margin-top: 235px !important; } .margin-top-240 { margin-top: 240px !important; } .margin-top-245 { margin-top: 245px !important; } .margin-top-250 { margin-top: 250px !important; } .margin-top-255 { margin-top: 255px !important; } .margin-top-260 { margin-top: 260px !important; } .margin-top-265 { margin-top: 265px !important; } .margin-top-270 { margin-top: 270px !important; } .margin-top-275 { margin-top: 275px !important; } .margin-top-280 { margin-top: 280px !important; } .margin-top-285 { margin-top: 285px !important; } .margin-top-290 { margin-top: 290px !important; } .margin-top-295 { margin-top: 295px !important; } .margin-top-300 { margin-top: 300px !important; } /* Margin Bottom — fill gaps + extend */ .margin-bottom-11 { margin-bottom: 11px !important; } .margin-bottom-12 { margin-bottom: 12px !important; } .margin-bottom-13 { margin-bottom: 13px !important; } .margin-bottom-14 { margin-bottom: 14px !important; } .margin-bottom-105 { margin-bottom: 105px !important; } .margin-bottom-110 { margin-bottom: 110px !important; } .margin-bottom-115 { margin-bottom: 115px !important; } .margin-bottom-120 { margin-bottom: 120px !important; } .margin-bottom-125 { margin-bottom: 125px !important; } .margin-bottom-130 { margin-bottom: 130px !important; } .margin-bottom-135 { margin-bottom: 135px !important; } .margin-bottom-140 { margin-bottom: 140px !important; } .margin-bottom-145 { margin-bottom: 145px !important; } .margin-bottom-150 { margin-bottom: 150px !important; } .margin-bottom-155 { margin-bottom: 155px !important; } .margin-bottom-160 { margin-bottom: 160px !important; } .margin-bottom-165 { margin-bottom: 165px !important; } .margin-bottom-170 { margin-bottom: 170px !important; } .margin-bottom-175 { margin-bottom: 175px !important; } .margin-bottom-180 { margin-bottom: 180px !important; } .margin-bottom-185 { margin-bottom: 185px !important; } .margin-bottom-190 { margin-bottom: 190px !important; } .margin-bottom-195 { margin-bottom: 195px !important; } .margin-bottom-200 { margin-bottom: 200px !important; } /* Margin Right — add 0 and extend */ .margin-right-0 { margin-right: 0px !important; } .margin-right-105 { margin-right: 105px !important; } .margin-right-110 { margin-right: 110px !important; } .margin-right-115 { margin-right: 115px !important; } .margin-right-120 { margin-right: 120px !important; } .margin-right-125 { margin-right: 125px !important; } .margin-right-130 { margin-right: 130px !important; } .margin-right-135 { margin-right: 135px !important; } .margin-right-140 { margin-right: 140px !important; } .margin-right-145 { margin-right: 145px !important; } .margin-right-150 { margin-right: 150px !important; } .margin-right-155 { margin-right: 155px !important; } .margin-right-160 { margin-right: 160px !important; } .margin-right-165 { margin-right: 165px !important; } .margin-right-170 { margin-right: 170px !important; } .margin-right-175 { margin-right: 175px !important; } .margin-right-180 { margin-right: 180px !important; } .margin-right-185 { margin-right: 185px !important; } .margin-right-190 { margin-right: 190px !important; } .margin-right-195 { margin-right: 195px !important; } .margin-right-200 { margin-right: 200px !important; } /* Right negative (consistente com .margin-top--N e .margin-left--N) */ .margin-right--5 { margin-right: -5px !important; } .margin-right--10 { margin-right: -10px !important; } .margin-right--15 { margin-right: -15px !important; } .margin-right--20 { margin-right: -20px !important; } .margin-right--25 { margin-right: -25px !important; } .margin-right--30 { margin-right: -30px !important; } /* Margin Left — extend + negativos úteis */ .margin-left-105 { margin-left: 105px !important; } .margin-left-110 { margin-left: 110px !important; } .margin-left-115 { margin-left: 115px !important; } .margin-left-120 { margin-left: 120px !important; } .margin-left-125 { margin-left: 125px !important; } .margin-left-130 { margin-left: 130px !important; } .margin-left-135 { margin-left: 135px !important; } .margin-left-140 { margin-left: 140px !important; } .margin-left-145 { margin-left: 145px !important; } .margin-left-150 { margin-left: 150px !important; } .margin-left-155 { margin-left: 155px !important; } .margin-left-160 { margin-left: 160px !important; } .margin-left-165 { margin-left: 165px !important; } .margin-left-170 { margin-left: 170px !important; } .margin-left-175 { margin-left: 175px !important; } .margin-left-180 { margin-left: 180px !important; } .margin-left-185 { margin-left: 185px !important; } .margin-left-190 { margin-left: 190px !important; } .margin-left-195 { margin-left: 195px !important; } .margin-left-200 { margin-left: 200px !important; } .margin-left--10 { margin-left: -10px !important; } .margin-left--15 { margin-left: -15px !important; } .margin-left--20 { margin-left: -20px !important; } .margin-left--25 { margin-left: -25px !important; } .margin-left--30 { margin-left: -30px !important; } /* ----------- PARTE DE MARGIN (SHORTHAND) ------------- */ /* Margin shorthand — todos os lados */ .margin-0 { margin: 0px !important; } .margin-5 { margin: 5px !important; } .margin-10 { margin: 10px !important; } .margin-15 { margin: 15px !important; } .margin-20 { margin: 20px !important; } .margin-25 { margin: 25px !important; } .margin-30 { margin: 30px !important; } .margin-35 { margin: 35px !important; } .margin-40 { margin: 40px !important; } .margin-45 { margin: 45px !important; } .margin-50 { margin: 50px !important; } .margin-55 { margin: 55px !important; } .margin-60 { margin: 60px !important; } .margin-65 { margin: 65px !important; } .margin-70 { margin: 70px !important; } .margin-75 { margin: 75px !important; } .margin-80 { margin: 80px !important; } .margin-85 { margin: 85px !important; } .margin-90 { margin: 90px !important; } .margin-95 { margin: 95px !important; } .margin-100 { margin: 100px !important; } .margin-105 { margin: 105px !important; } .margin-110 { margin: 110px !important; } .margin-115 { margin: 115px !important; } .margin-120 { margin: 120px !important; } .margin-125 { margin: 125px !important; } .margin-130 { margin: 130px !important; } .margin-135 { margin: 135px !important; } .margin-140 { margin: 140px !important; } .margin-145 { margin: 145px !important; } .margin-150 { margin: 150px !important; } .margin-155 { margin: 155px !important; } .margin-160 { margin: 160px !important; } .margin-165 { margin: 165px !important; } .margin-170 { margin: 170px !important; } .margin-175 { margin: 175px !important; } .margin-180 { margin: 180px !important; } .margin-185 { margin: 185px !important; } .margin-190 { margin: 190px !important; } .margin-195 { margin: 195px !important; } .margin-200 { margin: 200px !important; } /* ----------- PARTE DE PADDING (ALL) ------------- */ /* Padding — todos os lados */ .padding-5 { padding: 5px !important; } .padding-10 { padding: 10px !important; } .padding-15 { padding: 15px !important; } .padding-20 { padding: 20px !important; } .padding-25 { padding: 25px !important; } .padding-30 { padding: 30px !important; } .padding-35 { padding: 35px !important; } .padding-40 { padding: 40px !important; } .padding-45 { padding: 45px !important; } .padding-50 { padding: 50px !important; } .padding-55 { padding: 55px !important; } .padding-60 { padding: 60px !important; } .padding-65 { padding: 65px !important; } .padding-70 { padding: 70px !important; } .padding-75 { padding: 75px !important; } .padding-80 { padding: 80px !important; } .padding-85 { padding: 85px !important; } .padding-90 { padding: 90px !important; } .padding-95 { padding: 95px !important; } .padding-100 { padding: 100px !important; } .padding-105 { padding: 105px !important; } .padding-110 { padding: 110px !important; } .padding-115 { padding: 115px !important; } .padding-120 { padding: 120px !important; } .padding-125 { padding: 125px !important; } .padding-130 { padding: 130px !important; } .padding-135 { padding: 135px !important; } .padding-140 { padding: 140px !important; } .padding-145 { padding: 145px !important; } .padding-150 { padding: 150px !important; } .padding-155 { padding: 155px !important; } .padding-160 { padding: 160px !important; } .padding-165 { padding: 165px !important; } .padding-170 { padding: 170px !important; } .padding-175 { padding: 175px !important; } .padding-180 { padding: 180px !important; } .padding-185 { padding: 185px !important; } .padding-190 { padding: 190px !important; } .padding-195 { padding: 195px !important; } .padding-200 { padding: 200px !important; } /* ----------- PARTE DE PADDING-TOP ------------- */ /* Padding Top */ .padding-top-5 { padding-top: 5px !important; } .padding-top-10 { padding-top: 10px !important; } .padding-top-15 { padding-top: 15px !important; } .padding-top-20 { padding-top: 20px !important; } .padding-top-25 { padding-top: 25px !important; } .padding-top-30 { padding-top: 30px !important; } .padding-top-35 { padding-top: 35px !important; } .padding-top-40 { padding-top: 40px !important; } .padding-top-45 { padding-top: 45px !important; } .padding-top-50 { padding-top: 50px !important; } .padding-top-55 { padding-top: 55px !important; } .padding-top-60 { padding-top: 60px !important; } .padding-top-65 { padding-top: 65px !important; } .padding-top-70 { padding-top: 70px !important; } .padding-top-75 { padding-top: 75px !important; } .padding-top-80 { padding-top: 80px !important; } .padding-top-85 { padding-top: 85px !important; } .padding-top-90 { padding-top: 90px !important; } .padding-top-95 { padding-top: 95px !important; } .padding-top-100 { padding-top: 100px !important; } .padding-top-105 { padding-top: 105px !important; } .padding-top-110 { padding-top: 110px !important; } .padding-top-115 { padding-top: 115px !important; } .padding-top-120 { padding-top: 120px !important; } .padding-top-125 { padding-top: 125px !important; } .padding-top-130 { padding-top: 130px !important; } .padding-top-135 { padding-top: 135px !important; } .padding-top-140 { padding-top: 140px !important; } .padding-top-145 { padding-top: 145px !important; } .padding-top-150 { padding-top: 150px !important; } .padding-top-155 { padding-top: 155px !important; } .padding-top-160 { padding-top: 160px !important; } .padding-top-165 { padding-top: 165px !important; } .padding-top-170 { padding-top: 170px !important; } .padding-top-175 { padding-top: 175px !important; } .padding-top-180 { padding-top: 180px !important; } .padding-top-185 { padding-top: 185px !important; } .padding-top-190 { padding-top: 190px !important; } .padding-top-195 { padding-top: 195px !important; } .padding-top-200 { padding-top: 200px !important; } /* ----------- PARTE DE PADDING-RIGHT ------------- */ /* Padding Right */ .padding-right-0 { padding-right: 0px !important; } .padding-right-5 { padding-right: 5px !important; } .padding-right-10 { padding-right: 10px !important; } .padding-right-15 { padding-right: 15px !important; } .padding-right-20 { padding-right: 20px !important; } .padding-right-25 { padding-right: 25px !important; } .padding-right-30 { padding-right: 30px !important; } .padding-right-35 { padding-right: 35px !important; } .padding-right-40 { padding-right: 40px !important; } .padding-right-45 { padding-right: 45px !important; } .padding-right-50 { padding-right: 50px !important; } .padding-right-55 { padding-right: 55px !important; } .padding-right-60 { padding-right: 60px !important; } .padding-right-65 { padding-right: 65px !important; } .padding-right-70 { padding-right: 70px !important; } .padding-right-75 { padding-right: 75px !important; } .padding-right-80 { padding-right: 80px !important; } .padding-right-85 { padding-right: 85px !important; } .padding-right-90 { padding-right: 90px !important; } .padding-right-95 { padding-right: 95px !important; } .padding-right-100 { padding-right: 100px !important; } .padding-right-105 { padding-right: 105px !important; } .padding-right-110 { padding-right: 110px !important; } .padding-right-115 { padding-right: 115px !important; } .padding-right-120 { padding-right: 120px !important; } .padding-right-125 { padding-right: 125px !important; } .padding-right-130 { padding-right: 130px !important; } .padding-right-135 { padding-right: 135px !important; } .padding-right-140 { padding-right: 140px !important; } .padding-right-145 { padding-right: 145px !important; } .padding-right-150 { padding-right: 150px !important; } .padding-right-155 { padding-right: 155px !important; } .padding-right-160 { padding-right: 160px !important; } .padding-right-165 { padding-right: 165px !important; } .padding-right-170 { padding-right: 170px !important; } .padding-right-175 { padding-right: 175px !important; } .padding-right-180 { padding-right: 180px !important; } .padding-right-185 { padding-right: 185px !important; } .padding-right-190 { padding-right: 190px !important; } .padding-right-195 { padding-right: 195px !important; } .padding-right-200 { padding-right: 200px !important; } /* ----------- PARTE DE PADDING-BOTTOM ------------- */ /* Padding Bottom */ .padding-bottom-0 { padding-bottom: 0px !important; } .padding-bottom-5 { padding-bottom: 5px !important; } .padding-bottom-10 { padding-bottom: 10px !important; } .padding-bottom-15 { padding-bottom: 15px !important; } .padding-bottom-20 { padding-bottom: 20px !important; } .padding-bottom-25 { padding-bottom: 25px !important; } .padding-bottom-30 { padding-bottom: 30px !important; } .padding-bottom-35 { padding-bottom: 35px !important; } .padding-bottom-40 { padding-bottom: 40px !important; } .padding-bottom-45 { padding-bottom: 45px !important; } .padding-bottom-50 { padding-bottom: 50px !important; } .padding-bottom-55 { padding-bottom: 55px !important; } .padding-bottom-60 { padding-bottom: 60px !important; } .padding-bottom-65 { padding-bottom: 65px !important; } .padding-bottom-70 { padding-bottom: 70px !important; } .padding-bottom-75 { padding-bottom: 75px !important; } .padding-bottom-80 { padding-bottom: 80px !important; } .padding-bottom-85 { padding-bottom: 85px !important; } .padding-bottom-90 { padding-bottom: 90px !important; } .padding-bottom-95 { padding-bottom: 95px !important; } .padding-bottom-100 { padding-bottom: 100px !important; } .padding-bottom-105 { padding-bottom: 105px !important; } .padding-bottom-110 { padding-bottom: 110px !important; } .padding-bottom-115 { padding-bottom: 115px !important; } .padding-bottom-120 { padding-bottom: 120px !important; } .padding-bottom-125 { padding-bottom: 125px !important; } .padding-bottom-130 { padding-bottom: 130px !important; } .padding-bottom-135 { padding-bottom: 135px !important; } .padding-bottom-140 { padding-bottom: 140px !important; } .padding-bottom-145 { padding-bottom: 145px !important; } .padding-bottom-150 { padding-bottom: 150px !important; } .padding-bottom-155 { padding-bottom: 155px !important; } .padding-bottom-160 { padding-bottom: 160px !important; } .padding-bottom-165 { padding-bottom: 165px !important; } .padding-bottom-170 { padding-bottom: 170px !important; } .padding-bottom-175 { padding-bottom: 175px !important; } .padding-bottom-180 { padding-bottom: 180px !important; } .padding-bottom-185 { padding-bottom: 185px !important; } .padding-bottom-190 { padding-bottom: 190px !important; } .padding-bottom-195 { padding-bottom: 195px !important; } .padding-bottom-200 { padding-bottom: 200px !important; } /* ----------- PARTE DE PADDING-LEFT ------------- */ /* Padding Left (evitando duplicar 20) */ .padding-left-0 { padding-left: 0px !important; } .padding-left-5 { padding-left: 5px !important; } .padding-left-10 { padding-left: 10px !important; } .padding-left-15 { padding-left: 15px !important; } /* .padding-left-20 já existe acima */ .padding-left-25 { padding-left: 25px !important; } .padding-left-30 { padding-left: 30px !important; } .padding-left-35 { padding-left: 35px !important; } .padding-left-40 { padding-left: 40px !important; } .padding-left-45 { padding-left: 45px !important; } .padding-left-50 { padding-left: 50px !important; } .padding-left-55 { padding-left: 55px !important; } .padding-left-60 { padding-left: 60px !important; } .padding-left-65 { padding-left: 65px !important; } .padding-left-70 { padding-left: 70px !important; } .padding-left-75 { padding-left: 75px !important; } .padding-left-80 { padding-left: 80px !important; } .padding-left-85 { padding-left: 85px !important; } .padding-left-90 { padding-left: 90px !important; } .padding-left-95 { padding-left: 95px !important; } .padding-left-100 { padding-left: 100px !important; } .padding-left-105 { padding-left: 105px !important; } .padding-left-110 { padding-left: 110px !important; } .padding-left-115 { padding-left: 115px !important; } .padding-left-120 { padding-left: 120px !important; } .padding-left-125 { padding-left: 125px !important; } .padding-left-130 { padding-left: 130px !important; } .padding-left-135 { padding-left: 135px !important; } .padding-left-140 { padding-left: 140px !important; } .padding-left-145 { padding-left: 145px !important; } .padding-left-150 { padding-left: 150px !important; } .padding-left-155 { padding-left: 155px !important; } .padding-left-160 { padding-left: 160px !important; } .padding-left-165 { padding-left: 165px !important; } .padding-left-170 { padding-left: 170px !important; } .padding-left-175 { padding-left: 175px !important; } .padding-left-180 { padding-left: 180px !important; } .padding-left-185 { padding-left: 185px !important; } .padding-left-190 { padding-left: 190px !important; } .padding-left-195 { padding-left: 195px !important; } .padding-left-200 { padding-left: 200px !important; } /* ----------- PARTE DE CURSOR E TEXTO ------------- */ .cursor-text { cursor: text !important; } .cursor-pointer { cursor: pointer !important; } .cursor-default { cursor: default !important; } .negrito { font-family: 'Poppins-Bold' !important; } .font-size-1_3rem { font-size: 1.3rem !important; } .font-size-12px { font-size: 12px !important; } .botao-fechar-flyout { position: absolute !important; top: 8px !important; /* Ajuste conforme quiser */ right: 8px !important; /* Ajuste conforme quiser */ z-index: 9999 !important; /* Garante que fique sobreposto */ } /* ----------- PARTE DE ALTURA ------------- */ .height-90perc { height: 90% !important; } .height-100perc { height: 100% !important; } .height-56 { height: 56px !important; } .height-190 { height: 190px !important; } .height-660 { height: 660px !important; } .height-605 { height: 605px !important; } .max-height-100perc { max-height: 100% !important; } .max-height-35 { max-height: 35px !important; } .max-height-36 { max-height: 36px !important; } .min-height-5 { min-height: 5px !important; } .min-height-10 { min-height: 10px !important; } .min-height-15 { min-height: 15px !important; } .min-height-20 { min-height: 20px !important; } .min-height-25 { min-height: 25px !important; } .min-height-30 { min-height: 30px !important; } .min-height-35 { min-height: 35px !important; } .min-height-40 { min-height: 40px !important; } .min-height-45 { min-height: 45px !important; } .min-height-50 { min-height: 50px !important; } .min-height-55 { min-height: 55px !important; } .min-height-60 { min-height: 60px !important; } .min-height-65 { min-height: 65px !important; } .min-height-70 { min-height: 70px !important; } .min-height-75 { min-height: 75px !important; } .min-height-80 { min-height: 80px !important; } .min-height-85 { min-height: 85px !important; } .min-height-90 { min-height: 90px !important; } .min-height-95 { min-height: 95px !important; } .min-height-100 { min-height: 100px !important; } .min-height-560 { min-height: 560px !important; } .max-height-573 { max-height: 573px !important; } /* ----------- FINAL PARTE DE ALTURA ------------- */ /* ----------- PARTE DE LARGURA ------------- */ .min-width-50 { min-width: 50px !important; } .min-width-60 { min-width: 60px !important; } .min-width-70 { min-width: 70px !important; } .min-width-80 { min-width: 80px !important; } .min-width-90 { min-width: 90px !important; } .min-width-100 { min-width: 100px !important; } .min-width-110 { min-width: 110px !important; } .min-width-120 { min-width: 120px !important; } .min-width-130 { min-width: 130px !important; } .min-width-140 { min-width: 140px !important; } .min-width-150 { min-width: 150px !important; } .min-width-160 { min-width: 160px !important; } .min-width-164 { min-width: 164px !important; } .min-width-170 { min-width: 170px !important; } .min-width-180 { min-width: 180px !important; } .min-width-190 { min-width: 190px !important; } .min-width-200 { min-width: 200px !important; } .min-width-210 { min-width: 210px !important; } .min-width-220 { min-width: 220px !important; } .min-width-230 { min-width: 230px !important; } .min-width-240 { min-width: 240px !important; } .min-width-250 { min-width: 250px !important; } .min-width-260 { min-width: 260px !important; } .min-width-270 { min-width: 270px !important; } .min-width-280 { min-width: 280px !important; } .min-width-290 { min-width: 290px !important; } .min-width-300 { min-width: 300px !important; } .min-width-310 { min-width: 310px !important; } .min-width-320 { min-width: 320px !important; } .min-width-330 { min-width: 330px !important; } .min-width-340 { min-width: 340px !important; } .min-width-350 { min-width: 350px !important; } .min-width-360 { min-width: 360px !important; } .min-width-370 { min-width: 370px !important; } .min-width-380 { min-width: 380px !important; } .min-width-390 { min-width: 390px !important; } .min-width-400 { min-width: 400px !important; } .min-width-410 { min-width: 410px !important; } .min-width-420 { min-width: 420px !important; } .min-width-430 { min-width: 430px !important; } .min-width-440 { min-width: 440px !important; } .min-width-450 { min-width: 450px !important; } .min-width-460 { min-width: 460px !important; } .min-width-470 { min-width: 470px !important; } .min-width-480 { min-width: 480px !important; } .min-width-490 { min-width: 490px !important; } .min-width-500 { min-width: 500px !important; } .min-width-510 { min-width: 510px !important; } .min-width-520 { min-width: 520px !important; } .min-width-530 { min-width: 530px !important; } .min-width-540 { min-width: 540px !important; } .min-width-550 { min-width: 550px !important; } .min-width-560 { min-width: 560px !important; } .min-width-570 { min-width: 570px !important; } .min-width-580 { min-width: 580px !important; } .min-width-590 { min-width: 590px !important; } .min-width-600 { min-width: 600px !important; } .min-width-610 { min-width: 610px !important; } .min-width-620 { min-width: 620px !important; } .min-width-630 { min-width: 630px !important; } .min-width-640 { min-width: 640px !important; } .min-width-650 { min-width: 650px !important; } .min-width-660 { min-width: 660px !important; } .min-width-670 { min-width: 670px !important; } .min-width-680 { min-width: 680px !important; } .min-width-690 { min-width: 690px !important; } .min-width-700 { min-width: 700px !important; } .min-width-710 { min-width: 710px !important; } .min-width-720 { min-width: 720px !important; } .min-width-730 { min-width: 730px !important; } .min-width-740 { min-width: 740px !important; } .min-width-750 { min-width: 750px !important; } .min-width-760 { min-width: 760px !important; } .min-width-770 { min-width: 770px !important; } .min-width-780 { min-width: 780px !important; } .min-width-790 { min-width: 790px !important; } .min-width-800 { min-width: 800px !important; } .min-width-810 { min-width: 810px !important; } .min-width-820 { min-width: 820px !important; } .min-width-830 { min-width: 830px !important; } .min-width-840 { min-width: 840px !important; } .min-width-850 { min-width: 850px !important; } .min-width-860 { min-width: 860px !important; } .min-width-870 { min-width: 870px !important; } .min-width-880 { min-width: 880px !important; } .min-width-890 { min-width: 890px !important; } .min-width-900 { min-width: 900px !important; } /* ----------- PARTE DE WIDTH ------------- */ .width-100perc { width: 100% !important; } .width-10 { width: 10px !important; } .width-20 { width: 20px !important; } .width-30 { width: 30px !important; } .width-40 { width: 40px !important; } .width-50 { width: 50px !important; } .width-60 { width: 60px !important; } .width-70 { width: 70px !important; } .width-80 { width: 80px !important; } .width-90 { width: 90px !important; } .width-100 { width: 100px !important; } .width-110 { width: 110px !important; } .width-120 { width: 120px !important; } .width-130 { width: 130px !important; } .width-140 { width: 140px !important; } .width-150 { width: 150px !important; } .width-160 { width: 160px !important; } .width-170 { width: 170px !important; } .width-180 { width: 180px !important; } .width-190 { width: 190px !important; } .width-200 { width: 200px !important; } .width-210 { width: 210px !important; } .width-220 { width: 220px !important; } .width-230 { width: 230px !important; } .width-240 { width: 240px !important; } .width-250 { width: 250px !important; } .width-260 { width: 260px !important; } .width-270 { width: 270px !important; } .width-280 { width: 280px !important; } .width-290 { width: 290px !important; } .width-300 { width: 300px !important; } .width-900 { width: 900px !important; } .width-1000 { width: 1000px !important; } .maxwidth-95pc { max-width: 95% !important; } .maxheight-95pc { max-height: 95% !important; } /* ----------- POSITION ABSOLUTE ------------- */ /* Utilities for absolutely positioned offsets: 0-20 (step 1), 25-200 (step 5) */ .position-absolute-0 { position: absolute; top: 0px; right: 0px; } .position-absolute-1 { position: absolute; top: 1px; right: 1px; } .position-absolute-2 { position: absolute; top: 2px; right: 2px; } .position-absolute-3 { position: absolute; top: 3px; right: 3px; } .position-absolute-4 { position: absolute; top: 4px; right: 4px; } .position-absolute-5 { position: absolute; top: 5px; right: 5px; } .position-absolute-6 { position: absolute; top: 6px; right: 6px; } .position-absolute-7 { position: absolute; top: 7px; right: 7px; } .position-absolute-8 { position: absolute; top: 8px; right: 8px; } .position-absolute-9 { position: absolute; top: 9px; right: 9px; } .position-absolute-10 { position: absolute; top: 10px; right: 10px; } .position-absolute-11 { position: absolute; top: 11px; right: 11px; } .position-absolute-12 { position: absolute; top: 12px; right: 12px; } .position-absolute-13 { position: absolute; top: 13px; right: 13px; } .position-absolute-14 { position: absolute; top: 14px; right: 14px; } .position-absolute-15 { position: absolute; top: 15px; right: 15px; } .position-absolute-16 { position: absolute; top: 16px; right: 16px; } .position-absolute-17 { position: absolute; top: 17px; right: 17px; } .position-absolute-18 { position: absolute; top: 18px; right: 18px; } .position-absolute-19 { position: absolute; top: 19px; right: 19px; } .position-absolute-20 { position: absolute; top: 20px; right: 20px; } .position-absolute-25 { position: absolute; top: 25px; right: 25px; } .position-absolute-30 { position: absolute; top: 30px; right: 30px; } .position-absolute-35 { position: absolute; top: 35px; right: 35px; } .position-absolute-40 { position: absolute; top: 40px; right: 40px; } .position-absolute-45 { position: absolute; top: 45px; right: 45px; } .position-absolute-50 { position: absolute; top: 50px; right: 50px; } .position-absolute-55 { position: absolute; top: 55px; right: 55px; } .position-absolute-60 { position: absolute; top: 60px; right: 60px; } .position-absolute-65 { position: absolute; top: 65px; right: 65px; } .position-absolute-70 { position: absolute; top: 70px; right: 70px; } .position-absolute-75 { position: absolute; top: 75px; right: 75px; } .position-absolute-80 { position: absolute; top: 80px; right: 80px; } .position-absolute-85 { position: absolute; top: 85px; right: 85px; } .position-absolute-90 { position: absolute; top: 90px; right: 90px; } .position-absolute-95 { position: absolute; top: 95px; right: 95px; } .position-absolute-100 { position: absolute; top: 100px; right: 100px; } .position-absolute-105 { position: absolute; top: 105px; right: 105px; } .position-absolute-110 { position: absolute; top: 110px; right: 110px; } .position-absolute-115 { position: absolute; top: 115px; right: 115px; } .position-absolute-120 { position: absolute; top: 120px; right: 120px; } .position-absolute-125 { position: absolute; top: 125px; right: 125px; } .position-absolute-130 { position: absolute; top: 130px; right: 130px; } .position-absolute-135 { position: absolute; top: 135px; right: 135px; } .position-absolute-140 { position: absolute; top: 140px; right: 140px; } .position-absolute-145 { position: absolute; top: 145px; right: 145px; } .position-absolute-150 { position: absolute; top: 150px; right: 150px; } .position-absolute-155 { position: absolute; top: 155px; right: 155px; } .position-absolute-160 { position: absolute; top: 160px; right: 160px; } .position-absolute-165 { position: absolute; top: 165px; right: 165px; } .position-absolute-170 { position: absolute; top: 170px; right: 170px; } .position-absolute-175 { position: absolute; top: 175px; right: 175px; } .position-absolute-180 { position: absolute; top: 180px; right: 180px; } .position-absolute-185 { position: absolute; top: 185px; right: 185px; } .position-absolute-190 { position: absolute; top: 190px; right: 190px; } .position-absolute-195 { position: absolute; top: 195px; right: 195px; } .position-absolute-200 { position: absolute; top: 200px; right: 200px; } /* ----------- FINAL PARTE DE LARGURA ------------- */ .not-grid-container { display: block !important; /* Força o container a ser exibido como bloco */ padding: 20px; /* Ajuste conforme necessário */ margin-top: 20px; } .z-index-994859485948 { z-index: 9948594 !important; } .z-index-max { z-index: 999859485948 !important; } .z-index-9999999 { z-index: 9999999 !important; } /* ----------- PARTE DE BORDA ------------- */ .border-radius-25 { border-radius: 25px !important; } .border-radius-top-25 { border-top-left-radius: 25px !important; border-top-right-radius: 25px !important; } .input-padrao { padding: 10px; cursor: text; padding-right: 30px; /* Espaço extra à direita para o ícone */ border: 1px solid #ccc; border-radius: 16px; font-size: 12px; font-family: 'Helvetica-Medium'; transition: all 0.3s ease; width: 100%; /* Ocupa todo o espaço do container */ box-sizing: border-box; /* Inclui padding e border no width */ } .input-padrao:hover { border-color: #888; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .input-padrao:focus { border-color: var(--cor-botao-hover); box-shadow: 0 0 5px var(--cor-gradiente-meio); outline: none; } .input-padrao+i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; /* Impede que o ícone interfira na entrada de texto */ } .input-padrao-container { position: relative; /* Estabelece um contexto de posicionamento */ flex: 1; display: inline-block; /* Mantém o tamanho conforme o necessário pelo conteúdo */ width: 100%; /* Opcional, dependendo do layout */ } .input-padrao-container label { font-family: Poppins-SemiBold; font-size: 14px; } .input-padrao-container select { appearance: none; /* Remove a aparência padrão do select */ -webkit-appearance: none; /* Para garantir compatibilidade com Safari */ -moz-appearance: none; /* Para garantir compatibilidade com Firefox */ padding: 10px; cursor: pointer; border: 1px solid #ccc; border-radius: 16px; font-size: 12px; font-family: 'Helvetica-Medium'; transition: all 0.3s ease; width: 100%; box-sizing: border-box; background-color: #fff; /* Cor de fundo personalizada */ } /* ----------- Modal Genérico ------------- */ .aviso-mobile { display: none; font-size: 0.9rem; color: #666; margin-top: 10px; } .modal-generico-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } /* 1. Keyframes para overlay (fade-in) */ @keyframes modalgenericoanim-overlay-show { from { opacity: 0; } to { opacity: 1; } } /* 2. Keyframes para modal (scale + fade) */ @keyframes modalgenericoanim-modal-show { from { opacity: 0; transform: scale(0.8) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* 3. Aplicando animações */ .modal-generico-overlay { /* mantém as regras que você já tinha */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1025; /* animação de fade-in */ animation: modalgenericoanim-overlay-show 0.15s ease forwards; } .modal-generico { /* mantém as regras que você já tinha */ background: white; padding: 20px; min-width: 400px; max-width: 700px; border-radius: 30px; max-height: 98%; overflow-y: auto; box-shadow: var(--sombra-generica-modal); /* animação de entrada */ animation: modalgenericoanim-modal-show 0.2s ease-out forwards; } .modal-generico-body form { display: flex; flex-direction: column; gap: 15px; height: 100%; } .modal-generico-body-no-form { display: flex; flex-direction: column; gap: 15px; height: 100%; } .modal-generico-body-no-form i { display: flex; justify-content: center; align-items: center; height: 100%; } .modal-generico-input-group { display: flex; justify-content: space-between; gap: 40px; } .modal-generico-concluido { background: #fff; padding: 30px; border-radius: 30px; text-align: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); animation: fadeInconcluido 0.5s, fadeOutconcluido 0.5s 4.5s; display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 500px; width: 90%; } .modal-generico-concluido h2 { margin-top: 0; font-family: Poppins-SemiBold; color: #28a745; /* Verde para indicar sucesso */ } .modal-generico-concluido p { margin: 10px 0 0 0; margin-top: 15px; color: #333; } .modal-generico-concluido i { margin-top: 15px; } /* ----------- Final Modal Genérico ------------- */ @media (max-width: 768px) { .modal-generico-glass-wrap { display: inline-grid; place-items: center; } /* mantém o brilho só na borda, alinhado ao raio */ .modal-generico-glass-wrap::before { border-radius: calc(var(--wrap-radius) - var(--aa)); } /* CONTENT (cartão de vidro) */ .cadastro-modal-generico-content { /* ocupa todo o miolo do wrap, descontando o anel uma vez de cada lado */ padding: 22px; max-width: 100%; /* anula o clamp do desktop aqui */ min-width: 320px; /* evita overflow em telas muito estreitas */ } .var-modal-conclusao-texto { max-width: 300px; } .modal-generico-overlay, .modal-generico { animation: none !important; } .mobile-margin-right-40 { margin-right: 40px !important; } } @media (max-width: 406px) { .padding-lembretes-mobile { padding: 0 10px !important; padding-top: 40px !important; } }