/* MIT License

Copyright (c) 2022 Mads Bendix Horn

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. */


* {
    box-sizing: border-box;  /* Include margin, padding and border in box sizes */
  }

body {
  /* max-width: 400px; */
  min-width: 340px;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}

button:hover,
button:focus {
  /* transform: scaleY(1.2); */
  transform: rotateX(10deg);
  border: 1px solid rgb(255, 50, 255);
}

h1 {
  margin: unset;
  grid-area: header1;
}

h2 {
  margin: 0px;
  grid-area: cwcen;
}

input {
  width: auto;
  padding-left: 8px;
  border-radius: 10px;
  border: 2px inset rgba(96, 139, 168, 0.6);
}

p {
  font-size: 0.8em;
}

/* @keyframes infoAnimation {
  0% {border: 1px solid rgb(96, 139, 168);}
  50% {border: 1px solid rgb(255, 0, 0);}
  100% {border: 1px solid rgb(96, 139, 168);}
} */

html {
  background-color: white;
}



.headContainer {
  display: grid;
  grid-template-columns: 1% 10% auto 5% 12% 1%;
  grid-template-rows: auto auto auto;
  grid-gap: .3rem;
  background-color: transparent;
  border: none;
  overflow-y: scroll;
  grid-template-areas:
  '. hcl header hcr1 hcr2 .'
  '. . hearts . . .'
  '. . messages . . .';
}

.centerWrapper {
  display: grid;
  grid-template-columns: 10% 16% 43% 14% 5% 4%;
  grid-template-rows: auto auto;
  grid-gap: .3rem;
  background-color: transparent;
  border: none;
  overflow-y: scroll;
  grid-template-areas:
  'cwl1 cwl cwcen cwr1 cwr2 cwr3'
  '. . chooseBox . . .'
}

#sortTask {
  display: none;
}

#sortTask.active {
  display: flex;
  grid-area: cwl;
  justify-content: flex-end;
}

/* #storageHeadingText {
  grid-area: cwcen;
  font-size: 12px;
} */

#dayInputBox {
  display: none;
}

#dayInputBox.active {
  display: block;
  grid-area: cwcen;
}


/* add view css below */

.buttons {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-template-rows: 50px;
}

.timeButtons {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}

.addContainer1 {
  display: grid;
  grid-template-columns: 5% auto 5%;
  grid-template-rows: auto auto auto;
  grid-template-areas:
  '. header1 .'
  '. header2 .'
  '. messages .';
  /* margin-top: -10px; */
}

.addContainer2 {
  display: grid;
  grid-template-columns: 51% 51%;
  /* column-gap: .2rem; */
  background-color: transparent;
  border: none;
  grid-template-areas:
  'input table'
}

.topic {
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-top: 10px;
  margin-left: 10px;
  border-radius: 10px;
  background-color: rgba(154, 219, 240, .25);
  width: 90%;
}

.hearts {
  font-size: 1.4em;
}

.heartImg {
  position: relative;
  bottom: 25px;
  height: 23px;
  width: 23px;
}

.number {
  position: relative;
  bottom: 36px;
  left: 7px;
  font-size: 0.7em;
}

.durationContainer {
  display: grid;
  grid-template-columns: 50% 45% 5%;
  grid-gap: .6rem;
  background-color: transparent;
  border: none;
  grid-template-areas:
  'input table .'
}

.timeContainer {
  display: grid;
  grid-template-columns: 40% 54% 5%;
  grid-gap: .6rem;
  background-color: transparent;
  border: none;
  grid-template-areas:
  'input table .'
}

