:root {
 --primary-blue: #65a7e8;
 --secondary-yellow: #ede9b6;
 --paper-offwhite: #fefbe6;
 --tag-green: #dbefd1;
 --tag-purple: #e2ddf6;
 --tag-blue: #dbefff;
 --tag-gray: #f2f2ea;
 --accent-red: #ea716e;
}

body {
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 background: #f3f4f6;
 color: #333;
 max-width: 640px;
 margin: 0 auto;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

body,
.notepaper-paper,
.tag-chip,
.paper-checkbox,
.btn,
label,
input,
select,
textarea {
 font-family: 'Patrick Hand', cursive, 'Inter', Arial, sans-serif;
}

::placeholder,
input::placeholder,
.form-group label{
 font-style: italic;
 color: #6f6f6f !important;
 opacity: 1;
}

/* Headers */
h1,
h4 {
 font-weight: 600;
 color: #1f2937;
 margin-bottom: 15px;
}

h1 {
 font-size: 2rem;
}

form {
 margin-bottom: 30px;
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 align-items: center;
}

form#login {
 padding-top:40px;
}

form#login,form#login .mb-3, form#login button, form#login span {
 width:100%;
}
form#login input {
 font-size:1.5rem;
}

form#login span {
 margin-bottom:10px;
}

form#login span a {
 font-weight:bold;
}

input[type="text"],
input[type="date"] {
 flex: 1 1 200px;
 padding: 10px 15px;
 border: 1.5px solid #d1d5db;
 border-radius: 6px;
 font-size: 1rem;
 transition: border-color 0.3s ease;
 outline-offset: 2px;
}

input[type="text"]:focus,
input[type="date"]:focus {
 border-color: #3b82f6;
 outline: none;
}

button {
 background-color: #3b82f6;
 color: white;
 border: none;
 padding: 12px 24px;
 border-radius: 6px;
 cursor: pointer;
 font-weight: 600;
 font-size: 1rem;
 transition: background-color 0.3s ease;
}

li {
 display: flex;
 align-items: center;
 gap: 10px;
}

li form {
 display: flex;
 align-items: center;
 justify-content: center;
}

li input[type="checkbox"] {
 width: 18px;
 height: 18px;
 transform: scale(1.8);
 cursor: pointer;
 margin: 0;
 padding: 0;
}

a {
 text-decoration: none;
 color: #65a7e8;
 font-weight: 500;
}

a:hover {
 text-decoration: underline;
}

ul,
ol {
 padding-left: 20px;
 margin-top: 0;
}

li a {
 font-size: 2rem;
 font-weight: 300;
 text-align: left;
 display: block;
 color: #41424C;
 margin-bottom: 10px;
 margin-left: 10px;
 padding-top: 4px;
}

/* For task title in task detail view (e.g., h1) */
h1.task-title {
 font-size: 2.5rem;
 font-weight: 700;
 text-align: left;
 color: #1e40af;
 margin-bottom: 15px;
}

.tag-cloud {
 margin-bottom: 22px;
 text-align: left;
 width:100%;
}

.tag-label {
 font-weight: 600;
 margin-right: 8px;
}

.tag-chip {
 font-family: 'Patrick Hand', cursive, 'Inter', sans-serif;
 border-radius: 20px;
 padding: 4px 8px;
 margin: 2px 2px;
 background: #fbfae6;
 color: #444;
 border: 2px solid #eae5ca;
 display: inline-block;
 box-shadow: 0 1px 6px rgba(0, 0, 0, 0.11);
 transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
 font-size: 1.2rem;
}

.tag-chip:nth-child(1) {
 transform: rotate(-2.2deg);
}

.tag-chip:nth-child(2) {
 transform: rotate(1.4deg);
}

.tag-chip:nth-child(3) {
 transform: rotate(-1deg);
}

.tag-chip:nth-child(4) {
 transform: rotate(1.8deg);
}

.tag-chip:nth-child(5) {
 transform: rotate(-2.8deg);
}

.tag-chip.active,
.tag-chip:hover {
 background: #e1ecfa;
 color: #65a7e8;
 box-shadow: 0 2px 14px rgba(37, 99, 235, 0.14);
 border-color: #b5d7f7;
 font-weight: bold;
 text-decoration: underline wavy #2179cf 2px;
 transform: scale(1.05) rotate(-2deg);
}

