body            { font-family: Comic Neue; background: #fff;
                  margin: 0; color: #4b0044; min-height: 100vh;
}
a, h1, h2, h3   { color: #276b98; font-weight: bold;}
h1, h2          { margin: 0; }
h1              { border-bottom: 2px solid #eee; }
h2              { font-size: 1.2em; border-top: 0px solid #eee; margin-top: 0.25em; margin-bottom: 0.25em;}
h3              { font-size: 1.0em; border-top: 0px solid #eee; margin-top: 0.25em; margin-bottom: 0.25em;}
td              { height: 1.75em; }
textarea        { border: 2px solid #ccc; font-family: Comic Neue; width: 100%; box-sizing: border-box; font-size: large;
                  background-color: rgba(255,222,222,0.6); }
input[type=text]{ border: 2px solid #ccc; font-family: Comic Neue; background-color: rgba(255,222,222,0.6); }
input[type=password]{ border: 2px solid #ccc; font-family: Comic Neue; background-color: rgba(255,222,222,0.6); }
input[type=date]{ border: 2px solid #ccc; font-family: Comic Neue; background-color: rgba(255,222,222,0.6); }
input[type=time]{ border: 2px solid #ccc; font-family: Comic Neue; background-color: rgba(255,222,222,0.6); }
input[type=color]{ border: 2px solid #ccc; font-family: Comic Neue; background-color: rgba(255,222,222,0.6); border-radius: 7px; }
hr              { border-color: #377ba8; }

.submit         { font-family: Comic Neue; }
.iconbox        { margin-right: 0.5em; width: 1.5em; cursor: pointer;
                  font-size:1.5em; color:#377ba8; }
.noitem         { background-color: transparent; border-color:transparent; }
.page           { max-width: 800px; margin-left: auto; margin-right: auto;
                  background-color: rgba(255,255,255,0.2); border-radius: 25px;
                  padding: 5px; }
.entries        { margin-top: 1em; margin-bottom: 1em; }
.entries input  { margin-top: 0.125em; margin-bottom: 0.125em; }
.entries li     { margin: 0.8em 1.2em; }
.entries h2     { margin-left: -1em; }
.add-entry      { font-size: 0.9em; line-height: 2.5; }
.add-entry dl   { font-weight: bold; }
.metanav        { font-size: 1.2em;
                  display: flex; justify-content: space-between;
                  }
.nav_cell       { text-align: center; white-space: nowrap; }
.nav_cell a     { text-decoration: none; }

.mid_nav        { display: flex; justify-content: space-between;}
.mid_cell       { cursor: pointer; white-space: nowrap; }
.mid_cell a     { text-decoration: none; }

.flash          { background: #cee5F5; padding: 0.5em;
                  border: 1px solid #aacbe2; }
.error          { background: #f0d6d6; padding: 0.5em; }
.hidden         { display: none; }
.pointer        { cursor: pointer; text-decoration: underline; }
.hspacer        { width: 1em; display: inline-block;}
.date           { font-size: 0.75em; margin-top: 1.2em; }
.fixed_topright { position: fixed; top: 0.5em; right: -0.5em; }

.preset_color   { width: 1.5em; height: 1.5em; cursor: pointer; display: inline-block;
                  margin-left: 0.25em; border: 1px solid purple;
                  border-radius: 7px;
                  }
.help_example    { }

#current_date {
  font-size: small;
  line-height: normal;
}

.item {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 25px;
            margin: 10px 0;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            display: flex;
        }
.item_hidden { display: none; }

.item_datetime {  flex: 0 0 14em; }
.item_date {  }
.item_day {  }
.item_time {  }
.item_owner { font-size: 0.9em; color: #666; margin-top: 0.5em; }
.item_text { flex: 1; overflow-wrap: anywhere; vertical-align: top; }
.next_divider { margin-top: 0em; margin-bottom: 4em; }
.cal { margin-left: auto; margin-right: auto; }
.cal_cell { text-align: center; width: 1.5em; position: relative; }
.cal_with_event { background-color: #ffddff; border-radius: 7px; }
.cal_today { border: 2px solid #276b98; border-radius: 7px; }
.cal_cell span a { text-decoration: none; }
.cal_day  { position: relative; z-index: 2; text-shadow: 1px 1px 0 #ffffff; }
.cal_day2  { width: 1em; text-align: center; position: absolute; left: 0.2em; top: 0.5em;  z-index: 2; text-shadow: 1px 1px 0 #ffffff; }
.cal_container { margin-left: auto; margin-right: auto; text-align: center; }

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

@keyframes notifier {
  0% { box-shadow: 0px 0px 4px 4px #fff; }
  100% { box-shadow: 0px 0px 4px 4px #cee5F5; }
}