.add {
  text-align: center;
  height: 22px;
  font-size: 0.6em;
  background-image: linear-gradient(#9898ff, #9adbf0, #9adbf0, #9adbf0, #9898ff);
  border: 1px solid rgb(96, 139, 168);
  border-radius: 10px;
}


.timeAdjusterTop {
  width: 30px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  background-image: none; /* linear-gradient(#9898ff, #9adbf0, #9adbf0, #9adbf0, #9adbf0); */
  background-color: rgba(0, 0, 0, 0);
  position: relative;
  z-index: 10;
  top: 3px;
  border-bottom: none;
}

.timeAdjusterMiddle {
  width: 30px;
  height: 45px;
  border-radius: 10px;
  background-image: linear-gradient(#9898ff, #9adbf0, #9adbf0, #9adbf0, #9898ff);
  background-color: rgba(0, 0, 0, 0);
  position: relative;
  top: -20px;
  z-index: 5;
  border: none;
}

.timeAdjusterBottom {
  width: 30px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  background-image: none; /* linear-gradient(#9adbf0, #9adbf0, #9adbf0, #9abdf0, #9898ff); */
  background-color: rgba(0, 0, 0, 0);
  position: relative;
  z-index: 10;
  top: -43px;
  border-top: none;
}

.text {
  font-weight: bold;
  margin-bottom: 4px;
  margin-top: 5px;
}

.lblTxt {
  font-weight: normal;
}

.backgroundUp {
  width: 30px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  background-image: linear-gradient(#9898ff, #9adbf0, #9adbf0, #9adbf0, #9adbf0);
  position: relative;
  top: 0px;
  z-index: 1;
  border-bottom: none;
}

.backgroundDown {
  width: 30px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  background-image: linear-gradient(#9adbf0, #9adbf0, #9adbf0, #9adbf0, #9898ff);
  position: relative;
  top: -48px;
  z-index: 1;
  border-top: none;
}

#page {
  position: sticky;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

#inputBox_add {
  width: 175px;
}

#addInfo {
  width: 20px;
}

#info {
  width: 22px;
  border-radius: 20px;
  align-self: center;
  grid-area: info;
}

#d1, #g1 {
  margin-left: 0px;
}

#dayView {
  grid-template-columns: auto;
  grid-template-rows: auto auto auto;
  grid-gap: .3rem;
  background-color: white;
  border: none;
  overflow-y: scroll;
  grid-template-areas: 'head' 'wrap' 'cont';
  transition: all 0.1s cubic-bezier(0.25, 0.6, 0.6, 1);
}

#text1, #text2 {
  display: flex;
  grid-area: input;
  align-self: center;
  font-weight: bold;
}

#inputTimeBox {
  grid-area: input;
  width: 54px;
  height: 20px;
}

#table {
  grid-area: table;
  border-collapse: collapse;
}

#inputTaskBox {
  width: auto;
}

#inputDurationBox {
  width: 60px;
  /* height: 15px; */
}

#optional {
  font-size: 0.6em;
}

#applyDiv {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}

#applyAdd {
  width: 220px;
}

#cancel {
  width: 15%;
}

#applyAdd, #cancel {
  font-size: 0.6em;
  margin-top: 5px;
}

[name=drain] {
  opacity: 0%;
}

[name=drain] + img {
  opacity: 10%;
}

[name=drain]:checked + img {
  opacity: 100%;
}

#drainBand {
  display: flex;
  background-image: linear-gradient(to right, hsl(255,50%,0%), hsl(255, 50%, 50%));
  width: 100%;
  height: 50%;
}

#gainBand {
  display: flex;
  background-image: linear-gradient(to right, hsl(255,50%,50%), hsl(255, 50%, 100%));
  width: 100%;
  height: 50%;
}

/* add View-css above */

/* month view css below */


#monthView {
    width: 100%;
    background-color: white;
    transition: all .1s cubic-bezier(0.25, 0.6, 0.6, 1);
    position: relative;
}


.monthContainer2 {
  display: grid;
  grid-template-columns: 5% 80% 5%;
  grid-template-rows: auto auto;
  grid-gap: .3rem;
  background-color: transparent;
  border: none;
  height: 640px;
  overflow-y: scroll;
  grid-template-areas:
  '. taskHeader .'
  '. taskListing .'
}

#monthMessage {
  grid-area: messages;
}

#monthTaskDiv {
  display: flex;
  grid-area: taskListing;
  flex-direction: column;
}

.pastDateButton {
	position: relative;
	text-align: left;
	border: 1px solid rgba(154, 219, 240, 1.0);
	border-radius: 3px; /* Difference */
	background-color: rgba(154, 219, 240, .25);
	box-shadow: 0px 0px 3px 2px rgba(154, 219, 240, .25);
}

