.of-page{background:#07131f;color:#dbe8f3;min-height:100vh}.of-page .container-fluid{padding:18px}.of-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;background:linear-gradient(125deg,#0b2935,#102c2c);border:1px solid #235366;border-radius:17px;padding:24px}.of-hero small,.of-card header small{color:#55d9c1;letter-spacing:1px}.of-hero h1{margin:4px 0;color:#fff;font-size:27px}.of-hero p{margin:0;color:#a9bdcb}.of-hero a,.of-card button{background:#e0ae2c;color:#162330;border:0;border-radius:9px;padding:11px 15px;font-weight:700}.of-steps{display:flex;align-items:center;justify-content:center;gap:14px;margin:15px 0;background:#0c1e2e;border:1px solid #243e51;border-radius:13px;padding:13px}.of-steps span{color:#bdd0dc}.of-steps b{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#1c6659;color:#fff}.of-steps>i{color:#5e7b8e}.of-card{background:#0c1c2b;border:1px solid #243e51;border-radius:14px;overflow:hidden;margin-bottom:15px}.of-card>header{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid #243e51}.of-card h2{margin:2px 0 0;color:#fff;font-size:19px}.of-card header>b{font-size:24px;color:#ffd565}.of-card table{width:100%;border-collapse:collapse}.of-card th,.of-card td{padding:11px 13px;text-align:right;border-bottom:1px solid #20384a;color:#d9e5ee}.of-card th{background:#091724;color:#91a8b8;font-size:12px}.of-card td small{display:block;color:#7f98aa}.of-card select,.of-card input[type=number]{background:#071521;color:#fff;border:1px solid #36546a;border-radius:7px;padding:7px;max-width:330px}.of-card footer{display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:14px 18px}.of-card footer p{margin:0 auto 0 0;color:#91a8b8}.of-state{display:inline-block;padding:3px 9px;border-radius:20px;font-size:12px}.of-state.online{background:#143b31;color:#5bddaa}.of-state.offline{background:#3b2930;color:#ff9aa8}.empty{text-align:center!important;color:#8098aa!important;padding:28px!important}@media(max-width:760px){.of-hero{display:block}.of-hero a{display:inline-block;margin-top:14px}.of-steps{overflow:auto;justify-content:flex-start}.of-steps span{white-space:nowrap}.of-card>header{align-items:flex-start;flex-direction:column}.of-card footer{flex-direction:column}.of-card button{width:100%}}
