/*===============================
     TASKMASTER DEFAULT STYLES
================================*/

/* --> GLOBAL STYLES <-- */

* {
     box-sizing: border-box;
     scroll-behavior: smooth;
     margin: 0;
     padding: 0;
}

body {
     font-family: 'Nanum Gothic', 'Ubuntu', sans-serif;
     font-size: 1em;
     padding: 3em;
     width: 100%;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
}

ul {
     list-style-type: none;
}

/* --> Scroll Bar */

::-webkit-scrollbar {
     width: 10px;
}

::-webkit-scrollbar-track {
     background: transparent;
}

::-webkit-scrollbar-thumb {
     margin: 2px 0;
     border-radius: 2.5px;
}

/* --> Navigation */

.full-nav-wrapper {
     position: fixed;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     clip-path: circle(0px at calc(100% - 35px) 35px);
     transition: all 0.3s ease-in-out;
     z-index: 99;
}

#active:checked~.full-nav-wrapper {
     clip-path: circle(75%);
}

.menu-btn {
     position: absolute;
     z-index: 100;
     right: 10px;
     top: 10px;
     height: 50px;
     width: 50px;
     text-align: center;
     line-height: 50px;
     border-radius: 50%;
     font-size: 20px;
     cursor: pointer;
     background: transparent;
     transition: all 0.3s ease-in-out;
}

#active:checked~.menu-btn i:before {
     content: "\f00d";
}

.full-nav-wrapper ul {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     list-style: none;
     text-align: center;
}

.full-nav-wrapper ul li {
     margin: 3em 0;
}

.full-nav-wrapper ul li a {
     font-family: 'Ubuntu', 'Nanum Gothic', sans-serif;
     color: none;
     text-decoration: none;
     font-size: 2em;
     font-weight: 100;
     padding: 0.7em 1em;
     position: relative;
     line-height: 50px;
     transition: all 0.3s ease;
     border-radius: 10px;
}

input[type="checkbox"] {
     display: none;
}

/* --> Alert/Confirm */

.confirm {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     padding: 10px;
     box-sizing: border-box;
     z-index: 4;

     opacity: 0;
     animation-name: confirm-opening;
     animation-duration: 0.2s;
     animation-fill-mode: forwards;

     display: flex;
     align-items: center;
     justify-content: center;
}

.close {
     animation-name: confirm-closing;
}

.confirm-window {
     width: 100%;
     max-width: 600px;
     font-size: 14px;
     font-family: 'Nanum Gothic', 'Ubuntu', sans-serif;
     border-radius: 5px;
     overflow: hidden;

     opacity: 0;
     transform: scale(0.75);
     animation-name: confirm-window-opening;
     animation-duration: 0.2s;
     animation-fill-mode: forwards;
     animation-delay: 0.2s;
}

.confirm-titlebar,
.confirm-content,
.confirm-buttons {
     padding: 1.25em;
     font-size: 1.2em;
}

.confirm-titlebar {
     display: flex;
     align-items: center;
     justify-content: space-between;
}

.confirm-title {
     font-weight: bold;
     font-size: 1.1em;
}

.confirm-close {
     background: none;
     outline: none;
     border: none;
     transform: scale(2.5);
     transition: color 0.15s;
}

.confirm-close:hover {
     color: #721c24;
     cursor: pointer;
}

.confirm-content {
     line-height: 1.8em;
}

.confirm-buttons {
     display: flex;
     justify-content: flex-end;
}

.confirm-button {
     padding: 0.4em 0.8em;
     border: 2px solid;
     border-radius: 5px;
     font-weight: bold;
     font-size: 1.1em;
     font-family: 'Nanum Gothic', 'Ubuntu', sans-serif;
     margin-left: 0.6em;
     cursor: pointer;
     outline: none;
}

@keyframes confirm-opening {
     from {
          opacity: 0
     }

     to {
          opacity: 1
     }
}