.dateButton {
  position: relative;
  text-align: left;
  border: 1px solid rgba(154, 219, 240, 1.0);
  border-radius:  10px;
  background-color: rgba(154, 219, 240, .25);
  box-shadow: 0px 0px 3px 2px rgba(154, 219, 240, .25);
}

.dateButton .toolTip {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -100px;
  border-radius: 10px;
  padding: 5px;
}

.dateButton .toolTip::after {
  content: '';
  position: absolute;
  top: 99%;
  left: 50%;
  margin-left: -5px;
  border: solid;
  border-width: 7px;
  border-color: rgba(154, 219, 240, 1) transparent transparent transparent;
}

.dateButton:hover .toolTip {
  visibility: visible;
  background-color: rgba(154, 219, 240, 1);
}

.toolTip:empty {
   display: none;
}

.weekend {
  background-color: rgba(154, 219, 240, .6);
}

.pastDateButton {
	background-color: rgba(154, 219, 240, .05);
  border: 1px solid rgba(121, 145, 153, 0.25);
}

.pastDateButton.weekend {
	background-color: rgba(172, 185, 220, 0.2);
  border: 3px solid rgb(160, 179, 185);
}

.pastDateButton.weekend.isClicked {
  border: 3px solid rgb(255, 50, 255);
}

.todayButton {
  border: 3px solid rgba(70, 197, 238, 0.83);
  border-radius: 0px;
}

.monthName {
  background-color: white;
  border: none;
  margin: 5px;
}


#track {
  display: none;
}

#track.active {
  display: block;
  align-self: center;
  grid-area: hcl;
}

#clearButton {
  display: none;
}

#clearButton.active {
  display: block;
  grid-area: cwr1;
}

#putBackClearDiv {
  display: none;
}

#putBackClearDiv.active {
  display: flex;
  grid-area: cwl;
  justify-content: end;
}

#monthInputBox {
  display: none;
}

#monthInputBox.active {
  display: block;
  grid-area: cwcen;
}

#undo {
  display: none;
  grid-area: cwl1;
}

#undo.active {
  display: block;
  align-self: center;
}

#month {
  display: none;
  grid-area: hcl;
}

#month.active {
  display: block;
  align-self: center;
}

#day {
  display: none;
}

#day.active {
  display: block;
  align-self: center;
  grid-area: hcr2;
}

#gotoSettings {
  display: none;
}

#gotoSettings.active {
  display: block;
  grid-area: cwr2;
}

#dayChooseBox {
  grid-area: chooseBox;
}

#moveToDay {
  display: none;
  grid-area: cwr1;
}

#moveToDay.active {
  display: grid;
  line-height: 0.8em;
  padding-top: 5px;
}

#monthViewName {
  /* Put FuzzyPlan header in right place */
  justify-content: center;
  grid-area: header;
}

#monthChooseBox {
  display: none;
  grid-area: chooseBox;
}

#monthChooseBox.active {
  display: grid;
}

#putBack {
  display: none;
	line-height: 1.7em;
  width: 40px;
}

#putBack.active {
  display: grid;
}

/* month view css above */

/* track view css below */
.trackContainer1 {
  display: grid;
  grid-template-columns: 1% 10% auto 5% 12% 1%;
  grid-template-rows: auto auto auto;
  grid-gap: .3rem;
  background-color: transparent;
  border: none;
  overflow-y: scroll;
  grid-template-areas:
  '. . header1 . month1 .'
  '. . header2 . . .'
  '. . messages . . .';
}

#trackMessage {
  grid-area: messages;
}

#trackedItemsDiv {
  display: flex;
  flex-direction: column;
  grid-area: trackedItems;
}

#trackedItemsColourDiv {
  display: flex;
  flex-direction: column;
  grid-area: trackedItemsColour;
}

#month1 {
  display: none;
}

#month1.active {
  display: block;
  grid-area: hcr2;
  align-self: center;
}

#trackViewSpacer, #selectAllOrNoneDiv{
  height: 20px;
}

#deleteTrackedButton {
  font-size: 0.8em;
}

#trackViewName {
  /* Put FuzzyPlan header in right place */
  justify-content: center;
  grid-area: header1;
}


