/*
|--------------------------------------------------------------------------
| WEBHATSHOSTING.NET
|--------------------------------------------------------------------------
| Module Monitoring Clients VPS + Sites
*/

.mon-page{
    background:#11141d;
    border:1px solid #2a3040;
    border-radius:24px;
    padding:28px;
    color:#fff;
}
.mon-head{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    margin-bottom:26px;
}
.mon-head h1{font-size:34px}
.mon-head p{color:#b9bfce;margin-top:8px}
.mon-btn,.mon-small{
    display:inline-block;
    background:#ff1025;
    color:#fff;
    border:0;
    padding:12px 16px;
    border-radius:10px;
    font-weight:900;
    text-decoration:none;
    cursor:pointer;
}
.mon-btn.dark,.mon-small{
    background:#07080d;
    border:1px solid #303747;
}
.mon-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:24px;
}
.mon-stats div,.mon-card{
    background:#0b0d14;
    border:1px solid #2a3040;
    border-radius:22px;
    padding:24px;
    margin-bottom:22px;
}
.mon-stats strong{
    display:block;
    color:#ff1025;
    font-size:34px;
}
.mon-stats span{color:#b9bfce}
.mon-card h2{
    color:#ff1025;
    margin-bottom:18px;
}
.mon-table{
    width:100%;
    border-collapse:collapse;
}
.mon-table th,.mon-table td{
    padding:13px;
    border-bottom:1px solid #2a3040;
    text-align:left;
}
.mon-table th{color:#ff1025}
.mon-status{
    display:inline-block;
    padding:6px 10px;
    border-radius:20px;
    font-weight:900;
    background:#333;
}
.mon-status.online{background:#127a3a}
.mon-status.warning{background:#b17600}
.mon-status.offline{background:#ff1025}
.mon-status.unknown{background:#555}
.mon-alert{
    background:#102918;
    border:1px solid #2ecc71;
    padding:14px;
    border-radius:12px;
    margin-bottom:18px;
}
.mon-form{
    display:grid;
    gap:20px;
}
.mon-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}
.mon-form label{
    display:block;
    font-weight:900;
    margin-bottom:8px;
}
.mon-form input,.mon-form select{
    width:100%;
    background:#07080d;
    color:#fff;
    border:1px solid #303747;
    padding:14px;
    border-radius:12px;
}
.mon-checks{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}
.mon-checks label{
    background:#07080d;
    border:1px solid #303747;
    border-radius:14px;
    padding:14px;
}
@media(max-width:900px){
    .mon-head{display:block}
    .mon-stats,.mon-grid,.mon-checks{grid-template-columns:1fr}
    .mon-table{font-size:13px}
}