.tag-chip:hover {
 animation: pop 0.18s cubic-bezier(0.29, 0.54, 0.53, 1.14) forwards;
}

@keyframes pop {
 0% {
 transform: scale(1);
 }

 70% {
 transform: scale(1.07);
 }

 100% {
 transform: scale(1.02);
 }
}

.tag-purple {
 background: #ede9f5;
 border-color: #d4cbe8;
 color: #5b527f;
 box-shadow:
 inset 0 1px 0 #f6f5fb,
 0 2px 6px rgba(117, 107, 148, 0.15);
}

.tag-blue {
 background: #e7eff3;
 border-color: #c8d5dd;
 color: #4a6e87;
 box-shadow:
 inset 0 1px 0 #f8fbfc,
 0 2px 6px rgba(100, 132, 152, 0.12);
}

.tag-pink {
 background: #faefef;
 border-color: #f1d7d7;
 color: #9e5a5a;
 box-shadow:
 inset 0 1px 0 #fff8f8,
 0 2px 6px rgba(173, 103, 103, 0.1);
}

.tag-green {
 background: #e6efe8;
 border-color: #c8d4c2;
 color: #526a51;
 box-shadow:
 inset 0 1px 0 #f7fbf6,
 0 2px 6px rgba(114, 146, 106, 0.12);
}

.tag-chip.reset {
 background: #f7f7f5;
 color: #666;
 border: 1.5px solid #d6d5c9;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 font-weight: 600;
}

.tag-chip.reset:hover {
 background: #eaeae6;
 color: #444;
}

.navbar {
 position: absolute;
 --bs-navbar-padding-y: 0;
 width: 100px;
 height: 100px;
 float: right;
 top: 0;
 right: 0;
 background: none !important;
 border: none !important;
 box-shadow: none;
}

.navbar-brand {
 position: relative;
 margin-left:-5px;
 z-index: 20000;
}

.navbar-logo {
 height: 110px;
 width: auto;
 user-select: none;
 transition: transform 0.2s cubic-bezier(0.84, 0.17, 0.5, 0.96);
}

.navbar-logo:hover {
 transform: scale(1.08);
}

.navbar-nav {
 align-items: center;
 font-size: 1.17rem;
 margin-top: 16px;
}

ul li a {
 font-size: 1.5rem;
 letter-spacing: 0.3px;
 color: #41424C;
 font-weight: 500;
 text-decoration: none;
}

ul li {
 margin-bottom: 18px;
}

ul li a:hover {
 text-decoration: underline;
}

.task-header {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 margin-bottom: 0.8rem;
}

.task-title {
 font-size: 2.4rem;
 font-weight: 700;
 color: #65a7e8;
 margin: 0;
 flex: 1;
 letter-spacing: 0.5px;
}

.task-due-date {
 flex-shrink: 0;
}

.due-date-box {
 width: 58px;
 height: 66px;
 background: #e3f0fb;
 border-radius: 12px;
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 font-family: 'Inter', Arial, sans-serif;
 user-select: none;
}

.due-day {
 font-size: 0.95rem;
 font-weight: 600;
 color: #2971c3;
 padding-top: 5px;
}

.due-date-number {
 font-size: 2.1rem;
 font-weight: 800;
 color: #23518e;
 margin: 4px 0 0 0;
}

.task-link {
 color: #65a7e8;
 text-decoration: none;
}

.task-link:hover,
.task-link:focus {
 text-decoration: underline;
}

.task-tags {
 margin-bottom: 20px;
}

.task-status {
 font-weight: 600;
 font-size: 1.1rem;
 margin-bottom: 24px;
}

.task-buttons-bottom {
 display: flex;
 justify-content: flex-end;
 gap: 12px;
 bottom: 25px;
 right: 15px;
 padding-top: 1rem;
 border-top: 1px solid #ddd7c7;
 position: absolute;
 width: 90%;
}

.task-buttons-bottom .status {
 position: absolute;
 left: 15px;
 bottom: 7px;
}

.btn {
 border: none;
 border-radius: 20px;
 font-family: inherit;
 font-size: 1.15rem;
 font-weight: 700;
 padding: 10px 26px;
 cursor: pointer;
 margin-top: 2px;
 transition: background 0.17s;
}