#trackView {
    width: 100%;
    /* height: 700px; */
    background-color: white;
    transition: all 0.1s cubic-bezier(0.25, 0.6, 0.6, 1);
    position: relative;
}

.colourButton {
  width: 25%;
  height: 30px;
}

#colourPickerInputBox {
  width: 200px;
}

.greyedOut {
  opacity: 0.3;
}

#showTimeSpentFrom, #showTimeSpentTo {
  width: 90px;
}

#showTimeSpentMoveIntervalChkbox {
  width: 14px;
}
/* track view css above ^^^ */

/* settings view css below */

.inputSettings {
  width: 43px;
}

.backupDistanceBetweenButtons {
  display: inline-block;
  width: 53px;
}

.labelText {
  white-space: pre-line;
}

#inputBoxWakeUp {
  width: 52px;
}

label {  /* Used in settingsView */
  font-size: 0.9em;
}

.settingsContainer {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.stressContainer {
	display: grid;
	grid-template-columns: auto 30px;
}

#gotoDayFromSettings {
  display: none;
}

#gotoDayFromSettings.active {
  display: block;
  grid-area: hcl;
}

#settingsMessage {
  grid-area: messages;
  color: red;
  white-space: pre;
}

#soundIfFocus {
  white-space: pre;
}

#soundIfFocusPlayView {
  white-space: pre;
  font-size: 0.8em;
}

#stressLevelText {
  white-space: pre;
}

/* settings view css above ^^^ */


#container {
  display: grid;
  grid-template-columns: 1% 10% 1% 80% 1%;
  grid-template-rows: auto auto auto;
  grid-gap: .3rem;
  background-color: transparent;
  border: none;
  height: 640px;  /* Change via @media*/
  overflow-y: scroll;
  grid-template-areas:
  '. . . taskHeader .'
  'stressBar timeBar . taskListing .'
  '. . . taskFooter .';
}


.controlButton {
  text-align: center;
  width: auto;
  height: 22px;
  border: 1px solid rgb(96, 139, 168);
  border-radius: 10px;
  background-image: linear-gradient(#9898ff, #9adbf0, #9adbf0, #9adbf0, #9898ff);
  font-size: 0.6em;
  padding-left: 3px;
}


.halfHours1,
.halfHours2 {
  background-color: transparent;
  padding: 0px;
  border: none;
  border-radius: 0px;
  height: 2.0833%;
  font-size: 14px;
  border-top: 1px solid rgba(154, 219, 240, 1.0);
}

.halfHours1 {
  height: 1.0417%;
}

.pause {
  border: none;
  background-color: rgba(154, 219, 240, .25);
  box-shadow: 0px 0px 3px 2px rgba(152, 250, 172, 0.56);
}

.stressDiv {
  font-size: 14px;
  height: 1.0417%;
  width: 10px;
  color: hsl(255, 100%, 85%);
  border: none;
  border-radius: 0px;
}

.task {
  text-align: left;
  border: 1px solid rgb(96, 139, 168);
  border-radius: 10px;
  background-color: rgba(154, 219, 240, .6);
  grid-area: taskListing;
}

.isFuzzy { /* Needs to come after .task */
   border: 1px solid rgba(154, 219, 240, 1.0);
  border-radius: 10px;
  background-color: rgba(154, 219, 240, .25);
  box-shadow: 0px 0px 3px 2px rgba(154, 219, 240, .25);
}

.isGain { /* Needs to come after .isFuzzy and before .isClicked */
  border: 1px solid rgba(123, 217, 71, 1.0);
  background-color: rgba(123, 217, 71, .2);
}

.isClicked { /* Needs to come after .isFuzzy */
  transform: rotateX(10deg);
  border: 2px solid rgb(255, 50, 255);
}

.isNotFuzzy.isGain { /* Needs to come after .isFuzzy */
  border: 1px solid rgba(123, 217, 71, 1.0);
  background-color: rgba(123, 217, 71, .3);
}

.isNullTime { /* Needs to come after .task */
  background-color: white;
  border: 1px solid rgba(154, 219, 240, 1.0);
  border-radius: 10px;
}

#toDoButton {
  position: absolute;
  /* bottom: 60%;
  left: 30%; */
  margin-top: 50%;
  margin-left: 31%;
  font-size: x-large;
  line-height: 0.1em;
  text-align: center;
  padding: 0.1em;
  background-image: linear-gradient(#08e22a, #0bfb31, #0bfb31, #0bfb31, #08e22a);
  height: 1.7em;
  width: 5.7em;
  border-radius: 25px;
  border: 1px solid rgb(108, 168, 48);
  z-index: 10;
}

#hourglassDiv {
  box-sizing: content-box; /* Suspend the border-box used in the rest of the project */
	display: flex;
  margin: 0 auto;
  justify-content: center;
  margin-top: 6px;
}

