body {
  font: normal 20px Verdana, Arial, sans-serif;
}

div.container {
  padding-left: 0%;
  padding-right: 0%;
}

ul.nopad {
  padding-left: 0;
}

label.done {
  color: grey;
  text-decoration: line-through;
}

#shade {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  display: none;
  color: grey;
  opacity: 0.25;
}

#main {
  width: 100%;
  height: 100%;
  position: relative;
}

#content,
#passwordForm,
#profileForm,
#loginForm,
#listDetailForm,
#itemDetailForm,
#eventDetailForm {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#event-detail-title {
  font-weight: bold;
}

#passwordForm,
#profileForm {
  z-index: 10;
}

/* CSS for show/hide done items button */
.show-hide {
  left: 15px;
  background-color: blue;
  color: white;
  font-size: 70%;
  cursor: pointer;
  padding: 4px;
  border-radius: 10px;
}

/* CSS for item edit button */
.edit-button {
  color: blue;
  background-color: white;
  font-size: 120%;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}

/* CSS for Pop-up window used for item details. */
 {box-sizing: border-box;}

/* The popup form - hidden by default */
.detail-form-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.detail-form {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.detail-form input[type=text] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.detail-form input[type=text]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.btn {
  color: white;
  border-radius: 10px;
  padding: 10px 10px;
  border: none;
  text-align: center;
  align-content: center;
  cursor: pointer;
  width: 25%;
  margin: 5px 5px;
/*  opacity: 0.8;*/
  box-shadow: 5px 5px #999;
}

/* Set a style for the small button */
.small-btn {
  border-radius: 5px;
  color: white;
  border: none;
  padding: 5px 10px;
  text-align: center;
  align-content: center;
  display: inline-block;
/*  font-size: 16px;
  margin: 16px 8px; */
  cursor: pointer;
  box-shadow: 5px 5px #999;
}

.btn:active {
  box-shadow: 3px 3px #666;
  transform: translate(2px, 2px);
}

.small-btn:active {
  box-shadow:  3px 3px #666;
  transform: translate(2px, 2px);
}

/* Green button */
.btn-green { background-color: #04AA6D; }
.btn-green:hover { background-color: #3e8e41 }
.btn-green:active { background-color: #3e8e41 }

/* Red button */
.btn-red { background-color: #f44336; }
.btn-red:hover { background-color: #a03122 }
.btn-red:active { background-color: #a03122 }

/* Blue button */
.btn-blue { background-color: #4169E1; }
.btn-blue:hover { background-color: #00308F }
.btn-blue:active { background-color: #00308F }

/* Disabled button */
.btn:disabled {
  background-color: grey;
  cursor: not-allowed;
}

/* Add styles to the form container */
.event-form {
  max-width: 300px;
  padding: 15px;
  background-color: white;
}

.event-input {
  width: 100%;
  padding: 5px;
  margin: 5px 0 5px 0;
  border: none;
  background: #f1f1f1;
}

.event-date {
  width: 33%;
  padding: 5px;
  margin: 5px 0 5px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.event-form input[type=text]:focus {
  background-color: #ddd;
  outline: none;
}

/* The login form - hidden by default */
.login-form-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.login-form {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.login-form input[type=text] {
  width: 100%;
  padding: 5px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.detail-form input[type=text]:focus {
  background-color: #ddd;
  outline: none;
}

/* Full-width input fields */
.login-form input[type=password] {
  width: 100%;
  padding: 5px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}


/* The Profile form - hidden by default */
.profile-form-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.profile-form {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.profile-form input[type=text] {
  width: 100%;
  padding: 5px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.profile-form input[type=text]:focus {
  background-color: #ddd;
  outline: none;
}

/* Full-width input fields */
.profile-form input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}


/* The Password Update form - hidden by default */
.password-form-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.password-form {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.password-form input[type=text] {
  width: 100%;
  padding: 5px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.password-form input[type=text]:focus {
  background-color: #ddd;
  outline: none;
}

/* Full-width input fields */
.password-form input[type=password] {
  width: 100%;
  padding: 5px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}


/* CSS for dropdown menu */
/* Dropdown Button */
.dropbtn {
/*  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
*/  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  z-index: 2;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 8px 8px;
  text-decoration: none;
  display: block;
}

/* Links inside the dropdown */
.dropdown-content .fake-a {
  color: black;
  padding: 8px 8px;
  text-decoration: none;
  display: block;
  cursor: pointer;
}

/* 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;} 

.help-text {
  display: none;
  position: fixed;
  top: 0;
  left: 15px;
  border: 3px solid #f1f1f1;
  height: 100%;
  overflow:scroll;
  /*max-width: 300px;*/
  padding: 10px;
  background-color: white;
  z-index: 9;
}



/* The Calendar page */
.calendar-page {
  display: block;
  border: 1px solid rgba(166, 168, 179, 1);
  z-index: 8;
}

/* Add styles to the form container */
.calendar-layout {
  min-width: 150px;
  max-width: 800px;
  padding: 10px;
  background-color: white;
}

/* Calendar grid layout */
/*.days-of-week-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: left;
}

.days-of-week-container {
  font-weight: bold;
  font-size: 120%;
}
*/
/* Calendar day layout */
.calendar-day {
  display: grid;
  grid-template-rows: 4;
  text-align: left;
}

/* Div that contains the full month view. */
.calendar-month {
  display: grid;
  width: 100%;
  height: 70vh;
  overflow-y: scroll;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 80px;
  grid-auto-rows: 80px;
}

/* Div that contains the single day view. */
.calendar-single-day {
  display: grid;
  width: 100%;
  height: 70vh;
  overflow-y: scroll;
  font-size: 70%;
  grid-template-columns: max-content auto;
  grid-gap: 1px;
  border: black;
  border-width: 1px;
  background-color: rgba(166, 168, 179, 1);*/
}

.calendar-single-day > div {
  text-align: left;
  padding: 5px;
  background-color: white;
}

.day-done {
  grid-area: xt;
  text-align: center;
}

.hdr-btn {
  cursor: pointer;
  margin: 0 auto;
/*  border: 2px solid green;*/
  padding: 2px;
/*  grid-column: 1;*/
}

.btn-today {
  grid-area: td;
  text-align: left;
}

.prev-day {
  grid-area: pd;
  text-align: center;
}
.prev-month {
  grid-area: pm;
  text-align: center;
}

.prev-year {
  grid-area: py;
  text-align: center;
}

.date-dd {
  grid-area: da;
}

.month-dd {
/*  grid-area: mo;*/
}

.day-dd {
/*  grid-area: dy;*/
  text-align: center;
}

.year-dd {
/*  grid-area: yr;*/
}

.next-day {
/*  grid-area: nd;*/
  text-align: center;
}

.next-month {
  grid-area: nm;
  text-align: center;
}

.next-year {
  grid-area: ny;
  text-align: center;
}

.calendar-month-header {
  display: grid;
  font-size: 70%;
  width: 100%;
  grid-template-columns: repeat(7, 1fr);
  grid-template-areas:
    "td py pm mo yr nm ny";
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(166, 168, 179, 1);
}

.calendar-month-days {
  display: grid;
  font-size: 70%;
  width: 100%;
  grid-template-columns: repeat(7, 1fr);
/*  grid-template-areas:
    "s m t w th f sa";
*/  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(166, 168, 179, 1);

}

.calendar-day-header {
  display: grid;
  font-size: 70%;
  width: 100%;
  grid-template-columns: repeat(10, 1fr);
  grid-template-areas:
    "td py pm pd da da nd nm ny xt";
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(166, 168, 179, 1);
}

#monthPickerM,
#monthPickerD,
#yearPickerM,
#yearPickerD {
  background: 0;
  border: none;
  font-size: 100%;
  font-weight: bold;
}

.day {
  border-bottom: 1px solid rgba(166, 168, 179, 1);
  border-right: 1px solid rgba(166, 168, 179, 1);
  text-align: right;
  padding: 2px 2px 2px 2px;
  letter-spacing: 1px;
  font-size: 12px;
  box-sizing: border-box;
  color: #98a0a6;
  position: relative;
  z-index: 1;
}

.grayed {
  background-color: #eeeeee;
  color: #587076;
}

.today {
  background-color: #ffe6ff;
  color: black;
}

.day:nth-of-type(7n + 7) {
  border-right: 0;
}

.day-name {
  font-size: 12px;
  text-transform: uppercase;
  color: black;
  text-align: center;
  border-bottom: 1px solid rgba(166, 168, 179, 1);
/*  line-height: 50px;*/
  font-weight: 500;
  padding: 7px 0;
}
.day--disabled {
  color: rgba(152, 160, 166, 0.6);
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f9f9fa' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
  cursor: not-allowed;
}

.tasklist {
  display: grid;
/*  line-height: 120%;*/
}

.task {
  display: flex;
  font-size: 12px;
  padding: 2px 2px;
  color: black;
  text-align: left;
  z-index: 10;
  border: 1px black solid;
  border-radius: 3px;
  cursor: pointer;
  background-color: rgb(153, 221, 255);
  width: 95%;
  min-width: 0;
}

.task > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: "..";
}

/*.task--warning {
  border-left-color: #fdb44d;
  background: #fef0db;
  align-self: center;
  color: #fc9b10;
  margin-top: -5px;
}
.task--danger {
  border-left-color: #fa607e;
  background: rgba(253, 197, 208, 0.7);
  align-self: end;
  color: #f8254e;
}
.task--info {
  border-left-color: #4786ff;
  background: rgba(218, 231, 255, 0.7);
  align-self: end;
  color: #0a5eff;
}
.task--primary {
  background: #4786ff;
  border: 0;
  border-radius: 4px;
  align-self: end;
  color: #fff;
  box-shadow: 0 10px 14px rgba(71, 134, 255, 0.4);
}
.task__detail {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  background: #fff;
  border: 1px solid rgba(166, 168, 179, 0.2);
  color: #000;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  z-index: 2;
}
.task__detail:after, .task__detail:before {
  bottom: 100%;
  left: 30%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.task__detail:before {
  border-bottom-color: rgba(166, 168, 179, 0.2);
  border-width: 8px;
  margin-left: -8px;
}
.task__detail:after {
  border-bottom-color: #fff;
  border-width: 6px;
  margin-left: -6px;
}
.task__detail h2 {
  font-size: 15px;
  margin: 0;
  color: #51565d;
}
.task__detail p {
  margin-top: 4px;
  font-size: 12px;
  margin-bottom: 0;
  font-weight: 500;
  color: rgba(81, 86, 93, 0.7);
}
*/