@keyframes confirm-closing {
     from {
          opacity: 1
     }

     to {
          opacity: 0
     }
}

@keyframes confirm-window-opening {
     to {
          opacity: 1;
          transform: scale(1);
     }
}

/* --> No Script */

noscript {
     width: 100%;
     height: 100%;
     background: #ECEFF1;
     color: rgba(0, 0, 0, 0.87);
     font-family: 'Nanum Gothic', 'Ubuntu', sans-serif;
     margin: 0;
     padding: 0;
     display: flex;
     align-items: center;
     flex-direction: column;
}

#noscript-message {
     background: white;
     max-width: 360px;
     margin: 50px auto 16px;
     padding: 32px 24px 16px;
     border-radius: 3px;
}

#noscript-message h3 {
     color: #888;
     font-weight: normal;
     font-size: 16px;
     margin: 16px 0 12px;
}

#noscript-message h2 {
     color: #ffa100;
     font-weight: bold;
     font-size: 16px;
     margin: 0 0 8px;
     font-size: 2em;
     font-family: 'Ubuntu', 'Nanum Gothic', sans-serif;
}

#noscript-message h1 {
     font-size: 22px;
     font-weight: 300;
     color: rgba(0, 0, 0, 0.6);
     margin: 0 0 16px;
}

#noscript-message p {
     line-height: 140%;
     margin: 16px 0 24px;
     font-size: 14px;
}

#noscript-message a {
     display: block;
     text-align: center;
     background: #008080;
     text-transform: uppercase;
     text-decoration: none;
     color: white;
     padding: 16px;
     border-radius: 4px;
     margin-top: 5px;
     transition: all 0.3s;
}

#noscript-message a:hover {
     background: #DF9500;
}

#noscript-message,
#noscript-message a {
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

#load {
     color: rgba(0, 0, 0, 0.4);
     text-align: center;
     font-size: 13px;
}

.banner {
     max-width: 80%;
     margin-top: 2em;
}

@media (max-width: 600px) {

     body,
     #message {
          margin-top: 0;
          background: white;
          box-shadow: none;
     }

     body {
          border-top: 16px solid #ffa100;
     }
}

/* --> Toast */

.notifications {
     position: fixed;
     top: 30px;
     right: 20px;
     z-index: 10;
}

.notifications :where(.toast, .column) {
     display: flex;
     align-items: center;
}

.notifications .toast {
     width: 400px;
     position: relative;
     overflow: hidden;
     list-style: none;
     border-radius: 4px;
     padding: 16px 17px;
     margin-bottom: 10px;
     justify-content: space-between;
     animation: show_toast 0.3s ease forwards;
}

@keyframes show_toast {
     0% {
          transform: translateX(100%);
     }

     40% {
          transform: translateX(-5%);
     }

     80% {
          transform: translateX(0%);
     }

     100% {
          transform: translateX(-10px);
     }
}

.notifications .toast.hide {
     animation: hide_toast 0.3s ease forwards;
}

@keyframes hide_toast {
     0% {
          transform: translateX(-10px);
     }

     40% {
          transform: translateX(0%);
     }

     80% {
          transform: translateX(-5%);
     }

     100% {
          transform: translateX(calc(100% + 20px));
     }
}

.toast::before {
     position: absolute;
     content: "";
     height: 3px;
     width: 100%;
     bottom: 0px;
     left: 0px;
     animation: progress 5s linear forwards;
}

@keyframes progress {
     100% {
          width: 0%;
     }
}

.toast.success::before,
.btn#success {
     background: #0ABF30;
}

.toast.error::before,
.btn#error {
     background: #E24D4C;
}

.toast.warning::before,
.btn#warning {
     background: #E9BD0C;
}

.toast.info::before,
.btn#info {
     background: #3498DB;
}

.toast .column i {
     font-size: 1.75rem;
}

.toast.success .column i {
     color: #0ABF30;
}