.btn-primary {
 background: #65a7e8;
 color: #fff;
}

.btn-primary:hover {
 background: #1648ab;
}

.btn-danger {
 background: #ed3833;
 color: #fff;
}

.btn-danger:hover {
 background: #a8221e;
}

.back-link {
 color: #1761b7;
 font-weight: 600;
 margin-top: 18px;
 text-decoration: none;
 letter-spacing: 0.5px;
 font-size: 1.12rem;
}

.back-link:hover {
 text-decoration: underline;
}

.btn-danger-alt {
 background-color: #e07b7b !important;
 color: white;
 box-shadow: 0 0 6px rgba(224, 123, 123, 0.35);
}

.btn-danger-alt:hover {
 background-color: #b65252 !important;
 box-shadow: 0 0 10px rgba(181, 82, 82, 0.55);
}

.inline-form {
 display: inline;
 margin: 0;
 padding: 0;
 background: none;
 border: none;
}

.back-link {
 font-size: 1rem;
 color: #65a7e8;
 text-decoration: none;
 font-weight: 600;
}

.back-link:hover,
.back-link:focus {
 text-decoration: underline;
}

.task-view-container {
 position: relative;
 padding-top: 32px;
 padding-right: 100px;
 max-width: 720px;
 margin: 2rem auto;
}

.task-list {
 background: none;
 padding-left: 0;
 margin: 0;
 list-style: none;
 position: relative;
 z-index: 2;
}

.task-list li {
 font-family: 'Patrick Hand', 'Caveat', cursive, sans-serif;
 font-size: 1.5rem;
 font-weight: 500;
 min-height: 33px;
 display: flex;
 align-items: center;
 padding: 2px 0;
 margin: 0;
 position: relative;
}

#view-mode,
#edit-mode {
 font-family: 'Patrick Hand', 'Caveat', cursive, 'Inter', Arial, sans-serif;
 font-weight: 500;
 font-size: 1.5rem;
 line-height: 1.6;
 color: #444;
}

#view-mode h1,
#edit-mode h1 {
 font-family: 'Patrick Hand', 'Caveat', cursive, sans-serif;
 font-weight: 800;
 font-size: 2rem;
 text-align: left;
 color: #65a7e8;
 margin-bottom: 1rem;
 margin-top:20px;
}

#edit-mode label,
.form-group label {
 color: #4a4a4a;
 margin-bottom: 6px;
 display: inline-block;
 clear: both;
}

#edit-mode input[type="text"],
#edit-mode input[type="date"],
#edit-mode textarea,
#edit-mode select,
.form-group textarea,
.form-group select,
.form-group input,
.form-group input[type="text"],
.form-group input[type="date"] {
 width: 100%;
 padding: 10px 14px;
 margin-bottom: 18px;
 border: 1.5px solid #ccc;
 border-radius: 8px;
 font-family: 'Inter', Arial, sans-serif;
 font-size: 1.5rem;
 transition: border-color 0.2s ease;
}

#edit-mode input[type="text"]:focus,
#edit-mode input[type="date"]:focus,
#edit-mode textarea:focus,
#edit-mode select:focus,
.form-group input[type="text"]:focus,
.form-group input[type="date"]:focus,
.form-group textarea:focus,
.form-group select:focus {
 border-color: #65a7e8;
 outline: none;
}

#view-mode button {
 background: #65a7e8;
 color: white;
 border-radius: 24px;
 padding: 8px 20px;
 font-weight: 700;
 font-size: 1.5rem;
 border: none;
 cursor: pointer;
 box-shadow: none;
 transition: background-color 0.25s ease;
 user-select: none;
}

#view-mode button:hover {
 background-color: #1a3ea8;
}

#edit-mode button#cancel-button {
 background: #ccc;
 color: #333;
 margin-left: 14px;
 font-weight: 600;
}

#edit-mode button#cancel-button:hover {
 background: #b3b3b3;
}

#edit-mode input[type="text"],
#edit-mode input[type="date"],
#edit-mode textarea,
#edit-mode select {
 background: transparent;
 border: none;
 border-bottom: 2px solid #ccc;
 border-radius: 0;
 padding: 8px 0;
 font-size: 1.5rem;
 font-family: 'Patrick Hand', cursive, 'Inter', Arial, sans-serif;
 transition: border-color 0.2s ease;
 outline: none;
}

