*{box-sizing:border-box;}
body{margin:5px 20px;background:silver}
body.dark{background:#000}
.dark th{background:#444;}
.dark table{color:#fff;background:#222}
.dark td{border-color:#000;}
.dark input{color:#fff;background:#222}
h1,h3{margin:0;display:inline-block}
h1{color:#fff;font-size:18px;padding:1px 19px;font-family:monospace}
h3{color:#000}
td a{color:grey;float:right;margin:0 5px}
.material-icons{font-size:15px}
table{border-collapse:collapse;background:#fff}
table,tr{width:100%}
th,td{position:relative;white-space:nowrap}
th,td{padding:8px;text-align:left;border:1px solid #ccc;}
td{padding:0}
td:nth-of-type(2),td:nth-of-type(3),td:nth-of-type(4){text-align:center}
th input{border:1px solid #ccc;float:left;width:100%;padding:5px;margin-top:5px;font-size:12px}
.filter{display:inline-block;margin:0 10px}
th{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.col-title{width:100%}
th{vertical-align:top;background:#eee;font-weight:normal;background-clip:padding-box;}
input{width:100%;padding:5px;font-family:initial;font-size:16px;outline:none;border:none}
.modal{display:grid;grid-template-columns:1fr;grid-gap:35px;margin-top:35px}
.juge{display:grid;grid-template-columns:5fr 1fr 1fr;grid-gap:15px;margin-top:15px}
.juge button{padding:15px 5px;border:1px solid #ccc;}
.juge .del{grid-column-start:2;grid-column-end:4;}
.juge button.a,.juge button.b{background:lightblue;cursor:pointer}
.juge button.a:hover,.juge button.b:hover{background:#eef}
.juge .done{grid-column-start:1;grid-column-end:4;}
.button-list{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;width:100%;padding:35px;grid-gap:35px}
.button-list button, .modal button, button.login,button.app-button{background:#fff;border:1px solid #ccc;padding:15px 88px;color:#000;font-family:serif;flex:1}
button:hover{background:#eee}
header{float:left;padding-top:4px;width:100%}
nav ul{list-style:none;padding:0;margin:0;float:left;width:100%;display:flex;}
nav li{float:left;flex:auto;text-align:center;margin-right:4px}
nav li:first-of-type{text-align: left;padding-left:100px;}
nav li:last-of-type{margin-right:0}
nav li:last-of-type a{border-top-right-radius:0}
nav a{color:#fff;background:#888;padding:6px 0;display:block;text-decoration:none;border-top-left-radius:8px;border-top-right-radius:8px;font-size:18px}
nav a:hover{background:#999}
nav a:not([href]){color:#aaa;visibility:hidden}
nav a:not([href]):hover{background:#888}
.current,.current:hover{background:#fff;color:#333;}
.dark #login{background:#222}
#login{background:#fff;text-align:center;position:absolute;top:0;bottom:0;right:0;left:0;margin-top:38px}
form{margin:50px auto;width:250px;}
form input{border:1px solid #aaa;width:100%;padding:15px;margin-bottom:10px}
form button{margin:0 0 10px 0;width:100%}
.filter-icon{position:absolute;top:10px;right:10px}
.filter-icon,.group-icon,.notes-icon,.delete-icon,.edit-icon{height:13px;}
.filter-icon:hover,.group-icon:hover,.notes-icon:hover,.delete-icon:hover,.edit-icon:hover{height:18px;margin-top:-3px;margin-right:-3px}
th a{cursor:pointer;float:right;}
td a:first-of-type{margin-right:0}
.btn-group,.edit-btn-group{position:absolute;right:10px;top:3px;background:#fff}
.btn-group{display:none}
tr:hover .btn-group{display:block}
.tel a{float:left;margin:0;display:block}
.display{display:block}
select{width:100%;padding:5px 15px;border:1px solid #ccc}
.grip{top:0;right:-3px;bottom:0;width:3px;position:absolute;cursor:col-resize;z-index:9999}
.grip:hover{z-index:9999;border:2px solid grey;}
#rmenu{position:absolute;display:none;background:#eee;border:1px solid #aaa;}
#rmenu ul{list-style:none;padding:0;margin:0}
#rmenu a{padding:5px;display:block}
#rmenu a:hover{background:#ccc;cursor:default}
tr:last-of-type{border-top:2px solid #ccc}
td a:not([href]){cursor:pointer;}
.totals td{text-align:right;border:none}
.edit,.delete{background:silver}
.strikethrough{text-decoration:line-through}
.edit-row td,tr:last-of-type td{padding:0}
.edit-row input,.edit-row select{color:#444}
.overlay{width:0;height:0;position:absolute;z-index:9999;background:rgba(0,0,0,.9);display:flex;align-items:center}
.overlay button{display:none}
.overlay.visible{width:100%;height:100%}
.overlay.visible button{display:block;flex:1}
@keyframes blink{0%{opacity:1;}50%{opacity:0;}100%{opacity:1;}}
.edit-icon{display:none;}
.edit-icon-active{display:block;animation:blink 0.75s;animation-iteration-count: infinite;}
@media only screen and (max-width:1024px){
    .button-list{grid-template-columns:1fr 1fr 1fr;}
}
@media only screen and (max-width:840px){
    .overlay{display:grid;grid-template-columns:1fr;}
    .overlay.visible button{margin:0 50px}
	.button-list{grid-template-columns:1fr 1fr;}
}
@media only screen and (max-width:540px){
    .button-list{grid-template-columns:1fr;}
}