.toast.error .column i {
     color: #E24D4C;
}

.toast.warning .column i {
     color: #E9BD0C;
}

.toast.info .column i {
     color: #3498DB;
}

.toast .column span {
     font-size: 1.07rem;
     margin-left: 12px;
}

.toast i:last-child {
     color: #aeb0d7;
     cursor: pointer;
}

.toast i:last-child:hover {
     color: #34495E;
}

@media screen and (max-width: 530px) {
     .notifications {
          width: 95%;
     }

     .notifications .toast {
          width: 100%;
          font-size: 1rem;
          margin-left: 20px;
     }
}

/* --> INTER-PAGE STYLES <-- */

.sign-wrapper,
.dashboard-wrapper {
     border-radius: 20px;
}

.dashboard-wrapper,
.board-wrapper,
.notes-wrapper,
.prj-wrapper {
     height: 100%;
     width: 100%;
}

.dashboard-wrapper,
.board-wrapper,
.prj-wrapper {
     padding: 2em;
}

div.more-dash,
div.project,
div.project-m {
     border-radius: 10px;
     margin: 5px;
     transition: all 0.3s;
     overflow: hidden;
}

.notes-wrapper,
.board-wrapper,
.prj-wrapper {
     height: 100%;
}

body.notes,
body.project,
body.board {
     padding: 0 3em;
}

/* --> SIGN-UP AND SIGN-IN PAGE <-- */

.sign-wrapper {
     width: 60%;
     height: 80%;
     margin: 3em;
     display: flex;
     flex-direction: row-reverse;
}

header.sign {
     width: 50%;
     height: 100%;
     border-radius: 0 20px 20px 0;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
}

img.logo {
     width: 5em;
}

p.logo-sign {
     font-family: 'Ubuntu', 'Nanum Gothic', sans-serif;
     font-size: 2em;
     margin-top: 0.5em;
}

main.sign {
     width: 50%;
     padding: 2em;
     display: flex;
     flex-direction: column;
     align-items: center;
}

h3.register-title {
     font-size: 2em;
     font-weight: 200;
     font-family: 'Ubuntu', 'Nanum Gothic', sans-serif;
     padding-bottom: 0.5em;
}

div.error-txt {
     width: 100%;
     margin-bottom: 0.5em;
     color: #721c24;
     background: #f8d7da;
     padding: 1em;
     text-align: center;
     display: none;
}

form.sign {
     width: 90%;
     display: flex;
     flex-direction: column;
     overflow-y: scroll;
}

.sign-input,
.sign-submit {
     width: 100%;
     font-size: 1em;
     padding: 0 0.5em;
     height: 50px;
     border-radius: 5px;
     margin: 0.25em 0;
     border: none;
     outline: none;
}

.sign-input {
     border-bottom-width: 3px;
     transition: all 0.3s ease;
}

div.pass {
     display: flex;
     align-items: center;
     position: relative;
}

div.pass i {
     position: absolute;
     right: 1em;
     z-index: 3;
}

div.pass i.active::before {
     content: "\f070";
}

.sign-submit {
     margin: 1.1em 0;
     transition: all 0.3s ease;
}

small.sign-link {
     margin-top: 0.1em;
}

small.sign-link a {
     text-decoration: none;
}

small.sign-link a:hover {
     text-decoration: underline;
}

/* --> THE DASHBOARD <-- */

.dashboard-wrapper {
     display: grid;
     gap: 1em;
     grid-template-columns: 25% 75%;
     grid-template-rows: 35% 65%;
}

.quick-todos,
header.dashboard,
main.dashboard {
     border-radius: 10px;
     opacity: 80%;
}

header.dashboard,
main.dashboard {
     width: 97%;
}

.quick-todos {
     overflow-y: scroll;
}