#edit-mode input[type="text"]:focus,
#edit-mode input[type="date"]:focus,
#edit-mode textarea:focus,
#edit-mode select:focus {
 border-color: #65a7e8;
}

.notepaper-paper {
 background: linear-gradient(to bottom, rgba(60, 110, 190, 0.09) 1px, transparent 0) repeat-y, #fcf8ed;
 background-size: 100% 34px;
 position: relative;
 padding: 2.6rem 2.3rem 2rem 3.8rem;
 margin: 2rem auto;
 max-width: 650px;
 min-height: 480px;
 font-family: 'Patrick Hand', 'Comic Sans MS', cursive, sans-serif;
 color: #2c2c2c;
}

.notepaper-paper::before {
 content: "";
 position: absolute;
 left: 23px;
 top: 22px;
 bottom: 22px;
 width: 2.2px;
 background: rgba(216, 63, 63, 0.19);
 border-radius: 1.5px;
}

.task-view-flex {
 display: flex;
 flex-direction: row;
 align-items: flex-start;
 justify-content: space-between;
}

.task-main {
 flex: 1 1 0%;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 clear:both;
}

.task-title {
 color: #65a7e8;
 font-size: 2.4rem;
 font-weight: 700;
 margin: 0 0 10px 0;
 letter-spacing: 0.5px;
}

.task-details {
 font-size: 1.5rem;
 margin: 18px 0 18px 0;
 color: #434242;
 line-height: 1.7;
 text-align: left;
 white-space: pre-line;
}

.task-details .title {
 text-decoration: underline;
}

.task-details .details {
 margin-top: -30px;
}

.task-tags {
 margin-bottom: 22px;
 margin-top: 0;
 display: flex;
 flex-wrap: wrap;
 gap: 10px 16px;
}

.task-buttons {
 display: flex;
 gap: 20px;
 margin-bottom: 18px;
}



.container {
 position: relative;
}

.calendar-icon {
 position: absolute;
 top: 25px;
 right: 15px;
 font-family: 'Patrick Hand', cursive;
 font-size: 1.3rem;
 color: #555;
 width: 70px;
 height: 70px;
 line-height: 20px;
 padding-top: 15px;
 text-align: center;
 border: 2px solid #555;
 border-radius: 50%;
 background: #fffbe7;
 box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
 user-select: none;
 pointer-events: none;
 cursor: default;
}

ul.task-list .calendar-icon {
 width: 45px;
 height: 45px;
 font-size: 1rem;
 line-height: 16px;
 padding-top: 5px;
 top:2px;
}


.form-group {
 margin-bottom: 1.4rem;
 text-align: left;
 clear: both;
 width: 100%;
}

.form-group label {
 display: block;
 font-weight: 600;
 margin-bottom: 0.5rem;
 color: #4a4a4a;
 font-family: 'Patrick Hand', cursive, 'Inter', Arial, sans-serif;
 font-size: 1.1rem;
}

.form-group input,
.form-group textarea,
.form-group select {
 width: 100%;
 padding: 0.5rem 0.8rem;
 font-size: 1.1rem;
 border: 1.5px solid #ccc;
 border-radius: 6px;
 font-family: 'Patrick Hand', cursive, 'Inter', Arial, sans-serif;
 transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
 border-color: #65a7e8;
 outline: none;
}

.form-group textarea {
 width: 100%;
 min-height: 250px;
}

.edit-buttons-bottom {
 position: absolute;
 bottom: 30px;
 right: 30px;
 margin-top: 3rem;
 padding-top: 1rem;
 border-top: 1px solid #ddd7c7;
}

.edit-buttons-bottom .btn {
 border-radius: 20px;
 font-weight: 700;
 font-size: 1.15rem;
 padding: 10px 26px;
 cursor: pointer;
 user-select: none;
 transition: background 0.25s ease;
}

.edit-buttons-bottom .btn-primary {
 background-color: #65a7e8;
 color: #fff;
}

.edit-buttons-bottom .btn-primary:hover {
 background-color: #1648ab;
}

.edit-buttons-bottom .btn:hover {
 background-color: #b3b3b3;
}