#hourglassText {
  display: flex;
  align-self: center;
}

#stopButton {
  font-size: large;
  line-height: 0.1em;
  text-align: center;
  padding: .1em 0.2em .3em .15em;
  /* background-image: linear-gradient(#b00505, #fb0b0b, #fb0b0b, #fb0b0b, #fb0b0b, #b00505); */
  background-image: linear-gradient(#b93604, #fb4e0b, #fb4e0b, #fb4e0b, #fb4e0b, #a43206);
  /* background-image: linear-gradient(#05b020, #0bfb31, #0bfb31, #0bfb31, #0bfb31, #05b020); */
  height: 2em;
  width: 2em;
  border-radius: 25px;
  border: 1px solid rgb(108, 168, 48);
  z-index: 10;
}

#playButtonContainer {
  display: none;
}

#playButtonTop {
  position: absolute;
  top: -6px;
  left: 16px;
  width: 10px;
  height: 5px;
  background-color: #06c925;
  border: 1px solid rgb(96, 139, 168);
}

#playButtonTap {
  position: absolute;
  top: -1px;
  left: 33px;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background-color: #06c925;
  border: 1px solid rgb(96, 139, 168);
}

/* #playButton.active { */
#playButton.active {
  font-size: x-large;
  line-height: 0.1em;
  text-align: center;
  padding: .01em 0.2em .2em .15em;
  background-image: linear-gradient(#05b020, #0bfb31, #0bfb31, #0bfb31, #0bfb31, #05b020);
  height: 1.7em;
  width: 1.7em;
  border-radius: 25px;
  border: 1px solid rgb(108, 168, 48);
}

#playButtonContainer.active {
  display: block;
	position: absolute;
	bottom: 10%;
	margin-top: 450px;
	margin-left: 100px;
  z-index: 10;
  opacity: 0.8;
}

#playButton.stop, #playButtonTap.stop, #playButtonTop.stop {
  background-image: linear-gradient(#b93604, #fb4e0b, #fb4e0b, #fb4e0b, #fb4e0b, #a43206);
}

#addTaskButton {
  display: none;
}

#addTaskButton.active {
  display: block;
  position: absolute;
  right: 80px;
  bottom: 10%;
  margin-top: 450px;
  font-size: x-large;
  line-height: 0.1em;
  text-align: center;
  padding: .1em 0.12em .2em .1em;
  background-image: linear-gradient(#05b020, #0bfb31, #0bfb31, #0bfb31, #0bfb31, #05b020);
  height: 1.7em;
  width: 1.7em;
  border-radius: 25px;
  border: 1px solid rgb(108, 168, 48);
  z-index: 10;
  opacity: 0.8;
}

#addView {  /* Box that help transition to add-view */
  width: 100%;
  background-color: white;
  transition: all 0.1s cubic-bezier(0.25, 0.6, 0.6, 1);
  position: relative;
  left: 0px;
}

#hourglass {
  display: none;
}

#hourglass.active {
  display: block;
}

#soundDiv {
  display: none;
}

#soundDiv.active {
  display: block;
}

.addView.playView {
  display: none;
}

.addView.playView.active {
  display: block;
}

#heart {
  display: flex;
  text-align: center;
  justify-content: center;
  background-color: white;
  font-size: 14px;
  grid-area: hearts;
}

#info {
  display: none;
  grid-area: hcr1;
}