header.dashboard {
     display: flex;
     justify-content: space-between;
     flex-direction: column;
     font-family: 'Ubuntu', 'Nanum Gothic', sans-serif;
     background-size: 200%;
     background-position: right;
     overflow-x: visible;
     padding: 1.5em;
     overflow: hidden;
}

div.first-line {
     display: flex;
     justify-content: space-between;
}

div.dash-buttons {
     display: flex;
     align-items: flex-start;
}

div.dash-buttons * {
     margin-right: 0.5em;
}

div.dash-buttons i {
     font-size: 2em;
     transition: all 0.3s;
}

div.dash-buttons i:hover {
     transform: scale(1.1);
     z-index: 2;
}

div.dash-buttons:not(:last-child) {
     margin: 0;
}

button.sign-out {
     font-size: 0.9em;
     padding: 0.8em;
     border-radius: 5px;
     outline: none;
     transition: all 0.3s;
}

button.sign-out:hover {
     background-color: transparent;
}

header.dashboard span.title {
     display: flex;
     justify-content: flex-start;
     margin: 1.8em 0.7em 0 0;
     flex-direction: column;
}

header.dashboard span.title span.fir-date {
     font-size: 3.1em;
     /* font-weight: 80; */
}

header.dashboard span.title small.time-week {
     font-size: 1.2em;
}

header span.welcome {
     white-space: pre;
     display: flex;
     justify-content: flex-end;
     font-size: 1.8em;
     margin: 5px;
}

aside.quick-todos {
     padding: 0.7em;
     grid-row: span 2 / auto;
     display: flex;
     flex-direction: column;
     padding: 1em;
}

aside.quick-todos span.todos-title {
     font-family: 'Ubuntu', 'Nanum Gothic', sans-serif;
     text-align: center;
     margin: 0.5em;
     font-size: 1.8em;
}

form.todo-input {
     display: flex;
     margin: 0 -2px;
}

form.todo-input * {
     outline: none;
}

input.todo-input {
     border-radius: 5px 0 0 5px;
     font-size: 0.9em;
     width: 80%;
     font-family: 'Nanum Gothic', 'Ubuntu', sans-serif;
     padding: 0.5em;
}

form.todo-input input[type="submit"] {
     width: 20%;
     border-radius: 0 5px 5px 0;
     font-size: 1.5em;
     text-align: center;
     cursor: pointer;
}

aside.quick-todos ul.todos {
     padding: 1em 0.5em;
}

li.todo-item {
     width: 100%;
     font-size: 0.9em;
     padding: 0.7em 1.7em;
     text-align: left;
     transition: all 0.3s;
     cursor: pointer;
}

li.todo-item:first-child {
     border-radius: 5px 5px 0 0;
}

li.todo-item:last-child {
     border-radius: 0 0 5px 5px;
     border-bottom: none
}

li.todo-item.completed {
     text-decoration: line-through;
}

main.dashboard {
     display: grid;
     grid-template-columns: repeat(auto-fit, 30%);
     grid-template-rows: repeat(2, 45%);
     overflow-y: hidden;
     justify-content: center;
     gap: 1.5em;
     padding: 1em;
}

div.more-dash {
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 1.9em;
     font-weight: bold;
     transition: background 0.3s;
     cursor: pointer;
}

div.project {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     padding: 1em;
     overflow-y: scroll;
     cursor: pointer;
}

div.project::-webkit-scrollbar {
     width: 0;
}

p.prj-title {
     font-size: 1.7em;
     font-weight: bold;
     display: flex;
     align-self: flex-start;
}

span.prj-status {
     width: fit-content;
     font-size: 0.7em;
     border-radius: 5px;
     padding: 0.8em;
     display: flex;
     align-self: flex-end;
}

/* --> THE BOARD <-- */

.board-wrapper {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     gap: 2em;
     overflow-y: scroll;
}

.no-results {
     font-size: 2em;
     font-family: 'Ubuntu', 'Nanum Gothic', sans-serif;
     margin: auto;
}