.add-task-btn {
 color: #fff;
 font-family: 'Patrick Hand', cursive;
 font-size: 3rem;
 display: flex;
 align-items: center;
 justify-content: center;
 position: fixed;
 bottom: 35px;
 right: 20px;
 cursor: pointer;
 transition: box-shadow 0.14s, transform 0.14s;
 background: #65a7e8;
 border-radius: 50%;
 width: 60px;
 height: 60px;
 z-index: 10000;
 box-shadow: 0px 0px 5px #333;
}

.add-task-btn span {
 margin-top: -11px;
}

.logo-checkmark {
 filter: drop-shadow(0 3px 5px #dfbb54);
}

#quick-add-title {
    float:left;
    width:80%;
    padding:2px;
    margin-bottom:20px;
}

.task-list form {
    margin-bottom:-20px;
}

.task-list form button.btn-primary, .task-list form button.btn-primary:hover {
    background-color: transparent;
    color: gray;
    font-size: 3rem;
    font-weight: 100;
    line-height: 2rem;
    float: right;
    margin: 0;
    padding: 0;
}

.task-item {
 display: flex;
 align-items: center;
 gap: 12px;
 cursor: pointer;
 user-select: none;
}

.handwritten-checkbox {
 position: relative;
 display: inline-flex;
 align-items: center;
 cursor: pointer;
 user-select: none;
 width: 28px;
 height: 28px;
}

.handwritten-checkbox input {
 opacity: 0;
 position: absolute;
 width: 28px;
 height: 28px;
 margin: 0;
 cursor: pointer;
 z-index: 2;
}

.handwritten-checkbox .box {
 width: 28px;
 height: 28px;
 stroke: #535353;
 stroke-width: 2.5;
 fill: #fff;
 filter: drop-shadow(0.5px 0.5px 0.3px rgba(0, 0, 0, 0.1));
 stroke-linejoin: round;
 stroke-linecap: round;
 transition: stroke 0.3s;
}

.handwritten-checkbox .checkmark {
 width: 28px;
 height: 28px;
 stroke: #2179cf;
 stroke-width: 3;
 fill: none;
 stroke-linejoin: round;
 stroke-linecap: round;
 position: absolute;
 top: 0;
 left: 0;
 pointer-events: none;
 opacity: 0;
 transition: opacity 0.3s;
 stroke-dasharray: 30;
 stroke-dashoffset: 30;
 animation: none;
 zoom:2;
 top: -9px;
 left: -4px;
}
#edit-mode .handwritten-checkbox .checkmark {
 left: -4px;
 top: -5px;
}
#edit-mode .handwritten-checkbox {
 position: absolute;
 top: 25px;
 right: 25px;
}

.handwritten-checkbox input:checked~.checkmark {
 opacity: 1;
 stroke-dashoffset: 0;
 animation: draw 1s ease forwards;
}

@keyframes draw {
 to {
 stroke-dashoffset: 0;
 }
}

.task-link {
 font-family: 'Patrick Hand', cursive;
 font-size: 1.5rem;
 color: #121212;
 text-decoration: none;
}

.task-link:hover {
 text-decoration: underline;
}

.task-label {
 position: relative;
 display: inline-block;
 cursor: pointer;
 transition: color 0.3s;
}

.task-label.done::after {
 content: '';
 position: absolute;
 left: 0;
 top: 50%;
 width: 100%;
 height: 7px;
 pointer-events: none;
 background: url('data:image/svg+xml;utf8,<svg width="120" height="7" xmlns="http://www.w3.org/2000/svg"><path d="M2 4 Q30 0 60 4 Q90 8 118 2" stroke="rgba(34,139,230,0.65)" stroke-width="3" fill="none"/></svg>') repeat-x;
 background-size: 120px 7px;
 transform: scaleX(0);
 transition: transform 0.35s cubic-bezier(.54, 1.54, .38, .89);
 transform-origin: left;
}

.task-label.done {
 color: #bbb;
}

.task-label.done::after {
 transform: scaleX(1);
}

.btn:focus,
.tag-chip:focus,
.paper-checkbox:focus {
 outline: 3px dashed #65a7e8;
 outline-offset: 2px;
}

.btn,
.tag-chip {
 min-width: 48px;
 min-height: 44px;
}

