* { margin:0; padding:0; outline:0; border:0; color:#222; font-family:'Segoe UI', sans-serif }
a { text-decoration:none }
body { background:#ddd }
h1 { display:inline-block; margin-top:2px; font-size:18px; font-weight:bold }
h2 { font-size:18px; padding:10px 0 5px; color:#469; border-bottom:1px solid #ddd }
hr { margin:12px 0; height:1px; background:#ddd }
img { vertical-align:middle }
p { margin:15px 0; line-height:20px; font-size:15px }
p a, ul a { color:#079; text-decoration:underline }
p a:hover, p a:active, ul a:hover, ul a:active { color:#e10; text-decoration:none }
table { border-collapse:collapse; width:100%; margin:15px 0 }
th { background:#18b; color:#fff }
th, td { padding:5px 8px; border:1px solid #ddd }
td { font-size:15px }

#entries, #entries-header { display:table; table-layout:fixed; border-collapse:collapse; width:100%; font-size:15px }
#entries { margin:-1px 0 20px }
.tr { display:table-row }
.tr:nth-child(2n) { background:#f7f7f7 }
.td { display:table-cell; word-wrap:break-word; padding:4px; border:1px solid #ddd }
.th { text-align:center; background:#079; color:#fff; font-weight:bold }
.td a { color:#079; font-weight:bold }
.td a:hover, .td a:active { color:#e10 }
.th:first-child { width:25px }
.th:last-child { width:126px }
.td:first-child { text-align:center; width:25px; padding:0 }
.td:first-child label { display:block; padding:4px 0 }
.td:last-child { text-align:center; width:126px }
.td:last-child img { cursor:pointer; margin:-5px 3px 0 }
.td:last-child img:hover, td:last-child img:active { opacity:0.6 }
#entries .td:nth-last-child(2) { display:none; padding-bottom:5px; line-height:24px }

.center { text-align:center }
.left { text-align:left }
.note { font-size:14px; line-height:14px; color:#666 }
.p-inline { display:inline-block; width:45%; margin:0 0 15px }
.heading { text-align:center; padding:6px; background:#18b; color:#fff; font-weight:bold; text-shadow:0 0 1px #222 }
.black { color:#222 }
.blue { color:#079 }
.blue2 { color:#15b }
.green { color:#0a0 }
.purple { color:#65c }
.red { color:#e10 }

.input { width:calc(100% - 18px); max-width:530px; margin-top:5px; padding:6px 8px; font-size:15px; border:1px solid #bbb; border-radius:3px }
.input:focus, textarea:focus { border:1px solid #18b }
.input-tiny { max-width:100px }
.input-small { max-width:240px }
.input-large { max-width:530px }
input.add { height:29px }
.checkbox { vertical-align:middle; margin-top:-2px }
select { cursor:pointer }
textarea { height:140px }

#login { width:80%; max-width:320px; margin:100px auto; padding:20px; background:#fff; border-radius:3px; box-shadow:0 0 5px #888 }
#login-title { text-align:center; font-size:20px; font-weight:bold; padding-bottom:10px; border-bottom:1px solid #ddd }
#login .input { width:calc(100% - 22px); padding:10px !important }
#login-b { cursor:pointer; float:right; width:90px; padding:4px 0 5px; background:#18b; color:#fff; font-size:15px; font-weight:bold; text-shadow:0 0 1px #222; border:1px solid #079; border-radius:3px }
#login-b:hover, #login-b:active { background:#079 }

#notice, #notice-s, #notice-e, .notice { display:none; text-align:center; max-width:480px; margin:15px 0; padding:10px; background:#ffb; color:#c00; font-size:15px; border:1px solid #bbb; border-radius:3px }
#notice-s { color:#0a0 }
#loading { display:none; margin-top:15px; color:#18b; font-weight:bold }

header { text-align:center; height:31px; padding:2px 10px 0; background:#fff; border-bottom:1px solid #bbb }
header .nav { width:28px; padding:0 }
header img { margin-top:-6px }
#b-home { float:left }
#b-notif { float:left; margin-left:10px; font-size:20px }
#b-logout { float:right; background:#666; border-color:#333 }
#b-logout:active, #b-logout:hover { background:#333 }

.nav { cursor:pointer; text-align:center; display:inline-block; height:27px; line-height:27px; padding:0 6px; background:#18b; color:#fff; font-size:15px; font-weight:bold; text-shadow:0 0 1px #222; border:1px solid #079; border-radius:3px }
.nav:hover, .nav:active { background:#079 }
.add { background:#0a0; border-color:#080 }
.add:hover, .add:active { background:#080 }
.del { background:#e10; border-color:#a10 }
.del:hover, .del:active { background:#a10 }
button.nav { height:auto }

.home { text-align:center; display:block; width:90%; max-width:260px; margin:5px auto; line-height:30px; color:#fff; font-size:17px; font-weight:bold; text-shadow:0 0 2px #222; border-radius:3px }
.b-black { background:#000; border:1px solid #333 }
.b-black:hover, .b-black:active { background:#333 }
.b-blue { background:#4ac; border:1px solid #089 }
.b-blue:hover, .b-blue:active { background:#089 }
.b-blue2 { background:#058; border:1px solid #046 }
.b-blue2:hover, .b-blue2:active { background:#046 }
.b-brown { background:#742; border:1px solid #631 }
.b-brown:hover, .b-brown:active { background:#631 }
.b-gold { background:#c90; border:1px solid #a70 }
.b-gold:hover, .b-gold:active { background:#a70 }
.b-gray { background:#789; border:1px solid #667 }
.b-gray:hover, .b-gray:active { background:#667 }
.b-green { background:#0a0; border:1px solid #080 }
.b-green:hover, .b-green:active { background:#080 }
.b-green2 { background:#9c3; border:1px solid #8b2 }
.b-green2:hover, .b-green2:active { background:#8b2 }
.b-orange { background:#f60; border:1px solid #c40 }
.b-orange:hover, .b-orange:active { background:#c40 }
.b-pink { background:#f08; border:1px solid #c06 }
.b-pink:hover, .b-pink:active { background:#c06 }
.b-purple { background:#718; border:1px solid #507 }
.b-purple:hover, .b-purple:active { background:#507 }
.b-red { background:#e10; border:1px solid #910 }
.b-red:hover, .b-red:active { background:#910 }
.b-red2 { background:#800; border:1px solid #500 }
.b-red2:hover, .b-red2:active { background:#500 }
.b-yellow { background:#cc0; border:1px solid #bb0 }
.b-yellow:hover, .b-yellow:active { background:#bb0 }

.b-small { cursor:pointer; display:inline-block; margin-top:4px; padding:3px 5px; background:#eee; color:#333; font-size:14px; font-weight:normal; border:1px solid #bbb; border-radius:3px }
.b-small:hover, .b-small:active { background:#ddd; color:#333 }

main { width:90%; max-width:1240px; margin:5px auto; padding:15px; background:#fff; border:1px solid #bbb; border-radius:3px }
main img { max-width:100% }
#main-s { text-align:center; max-width:480px }
#main-m { max-width:640px }
#main-l { max-width:960px }

#delete-all { float:right }
#delete { float:right; margin-right:5px }
#export { float:right; margin-right:5px }

.datepicker-here { cursor:pointer; width:180px; margin: 0 2px 8px 0; padding:3px; font-size:14px }
.filter1 { cursor:pointer; width:88px; margin:0 2px 10px 0; padding:2px 3px; font-size:14px }
.filter2 { width:60px; padding:3px 5px; background:#eee }

.state { display:inline-block; margin-right:15px }
#edit button { cursor:pointer; width:40px; height:30px; border:1px solid #bbb; border-radius:3px }
#edit button:hover, #edit button:active { background:#ddd }

.client-filter { display:inline-block; margin:5px 5px 2px 0; padding:0 4px 2px; background:#f61; color:#fff; font-size:14px; border-radius:3px }
.client-filter-green { background:#080 }
.client-filter-gray { background:#777 }

#searchterm { width:200px; margin:0 2px 8px 0; padding:3px 5px; font-size:14px }
#filters-div { display:none; padding:5px 0; font-size:14px; border-top:1px solid #ccc }
#filters-div label { display:inline-block; margin:0 10px 10px 0 }
#filters-div input[type='checkbox'] { vertical-align:top; margin-top:5px }
#filter { float:right }

.new-client { text-align:center; display:block; width:90px; margin-bottom:5px; background:#5ce; color:#fff; font-weight:bold; text-shadow: 0 0 1px #000; border:1px solid #4ac; border-radius:3px }

#pop-bg { display:none; position:fixed; width:100%; height:100%; top:0; left:0; background:#000; opacity:0.3; z-index:2 }
#pop-container { display:none; position:fixed; top:10%; left:50%; max-width:400px; width:90%; z-index:3 }
#pop-content { position:relative; left:-50%; text-align:center; padding:20px; background:#fff; border-radius:3px; box-shadow:0 0 5px #666 }
.pop-b { width:80px; margin:5px 15px }

footer { text-align:center; padding:0 10px 10px; color:#666; font-size:14px }

@media(max-width:720px){ main { width:100%; box-sizing:border-box; padding:15px 12px; border-width:1px 0; border-radius:0 }
#entries-header, .td:not(:first-child):not(:last-child) { display:none }
#entries .td:nth-last-child(2) { display:table-cell }
.td:last-child { width:64px }
.td:last-child img { margin-top:10px !important } }