.prj-board {
     width: 100%;
     display: grid;
     grid-template-columns: repeat(auto-fit, 16em);
     grid-template-rows: repeat(min(2), 11em);
     justify-content: center;
}

.prj-board div.more-dash {
     width: 95%;
     height: 90%;
}

div.project-m {
     width: 15em;
     height: 10em;
     padding: 1em;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     overflow-y: scroll;
     cursor: pointer;
}

div.project-m::-webkit-scrollbar {
     width: 0;
}

div.nav {
     position: relative;
     top: 0;
     width: 100%;
     display: flex;
     margin-top: -1em;
     justify-content: space-between;
}

div.nav-filter {
     width: 50%;
     height: 2.5em;
     display: flex;
     justify-content: flex-start;
}

div.nav-filter input {
     padding: 0.7em;
     border-radius: 5px;
     font-size: 1em;
     outline: none;
     height: 100%;
     width: 70%;
}

div.nav-buttons {
     width: 50%;
     height: 2.5em;
     display: flex;
     justify-content: flex-end;
}

div.nav-buttons .to-dashboard,
div.nav-buttons .add-note {
     white-space: pre;
     border-radius: 5px;
     width: 15em;
     outline: none;
     border: none;
     font-size: 1em;
     transition: all 0.3s;
}

div.nav-buttons .to-dashboard {
     margin-right: 1.3em;
}

/* --> NOTES PAGE <-- */


body.notes::-webkit-scrollbar {
     display: none;
}

.notes-wrapper {
     display: flex;
}

.notes-sidebar {
     border-right: 2px solid #dddddd;
     flex-shrink: 0;
     overflow-y: auto;
     padding: 1em;
     width: 33%;
}

div.buttons {
     display: flex;
     justify-content: space-between;
     height: 5em;
     margin-bottom: 1em;
}

.notes-add,
.notes-back {
     border: none;
     cursor: pointer;
     font-size: 1em;
     margin-bottom: 1em;
     padding: 0.75em 0;
     width: 90%;
     transition: all 0.3s;
     height: 100%;
     font-family: 'Nanum Gothic', 'Ubuntu', sans-serif;
     font-weight: 100;
}

.notes-add {
     border-radius: 0 7px 7px 0;
}

.notes-back {
     border-radius: 7px 0 0 7px;
}

.notes-list-item {
     padding: 1em 0.4em;
     cursor: pointer;
     transition: all 0.3s;
}

.notes-list-item:first-child {
     border-radius: 7px 7px 0 0;
}

.notes-list-item:last-child {
     border-radius: 0 0 7px 7px;
     border-bottom: none;
}

.selected {
     font-weight: 500;
}

.notes-small-title,
.notes-small-updated {
     padding: 10px;
}

.notes-small-title {
     font-size: 1.5em;
     font-family: 'Ubuntu', 'Nanum Gothic', sans-serif;
}

.notes-small-body {
     padding: 0 10px;
}

.small-bottom {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin: 0.3em 0;
}

.small-status {
     width: fit-content;
     font-size: 0.7em;
     border-radius: 5px;
     padding: 0.8em;
     margin: 0.5em;
}

.notes-small-updated {
     color: #aaaaaa;
     font-style: italic;
     text-align: right;
}

.notes-preview {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     padding: 2em 3em;
     flex-grow: 1;
}

.drag-drop {
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: 3;
     top: 0%;
     right: 0%;
     display: none;
     justify-content: center;
     align-items: center;
     border: 1em dashed;
     padding: 20px;
     text-align: center;
     cursor: pointer;
     font-size: 4em;
     font-family: 'Ubuntu', 'Nanum Gothic', sans-serif;
}

div.prev-foot {
     display: flex;
     flex-direction: row-reverse;
     align-items: center;
     justify-content: space-between;
}

div.foot-buttons {
     align-self: flex-end;
     display: flex;
     align-items: center;
     /* display: inline-block; */
}