.due-soon-tag {
 background-color: #ffe8a1;
 color: #b87200;
 border: 1.5px solid #f1ca55;
 font-weight: 700;
 font-family: 'Patrick Hand', cursive, 'Inter', Arial, sans-serif;
 padding: 6px 9px;
 border-radius: 22px;
 box-shadow: 0 2px 6px rgba(241, 202, 85, 0.3);
 cursor: pointer;
 user-select: none;
 margin: 0;
 display: inline-block;
 transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.due-soon-tag:hover {
 background-color: #ffdd54;
 box-shadow: 0 3px 10px rgba(241, 202, 85, 0.55);
}

.task-list li {
 text-align: left;
 padding: 0;
 border-bottom: 1px dotted #ccc;
 font-size: 1.15rem;
}

.task-link {
 text-decoration: none;
 color: #555;
}

.task-link:hover {
 text-decoration: underline;
 color: #2179cf;
}

.site-header {
 background: #333;
 border-bottom: 6px solid #a38b5d;
 box-shadow: 0 3px 5px rgba(0, 0, 0, 0.12);
 font-family: 'Patrick Hand', cursive, sans-serif;
 position: sticky;
 top: 0;
 z-index: 1000;
 padding:10px 20px;
}


main.container {
 background: #fffef5;
 border-left: 2px solid #d1c7b7;
 border-right: 2px solid #d1c7b7;
 border-bottom: 2px solid #d1c7b7;
 border-radius: 0 0 12px 12px;
 box-shadow: inset 0 0 20px #f3e8d7;
 padding-left: 2rem;
 margin-top: -6px;
 font-family: 'Patrick Hand', cursive, sans-serif;
 color: #4a4a4a;
 min-height: 75vh;
 padding-top: 30px !important;
 position: relative;
 background-image:
 repeating-linear-gradient(to bottom,
 transparent,
 transparent 24px,
 rgba(200, 180, 150, 0.1) 25px),
 linear-gradient(to bottom, #fffef5, #fffef5);
 background-repeat: repeat;
 overflow-y: auto;
 overflow-x: hidden;
 top: -15px;
 max-width:99%;
}

main.container::before {
 content: "";
 position: absolute;
 left: 1rem;
 top: 0;
 bottom: 0;
 width: 3px;
 background: #ff6b6b30;
 border-radius: 2px;
 pointer-events: none;
 z-index: 5;
}



#task-search {
    font-family: 'Patrick Hand', cursive;
    font-size: 1.5rem;
    padding: 10px 14px;
    width: 108%;
    max-width: 640px;
    border: 1px solid #d1c7b7;
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none;
    user-select: text;
}

.task-search-container {
    margin-left: -2px;
    position:relative; 
    max-width:90%; 
    margin:30px 30px 30px -2px;
}

#autocomplete-list {
    position: absolute;
    top: 57px;
    left: 12px;
    width: 100%;
    max-width: 370px;
    background: #fffef5;
    border: 1px solid #d1c7b7;
    border-top: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(180, 140, 90, 0.1);
    max-height: 220px;
    overflow-y: auto;
    z-index: 500;
}


.autocomplete-item {
 padding: 10px 16px;
 font-family: 'Patrick Hand', cursive;
 font-size: 1.5rem;
 cursor: pointer;
 border-bottom: 1px dotted #eae5ca;
 user-select: none;
}


.autocomplete-item:last-child {
 border-bottom: none;
}


.autocomplete-item:hover,
.autocomplete-item:focus {
 background-color: #fae3aa;
 outline: none;
}

.autocomplete-active {
 background-color: #007BFF;
 color: #fff;
 cursor: pointer;
}


.edit-mode input[type="text"],
.edit-mode input[type="date"],
.edit-mode textarea,
.edit-mode select {
 background: transparent;
 border: none;
 border-bottom: 2px solid #ccc;
 border-radius: 0;
 padding: 8px 0;
 font-size: 1.5rem;
 font-family: 'Patrick Hand', cursive, 'Inter', Arial, sans-serif;
 transition: border-color 0.2s ease;
 outline: none;
 width: 100%;
 box-sizing: border-box;
 margin: 0;
}

.edit-mode input[type="text"]:focus,
.edit-mode input[type="date"]:focus,
.edit-mode textarea:focus,
.edit-mode select:focus {
 border-color: #65a7e8;
 outline: none;
}

