* {
     font-family:
          "Wix Madefor Display",
          -apple-system,
          sans-serif;
     box-sizing: border-box;
     user-select: none;
}
html {
     overflow: hidden;
     height: 100%;
}
body {
     background-color: white;
     transition: all 0.3s ease;
     overflow-y: auto;
     height: 100%;
     box-sizing: border-box;
     padding-top: 20px;
}
.style {
     border: 2px solid #ddd;
     border-radius: 10px;
     padding: 8px 10px;
     background-color: white;
     outline: none;
     cursor: pointer;
     transition: all 0.2s ease;
}
input:hover {
     cursor: text;
}
h1 {
     display: inline-block;
     margin: 0;
     margin-right: 20px;
}
#textbox {
     font-size: 18px;
     cursor: pointer;
}
#multiDel {
     width: 15px;
     height: 20px;
     padding: 8px 10px;
     font-size: 16px;
     cursor: pointer !important;
     transform: translateY(3px);
}
#textInput {
     width: 200px;
}
#dateInput {
     width: 150px;
}
#add {
     width: 60px;
}
.homeButtons {
     margin-left: 2px;
     display: inline-flex;
     vertical-align: middle;
     justify-content: center;
     align-items: center;
     transform: translateY(-1px);
     width: 38px;
     height: 38px;
     padding: 0;
}
#accomplished,
#count {
     position: absolute;
     right: 250px;
     top: 150px;
     font-size: 20px;
     font-weight: bold;
     color: #34c759;
     margin: 0;
}
#count {
     transform: translateX(17px) translateY(1px);
}
.reset {
     position: absolute;
     right: 250px;
     top: 150px;
     margin: 0;
     transform: translateX(80px) translateY(0px);
     width: 50px;
     height: 30px;
}
#list-container {
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
     flex-direction: row;
     margin-top: 5px;
}
#list-ok {
     background-color: #34c759;
     list-style-type: none;
     margin-left: auto;
     margin-right: 60px;
     margin-top: 10px;
}
.list:has(li) {
     margin: 0px;
     padding: 0em 0em;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
     border-radius: 1em;
     list-style-type: none;
}
.model-line {
     display: flex;
     justify-content: space-evenly;
     align-items: center;
     margin: 5px 7px 5px 10px;
     max-width: 500px;
}
.model-remind {
     width: 200px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     margin-left: 10px;
}
.model-date {
     width: 100px;
}
.trash {
     margin-left: 20px;
}
.valid {
     margin-left: 10px;
}
.valid svg,
.trash svg {
     display: flex;
     justify-content: center;
     align-items: center;
}
.trash svg {
     color: #ff3b30;
}
.valid svg {
     color: #34c759;
}
.display {
     background-color: #000000 !important;
     color: #ffffff !important;
}
.display button {
     background-color: #2c2c2e !important;
     border: 2px solid #38383a;
     color: #ffffff;
}
.display input.style {
     background-color: #1c1c1e;
     border: 2px solid #38383a;
     color: #ffffff;
     color-scheme: dark;
}
.display .trash svg {
     color: #ff453a;
}
.display #accomplished,
.display #count,
.display.valid svg {
     color: #32d74b;
}
.display #list-ok {
     background-color: #32d74b;
     color: #ffffff;
}
@media (max-width: 1100px) {
     body {
          font-size: 3.5vw;
     }
     .style {
          padding: 1.5vw 2vw;
          font-size: 3.5vw;
     }
     #textbox {
          font-size: 4.2vw;
          cursor: pointer;
     }
     #multiDel {
          width: 3.5vw;
          height: 4.7vw;
          padding: 8px 10px;
          font-size: 16px;
          cursor: pointer !important;
          transform: translateY(3px);
     }
     #textInput {
          width: 30vw;
          height: 8.8vw;
     }
     #dateInput {
          width: 32.5vw;
          height: 8.8vw;
     }
     #add {
          width: 14vw;
          height: 9vw;
     }
     .homeButtons {
          width: 9vw;
          height: 9vw;
          padding: 1.5vw;
     }
     #moon,
     #sun {
          width: 7vw;
          height: 5.8vw;
     }
     #accomplished,
     #count {
          position: static;
          display: inline;
          text-align: center;
     }
     #count {
          transform: translateX(4px);
     }
     .reset {
          position: static;
          transform: none;
          order: 2;
          width: 14vw;
          height: 7vw;
          margin-left: 2.3vw;
     }
     #list-container {
          flex-direction: column;
          margin: 0;
     }
     #list-ok {
          order: 3;
          margin-left: 0;
          margin-right: 0;
          margin-top: 0px;
     }
     .list:has(li) {
          list-style-type: none;
     }
     .model-line {
          max-width: 93vw;
          margin-left: 2.3vw;
          margin-top: 5px;
          margin-bottom: 0px;
          font-size: 3.5vw;
     }
     .model-remind {
          width: 31.3vw;
     }
     .model-date {
          width: 23.3vw;
     }
     .trash {
          margin-left: 2.3vw;
     }
     .valid {
          margin-left: 2.3vw;
     }
     .valid svg,
     .trash svg {
          width: 4.6vw;
          height: 4.6vw;
     }
     .model-line > svg {
          width: 4.8vw;
          height: 4.8vw;
     }
     .display {
          background-color: #000000 !important;
          color: #ffffff !important;
     }
     #acc-wrapper {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 10px;
          margin-left: 1.2vw;
          margin-bottom: 10px;
     }
     #list-nok {
          order: 1;
          margin: 0;
          padding: 0;
     }
     #list-nok:has(li) {
          margin-top: 5px;
     }
     #list-ok .model-line {
          margin-bottom: 5px;
     }
     #list-ok .model-remind {
          width: 39.5vw;
     }
     #list-ok .trash {
          margin-left: 4.6vw;
     }
}
.hidden {
     display: none !important;
}