div.foot-buttons i {
     margin: 0 0.5em;
     font-size: 2em;
     cursor: pointer;
     transition: all 0.3s ease;
}

div.foot-buttons i:hover {
     transform: scale(1.2);
     z-index: 2;
}

div.foot-buttons button {
     border-radius: 7px;
     padding: 0.5em 0.9em;
     margin: 0 0.7em;
     font-size: 1em;
     transition: all 0.3s;
     border: none;
     outline: none;
     font-weight: 100;
     font-family: 'Nanum Gothic', 'Ubuntu', sans-serif;
     cursor: pointer;
}

div.prev-foot button.delete:hover {
     color: #721c24;
     background: #f8d7da;
}

div.prev-foot button.save:hover {
     color: #1c722a;
     background: #d7f8db;
}

div.foot-buttons button:active {
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}

.status-radio {
     display: inline-flex;
     overflow: hidden;
     border-radius: 15px;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
     font-family: 'Ubuntu', 'Nanum Gothic', sans-serif;
     cursor: pointer;
     transition: background 0.1s;
}

.radio-input {
     display: none;
}

.radio-label {
     padding: 8px 14px;
     font-size: 1em;
     transition: background 0.3s;
     cursor: pointer;
}

.notes-preview,
.notes-preview form {
     height: 100%;
}

.notes-title,
.notes-body {
     border: none;
     outline: none;
     width: 100%;
}

.notes-title {
     font-size: 3em;
     font-weight: 500;
     font-family: 'Ubuntu', 'Nanum Gothic', sans-serif;
}

.notes-body {
     flex-grow: 1;
     font-size: 1.2em;
     line-height: 1.5;
     margin-top: 2em;
     resize: none;
     height: 80%;
     font-family: 'Nanum Gothic', 'Ubuntu', sans-serif;
}

/* --> PROJECT PAGE <-- */

body.project::-webkit-scrollbar {
     display: none;
}

.prj-wrapper {
     overflow-y: scroll;
}

body.project .prev-foot {
     margin-top: 3em;
}

body.project .notes-body {
     height: 85%;
}

div.ast-activator {
     position: absolute;
     top: 45%;
     right: 0;
     padding: 1em;
     border-radius: 5px 0 0 5px;
     transition: all 1s ease-out;
     cursor: pointer;
}

div.ass-wrapper {
     position: absolute;
     top: 0;
     right: 0;
     width: 0;
     height: 100%;
     z-index: 5;
     box-shadow: -1em 0 30px 0px rgba(0, 0, 0, 0.4);
     overflow-y: hidden;
}

@keyframes side-open {
     from {
          width: 0%;
          right: -50%;
     }

     to {
          right: 0%;
          width: 45%;
     }
}

@keyframes side-close {
     from {
          right: 0%;
          width: 45%;
     }

     to {
          right: -50%;
          width: 0%;
     }
}

.open-ast {
     animation: side-open ease-out 1s forwards;
}

.close-ast {
     animation: side-close ease-in 1s forwards;
}

div.ass-wrapper header {
     width: 100%;
     padding: 1rem 0.5rem 1rem 2rem;
     font-size: 1.3rem;
     display: flex;
     align-items: center;
     font-family: 'Ubuntu', 'Nanum Gothic', sans-serif;
}

span.close-ass {
     font-size: 2em;
     justify-self: flex-start;
     cursor: pointer;
}

span.ass-heading {
     margin-left: 20%
}

div.chat-box {
     overflow-y: auto;
     padding: 10px 30px 20px 30px;
     box-shadow: inset 0 32px 32px -32px rgb(0 0 0 / 5%),
          inset 0 -32px 32px -32px rgb(0 0 0 / 5%);
     height: calc(100% - 12em);
}

div.chat-box::-webkit-scrollbar {
     display: none;
}

.chat-box .chat-incoming {
     margin: 15px 0;
}