.edit-mode label {
 font-weight: 600;
 color: #4a4a4a;
 margin-bottom: 6px;
 display: inline-block;
 clear: both;
 font-family: 'Patrick Hand', cursive, 'Inter', Arial, sans-serif;
 font-size: 1.1rem;
}
.form-group label{
 font-size:1.5rem;
 font-weight:normal;
}

.edit-mode .btn-primary {
 background-color: #65a7e8;
 color: #fff;
}

.edit-mode .btn-primary:hover {
 background-color: #1648ab;
}

.nav-menu {
 max-width:640px;
}

.hamburger-btn {
 position: relative;
 float: right;
 top: -62px;
 z-index: 2001;
 width: 40px;
 height: 30px;
 cursor: pointer;
 background: none;
 border: none;
 padding: 0;
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 align-items: center;
}

.hamburger-btn:hover {
    background-color:transparent;
}

#hamburger-btn .hamburger-line {
 width: 100%;
 height: 4px;
 background-color: #fb9742;
 border-radius: 2px;
 transition: all 0.3s ease;
}

.side-menu {
 position: fixed;
 top: 0;
 left: -240px;
 width: 230px;
 height: 100%;
 background: #fffef5;
 border-right: 6px solid #dec998;
 box-shadow: 6px 0 20px #333;
 font-family: 'Patrick Hand', cursive, 'Inter', Arial, sans-serif;
 z-index: 2000;
 transition: left 0.25s cubic-bezier(.48,1.2,.31,0.97);
 padding-top: 70px;
}
.side-menu.open {
 left: 0;
}

.side-menu ul {
 list-style: none;
 padding: 0 0 0 20px;
 margin: 0;
 top: 40px;
 position: relative;
}

.side-menu li {
 margin: 32px 0;
}

.side-menu a {
 text-decoration: none;
 color: #555;
 font-size: 1.29rem;
 font-weight: 700;
 letter-spacing: 1.5px;
 transition: color 0.17s, text-decoration 0.13s;
}

.side-menu a:hover {
 color: #65a7e8;
 text-decoration: underline wavy #65a7e8;
}

.hamburger-btn.open .hamburger-line:nth-child(1) {
 transform: translateY(8px) rotate(45deg);
}
.hamburger-btn.open .hamburger-line:nth-child(2) {
 opacity: 0;
}
.hamburger-btn.open .hamburger-line:nth-child(3) {
 transform: translateY(-8px) rotate(-45deg);
}

#toggle-btn {
background: none;
border: none;
color: gray;
font-size: 24px;
cursor: pointer;
margin-left: auto;
float: right;
position: absolute;
top: 20px;
right: -10px;
}
#toggle-tags {
 margin-top:0;
}

.back-button {
 background-color: transparent;
 color: #999;
 border: none;
 padding: 0;
 font-weight: 600;
 font-size: 4rem;
 line-height: 3rem;
 float: left;
}

.autocomplete-suggestions {
 width: 95%;
 max-width: 370px;
 background: #fffef5;
 border: 1px solid #d1c7b7;
 border-radius: 12px;
 box-shadow: 0 2px 12px rgba(180, 140, 90, 0.1);
 max-height: 220px;
 overflow-y: auto;
 z-index: 1000;
 cursor: pointer;
 top: -1px;
 position: relative;
}

.autocomplete-suggestion {
 padding: 6px 10px;
 font-size: 1.5rem;
 border-bottom: 1px solid #9f9f9f;
 width: 95%;
 margin: 0 auto;
}

.autocomplete-suggestion:hover {
 background-color: #e2e8f0;
}

a.truncate-link {
  display: inline-block;
  max-width: 300px; /* set to your container's max-width */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

#no-data-message h1 {
    width: 50%;
    margin: 25% auto;
    color: gray;
}

.hidden {
    display:none;
}

form.register-access, form.register  {
    display:block;
    margin-top:40px;
}

form.register-access button{
    padding:5px 10px;
}

form#login button {
    width:200px;
    margin:0 auto;
}

.error-message {
    width: 300px;
    margin: 100px auto;
    font-size: 1.7rem;
}

@media (min-width: 600px) {

 input[type="text"],
 input[type="date"] {
 font-size: 1.1rem;
 }
 main.container {
 max-width:100%;
 }
}