#info.active {
  display: block;
  width: 22px;
  border-radius: 20px;
  margin-top: 2px;
  font-size: 0.8em;
  padding-left: 7px;
}

#settingsHeading, #trackViewHeading {
  display: none;
  justify-content: center;
  grid-area: cwcen;
  font-size: 13px;
}

#message {
  display: grid;
  color: red;
  text-align: center;
  white-space: pre;  /* Render text as predefined without wrapping */
  grid-area: messages;
}

#name {
  /* Put FuzzyPlan header in right place */
  justify-content: center;
  grid-area: header;
}

#nowSpan {
  border-bottom: 3px solid rgba(255, 0, 255, 1.0);
  grid-area: timeBar;
  z-index: 999;
}

div.tasksToSort {
  display: grid;
}

/*#upButton, #nowButton {
  grid-area: cwl;
}*/

div.tasksToSort #upButton {
  display: none;
}

#upButton {
  font-size: 0.5em;
}

div.tasksToSort #nowButton {
  display: none;
}

div.tasksToSort #postpone {
  display: flex;
  line-height: 0.8em;
  padding-top: 5px;
}

#postpone {
  display: none;
}

#chooseBox {
  display: none;
  grid-area: chooseBox;
}

#chooseBox.active {
  display: grid;
}

.floatingTask {
  display: flex;
  flex-flow: column wrap;
  background-color: rgba(123, 217, 71, .6);
  border-radius: 10px;
  cursor: not-allowed;
  width: 100%;
}

#settings {
  width: auto;
  font-size: 15px;
  margin-left: 2px;
}

#storage {
  display: none;
  grid-area: hcr2;
}

#storage.active {
  display: block;
  margin-top: 2px;
  margin-left: 2px;
  align-self: center;
}

#stressDiv {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  border: none;
  height: 1440px;
  align-items: center;
  grid-area: stressBar;
}

#taskDiv {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  border: none;
  height: 1440px;
  width: 100%;
  grid-area: taskListing;
}

#timeDiv {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  border: none;
  width: 100%;
  height: 1440px;
  align-items: center;
  grid-area: timeBar;
}

#zoom {
  display: none;
}

#zoom.active {
  display: block;
  text-align: center;
  width: auto;
  font-size: 15px;
  padding-top: 0px;
  padding-bottom: 2px;
  grid-area: cwr3;
}



/* storage-view css below */

#stores {
  display: flex;
  flex-direction: column;
}


#storageView {
  transition: all 0.1s cubic-bezier(0.25, 0.6, 0.6, 1);
}


.storage {
  width: 250px;
}

.storageContainer {
  display: grid;
  grid-template-columns: 1% 10% auto 5% 12% 1%;
  grid-template-rows: auto auto;
  grid-gap: .3rem;
  background-color: transparent;
  border: none;
  overflow-y: scroll;
  grid-template-areas: '. day1 header1 . . .' '. . messages . . .';
}

.storageContainer1 {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.notInUse {
  background-image: linear-gradient(#c0c0f1,  #d8eaf1, #d8eaf1, #d8eaf1, #c3c3f7);
  border: none;
}

.highLighted {
  border: 1px solid rgb(255, 50, 255);
}

#storageMessage {
  grid-area: messages;
  color: red;
}

#stores {
  display: flex;
  flex-direction: column;
  grid-area: day1;
}

#day1 {
  display: none;
}

#day1.active {
  display: block;
  align-self: center;
  grid-area: hcl;
}

button[id*='memory'] {
  width: 300px;
  border-radius: 4px;
  font-size: 0.8em;
}

/* storage-view css above ^^^ */

@media screen and (min-width: 500px) {
  html {
    background-color: white;
  }

  #blankBottom {
    display: none;
  }

  #putBack {
    padding-top: 5px;
  }
}

@media screen and (max-width: 499px) {
  #blankBottom {
    height: 400px;
    grid-area: taskFooter;
  }

  #spacerText {
    font-weight: normal;
    position: relative;
    top: 50%;
  }

  #putBack {
  	padding-top: 2px;
  }
}

.screenReaderOnly { /* From https://a11y-guidelines.orange.com/en/web/components-examples/accessible-hiding/ */
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap; /* added line */
      border: 0;
}