.chat-box .chat-incoming p {
     word-wrap: break-word;
     padding: 1em 2em;
     box-shadow: 0 0 32px rgb(0 0 0 / 8%),
          0 16px -16px rgb(0 0 0 / 10%);
}

.chat-box .chat-outgoing {
     display: flex;
     margin: 15px 0;
}

.chat-outgoing .details {
     margin-left: auto;
     max-width: calc(100% - 130px);
}

.chat-outgoing .details p {
     padding: 1em 2em;
     border-radius: 18px 18px 0 18px;
}

.chat-box .chat-incoming {
     display: flex;
     align-items: flex-end;
}

.chat-box .chat-incoming i {
     font-size: 1.5em;
     height: 1.7em;
     width: 1.7em;
     display: flex;
     border-radius: 50%;
     align-items: center;
     justify-content: center;
}

.chat-incoming .details {
     margin-left: 10px;
     margin-right: auto;
     max-width: calc(100% - 130px);
}

.chat-incoming .details p {
     border-radius: 18px 18px 18px 0;
}

.ai-pic {
     max-width: 18em;
     max-height: 20em;
     object-fit: scale-down;
}

@keyframes ldio-5srrg96ko17 {
     0% {
          transform: translate(10px, 44px) scale(0);
     }

     25% {
          transform: translate(10px, 44px) scale(0);
     }

     50% {
          transform: translate(10px, 44px) scale(1);
     }

     75% {
          transform: translate(44px, 44px) scale(1);
     }

     100% {
          transform: translate(78px, 44px) scale(1);
     }
}

@keyframes ldio-5srrg96ko17-r {
     0% {
          transform: translate(78px, 44px) scale(1);
     }

     100% {
          transform: translate(78px, 44px) scale(0);
     }
}

.ldio-5srrg96ko17 div {
     position: absolute;
     width: 1em;
     height: 1em;
     border-radius: 50%;
     transform: translate(44px, 44px) scale(1);
     animation: ldio-5srrg96ko17 1.0204081632653061s infinite cubic-bezier(0, 0.5, 0.5, 1);
}

.ldio-5srrg96ko17 div:nth-child(1) {
     transform: translate(78px, 44px) scale(1);
     animation: ldio-5srrg96ko17-r 0.25510204081632654s infinite cubic-bezier(0, 0.5, 0.5, 1), ldio-5srrg96ko17-c 1.0204081632653061s infinite step-start;
}

.ldio-5srrg96ko17 div:nth-child(2) {
     animation-delay: -0.25510204081632654s;
}

.ldio-5srrg96ko17 div:nth-child(3) {
     animation-delay: -0.5102040816326531s;
}

.ldio-5srrg96ko17 div:nth-child(4) {
     animation-delay: -0.7653061224489796s;
}

.ldio-5srrg96ko17 div:nth-child(5) {
     animation-delay: -1.0204081632653061s;
}

.loadingio-spinner-ellipsis-pspcyit56cn {
     width: 4.7em;
     height: 2.5em;
     display: inline-block;
     overflow: hidden;
     border-radius: 18px 18px 18px 0;
     padding: 0em 1em;
}

.ldio-5srrg96ko17 {
     width: 100%;
     height: 100%;
     position: relative;
     transform: translateZ(0) scale(0.38);
     backface-visibility: hidden;
     transform-origin: 0 0;
     /* see note above */
}

.ldio-5srrg96ko17 div {
     box-sizing: content-box;
}

/* generated by https://loading.io/ */

.typing-area {
     padding: 2em 1em;
     display: flex;
     justify-content: space-between;
}

.typing-area input {
     height: 3rem;
     width: calc(100% - 3.4rem);
     font-size: 17px;
     padding: 0 13px;
     border-radius: 5px 0 0 5px;
     outline: none;
}

