dialog.dialognonmodal 
{
  z-index: 10;
  margin-top: 0px;
  background: pink;
  border: none;
  border-radius: 1rem;
}

dialog.dialogmodal 
{
  top:10px;
  z-index: 10;
  margin-top: 0px;
  margin-bottom: 0px;
  width: 100%;
  height: 100%;
  /* background: beige; */
  background-color: black;
  color:white;
  border: none;
  border-radius: 1rem;
}

dialog.dialogmodal::backdrop 
{
  background-color: rgba(60, 60, 60, 0.75);  /* background-color: hsl(250, 100%, 50%, 0.25); */
  /* border: 2px solid red; */
}

span.daynames
{
  font-size:13px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  margin:0px;
  padding:0px;
  line-height: 15px;
}


:where(kal-el) {
  /* --kalel-day-hover-bgc: hsl(0, 0%, 90%); */
  --kalel-day-hover-bgc: hsl(0, 0%, 50%);
  font-family: ui-sans-serif, system-ui, sans-serif;
  inline-size: 100%;
}
/* weekdays */
kal-el abbr {
  text-decoration: none;
}
/* month */
kal-el > time {
  display: var(--kalel-month-d, inline);
  font-size: var(--kalel-month-fz, inherit);
  font-weight: var(--kalel-month-fw, 700);
  text-align: var(--kalel-month-tal, initial);
  color:white;
}
/* year */
kal-el i {
  display: var(--kalel-year-d, inline);
  font-style: normal;
  font-weight: var(--kalel-year-fw, 100);
}
/* grid */
kal-el :is(ol, ul) {
  display: grid;
  font-size: var(--kalel-fz, small);
  /* grid-row-gap: var(--kalel-row-gap, .33em); */
  grid-row-gap: var(--kalel-row-gap, .22em);
  grid-template-columns: var(--kalel-gtc, repeat(7, 1fr));
  list-style: none;
  margin: unset;
  padding: unset;
  position: relative;
  /* border:1px solid blue; */
  /* border around the block of date numbers */
}
/* days */
kal-el :is(ol, ul) :is(abbr, time) {
  background-color: var(--kalel-day-bg, none);
  block-size: var(--kalel-day-h, 2em);
  border-radius: var(--kalel-day-bdrs, 50%);
  /* color: var(--kalel-day-c, inherit); */
  color: var(--kalel-day-c, #fff);
  display: var(--kalel-day-d, inline-block);
  font-size: var(--kalel-day-fz, inherit);
  font-weight: var(--kalel-day-fw, 400);
  inline-size: var(--kalel-day-w, 2em);
  line-height: var(--kalel-day-lh, 2em);
  margin-block: var(--kalel-day-mb, 0 var(--kalel-row-gap, .33em));
  text-align: var(--kalel-day-tal, center);
  user-select: none;
  /* border:1px solid cyan; */
  /* border around days and dates is a circle */
}
/* day hover */
:where(kal-el ol time):hover {
  background: var(--kalel-day-hover-bgc);
}
/* day wrappers */
kal-el :is(ol, ul) li {
  /* border-color: var(--kalel-li-bdc, hsl(0, 0%, 80%)); */
  border-color: var(--kalel-li-bdc, #666);
  border-style: var(--kalel-li-bds, solid);
  /* border-width: var(--kalel-li-bdw, 0 0 1px 0); */
  border-width: var(--kalel-li-bdw, 0 0 1px 0);
  grid-column: var(--kalel-li-gc, initial);
  text-align: var(--kalel-li-tal, end); 
  /* bottom border only - so draws a line under a week */
}
/* weekdays wrapper */
kal-el ul {
  margin-block-end: var(--kalel-row-gap, .33em);
  /* border:1px solid orange;  */
  /* border around the week day names */
  background-color: #666 ;
  color: white;
}

[data-day="1"] { background: var(--kalel-day-1-bg, #0000); }
[data-day="2"] { background: var(--kalel-day-2-bg, #0000); }
[data-day="3"] { background: var(--kalel-day-3-bg, #0000); }
[data-day="4"] { background: var(--kalel-day-4-bg, #0000); }
[data-day="5"] { background: var(--kalel-day-5-bg, #0000); }
[data-day="6"] { background: var(--kalel-day-6-bg, #0000); }
[data-day="7"] { background: var(--kalel-day-7-bg, #0000); }

[data-firstday="1"] [data-day="1"]:first-child { --kalel-li-gc: 1 / 2; }
[data-firstday="1"] [data-day="2"]:first-child { --kalel-li-gc: 1 / 3; }
[data-firstday="1"] [data-day="3"]:first-child { --kalel-li-gc: 1 / 4; }
[data-firstday="1"] [data-day="4"]:first-child { --kalel-li-gc: 1 / 5; }
[data-firstday="1"] [data-day="5"]:first-child { --kalel-li-gc: 1 / 6; }
[data-firstday="1"] [data-day="6"]:first-child { --kalel-li-gc: 1 / 7; }
[data-firstday="1"] [data-day="7"]:first-child { --kalel-li-gc: 1 / 8; }

[data-firstday="6"] [data-day="1"]:first-child { --kalel-li-gc: 1 / 4; }
[data-firstday="6"] [data-day="2"]:first-child { --kalel-li-gc: 1 / 5; }
[data-firstday="6"] [data-day="3"]:first-child { --kalel-li-gc: 1 / 6; }
[data-firstday="6"] [data-day="4"]:first-child { --kalel-li-gc: 1 / 7; }
[data-firstday="6"] [data-day="5"]:first-child { --kalel-li-gc: 1 / 8; }
[data-firstday="6"] [data-day="6"]:first-child { --kalel-li-gc: 1 / 1; }
[data-firstday="6"] [data-day="7"]:first-child { --kalel-li-gc: 1 / 3; }

[data-firstday="7"] [data-day="1"]:first-child { --kalel-li-gc: 1 / 3; }
[data-firstday="7"] [data-day="2"]:first-child { --kalel-li-gc: 1 / 4; }
[data-firstday="7"] [data-day="3"]:first-child { --kalel-li-gc: 1 / 5; }
[data-firstday="7"] [data-day="4"]:first-child { --kalel-li-gc: 1 / 6; }
[data-firstday="7"] [data-day="5"]:first-child { --kalel-li-gc: 1 / 7; }
[data-firstday="7"] [data-day="6"]:first-child { --kalel-li-gc: 1 / 8; }
[data-firstday="7"] [data-day="7"]:first-child { --kalel-li-gc: 1 / 2; }

[data-today] {
  --kalel-day-bdrs: 50%;
  --kalel-day-bg: hsl(0, 86%, 40%);
  --kalel-day-hover-bgc: hsl(0, 86%, 70%);
  --kalel-day-c: #FFF;
}

/* [data-weekend]:not([data-today]) { --kalel-day-c: var(--kalel-weekend-c, hsl(0, 86%, 46%)); } */
/* [data-weekend]:not([data-today]) { --kalel-day-c: var(--kalel-weekend-c, rgb(255, 255, 192)); } */
[data-weekend]:not([data-today]) { --kalel-day-c: var(--kalel-weekend-c, rgb(255, 160, 160)); }

[data-weeknumber]::before {
  /* color: var(--kalel-weeknumber-c, hsl(0, 0%, 50%)); */
  color: var(--kalel-weeknumber-c,rgb(130, 130, 255));
  display: var(--kalel-weeknumber-d, inline-block);
  content: attr(data-weeknumber);
  position: absolute;
  font-size: var(--kalel-weeknumber-fz, 11px);
  inset-inline-start: 0;
}

jor-el {
  background: var(--jorel-bg, none);
  display: var(--jorel-d, grid);
  gap: var(--jorel-gap, 2.5rem);
  /* grid-template-columns: var(--jorel-gtc, repeat(auto-fill, minmax(320px, 1fr))); */
  grid-template-columns: var(--jorel-gtc, repeat(auto-fill, minmax(240px, 1fr)));
  padding: var(--jorel-p, 0);
  /* border:1px solid lime; */
  /* around the whole year */
}


div.divtight
{
    margin:0px;
    padding:0px;
    border:0px solid red;
}

/*
.bordred
{
    border:1px solid red;
}

.bordgreen
{
    border:1px solid lime;
}

.bordblue
{
    border:1px solid blue;
}

.bordyellow
{
    border:1px solid yellow;
}
*/

h6.stopwatchlegend
{
    font-size: 10px;
    line-height: 10px;
    color: #ffffff;
    margin:0px;
    padding:0px;
    /* padding-bottom:0px; */
}


h1.stopwatchtime 
{
    font-size: 160px;
    line-height: 140px;
    color: #ffffff;
    margin:0px;
    padding:0px;
    /* padding-bottom:10px; */
    vertical-align: middle;
font-weight: 700;
}

span.spandate
{
    font-size: 12px;
    line-height: 14px;
    color: snow;
    margin:4px;
    padding:0px;   
}

.stopwatchttext {
    font-size: 12px;
    line-height: 14px;
    color: #fffcd6;
    margin:4px;
    padding:0px;
}


span.stopwatch 
{
    margin:4px;
    padding:0px;
}

table.tbcent
{
    margin-top:0px;
    margin-bottom:0px;
    margin-left: auto;
    margin-right: auto;
}


button.stopwatchbtn
{
    margin:8px;
    /* margin-left:100px;
    margin-right:100px; */
    padding:4px;
    width:56px;
    font-size: 13px;
    font-weight: 500;
    /* border:1px solid cyan; */
}

/* links from index.htm to open the modal  */
a.acalendar
{
  font-size: 18px;
  margin:0px;
  padding:0px;
}

a.astopwatch
{
  font-size: 22px;
  line-height: 20px;
  margin:0px;
  padding:0px;
}

/*  nem ========================================= */

p.nemdt
{
   margin : 0px;
   margin-left : 30px;
   padding : 0px;
   text-align : left ;
   font-size : 11px; 
   line-height: 11px;
   color: white;
   /*background-color: cyan;*/
}


h3.h3nem
{
   padding: 0px;
   margin:0px;
}

table.tbcentnem
{
   border-collapse: collapse;
   margin-top:0px;
   margin-left: auto;
   margin-right: auto;
   padding:0px;
   /* border:1px solid red; */
}

td.tdnem
{
   text-align: center;
   font-size: 12px;
   font-weight: 500;
   margin:0px;
   padding:0px;
   /* border:1px solid yellow; */
}

th.thneml
{
   font-size: 12px;
   font-weight: 450;
   margin:0px;
   padding:0px;
   text-align: center;
   width:50%;
}

th.thnemr
{
   font-size: 12px;
   font-weight: 450;
   margin:0px;
   padding:0px;
   text-align: center;
   width:50%;
}

input.nemcheckbox, label.nemlabel
{
   margin : 0px;
   padding : 0px;
   text-align : left ;
   font-size : 11px; 
   cursor : pointer;
}


textarea.nemtextarea
{
   width :100%;
   font-size: 9px;
   /* font-family: courier; */
   /* font-weight: 550; */
   height:80px;
   padding:5px;
   border-radius: 5px;
   
}

td.tdcheck
{
    padding:0px;
    margin:0px;
    /* border:1px solid red; */
    line-height: 15px;

}

a.amn
{
  font-family: 'Arial Narrow', sans-serif;
  font-size: 11px;
}

a.amn:hover
{
  background-color: orange;
}

p.pmntight
{
  text-align: center;
  padding:0px;
  margin:0px;
  margin-bottom:5px;
}