/* Operations view treatment based on the supplied Operations mock-up. */
.operations-mock .page-heading { margin-bottom: 20px; }.operations-mock .page-heading h1 { font-size: 37px; }.operations-mock .page-heading .button:before { content: '\f067'; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 8px; }.operations-mock .page-heading .button { padding: 14px 22px; font-size: 16px; }
.ops-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; margin: 0 0 19px; }.ops-stat { display: flex; align-items: center; gap: 16px; padding: 19px 16px; min-height: 112px; border-radius: 9px; }.ops-stat i { display: grid; place-items: center; width: 47px; height: 47px; border-radius: 50%; font-size: 20px; }.ops-stat b { display: block; font-size: 31px; letter-spacing: -1px; }.ops-stat span { color: #3e547b; line-height: 1.35; }.ops-stat.blue { background: #edf5ff; }.ops-stat.blue i { background: #d9ecff; color: #1768d9; }.ops-stat.cyan { background: #edfbff; }.ops-stat.cyan i { background: #d7f1ff; color: #168fd4; }.ops-stat.green { background: #ebfbf3; }.ops-stat.green i { background: #d5f7e5; color: #08a05b; }.ops-stat.amber { background: #fff8e8; }.ops-stat.amber i { background: #fff0c6; color: #ed9a00; }
.operations-mock .filters { border-top: 1px solid #e5edf6; padding: 18px 20px; margin: 0; background: #fff; border-radius: 10px 10px 0 0; }.operations-mock .filter { border: 0; border-radius: 0; background: transparent; padding: 12px 9px; color: #1a3470; }.operations-mock .filter.active { background: transparent; color: #115bd0; border-bottom: 3px solid #1464dc; }.operations-mock .search { order: 10; width: 100%; margin: 9px 0 0; border-color: #d4dfed; background: #f9fbfe; }.operations-mock .table-wrap { border-radius: 0 0 10px 10px; box-shadow: none; }.operations-mock .data-table th { background: #edf5fc; color: #102454; }.operations-mock .data-table td { padding: 13px 12px; }.operations-mock .badge { padding: 7px 10px; }.operations-mock .button-secondary { background: #e6f2ff; color: #105fd0; }
@media (max-width: 1100px) { .ops-summary { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .ops-summary { grid-template-columns: 1fr 1fr; }.ops-stat { min-height: 95px; }.ops-stat b { font-size: 25px; }.ops-stat i { width: 37px; height: 37px; font-size: 16px; } }