.typing-area button {
     width: 3rem;
     height: 3rem;
     border: none;
     outline: none;
     font-size: 19px;
     cursor: pointer;
     color: #fff;
     border-radius: 0 5px 5px 0;
}

/*  <--> Big Devices Version <--> */
@media (min-width: 1300px) {
     .dashboard-wrapper {
          aspect-ratio: 1165/593;
     }

}

/*  <--> Tablet Version <--> */
@media (max-width: 992px) and (min-width: 600px) {
     .sign-wrapper {
          width: 100%;
          height: 100%;
     }

     .dashboard-wrapper {
          font-size: 70%;
     }

     header.dashboard {
          padding: 1em;
          overflow: scroll;
     }

     header.dashboard::-webkit-scrollbar {
          width: 0px;
     }

     .quick-todos,
     main.dashboard {
          padding: 0.1em;
     }

     form.todo-input {
          display: flex;
          flex-direction: column;
          padding: 0.3em;
     }

     form.todo-input * {
          margin: 2px;
          border-radius: 5px;
          font-size: 1em;
          min-height: 2em;
          width: 100%;
     }

     form.todo-input input[type="submit"] {
          width: 100%;
          border-radius: 5px;
          min-height: 1em;
     }

     main.dashboard {
          padding: 0.5em;
          grid-template-columns: repeat(auto-fit, 40%);
          grid-template-rows: repeat(auto-fit, 30%);
          overflow-y: hidden;
     }

     /* div.project, div.more-dash{
          width: 40%;
          height: 30%;
          /* width: 16em;
          height: 11em; 
     } */

     .board-wrapper {
          padding: 3em;
     }

     div.nav-filter {
          display: none;
     }

     div.nav-buttons {
          justify-content: center;
          width: 100%;
     }

     div.prev-foot * {
          transform: scale(0.95);
     }
}

/* <--> Short Devices Version <-->
@media (max-height: 700px){
     main.dashboard{
          padding: 0.5em;
          grid-template-columns: repeat(auto-fit, 40%);
          grid-template-rows: repeat(2, 30%);
          overflow-y: hidden;
     }

} */

/* <--> Phone Version <--> */
@media (max-width: 600px) {
     ::-webkit-scrollbar {
          width: 4px;
     }

     .sign-wrapper {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          font-size: 80%;
     }

     header.sign,
     main.sign {
          width: 100%;
     }

     header.sign {
          border-radius: 20px 20px 0 0;
          height: 25%;
     }

     body {
          padding: 1em;
     }

     .dashboard-wrapper {
          font-size: 60%;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 7%;
     }

     .quick-todos,
     header.dashboard,
     main.dashboard {
          margin: 0.5em 0;
          width: 100%;
     }

     .quick-todos {
          min-height: 30%;
     }

     header.dashboard span.title {
          margin: 0;
     }

     header.dashboard {
          min-height: 10em;
          overflow: scroll;
     }

     header.dashboard::-webkit-scrollbar {
          width: 0px;
     }

     main.dashboard {
          padding: 0.7em;
          display: flex;
          flex-direction: column;
     }

     .board-wrapper {
          display: flex;
          justify-content: center;
     }

     div.more-dash,
     div.project {
          margin: 0;
          /* width: 100%; */
          height: fit-content;
          min-height: 5rem;
     }

     div.more-dash {
          margin-top: 1em;
     }

     div.nav-buttons {
          height: 5em;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 100%;
     }

     div.nav-buttons .to-dashboard,
     div.nav-buttons .add-note {
          width: 100%;
          height: 50%;
     }

     div.nav-buttons .to-dashboard {
          border-radius: 10px 10px 0 0;
     }

     div.nav-buttons .add-note {
          border-radius: 0 0 10px 10px;
     }

     div.nav-filter {
          display: none;
     }

     div.prev-foot * {
          transform: scale(0.85);
     }

     body.notes {
          font-size: 50%;
     }
}

/*
 * FOR: GLOBAL
 */