/* variable */
:root {
   --main-bg-color:           #EEE;
   --title-border-color:      #ACF;
   --title-txt-color:         #88D066;
   --button-left-color:       #E0E0E0;
   --button-right-color:      #F0F0F0;
   --button-border-color:     #777;
   --button-sep-color:        #AAA;
   --box-bg-checking-color:   #EB7239;
   --footer-txt-color:        #666;
   }

/* global */
html {
   background-color: var(--main-bg-color);
   }
   
/* header */
.header h1 {
   color:            var(--title-txt-color);
   border-bottom:    2px solid;
   border-color:     black;
   border-left:      2px solid;
   border-radius:    0px 0px 0px 3ex;
   border-color:     var(--title-border-color);
   margin-left:      2%;
   }

/* https://stackoverflow.com/questions/14920401/how-to-simulate-hfill-with-html-and-css */
.header h1 ul {
   display:          flex;
   justify-content:  space-between;
   margin:           0.5ex;
   }

.header h1 li {
   display:          inline;
   }

a#refresh {
   background:       var(--button-left-color);
   border-radius:    1.8ex;;
   margin-left:      2ex;
   padding:          0.3ex 1.3ex;
   text-decoration:  none;
   }

a#refresh:hover {
   text-decoration:  underline solid;
   }

a#refresh:after { 
   content:          "\00A0\21bb";
   }

/* general */
a:link, a:visited {
   text-decoration:  none;
   }

a:hover, a:active {
   text-decoration:  underline solid;
   }

span.button {
    border:          1px solid var(--button-border-color);
    margin:          10px 3px 3px 4px;
    background:      var(--button-right-color);
    border-radius:   2ex;
    padding:         0ex 0.8ex 0px 0ex;
    }

.button a {
   background:       var(--button-left-color);
   border-right:     2px solid var(--button-sep-color);
   border-radius:    2ex 0px 0px 2ex;
   padding:          0px 0.5ex 0ex 0.9ex;
   }

.button small {
   padding:          0px 0.2ex 0ex 0.8ex;
   }

p {
   line-height:      3ex;
   }

table {
   border:           none;
   margin:           0;
   }

td {
   border:           0px;
   vertical-align:   middle;
   }

td.bold {
   font-weight:      bold;
   }

td.hoop {
   border:           1px solid #777;
   }

td.comment {
   max-width:        60%;
   font-size:        small;
   }

td.days {
   text-align:       right;
   }

td.checking {
   background-color: var(--box-bg-checking-color);
   border-radius:    0ex 2ex 2ex 0ex;
   color:            white;
   font-size:        x-small;
   font-weight:      bold;
   padding:          0ex 0.8ex 0ex 0.8ex;
   text-align:       right;
   }

td.checking:after {
   content:          "\21B5";
   }

hr {
   border-style:     solid;
   border-width:     1px;
   color:            var(--title-border-color);
   margin-top:       4ex;
   width:            70%;
   }

/* action */
.action h2 {
   color:            var(--title-txt-color);
   }

/* footer */
.footer {
   float :           right;
   margin-right:     5%;
   }

div.footer {
   font-size:        xx-small;
   color:            var(--footer-txt-color);
   }

.footer ul {
   margin-top:       0.8ex;
   }