body{font-family:var(--content);color:var(--color-body);background:var(--color-bg);}

header { padding:20px 0; background:var(--color-dark); }
header .center { display:flex; align-items:center; justify-content:space-between; }
header .logo span { display:block; font-size:12px; margin:10px 0 0 0 }
header nav ul { display:flex; align-items:center; justify-content:space-between; gap:30px}
header nav ul li a:hover { color:var(--color-white); }
header .logout a { display:block; background:var(--color-bg);font-size:13px;padding:10px 30px; font-weight: 500; border-radius: 2px}

.total { padding:20px 0; background:var(--color-second); }
.total span { font-size:13px }

footer .center { background:var(--color-dark); padding:20px; border-radius:4px; margin-bottom:40px }
footer span { font-size:12px }

.page-head h2 { font-size:22px }

.dashboard ul { padding:30px; background:var(--color-dark); border-radius: 4px; margin-top: 20px}
.dashboard ul li { display:block; padding:20px; border-radius:2px; background:var(--color-bg); margin-bottom:5px; font-size: 14px; font-weight: 600}
.dashboard ul li:last-child { margin-bottom:0 }
.dashboard ul li.hosting-service.overdue { background:var(--color-red); }
.dashboard ul li.hosting-service.urgent { background:var(--color-second); }
.dashboard ul li.domain-service.overdue { background:var(--color-red); }
.dashboard ul li.domain-service.urgent { background:var(--color-second); }

.filters { background:var(--color-dark); padding:30px; border-radius:4px; position:relative; }
.filters form { display:flex; padding: 10px 0; gap:10px; justify-content: space-between;}
.filters label { width: 100%}
.filters input, .filters select { margin:5px 0 0 0; border:none; background:var(--color-black); color: var(--color-body); font-size: 14px;}
.filters button { display:block; margin:5px 0 0 0 }
a.reset { text-decoration:underline; position: absolute; top: 10px; right: 10px; font-size: 12px}

.customers-list { padding:30px 0 }
.customers-list table { background:var(--color-dark); }
.customers-list table th { font-weight:600; padding:20px; background:var(--color-black); }

.customers-list table a { display:inline-block; padding:10px 30px; font-size:13px; font-weight:600 }
.customers-list table a:hover { opacity:.6 }
.customers-list table ul { display:flex; }
a.delete { background:var(--color-red);}
a.edit { background:var(--color-lgreen);}
a.pay { background:var(--color-green);}


.addcustomer label { width: 100%}
.addcustomer form { padding:10px 0 }
.addcustomer input, .addcustomer select { margin:5px 0 0 0; border:none; background:var(--color-black); color: var(--color-body); font-size: 14px;}
.addcustomer button { display:block; margin:5px 0 0 0 }

.add { background:var(--color-dark); padding:30px; border-radius:4px; position:relative; max-width:720px; margin:0 auto }

.login { width:100%; height:100vh; display:flex; align-items:center; }
.login form { max-width:420px; margin:0 auto }

@media only screen and (max-width:768px) {
}