@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&family=Poppins:wght@400;600&display=swap');
        /* START MEDIA QUERIES */
        
        @media screen and (max-height: 450px) {
            .sidenav {
                padding-top: 15px;
            }
            .sidenav a {
                font-size: 18px;
            }
        }
        /* END MEDIA QUERIES */
        
        body {
            background-color: #193d6928;
        }
        /* START TEXT */
        
         :root {
            --main-blue: #386fb7;
            --project-blue: #5d8ccc;
            --dark-blue: #29558f;
            --main-dark: #2b2d42;
            --main-light: #f7f7f7;
            --sec-light: #eaeaea;
        }
        
        .text-dark {
            color: #2b2d42!important;
        }
        
        .text-white {
            color: #fff!important;
        }
        
        .text-blue {
            color: #386fb7!important;
        }
        
        h1:after {
            display: block;
            content: '';
            border-bottom: solid 2px #ffffff;
            transform: scaleX(0);
            transition: transform 250ms ease-in-out;
        }
        
        h1.fromLeft:after {
            transform-origin: 100% 50%;
        }
        
        h1.fromRight:after {
            transform-origin: 0% 50%;
        }
        
        h1.fromLeft:hover:after {
            transform: scaleX(1);
            transform-origin: 0% 50%;
        }
        
        h1.fromRight:hover:after {
            transform: scaleX(1);
            transform-origin: 100% 50%;
        }
        
        h2 {
            font-family: 'Roboto', sans-serif;
            font-weight: 700;
            font-size: 26px;
        }
        
        .smalltext {
            font-size: 14px;
            color: #898989;
        }
        
        .text-title {
            font-family: 'PT Sans', sans-serif;
            font-weight: 700;
            font-size: 45px;
            letter-spacing: -.5px;
            line-height: 1;
            color: #2b2d42;
        }
        
        .text-subtitle {
            font-family: 'Signika Negative', sans-serif;
            font-weight: 400;
            font-size: 37px;
            line-height: 1;
            color: #75a4d7;
        }
        
        .text-description {
            font-family: 'Poppins', sans-serif;
            font-weight: 400;
            font-size: 17px;
            color: #898989;
        }
        /* END TEXT */
        /* START NAVBAR */
        
        .navbar {
            padding-top: 0;
            padding-bottom: 0;
            /*line-height: 1;*/
        }
        
        .navborder {
            padding: 0;
            border-bottom: #2b2d42 2px solid;
        }
        
        .navlogo {
            font-family: 'Exo', sans-serif;
            font-weight: 700;
            cursor: pointer;
        }
        
        .nav-link {
            padding: 0;
        }
        
        .text-nav {
            font-family: 'Poppins', sans-serif;
            color: #ffffff;
            font-weight: 500;
            font-size: 10pt;
            letter-spacing: .5px;
            text-decoration: none;
        }
        
        .text-nav:hover {
            color: #ffffff;
        }
        
        .search-project-card {
            height: 45px;
            border-radius: 3px;
            cursor: pointer;
        }
        
        .search-project-card:hover {
            background: linear-gradient(#0000001a, #0000001a);
            transition: 2s linear;
        }
        /* END NAVBAR */
        /* START SIDEBAR */
        
        .sidenav {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: #ccd3dd;
            overflow-x: clip;
            transition: 0.5s;
        }
        
        .sidenav a {
            padding: 0px 26px 0px 0px;
            text-decoration: none;
            font-size: 25px;
            color: #818181;
            display: block;
            transition: 0.3s;
        }
        
        .sidenav a:hover {
            color: #f1f1f1;
        }
        
        .sidenav .closebtn {
            font-family: 'Poppins', sans-serif;
            color: #2b2d42;
            font-weight: 400;
            font-size: 15px;
            margin-top: 6px;
        }
        
        .sidenav .text-title-side-bar {
            font-family: 'Poppins', sans-serif;
            color: #2b2d42;
            font-weight: 700;
            font-size: 22px;
            cursor: pointer;
        }
        
        .sidenav .item {
            padding: 0px 0px 0px 16px;
            margin-bottom: 3px;
        }
        
        .sidenav .text-item {
            font-family: 'Poppins', sans-serif;
            color: #919191;
            padding: 0px 0px 0px 16px;
            font-size: 17px;
            text-transform: uppercase;
            font-weight: 500;
        }
        
        .sidenav .icon {
            color: #919191;
            font-size: 13px;
            margin-right: -5px;
            margin-top: 5px;
        }
        
        .sidenav .icon2 {
            color: #396FB7;
            font-size: 13px;
            margin-right: -5px;
            margin-top: 5px;
        }
        
        .navbarbell {
            color: #396FB7;
            transition: all .1s ease;
        }
        
        .navbarbell:hover {
            color: #375e91;
        }
        
        #main {
            transition: margin-left .5s;
            padding: 16px;
        }
        
        .slide {
            clear: both;
            width: 98%;
            height: 0px;
            max-height: 250px;
            overflow: auto;
            transition: height .4s ease;
        }
        
        .slide li {
            padding: 30px;
        }
        
        #touch {
            position: absolute;
            opacity: 0;
            height: 0px;
        }
        
        #touch:checked+.slide {
            height: 150px;
        }
        
        #touch-archived {
            position: absolute;
            opacity: 0;
            height: 0px;
        }
        
        #touch-archived:checked+.slide {
            height: 600px;
        }
        /* END SIDEBAR */
        /* START SCROLLBAR*/
        
         ::-webkit-scrollbar {
            width: 7px;
        }
        
         ::-webkit-scrollbar-track {
            background-color: #dddddd;
            border-radius: 10px;
        }
        
         ::-webkit-scrollbar-thumb {
            background: #c4c4c4;
            border-radius: 10px;
        }
        
         ::-webkit-scrollbar-thumb:hover {
            background: #b3b3b3;
        }
        
        div {
            scrollbar-color: #c4c4c4 #dddddd;
            scrollbar-width: thin;
        }
        /* END SCROLLBAR*/
        /* START AUTH */
        
        .card-body {
            background-color: #f7f7f7;
            border-radius: 10px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 15px 16px rgba(0, 0, 0, 0.1);
            animation-name: fadeIn;
            animation-duration: .8s;
        }
        
        .formauth {
            border-radius: 10px;
            height: 45px;
        }
        
        .form-control:focus {
            box-shadow: none!important;
        }
        
        .formselect {
            width: 82%;
            margin-left: 9%;
            appearance: auto;
            -webkit-appearance: auto;
            -moz-appearance: auto;
        }
        
        .btnauth {
            background-color: #386fb7;
        }
        
        .textinfo {
            font-size: 10pt;
            text-decoration: none;
        }
        /* END AUTH */
        /* START IMG */
        
        .indeximg {
            z-index: -1;
            position: fixed;
            top: 0;
        }
        
        .quote {
            position: fixed;
            top: 155px;
            left: 78px;
            z-index: -1;
        }
        /* END IMG */
        /* START BUTTON */
        
        .btn-signin {
            color: #fff;
            background-color: #2b2d42;
            border: #2b2d42 2px solid;
            border-radius: 4px;
            padding: 5px 0px 5px 0px;
            text-align: center;
            letter-spacing: .5px;
            width: 140px;
            transition: all 0.2s ease-in-out;
        }
        
        .btn-signin:hover {
            background-color: #3a3c57;
            border: #3a3c57 2px solid;
            padding: 5px 0px 5px 5px;
        }
        /* END BUTTON */
        /* START BT */
        
        .px-4-5 {
            padding-left: 30px !important;
            padding-right: 30px !important;
        }
        
        .my-5-5 {
            margin: 100px 0 !important;
        }
        
        .mt-6 {
            margin-top: 120px;
        }
        /* END BT */
        /* START USERBOARD */
        
        .userboardsearch {
            width: 100%;
            border-radius: 5px 0px 0px 5px;
            height: 40px;
            border: 1px solid #ced4da;
            padding-left: 20px;
        }
        
        .userboardsearch:focus {
            outline: none;
            border: 1px solid #386fb7;
        }
        
        .buttonsearch {
            width: 9%;
            border-radius: 0px 5px 5px 0px;
            height: 40px;
            color: #fff;
            background-color: #386fb7;
            border: 1px solid #ced4da;
        }
        
        .buttonsearch:hover {
            transition: .2s ease;
            background-color: #29558f;
        }
        
        .userboardedit {
            color: #386fb7;
            padding-top: 2px;
            padding-bottom: 3px;
            padding-left: 18px;
            padding-right: 18px;
            background-color: none;
            border: 2px #386fb7 solid;
            border-radius: 2px;
        }
        
        .userboardedit:hover {
            color: #386fb7;
            background-color: #e7e9eb;
        }
        
        .userboarddelete {
            color: #fff;
            padding-top: 2px;
            padding-bottom: 3px;
            padding-left: 20px;
            padding-right: 20px;
            background-color: #386fb7;
            border: 2px #386fb7 solid;
            border-radius: 2px;
        }
        
        .userboarddelete:hover {
            color: #fff;
            background-color: #29558f;
            border: 2px #29558f solid;
        }
        
        .add-user-userboard {
            animation-name: fadeIn;
            animation-duration: .8s;
        }
        
        .add-user-userboard button {
            font-family: 'Poppins', sans-serif;
            font-size: .9em;
            color: var(--main-light);
            padding: .4rem 1.8rem;
            border-radius: 1.7rem;
            background: var(--main-blue);
            border: none;
        }
        
        .add-user-userboard button:hover {
            background: #4E83C9;
            transition: .2s ease;
        }
        
        .add-existing-account-div {
            width: 100%;
        }
        /* END USERBOARD */
        /* START EDIT */
        
        .formedit {
            border-radius: 10px;
            width: 100%;
            height: 45px;
        }
        /* END EDIT */
        /* START DELETEMODAL */
        
        .deletemodal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
        }
        
        .deletemodal-content {
            margin: 10vh auto;
            padding: 20px;
        }
        /* END DELETEMODAL */
        /* START HOME */
        
        .sub-title-home {
            font-family: 'Poppins', sans-serif;
        }
        
        .sub-title-home:not(.limit-date-div) {
            font-weight: 600;
            font-size: 17px;
        }
        
        .limit-date-div a {
            font-weight: 400;
            font-size: 15px;
            color: rgba(0, 0, 0, .3);
            cursor: pointer;
        }
        
        .limit-date-div a:hover {
            color: rgba(0, 0, 0, .6);
            transition: .2s ease;
        }
        
        .card-home-big {
            background-color: #eaeaea;
            height: 450px;
            border-radius: 10px;
        }
        
        .card-home-small {
            background-color: #eaeaea;
            height: auto;
            min-height: 200px;
            border-radius: 6px;
        }
        
        .card-home-project {
            height: 110px;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .card-home-project:hover {
            background: linear-gradient(#0000001a, #0000001a);
            transition: 2s linear;
        }
        
        .card-home-project-ri {
            height: 120px;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .card-home-project-ri:hover {
            background: linear-gradient(#0000001a, #0000001a);
            transition: 2s linear;
        }
        
        .project-title {
            font-family: 'Poppins', sans-serif;
            font-size: 19px;
            font-weight: 600;
            opacity: 1!important;
        }
        
        .project-title b {
            font-size: .89em;
        }
        
        .project-subtitle {
            font-family: 'Poppins', sans-serif;
            font-size: 16px;
            font-weight: 500;
            color: #999999;
        }
        
        .project-subtitle-category {
            font-family: 'Poppins', sans-serif;
            font-size: 16px;
            color: #999999;
            transition: all 0.1s ease;
        }
        
        .project-subtitle-category:hover {
            color: #555555;
            cursor: pointer;
        }
        
        .add-project {
            background-color: #ccd7e6;
            border: 1px solid #bbc6d4;
            border-radius: 4px;
        }
        
        .add-project:hover {
            background-color: #becbdb;
        }
        
        .search-project {
            font-weight: 400;
            background-color: transparent;
            border: none;
            border-bottom: 3px solid #5a6e96;
            width: 100px;
            text-align: end;
            transition: all .1s ease-in-out;
        }
        
        .search-project::placeholder {
            color: #899bc0;
        }
        
        .search-project:focus-visible {
            outline: none;
            color: #3a6fb7;
            width: 200px;
            border-bottom: 3px solid #3a6fb7;
        }
        
        .search-project-button {
            padding: 9px;
            color: #5a6e96;
            border-bottom: 3px solid #5a6e96;
        }
        
        .search-project-button:focus-visible {
            color: #3a6fb7;
            border-bottom: 3px solid #3a6fb7;
        }
        
        .add {
            color: #396FB7;
            font-size: 70px;
            transition: 0.3s ease;
        }
        
        .add:hover {
            color: #265899;
        }
        
        .card-home-project-client {
            height: 100px;
            border-radius: 6px 6px 0px 0px;
            cursor: pointer;
        }
        
        .no-projects {
            color: rgba(43, 45, 66, .26);
            font-family: 'Poppins', sans-serif;
            width: 80%;
        }
        /* END HOME */
        /* START PROJECT */
        
        .text-title-project {
            font-family: 'Poppins', sans-serif;
            color: #2b2d42;
            font-size: 28px;
            font-weight: 600;
            line-height: 1;
            text-transform: uppercase;
            text-decoration: none;
            transition: all .2s ease;
        }
        
        .text-title-project:hover {
            color: #386fb7;
        }
        
        .text-type-project {
            font-family: 'Poppins', sans-serif;
            font-size: 19px;
            font-weight: 600;
            color: #7c7c7c!important;
            line-height: 1;
            text-transform: uppercase;
        }
        
        .text-date-project {
            font-family: 'Poppins', sans-serif;
            font-size: 19px;
            font-weight: 500;
            color: #999999!important;
            line-height: 1;
            text-transform: uppercase;
        }
        
        .card-project {
            background-color: #f4f4f4;
            height: auto;
            border-radius: 10px;
        }
        
        .card-text {
            color: #6d6d6d!important;
            font-weight: 500;
        }
        
        .function-button-right {
            background-color: #eaeaea;
            color: #999999;
            height: 40px;
            width: 100px;
            border: 1px solid #999999;
            border-radius: 5px 0 0 5px;
        }
        
        .function-button {
            background-color: #eaeaea;
            color: #999999;
            height: 40px;
            width: 100px;
            border: 1px solid #999999;
            transition: .1s all ease-in-out;
        }
        
        .function-button:hover {
            background-color: #d8d8d8;
        }
        
        .function-button-dev {
            background-color: #eaeaea;
            color: #999999;
            height: 40px;
            width: 80px;
            border: 1px solid #999999;
            border-radius: 5px;
            transition: .1s all ease-in-out;
        }
        
        .function-button-dev:hover {
            background-color: #d8d8d8;
        }
        
        .function-button-left {
            background-color: #eaeaea;
            color: #999999;
            height: 40px;
            width: 100px;
            border: 1px solid #999999;
            border-radius: 5px 0 0 5px;
            transition: .1s all ease-in-out;
        }
        
        .function-button-left:hover {
            background-color: #d8d8d8;
        }
        
        .function-button-right {
            background-color: #eaeaea;
            color: #999999;
            height: 40px;
            width: 100px;
            border: 1px solid #999999;
            border-radius: 0 5px 5px 0;
            transition: .1s all ease-in-out;
        }
        
        .function-button-right:hover {
            background-color: #d8d8d8;
        }
        
        .card-top {
            height: 40px;
            background-color: #eaeaea;
            border: 1px solid #b3b3b3;
            border-radius: 7px 7px 0px 0px;
            color: #999999;
        }
        
        .card-tasks {
            height: auto;
            background-color: #fff;
            border: 1px solid #d5d5d5;
            border-bottom: none;
            padding: 0px;
            cursor: pointer;
        }
        
        .task {
            font-size: 15px;
            height: 30px;
            border-bottom: 1px solid #d5d5d5;
        }
        
        .task:hover {
            background-color: #f6f6f6;
        }
        
        .task-description {
            font-weight: 500;
        }
        
        .add-task-button {
            cursor: pointer;
            background-color: #3b6fb7;
            height: auto;
            width: auto;
            color: #fff;
            border-radius: 0px 0px 5px 5px;
            transition: .3s ease;
        }
        
        .add-task-button:hover {
            background-color: var(--dark-blue);
            cursor: pointer;
        }
        
        .add-save-task {
            background-color: #5399d3;
            color: #fff;
            border-radius: 5px;
            border: none;
            height: 40px;
            width: 70px;
            transition: .1s ease;
        }
        
        .add-save-task:hover {
            background-color: #447ead;
        }
        
        .model-card {
            font-family: 'Poppins', sans-serif;
            font-size: .92em;
            font-weight: 500;
            background-color: #fdfdfd;
            color: #575757;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .model-card:hover {
            background-color: #ecebeb;
        }
        
        .check-button {
            font-size: 19px;
            line-height: 0;
            color: #3b6fb7;
        }
        
        .check-icon {
            color: #fff;
            margin-left: -5px;
        }
        
        .add-checkbox {
            color: #8e8e8e;
            font-weight: 500;
            text-decoration: none;
            cursor: pointer;
        }
        
        .add-checkbox:hover {
            color: #777777;
        }
        
        .add-card-top-checkbox {
            background-color: #5399d3;
            height: 40px;
            border-radius: 5px 5px 0 0;
        }
        
        .add-card-checkbox {
            background-color: #f7f7f7;
            height: auto;
            min-height: 287px;
            border-radius: 0 0 5px 5px;
            font-family: 'Open Sans', sans-serif;
            cursor: default;
            transition: all 1s ease;
        }
        
        .title-checkbox {
            background-color: transparent;
            color: #777;
            width: 86%;
            border: 2px transparent solid;
            border-bottom: .1rem solid #777;
            padding-bottom: .4em;
        }
        
        .title-checkbox:focus-visible {
            outline: none !important;
            border-bottom-color: var(--main-blue);
            transition: .2s ease;
        }
        
        .checkbox-textarea {
            margin-left: 35px;
            background-color: #e5e5e5;
            border: none;
            border-radius: 5px;
            border: 2px transparent solid;
            font-size: 14px;
            resize: none;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #c4c4c4 #dddddd;
            width: 85%;
        }
        
        .checkbox-textarea:focus-visible {
            outline: none !important;
            border: 2px #5399d3 solid;
        }
        
        .add-card-chat {
            background-color: #e5e5e5;
            height: auto;
            border-radius: 5px;
            font-family: 'Open Sans', sans-serif;
            cursor: default;
        }
        
        .chatarea {
            height: 245px;
        }
        
        .textarea-function {
            background-color: #f7f7f7;
            border-radius: 30px;
            padding: 5px;
            color: #818181;
            border: 2px solid #c2c1c0;
            transition: border 0.1s ease;
        }
        
        .textarea-function:hover {
            outline: none !important;
            border: 2px #5399d3 solid;
        }
        
        .textarea-chat {
            background-color: #f7f7f7;
            border: none;
            border-radius: 30px;
            color: #818181;
            resize: none;
            overflow-y: auto;
            scrollbar-width: hide!important;
            scrollbar-color: transparent!important;
            width: 75%;
            cursor: text!important;
        }
        
        .textarea-chat:focus-visible {
            outline: none !important;
            color: #386fb7;
        }
        
        .textarea-chat::-webkit-scrollbar-track {
            background-color: transparent;
        }
        
        .textarea-chat::-webkit-scrollbar-thumb {
            background: transparent;
        }
        
        .task-title-card {
            font-family: 'Poppins', sans-serif;
            background-color: transparent;
            color: #fff;
            font-size: 1.1em;
            border: none;
            resize: none;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #c4c4c4 #dddddd;
            width: 60%;
        }
        
        .task-title-card:focus-visible {
            background-color: #f0f0f0;
            color: #000;
            font-size: 1.1em;
            border: none;
            border-radius: 3px;
            outline: none;
        }
        
        .sendchat {
            background-color: #5399d3;
            height: 40px;
            width: 40px;
            border-radius: 20px;
            cursor: pointer;
            transition: background-color 0.1s ease;
        }
        
        .sendchat:hover {
            background-color: #4280b3;
        }
        
        .mentionchat {
            background: transparent;
            color: #b1b1b1;
            font-size: 21px;
            border: none;
            height: 34px;
            width: 34px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .mentionchat:hover {
            background: #e6e6e6;
            color: #b1b1b1;
            font-size: 21px;
            border: 3px #c7c5c5 solid;
            height: 34px;
            width: 34px;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .not-task-icon {
            font-size: 3em !important;
            color: #a2a2a2;
        }
        
        .not-task-text {
            font-family: 'Open Sans', sans-serif;
            color: #a2a2a2
        }
        
        .empty-task-field {
            background-color: #eaeaea;
            border: 1px solid #b3b3b3;
        }
        
        .button-edit-task {
            background-color: #5399d3;
            color: #fff;
            border-radius: 5px;
            border: none;
            height: 37px;
            width: 70px;
            transition: .1s all ease;
        }
        
        .button-edit-task:hover {
            background-color: #438ac4;
        }
        
        .button-delete-task {
            background-color: #eaeaea;
            color: #b5b5b6;
            border-radius: 5px;
            border: 1px solid #b5b5b6;
            height: 37px;
            width: 70px
        }
        
        .button-delete-task:hover {
            background-color: #e0e0e0;
        }
        
        .add-template-button {
            background: #6D96D0;
            color: var(--main-light);
            border: none;
            border-radius: 0 0 5px 5px;
        }
        
        .add-template-button:hover {
            transition: .15s ease;
            background-color: #5F8CCB;
            cursor: pointer;
        }
        
        .add-to-project {
            font-family: 'Open Sans', sans-serif;
            font-size: .88em;
        }
        
        .task-col {
            width: 100%;
            background-color: #F4F7FB;
            font-family: 'Poppins', sans-serif;
            font-size: .89em;
            padding: .42em .64em;
            border: .02em solid #2b2d4256;
        }
        
        .task-col-title {
            font-weight: 500;
            max-width: 30%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        
        .task-col-description {
            max-width: 70%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        
        .template-name {
            width: 94%;
            background: none;
            border: none;
            color: #3b6fb7;
            outline: none !important;
            padding-bottom: .34em;
            font-family: 'Poppins', sans-serif;
            font-size: .88em;
        }
        
        .template-field {
            min-width: 35%;
            max-width: 100%;
            border-bottom: .13em solid #3b6fb780;
        }
        
        .template-field i {
            font-size: 1.34em;
            color: #3b6fb7;
            opacity: 50%;
        }
        
        .add-template-title {
            font-family: 'Roboto', sans-serif;
            font-weight: 400;
            font-size: 20px;
            text-align: center;
            color: #2a5da0c2;
            letter-spacing: .06em;
            text-transform: uppercase;
            height: 30px;
            outline: none;
            background: transparent;
            border: none;
        }
        
        .add-template-title:focus {
            background-color: #ececec;
            outline: #bdbdbd solid 1px;
        }
        
        .add-template-title-container {
            width: 100%;
            text-align: center;
        }
        
        .add-template-modal-content {
            background-color: #EAEAEA;
            margin: auto;
            width: 28rem;
            padding: 0 1.3em 2em 1.3em;
            border-radius: .35rem;
        }
        
        .template-tasks-container {
            height: 20rem;
            background: #E3ECF6;
            border: .14em solid #7fa4d74b;
            border-radius: .5em;
            padding: .7rem .8rem;
            overflow: auto;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        .template-tasks-container::-webkit-scrollbar {
            display: none;
        }
        
        .template-task {
            width: 90%;
        }
        
        .remove-template {
            cursor: pointer;
            color: #96B4DE;
        }
        
        .remove-template:hover {
            color: var(--main-blue);
            transition: .3s ease;
        }
        
        .save-template-button {
            background: #96B4DE;
            border: none;
            border-radius: .36em;
            padding: .45em 2.88em;
            font-family: 'Roboto', sans-serif;
            font-weight: 400;
            font-size: .94em;
            letter-spacing: .07rem;
        }
        
        .save-template-button:hover {
            background: #8BACDA;
            transition: .15s ease-in;
        }
        
        .close-add-template i {
            cursor: pointer;
        }
        
        .add-template-errors {
            text-align: center;
            color: #B34D77;
            font-family: 'Poppins', sans-serif;
            font-size: .76em;
        }
        /* END PROJECT */
        /* START LOGS */
        
        .sideproject {
            background: none;
            height: 40px;
            color: #d7dae0;
            font-family: 'Poppins', sans-serif;
            font-size: 17px;
            text-transform: uppercase;
            font-weight: 500;
            cursor: pointer;
            transition: all .1s linear;
        }
        
        .sideproject:hover {
            color: #fff;
        }
        
        .logs-hr {
            color: #2c3b58ab;
            margin: 7px 0 7px 0;
        }
        
        .logs-title {
            display: flex;
        }
        
        .filter-date {
            font-family: 'Poppins', sans-serif;
            border: 2px transparent solid;
            border-radius: 3px;
            background-color: #728abb;
            color: #b5c4e2;
        }
        
        .filter-date::-webkit-calendar-picker-indicator {
            color: transparent;
            filter: invert(1);
        }
        
        .filter-date:focus-visible {
            outline: 3px solid #3a4e74;
        }
        
        .filter-today {
            font-family: 'Poppins', sans-serif;
            border: 2px transparent solid;
            border-radius: 3px;
            background-color: #728abb;
            color: #b5c4e2;
            cursor: pointer;
            transition: all .1s linear;
        }
        
        .filter-today:hover {
            background-color: #647daf;
            color: #95a6c7;
        }
        
        .filter {
            color: #b5c4e2;
            font-size: 22px;
            height: 30px;
            width: 30px;
            background-color: #728abb;
            margin-top: 1px;
            border-radius: 3px;
            cursor: pointer;
            transition: all .1s linear;
        }
        
        .filter:hover {
            color: #e6e9ee;
            background-color: #7c94c5;
        }
        
        .restart-filter {
            color: #cfd8e9;
            font-size: 22px;
            height: 30px;
            width: 30px;
            background-color: #5c6f99;
            margin-top: 1px;
            border-radius: 3px;
            cursor: pointer;
            transition: all .1s linear;
        }
        
        .restart-filter:hover {
            color: #eaecf1;
            background-color: #506288;
        }
        
        .dropdown-users-content {
            border-radius: 8px;
            top: 192px;
            right: 575px;
            display: none;
            position: absolute;
            background-color: #f1f1f1;
            min-width: 160px;
            overflow: auto;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }
        
        .dropdown-users-content div {
            background-color: #f1f1f1;
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            cursor: pointer;
            transition: all .1s linear;
        }
        
        .dropdown-users-content div:hover {
            background-color: #5a71a0;
        }
        
        .show {
            display: block;
        }
        
        .search-users-modal {
            background: none !important;
        }
        
        .search-users-modal {
            pointer-events: none;
        }
        
        .search-users-modal-content {
            background-color: var(--main-light);
            padding: 1.82em 1.64em;
            width: fit-content;
            border-radius: .4em;
            -webkit-box-shadow: 0px 5px 20px 5px rgba(0, 0, 0, .25);
            box-shadow: 0px 5px 20px 5px rgba(0, 0, 0, .25);
            pointer-events: auto;
        }
        
        .search-users-logs {
            display: flex;
            align-items: center;
            border-bottom: 2px solid var(--main-dark);
            width: fit-content;
        }
        
        .search-users-logs i:first-child {
            font-size: 1.32em;
        }
        
        .search-users-logs i:last-child {
            font-size: .9em;
            cursor: default;
            color: transparent;
        }
        
        .search-users-logs input {
            border: none;
            outline: none;
            font-family: 'Poppins', sans-serif;
            font-size: .92em;
            padding: .3rem .8rem;
            background: none;
        }
        
        .users-rows {
            color: var(--main-dark);
            border: .15rem solid transparent;
            border-radius: .24em;
            padding: .23em .95em;
            font-family: 'Poppins', sans-serif;
            font-size: .92em;
            cursor: pointer;
            width: 98%;
            margin-left: 1%;
        }
        
        .users-rows:hover {
            margin-left: 0;
            width: 100%;
            transition: .15s ease;
        }
        
        .users-rows :nth-child(2) {
            color: #2b2d42a1;
        }
        /* END LOGS */
        /* START TEMPLATE HOME */
        
        .card-home-template {
            height: 47px;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .card-home-template:hover {
            background: linear-gradient(#0000001a, #0000001a);
            transition: 2s linear;
        }
        
        .card-home-add-template {
            color: #a2abca;
            height: 47px;
            font-weight: 200;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .card-home-add-template:hover {
            color: #757c97!important;
            background: linear-gradient(#0000000e, #0000000e);
            transition: 0.1s linear;
        }
        
        #template-task-container {
            height: 320px;
            background-color: #f0f0f0;
            border: 0.14em solid #b1b1b15e;
            border-radius: 0.5em;
            overflow: auto;
        }
        
        .input-task {
            background-color: transparent;
            font-weight: 500;
            color: #3b6fb7;
            border: none;
            outline: none;
        }
        
        .input-task::placeholder {
            color: #3b6fb7;
            font-weight: 500;
        }
        
        .input-description {
            width: 100%;
            border: 0.14em solid #b1b1b1;
            border-radius: 4px;
            outline: none;
        }
        
        .input-description:hover {
            border: 0.14em solid #3b6fb7;
        }
        
        .input-description:focus {
            border: 0.14em solid #3b6fb7;
            background-color: #f0f0f0;
        }
        
        .trash-template {
            color: #fff;
        }
        
        .trash-template:hover {
            color: #d3d3d3;
        }
        /* END TEMPLATE HOME */
        /* START MENTION */
        
        .mention-card {
            font-family: 'Poppins', sans-serif;
            background-color: #fff;
            color: #7c7c7c;
            font-size: 14px;
            height: 40px;
            margin-bottom: 2px;
            border-radius: 2px;
            border: 1px solid #b5b5b6;
            cursor: pointer;
            transition: all .3s ease;
        }
        
        .mention-card:hover {
            background-color: #e4e4e4;
            color: rgb(119, 119, 119);
            height: 40px;
            margin-bottom: 2px;
            border-radius: 2px;
            border: 3px solid #b5b5b6;
        }
        
        .highlighted-text {
            background-color: #F2F4F6;
            border-radius: 2px;
            color: #51687B;
            display: inline;
            padding: .12rem;
        }
        /* END MENTION */
        /* START DRAG&DROP */
        
        .box.over {
            border: 3px dotted rgb(182, 0, 0);
        }
        /* END DRAG&DROP */
        /* START KEY */
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(100px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        /* END KEY */
        /* START LOGIN MODAL  */
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
        }
        
        .modal-content {
            background-color: #fefefe;
            margin: 4% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        
        .close {
            margin-top: -10px;
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        /* END LOGIN MODAL  */
        /* START SIGN UP MODAL */
        
        .su-modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, .4);
        }
        
        .su-modal-content {
            margin: 10vh auto;
            padding: 20px;
        }
        
        .close-button {
            color: #aaa;
            float: right;
            font-size: 16px;
            font-weight: bold;
        }
        
        .close-button:hover,
        .close-button:focus {
            color: #555;
            text-decoration: none;
            cursor: pointer;
        }
        
        .sign-up-container {
            width: 29rem;
        }
        /* END SIGN UP MODAL */
        /* START DROPDOWN */
        
        .dropdown {
            position: relative;
            display: inline-block;
        }
        
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 280px;
            top: 50px;
            right: 100px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            z-index: 1;
        }
        /* END DROPDOWN */
        /* START DATALIST DROPDOWN */
        
        .datalist::-webkit-calendar-picker-indicator {
            display: none !important;
        }
        /* END DATALIST DROPDOWN */
        /* START USERNAME TAG */
        
        .username-tag {
            border-radius: 20px;
            text-align: center;
            width: fit-content;
            cursor: pointer;
            background-color: #f7f7f7;
        }
        
        .username-tag:hover {
            background-color: rgba(93, 141, 205, .2);
            transition: .2s ease;
        }
        /* END USERNAME TAG */
        /* START CREATE PROJECT DIVISION */
        
        .create-project-body {
            background: linear-gradient(180deg, rgba(93, 141, 205, 1) 0%, rgba(93, 141, 205, 1) 67%, rgba(247, 247, 247, 1) 67%, rgba(247, 247, 247, 1) 100%);
            border-radius: 20px;
            box-shadow: 0 7px 6px rgba(0, 0, 0, 0.08), 0 15px 16px rgba(0, 0, 0, 0.1);
            width: 28.8rem;
        }
        
        .create-project-body h3,
        .create-project-body hr {
            color: white;
            font-family: 'Poppins', sans-serif;
            font-weight: 500;
            font-size: 1.26em;
            text-align: center;
        }
        
        .create-project-body hr {
            border: none;
            height: 1px;
            width: 70%;
            opacity: 60%;
            margin: auto;
        }
        
        .create-project-table {
            background-color: rgb(247, 247, 247);
            border-radius: 15px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, .1), 0 15px 16px rgba(0, 0, 0, .06);
            margin: 0 auto;
            width: 90%;
        }
        
        .create-project-table label {
            color: #5d8ccc;
            font-family: 'Open Sans', 'sans-serif';
            font-weight: 500;
            font-size: .79em;
            margin-left: 5%;
        }
        
        .create-project-table input:not(.search-templates input) {
            border: 1px solid #2B2D42;
            color: #2B2D42;
            background: none;
            width: 90%;
            border-radius: 10px;
            font-family: 'Open Sans', 'sans-serif';
            font-weight: 500;
            font-size: .9em;
            padding: .48em .88em;
            outline: none !important;
        }
        
        .create-project-table input:not(.search-templates input)::placeholder {
            color: #2B2D42;
            opacity: 50%;
        }
        
        .search-templates input {
            border: none;
            border-bottom: .15em solid var(--main-dark);
            padding-bottom: .3em;
            font-family: 'Poppins', sans-serif;
            font-size: .9em;
            background: none;
            outline: none !important;
            width: 70%;
        }
        
        .search-templates i {
            padding: 0 .65em 0 .35em;
            font-size: .92em;
            border-bottom: .15em solid var(--main-dark);
            padding-top: .34em;
        }
        
        .search-templates i:last-child {
            color: transparent;
            cursor: default;
        }
        
        .template-options-items {
            width: 100%;
            font-family: 'Poppins', sans-serif;
            font-size: .89em;
            background-color: #e8ecf1;
            color: #2b2d42c0;
            padding: .23em .75em;
            cursor: default;
        }
        
        .template-options-items i {
            font-size: .85em;
        }
        
        .template-options-items:hover {
            background-color: #D4DBE5;
        }
        
        .template-options-items:last-child {
            border-radius: 0 0 .8rem .8rem;
        }
        
        .limit-date {
            text-transform: uppercase;
        }
        
        .next-button {
            background-color: #5d8ccc;
            font-family: 'Poppins', sans-serif;
            font-weight: 400;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 7px 12px;
        }
        
        .next-button:hover {
            background-color: #386fb7;
            transition: .5s ease;
        }
        
        .warning {
            background: #EDC5D5;
            border: 1px solid #CC5C8B;
            border-radius: 10px;
            text-align: center;
            width: 90%;
            height: 40px;
            line-height: 40px;
            margin: auto;
            color: #CC5C8B;
            font-family: 'Poppins', 'sans-serif';
            font-size: 11pt;
        }
        
        .custom-error-messages {
            color: #FF444F;
            font-family: 'Open Sans';
            font-size: .72em;
            text-align: center;
        }
        /* END CREATE PROJECT DIVISION*/
        /* START ADD CLIENT DIVISION */
        
        .client-global-container {
            background-color: #ADC4E6;
            padding: 20px 30px;
            border-radius: 12px;
        }
        
        .client-subtitle {
            font-size: .95em;
            font-family: 'Roboto', sans-serif;
            color: var(--main-dark);
            text-align: center;
        }
        
        .create-account-div button {
            border: none;
            border-radius: 15px;
            padding: .5rem 1.16rem;
            background-color: #adc4e6;
            color: var(--main-dark);
            font-family: 'Poppins', sans-serif;
        }
        
        .create-account-div button:hover {
            background-color: #97B4DF;
            transition: .2s ease;
        }
        
        .client-hr {
            background-color: #5d8ccc;
        }
        
        .search-clients-form {
            text-align: center;
            width: 100%;
        }
        
        .search-clients-form input {
            outline: none !important;
            border: none;
            color: #81A4D8;
            border-bottom: .13rem solid rgba(129, 164, 216, .6);
            padding-bottom: .35rem;
            font-size: .86em;
            font-family: 'Poppins', sans-serif;
            background: none;
            width: 65%;
        }
        
        .search-clients-form input::placeholder {
            color: #94B2DE;
            opacity: 70%;
        }
        
        .search-clients-form i {
            border-bottom: .13rem solid rgba(129, 164, 216, .6);
            color: rgba(129, 164, 216, .6);
            padding: 0 .7rem .58rem;
            font-size: .86em;
        }
        
        .suggested-clients {
            display: none;
            border-radius: 0 0 .6rem .6rem;
            background: var(--main-light);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 15px 16px rgba(0, 0, 0, 0.1);
            position: absolute;
            z-index: 1;
            font-size: .8em;
            font-family: 'Poppins', sans-serif;
            color: rgba(43, 45, 66, .6);
        }
        
        .suggested-clients i {
            font-size: .7rem;
            padding-right: .8rem;
            color: rgba(43, 45, 66, .6);
        }
        
        .client-options {
            background: none;
            color: rgba(43, 45, 66, .6);
            border: none;
            width: 100%;
            text-align: start;
        }
        /* END ADD CLIENT DIVISION */
        /* START ADD DEVELOPER DIVISION */
        
        .global-container {
            background-color: #C5D5ED;
            padding: 20px 30px;
            border-radius: 12px;
        }
        
        .devs-container h3 {
            font-family: 'Poppins', sans-serif;
            font-size: 1.18em;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: .14rem;
            margin-bottom: 2.8rem;
        }
        
        .available-tags-added-field {
            overflow: auto;
        }
        
        .available-tags-added-field,
        .available-tags-field {
            height: 450px;
            background: #f7f7f7;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 15px 16px rgba(0, 0, 0, 0.1);
            border-radius: 12pt;
        }
        
        .dev-subtitle {
            font-family: 'Poppins', sans-serif;
        }
        
        .input-dev-div input {
            border-radius: 2rem 0 0 2rem;
            border: 2px solid rgba(255, 255, 255, 0);
            border-right: none;
            background: #5d8bcc36;
            color: var(--main-dark);
            padding: .48rem 1.3rem;
            font-family: 'Open Sans', sans-serif;
            font-size: .92em;
            outline: none;
        }
        
        .input-dev-div button {
            border-radius: 0 2rem 2rem 0;
            border: 2px solid rgba(255, 255, 255, 0);
            border-left: none;
            padding: .48rem 1.3rem;
            background: #5d8bcc36;
            color: var(--main-dark);
            font-size: .92em;
        }
        
        .available-tags-added-child h5 {
            font-family: 'Open Sans', sans-serif;
            font-size: .99em;
            font-weight: 500;
        }
        
        .available-tags-added-child h6 {
            font-family: 'Open Sans', sans-serif;
            font-size: .94em;
            font-weight: 400;
        }
        
        .button-div {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 0);
            width: 100%;
        }
        
        .empty-query {
            text-align: center;
            font-family: 'Open Sans', sans-serif;
            font-size: .92em;
            opacity: 60%;
        }
        
        .added-devs {
            font-family: 'Poppins', sans-serif;
            width: 48rem;
        }
        
        .added-devs tr:first-child {
            background: var(--project-blue);
            color: white;
            font-size: .98em;
        }
        
        .added-devs tr:not(:first-child):not(:last-child) {
            border-bottom: .03rem solid rgba(0, 0, 0, .3);
        }
        
        .added-devs tr:last-child {
            border-bottom: .2rem solid var(--project-blue);
        }
        
        .added-devs tr:nth-child(even) {
            background-color: var(--main-light);
        }
        
        .added-devs tr:nth-child(odd):not(:first-child) {
            background-color: var(--sec-light);
        }
        
        .added-devs td {
            padding: .7rem 1.3rem;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .added-devs tr:not(:first-child) {
            color: var(--main-dark);
            font-size: .96em;
        }
        
        .added-devs td:last-child a {
            color: var(--project-blue) !important;
        }
        
        .added-devs td:last-child {
            text-align: center;
        }
        /* END ADD DEVELOPER DIVISION */
        /* START WELCOME PAGE PROJECT DISPLAY */
        
        .favorite-icon:hover {
            color: rgba(255, 255, 255, .7);
            transition: .1s ease;
        }
        
        .bottom-icons {
            color: #FFF;
            display: none;
        }
        
        .welcome-placeholder-image {
            width: 50%;
            opacity: 40%;
            margin-top: 30%;
        }
        
        .welcome-placeholder-paragraph {
            position: absolute;
            margin-top: 5%;
            font-family: 'Poppins', sans-serif;
            font-size: 1.1em;
            color: #708891a1;
            opacity: 60%;
        }
        
        .client-placeholder-paragraph {
            font-family: 'Poppins', sans-serif;
            font-size: 1.1em;
            color: #708891a1;
            opacity: 60%;
        }
        
        .finished-tasks {
            background-color: #eaeaead8;
            border-radius: 3px;
            font-size: 14px !important;
            align-items: center;
            height: 26px;
        }
        
        .welcome-smaller-placeholder-paragraph {
            font-size: 1.1em;
            font-family: 'Poppins', sans-serif;
            color: #708891a1;
            margin: auto 0;
            opacity: 60%;
        }
        
        .welcome-smaller-placeholder-image {
            width: 15%;
            opacity: 40%;
        }
        
        .edit-task-button :first-child {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 40%;
        }
        
        .all-projects-container {
            background-color: #eaeaea;
            height: 450px;
            border-radius: 10px;
        }
        
        .finished-tasks-client {
            border-radius: 3px;
            font-size: 14px !important;
            align-items: center;
            width: auto;
            height: 26px;
        }
        
        .close-status-modal,
        .close-login-modal {
            font-size: .92em;
            cursor: pointer;
            color: var(--main-dark);
            opacity: 50%;
        }
        
        .close-status-modal:hover,
        .close-login-modal:hover {
            opacity: 80%;
            transition: .15s ease;
        }
        
        .info-title-status {
            font-family: 'Poppins', sans-serif;
            font-weight: 500;
        }
        
        .card-home-project-client:hover {
            background: linear-gradient(#00000013, #00000013);
            transition: .5s ease;
        }
        
        .white-project-bar {
            background-color: white;
            height: 40px;
            border-radius: 0px 0px 6px 6px;
        }
        /* END WELCOME PAGE PROJECT DISPLAY */
        /* START FINISH MODAL*/
        
        .finish-modal-content {
            width: 55%;
            height: auto;
            background: transparent;
            border: none;
        }
        
        .finish-modal-content h5 {
            font-family: Poppins, 'sans-serif';
            font-size: 1.08em;
            text-align: center;
        }
        
        .finish-modal-content h5 i {
            border-radius: 50%;
            color: var(--main-dark);
            background-color: #AEC5E5;
            padding: .34em;
        }
        
        .project-data {
            font-family: 'Open Sans', sans-serif;
        }
        
        .project-data b {
            padding-right: .2rem;
        }
        
        .project-data h6,
        .project-data hr {
            font-family: 'Poppins', sans-serif;
            font-size: .94em;
        }
        
        .project-component {
            font-family: 'Poppins', sans-serif;
            font-weight: 500;
            font-size: 17px;
        }
        
        .project-component-border {
            border-left: 1px #fff solid;
        }
        
        .finish-project-title {
            font-family: 'Poppins', sans-serif;
            font-weight: 400;
            font-size: 17px;
            color: #2D66CE;
        }
        
        .finish-project-title-added {
            font-family: 'Poppins', sans-serif;
            font-weight: 200;
            font-size: 17px;
        }
        
        .finish-project-subtitle {
            font-family: 'Poppins', sans-serif;
            font-weight: 400;
            font-size: 18px;
            color: #2b2d42;
        }
        
        .finish-project-subtitle-output {
            font-family: 'Poppins', sans-serif;
            font-weight: 400;
            font-size: 17px;
        }
        
        .finish-button {
            font-family: 'Poppins', sans-serif;
            background-color: #fff;
            font-weight: 600;
            font-size: 14px;
            letter-spacing: 2px;
            color: #5f778e;
            border: none;
            padding: 5px 25px 5px 25px;
        }
        
        .finish-button:hover {
            background-color: rgba(255, 255, 255, .85);
            transition: .2s ease;
        }
        /* END FINISH MODAL */
        /* START PROJECT SEARCH BAR ANIMATION */
        
        .navsearchbar {
            background-color: #fff;
            font-family: 'Poppins', sans-serif;
            font-size: 15px;
            border: none;
            border: 1px #999999 solid;
            height: 30px;
            width: 200px;
            border-radius: 5px 0px 0px 5px;
            padding-left: 10px;
            transition: all .1s ease;
        }
        
        .navsearchbar:hover {
            border-bottom: 1px #7a7a7a solid;
        }
        
        .navsearchbar:focus {
            outline: none;
            border: 2px #3b6fb7 solid;
            color: #3b6fb7;
        }
        
        .task-search-button {
            background-color: #eaeaea;
            color: #999999;
            border: 1px solid #999999;
            border-radius: 0px 5px 5px 0px;
            height: 30px;
            width: 70px;
            transition: all .1s ease;
        }
        
        .task-search-button:hover {
            background-color: #dddddd;
        }
        /* END PROJECT SEARCH BAR ANIMATION */
        /* START ERROR */
        
        .error-display {
            font-family: 'Open Sans', sans-serif;
            font-size: .75em;
            color: #dc3545;
        }
        /* END ERROR */
        /* START EDIT PROJECT */
        
        .shortcuts-container {
            position: fixed;
            width: clamp(20%, 100px, 23rem);
        }
        
        .shortcuts-displayer {
            background-color: #739bd3;
            font-family: 'Poppins', sans-serif;
            height: 22rem;
            padding: 1.8rem 2rem;
            line-height: .7em;
        }
        
        .shortcuts-displayer p {
            color: var(--main-light);
            font-weight: 500;
            font-size: 1em;
        }
        
        .shortcuts-displayer hr {
            color: var(--main-light);
            height: .07em;
            width: 90%;
            opacity: 70%;
        }
        
        .shortcuts-links-row {
            padding: .8rem 0;
            font-weight: 500;
            font-size: 1em;
        }
        
        .shortcuts-links-row i {
            width: 2.8rem;
        }
        
        .shortcuts-links a {
            text-decoration: none;
            color: var(--main-dark);
        }
        
        .main-container {
            background-color: #f4f4f4;
            padding: 1.9rem 2.7rem;
        }
        
        .main-container h5 {
            font-family: 'Poppins', sans-serif;
            font-weight: 500;
            letter-spacing: .05rem;
        }
        
        .main-container hr {
            width: 45%;
            height: .13rem;
            color: var(--main-dark);
            opacity: 100%;
        }
        
        .info-subtitle {
            font-family: "Open Sans", sans-serif;
            font-weight: 900;
            font-size: .94rem;
            letter-spacing: .05rem;
            color: var(--project-blue);
        }
        
        .project-info-container div:not(.template-hyperlink) {
            color: var(--main-dark);
            font-family: "Open Sans", sans-serif;
            font-size: .95em;
            font-weight: 500;
        }
        
        .project-info-container div label {
            padding-right: .8rem;
            width: 8.5rem;
        }
        
        .project-info-container div input:not(.search-templates-section input),
        .search-templates-section {
            background: none;
            border: none;
            padding: .35rem .6rem;
            border-bottom: .15rem solid var(--main-dark);
            width: 26.3rem;
            outline: none !important;
        }
        
        .search-templates-section input {
            background: none;
            width: 87%;
            border: none;
            outline: none !important;
        }
        
        .search-templates-section i:last-child {
            color: transparent;
            cursor: default;
        }
        
        .add-info-button {
            border-radius: 18px;
            padding: .2rem 1.3rem .2rem .8rem;
            border: none;
            background-color: #c1cfe0;
            color: var(--main-dark);
            font-family: 'Poppins', sans-serif;
            font-size: .9em;
        }
        
        .add-info-button:hover {
            background-color: hsl(213, 73%, 82%);
            transition: .2s ease-in-out;
        }
        
        .save-changes-button button {
            background-color: #c1cfe0;
            border: none;
            font-family: 'Roboto', sans-serif;
            font-size: 1em;
            padding: .2rem .6rem;
            margin-top: 1.03rem;
            float: right;
        }
        
        .save-changes-button button:hover {
            background-color: hsl(213, 73%, 82%);
            transition: .2s ease-in-out;
        }
        
        .added-clients tr:first-child {
            background-color: #739BD3 !important;
        }
        
        .added-clients tr:last-child {
            border-bottom-color: #739BD3 !important;
        }
        
        .added-clients tr:nth-child(odd):not(:first-child) {
            background: #E1EAF6 !important;
        }
        
        .added-clients tr td:last-child a {
            color: #739BD3 !important;
        }
        
        .add-users-modal-content {
            text-align: center;
            color: var(--main-light);
        }
        
        .add-users-modal-content form div {
            margin-top: 5.5%;
        }
        
        .add-users-form input {
            background: none;
            border: none;
            border-bottom: .15em solid var(--main-light);
            color: var(--main-light);
            font-family: 'Poppins', sans-serif;
            padding: .2em .8em;
            outline: none;
        }
        
        .add-users-form i {
            border-bottom: .15em solid var(--main-light);
            padding: .49em .8em;
        }
        
        .add-users-form button {
            border: none;
            background: none;
            color: transparent;
            padding-bottom: 0;
            margin-left: -.25em;
        }
        
        .close-user-button button {
            font-size: 2vw;
            padding: .5rem 1.2rem;
            background: none;
            border: none;
            color: var(--main-light);
        }
        
        .search-results {
            margin: auto;
        }
        
        .search-results-button {
            text-align: start;
            background: var(--main-light);
            width: 100%;
            border: none;
            border-radius: .3rem;
            margin: .2rem;
            padding: .3em .6em;
            font-family: 'Poppins', sans-serif;
            font-size: .92em;
        }
        
        .search-results-button:hover {
            background-color: #D4D4D4;
        }
        
        .search-results-button b {
            font-weight: 600;
        }
        
        .empty-results {
            font-family: 'Poppins', sans-serif;
            font-size: .9em;
        }
        
        .add-users-button button {
            background-color: #b0cef3;
            border: none;
            border-radius: 18px;
            color: var(--main-dark);
            padding: .24rem 1.8rem;
            font-family: 'Poppins', sans-serif;
            font-size: .92em;
        }
        
        .add-users-button button:hover {
            background-color: #95BEEF;
        }
        
        .template-hyperlink {
            color: var(--project-blue);
            font-size: .88em;
        }
        
        .template-hyperlink:hover {
            color: var(--main-blue);
            cursor: pointer
        }
        
        .templates-displayer-modal-content {
            background-color: #ECEFF3;
            width: fit-content;
            padding: .9em 1.5em 1.7em;
            border-radius: .78em;
            margin: auto;
        }
        
        .templates-checklists-displayer {
            -webkit-box-shadow: 0px 5px 15px 5px rgba(0, 0, 0, .1);
            box-shadow: 0px 5px 15px 5px rgba(0, 0, 0, .1);
            border-radius: .7rem;
            background-color: var(--main-light);
        }
        
        .template-selector h4 {
            font-family: 'Poppins', sans-serif;
            font-size: 1.2em;
        }
        
        .template-selector p {
            font-family: 'Open Sans', sans-serif;
            font-size: .9em;
        }
        
        .template-selector-container {
            max-height: 18em;
            display: flex;
            flex-wrap: wrap;
            overflow: auto;
            gap: 5%;
        }
        
        .templates-container {
            width: 40vw;
        }
        
        .template-divisions {
            font-family: 'Open Sans', sans-serif;
            font-size: .93em;
            margin: .1em 0;
            padding: .24rem .33rem;
            border-radius: .2em;
            text-align: center;
            flex: 0 0 45%;
            height: fit-content;
        }
        
        .template-divisions:hover {
            cursor: pointer;
            filter: brightness(90%);
        }
        
        .templates-tasks h5 {
            font-family: 'Poppins', sans-serif;
            font-size: 1.05em;
        }
        
        .task-item {
            width: 100%;
            background: var(--main-light);
            padding: .15rem .4rem;
            border-radius: .13rem;
            font-family: 'Poppins', sans-serif;
            font-size: .87em;
        }
        
        .task-item-title {
            max-width: 30%;
            overflow: hidden;
            font-weight: 500;
        }
        
        .task-item-description {
            max-width: 70%;
            overflow: hidden;
        }
        
        .template-tasks-placeholder {
            font-family: 'Open Sans', sans-serif;
            font-size: .91em;
            letter-spacing: .02em;
        }
        
        .edit-project-errors-displayer {
            background-color: #EDC5D5;
            border: 1px solid #CC5C8B;
            border-radius: .6rem;
            color: #CC5C8B;
            font-family: 'Poppins', sans-serif;
            font-size: .88rem;
            padding: .62em 1.95em;
            width: fit-content;
        }
        
        .selected-user {
            background-color: #CCD7E3;
            border: .1em solid #A2B5CB;
        }
        
        .selected-user:hover {
            background-color: #BAC9D9 !important;
            transition: .15s ease;
        }
        
        .template-options {
            border-radius: 0 0 .8rem .8rem;
            box-shadow: 0px 10px 25px -8px rgba(0, 0, 0, .49);
            position: absolute;
            z-index: 1;
            display: none;
        }
        /* END EDIT PROJECT */
        /* END EDIT PROJECT */