/* Start custom CSS for html, class: .elementor-element-7f63c5e */.em-havlan { --hv-text:#20262c; --hv-muted:#5f6b75; --hv-line:#dde4e9; --hv-bg:#f5f8fa; --hv-accent:#1579ad; --hv-dark:#193744; --hv-good:#edf8f2; --hv-warn:#fff7e8; --hv-danger:#fff0ef; --hv-radius:18px; max-width:930px; margin:0 auto; color:var(--hv-text); font-family:Onest,Arial,sans-serif; font-size:17px; line-height:1.72; } .em-havlan *, .em-havlan *::before, .em-havlan *::after { box-sizing:border-box; } .em-havlan p { margin:0 0 1.2em; } .em-havlan h1, .em-havlan h2, .em-havlan h3 { color:#171d22; line-height:1.24; letter-spacing:-.02em; } .em-havlan h1 { margin:15px 0 23px; font-size:clamp(32px,5vw,49px); } .em-havlan h2 { margin:0 0 22px; font-size:clamp(26px,3.5vw,34px); } .em-havlan h3 { margin:29px 0 14px; font-size:22px; } .em-havlan code { font-family:Consolas,Monaco,monospace; } .em-havlan__hero { padding:clamp(28px,5vw,53px); border:1px solid var(--hv-line); border-radius:25px; background: radial-gradient(circle at 100% 0,rgba(21,121,173,.15),transparent 36%), linear-gradient(145deg,#fff,#f5f9fb); box-shadow:0 15px 42px rgba(25,45,56,.08); } .em-havlan__tag { display:inline-flex; padding:7px 14px; border-radius:999px; color:#fff; background:var(--hv-accent); font-size:14px; font-weight:750; } .em-havlan__lead { max-width:820px; color:#3f4e58; font-size:clamp(19px,2.4vw,23px); line-height:1.55; } .em-havlan__section, .em-havlan__toc { margin-top:30px; padding:clamp(25px,4vw,42px); border:1px solid var(--hv-line); border-radius:var(--hv-radius); background:#fff; } .em-havlan__toc { background:var(--hv-bg); } .em-havlan__toc h2 { font-size:24px; } .em-havlan__toc ol { display:grid; gap:9px; margin:0; padding-left:23px; } .em-havlan__toc a { color:#294451; text-decoration-thickness:1px; text-underline-offset:4px; } .em-havlan__toc a:hover { color:var(--hv-accent); } .em-havlan__important, .em-havlan__good, .em-havlan__warning, .em-havlan__danger, .em-havlan__note { margin:25px 0; padding:20px 22px; border-radius:14px; } .em-havlan__important { border-left:5px solid var(--hv-accent); background:#eef7fb; } .em-havlan__good { border-left:5px solid #3c9a66; background:var(--hv-good); } .em-havlan__warning { border-left:5px solid #e2a23b; background:var(--hv-warn); } .em-havlan__danger { border-left:5px solid #c8473c; background:var(--hv-danger); } .em-havlan__note { border:1px solid var(--hv-line); background:var(--hv-bg); } .em-havlan__grid, .em-havlan__architecture { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:24px 0; } .em-havlan__grid > div, .em-havlan__architecture > div { padding:20px; border:1px solid var(--hv-line); border-radius:14px; background:#f8fafb; } .em-havlan__grid strong, .em-havlan__architecture strong { display:block; margin-bottom:6px; color:var(--hv-accent); font-size:19px; } .em-havlan__grid span { color:var(--hv-muted); } .em-havlan__architecture p { margin:7px 0 0; } .em-havlan__check { margin:18px 0 26px; padding:0; list-style:none; } .em-havlan__check li { position:relative; margin:10px 0; padding-left:30px; } .em-havlan__check li::before { position:absolute; top:.16em; left:0; display:grid; width:20px; height:20px; place-items:center; border-radius:50%; color:#fff; background:var(--hv-accent); content:"✓"; font-size:12px; font-weight:800; } .em-havlan__code { overflow-x:auto; margin:18px 0 24px; padding:17px 19px; border-radius:12px; color:#eaf6fb; background:#172a34; white-space:pre-line; } .em-havlan__code code { color:inherit; } .em-havlan__flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:12px; align-items:center; margin:27px 0; } .em-havlan__flow div { display:grid; min-height:100px; padding:18px; place-items:center; border:1px solid var(--hv-line); border-radius:14px; background:var(--hv-bg); font-weight:700; text-align:center; } .em-havlan__flow span { color:var(--hv-muted); font-size:13px; text-align:center; } .em-havlan__flow span::after { margin-left:7px; content:"→"; } .em-havlan__table-wrap { overflow-x:auto; margin:24px 0; border:1px solid var(--hv-line); border-radius:14px; } .em-havlan__table { width:100%; min-width:600px; border-collapse:collapse; } .em-havlan__table th, .em-havlan__table td { padding:15px 18px; border-bottom:1px solid var(--hv-line); text-align:left; vertical-align:top; } .em-havlan__table th { color:#fff; background:var(--hv-dark); } .em-havlan__table tbody tr:nth-child(even) { background:#f8fafb; } .em-havlan__table tbody tr:last-child td { border-bottom:0; } .em-havlan__mini { display:inline-block; min-width:260px; margin:8px 10px 18px 0; padding:18px 20px; border:1px solid var(--hv-line); border-radius:13px; background:var(--hv-bg); } .em-havlan__errors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:22px; } .em-havlan__errors > div { padding:20px; border:1px solid var(--hv-line); border-radius:14px; background:#fafbfc; } .em-havlan__errors strong { color:var(--hv-accent); } .em-havlan__errors p { margin:7px 0 0; } .em-havlan__steps { margin:23px 0 0; padding:0; counter-reset:hvstep; list-style:none; } .em-havlan__steps li { position:relative; min-height:50px; margin-bottom:17px; padding:3px 0 18px 61px; border-bottom:1px solid var(--hv-line); counter-increment:hvstep; } .em-havlan__steps li::before { position:absolute; top:0; left:0; display:grid; width:42px; height:42px; place-items:center; border-radius:12px; color:#fff; background:var(--hv-accent); content:counter(hvstep); font-weight:800; } .em-havlan__steps li:last-child { border-bottom:0; } .em-havlan__faq details { margin:12px 0; border:1px solid var(--hv-line); border-radius:13px; } .em-havlan__faq summary { position:relative; padding:18px 50px 18px 20px; cursor:pointer; font-weight:750; list-style:none; } .em-havlan__faq summary::-webkit-details-marker { display:none; } .em-havlan__faq summary::after { position:absolute; top:50%; right:20px; color:var(--hv-accent); content:"+"; font-size:27px; transform:translateY(-50%); } .em-havlan__faq details[open] summary::after { content:"−"; } .em-havlan__faq details p { margin:0; padding:0 20px 20px; } @media (max-width:767px) { .em-havlan { font-size:16px; line-height:1.65; } .em-havlan__hero, .em-havlan__section, .em-havlan__toc { padding:22px 18px; border-radius:15px; } .em-havlan h1 { font-size:31px; } .em-havlan h2 { font-size:25px; } .em-havlan h3 { font-size:20px; } .em-havlan__lead { font-size:18px; } .em-havlan__grid, .em-havlan__architecture, .em-havlan__errors { grid-template-columns:1fr; } .em-havlan__flow { grid-template-columns:1fr; } .em-havlan__flow span::after { display:block; margin:3px 0 0; content:"↓"; } .em-havlan__steps li { padding-left:54px; } .em-havlan__steps li::before { width:38px; height:38px; } }/* End custom CSS */