body { display: flex; flex-direction: column; height: 100vh; }
header { position: fixed; width: calc(100% - 20px); top: 0px; left: 0px; background-color: #0e3b43; background-image: linear-gradient(to right, #1d3a43, #477067); z-index: 1; height: 65px; border-radius: 0px 0px 10px 10px; margin: 0px 0px 10px 10px; box-shadow: 0px 0px 10px 3px #185182; min-width: 450px; }
header a.navbar-brand{ height: 45px; top: 10px; position: absolute; }
header a.navbar-brand img{ height: 45px; }
header a{ text-decoration: none; color: #fff; }
.container-fluid { flex: 1; }
.sidebar { height: 100vh; position: fixed; width: 250px; background: #f8f9fa; padding-top: 20px; }
.content { margin-left: 260px; padding: 20px; }
.nav-item a{ text-decoration: none; color: #0a2563; }
section{ border-bottom: 1px solid #0f3d44; padding-bottom: 20px; margin-bottom: 20px; }
footer{ z-index: 1; height: 50px; background: #191919 !important; position: relative; width: 100%;  bottom: 0;  color: #727373 !important; }
footer p{ color: #727373 !important; }
footer a{ color: #fff; text-decoration: none; }
.anchor { display: block; height: 85px; margin-top: -85px; visibility: hidden; }
.zone-url{ background: #ebebeb; border: 1px solid #c7c7c7; border-radius: 10px; padding: 5px 10px; margin-bottom: 15px; }
pre code { display: block; padding: 10px; background: #f4f4f4; border-radius: 5px; white-space: pre; }
code{ color: #0b2765; }
.hljs-ln-numbers { text-align: right; border-right: 1px solid #ccc; color: #999; user-select: none; width: 20px; padding-right: 5px !important; }
.hljs-ln-code{ padding-left: 5px !important; }
.hljs{ background: #f6f6f6; color: #444; border: 1px solid #c7c7c7; border-radius: 10px; max-height: 300px; }
section ul { list-style-type: none; padding: 0; }
section li::before { content: "✅ "; }
h2{ color: #0a2664; }
a{ text-decoration: none; color: #3F51B5; }
a:hover{ opacity: 0.8; }
p a{ font-weight: bold; }
@media (max-width: 550px) {
    .sidebar{ display: none; }
    .content{ margin-left: 0px; }
}
@media (max-width: 450px) {
    header h4{ display: none; }
    header h5{ display: block !important; }
    header{ min-width: calc(100% - 20px); }
}
@media (min-width: 550px) and (max-width: 1250px) {
    .content{ width: calc(100% - 260px); }
}