@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');


* {
    font-family: "Exo", sans-serif;
    padding: 0;
    margin: 0;
    outline: none !important;
}

::selection {
    background: #3571be;
    color: aliceblue !important;
}

body {
    overflow-x: hidden !important;
}

:root {
    overflow-x: hidden;
}

button, img {
    user-select: none;
}

button img {
    pointer-events: none;
}


.Header {
    display: flex;
    justify-content: space-between;
    background: #2e2e2e;
    width: 100%;
    padding: 20px 39px;
    position: relative;
    z-index: 22;
}

.HeaderLogo {
    display: flex;
    height: 100%;
    align-items: center;
    padding-right: 20px;
    border-right: solid 1px #3d3d3d;
}

.HeaderLogo img {
    display: block;
    margin: 0 0;
    width: auto;
    height: 33px;
    transition: 300ms;
    cursor: pointer;
}

.HeaderLeft {
    display: flex;
    align-items: center;
    justify-content: start;
    width: fit-content;
    height: 100%;
}

.HeaderRight {
    display: flex;
    justify-content: start;
    width: fit-content;
    height: 100%;
    position: relative;
}

.HeaderUser {
    display: flex;
    height: 100%;
    position: relative;
    padding: 3px 7px;
    padding-left: 48px;
    padding-right: 45px;
    color: aliceblue;
    flex-direction: column;
    margin-left: 15px;
    cursor: pointer;
    transition: 300ms;
    justify-content: center;
}

.HeaderUser img {
    position: absolute;
    left: 5px;
    top: 10%;
    width: auto;
    height: 80%;
    aspect-ratio: 1/1;
    border-radius: 1000px;
    object-fit: cover;
}

.HeaderUser h4 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 14px;
    font-weight: bolder;
}

.HeaderUser label {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 11px;
    cursor: unset;
}

.HeaderUser i {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 14px;
}


.HeaderUser:hover {
    background: #444444;
    border-radius: 1000px;
    transform: scale(1.05);
}

.SideMenuBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 42px;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1/1;
    background: none;
    border: none;
    transition: 300ms;
}

.SideMenuBtn img {
    width: 120%;
    filter: invert(1);
}

.ContentView {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #616161;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 81px;
}

.ContentViewInner {
    display: none;
    margin: 0 auto;
    width: 90%;
    height: 90%;
    background: #2e2e2e;
    border-radius: 10px;
    overflow: hidden;
    overflow-y: auto;
    padding: 40px;
    position: relative;
    z-index: 222;
}

.SideMenuBtn:hover {
    transform: scale(1.2);
}

.ContentViewBG {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
    filter: grayscale(1);
    mix-blend-mode: multiply;
    opacity: 0.3;
}

.SharedSectionHeader {
    display: block;
    margin: 0 auto 45px;
    width: 96%;
    font-size: 48px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 6px;
    font-weight: bold;
}

.ProjectsGH {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    width: 100%;
}

.ProjectItem {
    display: block;
    margin: 25px 2%;
    width: 21%;
    position: relative;
    overflow: hidden;
    color: aliceblue;
    background: #4f4f4f;
    border-radius: 20px;
    overflow: hidden;
    min-width: 295px;
}

.ProjectCover {
    display: flex;
    margin: 0 auto;
    width: 100%;
    height: 160px;
    position: relative;
    overflow: hidden;
    z-index: 22;
    align-items: end;
    flex-direction: column-reverse;
    padding: 10px 0;
    background: black;
}

.ProjectCover .ProjectCoverBG {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0.5;
    filter: grayscale(70%);
    pointer-events: none;
}

.ProjectCover h3 {
    margin: 0 auto 7px;
    width: 90%;
    font-size: 20px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show */
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.ProjectCounters {
    display: flex;
    justify-content: start;
    width: 91%;
    margin: 0 auto;
}

.ProjectCounters label {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #cecece3b;
    margin: 0 0;
    position: relative;
    padding: 4px 8px;
    width: fit-content;
    margin-right: 10px;
    font-size: 12px;
    padding-left: 25px;
    border-radius: 1000px;
    line-height: 17px;
    font-weight: 500;
    user-select: none;
}

.ProjectCounters label i {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    font-size: 10px;
}

.ProjectItem p {
    display: block;
    margin: 10px auto;
    width: 90%;
    font-size: 13px;
    user-select: none;
}

.ProjectItem p strong {
    float: right;
}

.ProjectItem p strong i {
    margin-right: 5px;
}

.ProjectOptions {
    display: flex;
    flex-wrap: wrap;
}

.ProjectOptions button {
    display: block;
    margin: 11px auto;
    width: 25%;
    position: relative;
    overflow: hidden;
    border: none;
    color: aliceblue;
    background: #d39441;
    padding: 7px 0px;
    border-radius: 5px;
    transition: 300ms;
    font-size: 12px;
    font-weight: 600;
}

.ProjectOptions button img {
    display: block;
    margin: 0 auto 3px;
    width: auto;
    max-width: 100%;
    height: 25px;
    filter: invert(1);
}

.ProjectOptions button:last-of-type {
    background: #ac5656;
}

.ProjectOptions button:first-of-type {
    background: #3571be;
}

.ProjectOptions button:hover {
    transform: scale(1.1);
    filter: brightness(120%);
    box-shadow: -4px -4px 1px 1px #00000012;
}

.PinProjectBtn {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    aspect-ratio: 1/1;
    background: white;
    border: none;
    border-radius: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    z-index: 2222;
    transition: 300ms;
}

.PinProjectBtn img {
    display: block;
    margin: 0 auto;
    width: 70%;
}

.PinProjectBtn:hover {
    transform: scale(1.2);
}

.Pinned {
    width: fit-content;
    aspect-ratio: unset;
    background: #65956f;
    color: aliceblue;
    padding: 3px 14px;
    padding-left: 24px;
    font-size: 13px;
    font-weight: 500;
}

.Pinned g {
}

.Pinned img {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    filter: invert(1);
    padding: 5px;
}

.EmpProjectOptions {
}

.EmpProjectOptions button {
    display: block;
    margin: 14px auto;
    width: 90%;
    padding: 10px 5px;
    padding-left: 40px;
    color: aliceblue;
    background: #3571be;
    border: none;
    border-radius: 10px;
    position: relative;
    transition: 300ms;
    overflow: hidden;
    font-size: 17px;
    font-weight: 600;
}

.EmpProjectOptions button img {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    padding: 10px;
    filter: invert(1);
    background: #ffffff24;
}

.EmpProjectOptions button:hover {
    background: #2a60a5;
}

@keyframes NewTasksForYouAnimation {
    0% {
        transform: scale(1.0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1.0);
    }
}


.ProjectCover h12 {
    position: absolute;
    left: 0;
    top: 0;
    width: fit-content;
    margin: 16px;
    background: #ce4f4f;
    overflow: hidden;
    padding: 4px 9px;
    padding-left: 23px;
    border-radius: 10px;
    font-size: 11px;
    transform: translatey(0px);
    -webkit-animation: NewTasksForYouAnimation 3s ease-in-out infinite;
    animation: NewTasksForYouAnimation 3s ease-in-out infinite;
}

.ProjectCover h12 img {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    filter: invert(1);
    padding: 6px;
}

.SharedCreateBtn {
    position: absolute;
    right: 5%;
    top: 0;
    width: fit-content;
    background: #3571be;
    color: aliceblue;
    margin: 40px 0;
    padding: 11px 9px;
    border: none;
    padding-left: 40px;
    border-radius: 5px;
    transition: 400ms;
    font-weight: 700;
    z-index: 222;
}

.SharedCreateBtn i {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 100%;
    aspect-ratio: 1/1;
}

.SharedCreateBtn:hover {
    background: white;
    color: #3571be;
}

.AuthOption {
    position: fixed;
    left: 200px;
    top: 69px;
    width: 290px;
    z-index: 999;
    display: none;
}

.AuthOption ul {
    display: block;
    margin: 0 auto;
    width: 100%;
    background: #424242;
    color: aliceblue;
    padding: 1px 10px;
    border-radius: 10px;
    /* box-shadow: 0px 0px 150px -11px #ffffff78; */
    animation-duration: 1000ms;
}

.AuthOption ul li {
    display: block;
    margin: 19px auto;
    width: 100%;
    background: #4d4d4d;
    padding: 10px;
    padding-left: 43px;
    position: relative;
    overflow: hidden;
    font-size: 13px;
    border-radius: 5px;
    transition: 300ms;
    cursor: pointer;
}

.AuthOption ul li img {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    padding: 10px;
    filter: invert(1);
}

.AuthOption ul li:hover {
    background: #616161;
}

.FormsContainer {
    display: none;
}

.FormsContainerInner {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.FormsContainerFade {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #575757;
    z-index: -1;
    opacity: 0.7;
    cursor: pointer;
}

.FormItem {
    display: block;
    margin: 0 auto;
    width: 610px;
    background: #2e2e2e;
    position: relative;
    overflow: hidden;
    height: 532px;
    max-height: 90%;
    z-index: 22;
    padding: 20px;
    overflow-y: auto;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.FormItemHeader {
    display: block;
    margin: 0 auto 20px;
    width: 100%;
    font-weight: bold;
    color: #3571be;
    font-size: 23px;
    letter-spacing: 4px;
}

.AuthProfileImageEditor {
}

.AuthProfileImageEditorDiv {
    display: block;
    margin: 0 auto;
    width: 100px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: 500ms;
}

.AuthProfileImageEditorDiv img {
    display: block;
    margin: 0 auto;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 1000px;
    background: #6e6e6e;
}

.AuthProfileImageEditorDiv i {
    position: absolute;
    left: 0;
    top: 11px;
    width: 21px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: aliceblue;
    background: #d39441;
    border-radius: 100px;
    font-size: 12px;
    z-index: 2;
}

.FormItemRow {
    display: block;
    margin: 0px 0;
    width: 50%;
    padding: 15px;
}

.FormItemRow label {
    color: white;
    display: block;
    margin: 4px auto;
    width: 100%;
    font-weight: 500;
    font-size: 13px;
}

.FormItemHolder {
    display: block;
    margin: 0 auto;
    width: 100%;
    background: white;
    height: 40px;
    position: relative;
    overflow: hidden;
    border: none;
}

.FormItemHolder input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    padding: 0px 9px;
    font-size: 13px;
}

.FormItemHolder select {
}

.FormItemRowContainer {
    display: flex;
    justify-content: start;
    width: 100%;
    flex-wrap: wrap;
}


.AuthProfileImageEditorDiv:hover {
    filter: brightness(120%);
    transform: scale(1.1);
}

.FormItemSubmit {
    display: flex;
    margin: 0 auto;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.FormItemSubmit button {
    display: block;
    margin: 21px auto;
    width: fit-content;
    padding: 9px 11px;
    border-radius: 5px;
    border: none;
    background: #3571be;
    color: aliceblue;
    padding-left: 52px;
    position: relative;
    overflow: hidden;
    font-weight: 500;
    transition: 600ms;
}

.FormItemSubmit button i {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0000001c;
}

.FormItemSubmit button:hover {
    transform: scale(1.1);
    background: #5d92d6;
}

.FormItemRow textarea {
    display: block;
    margin: 8px auto;
    width: 100%;
    min-height: 81px;
    padding: 10px;
    font-size: 13px;
}

.AssignedForTrigger {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 0px 37px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.AssignedForTrigger y {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.AssignedForTrigger g {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.FormItem::-webkit-scrollbar {
    display: none;
}

.AssignedForView {
    display: none;
    position: relative;
    width: 100%;
}

.AssignedForViewInner {
    display: flex;
    justify-content: start;
    align-items: start;
    width: 100%;
    background: #4d4d4d;
    padding: 10px;
    position: absolute;
    left: 0;
    top: 0;
    max-height: 154px;
    overflow-y: auto;
    /* IE and Edge */
    /* Firefox */
    z-index: 222;
    flex-wrap: wrap;
    flex-direction: row;
}

.AssignedForItem {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #5c5c5c;
    margin: 5px 6px;
    padding: 5px 16px;
    color: aliceblue;
    padding-left: 26px;
    position: relative;
    overflow: hidden;
    border-radius: 1000px;
    font-size: 12px;
    font-weight: 600;
    transition: 400ms;
    cursor: pointer;
}

.AssignedForItem i {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
}

.AssignedForItem:hover {
    transform: scale(1.05);
    background: #6b6b6b;
}

.SideMenu {
    display: none;
}

.SideMenuInner {
    position: fixed;
    z-index: 8;
}

.SideMenuDiv {
    position: fixed;
    right: 0;
    top: 0;
    width: 400px;
    height: 100%;
    background: #252525;
    color: aliceblue;
    padding: 20px;
    padding-top: 106px;
}

.SideMenuDiv ul {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 0;
}

.SideMenuDiv ul li {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 16px 8px;
    border-bottom: solid 1px #303030;
    position: relative;
    padding-left: 64px;
    font-weight: 500;
    cursor: pointer;
    transition: 400ms;
}

.SideMenuDiv ul li:last-child {
    border-bottom: none;
}

.SideMenuDiv ul li:hover {
    background: #303030;
}

.SideMenuDiv ul li img {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    padding: 14px;
    transition: 400ms;
}

.SideMenuDiv ul .ActiveSideMenuTab {
    background: #3571be !important;
}

.SideMenuDiv ul .ActiveSideMenuTab img {
    filter: grayscale(1) brightness(5.5);
}

.EmployeesGH {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    width: 100%;
}

.EmployeeItem {
    display: block;
    margin: 36px 2%;
    width: 21%;
    position: relative;
    color: aliceblue;
    background: #4f4f4f;
    border-radius: 20px;
}

.EmployeeItem .EmpImg {
    display: block;
    margin: -24px auto 10px;
    width: 97px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 1000px;
    background-color: #777777;
}

.EmployeeItem h4 {
    display: block;
    margin: 0 auto;
    width: 90%;
    text-align: center;
    font-weight: bold;
    color: #3571be;
    font-size: 18px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.EmployeeItem label {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    margin: 5px auto 14px;
    width: fit-content;
    text-align: center;
    font-size: 13px;
    font-weight: 300;
}

.EmployeeItem p {
    display: block;
    margin: 6px auto;
    width: 90%;
    font-size: 12px;
}

.EmployeeItem p strong {
    float: right;
}

.EmployeeOptions {
    display: flex;
    flex-wrap: wrap;
    margin: 12px auto;
    width: 100%;
}

.EmployeeOptions button {
    display: block;
    margin: 11px auto;
    width: 25%;
    position: relative;
    overflow: hidden;
    border: none;
    color: aliceblue;
    background: #d39441;
    padding: 7px 0px;
    border-radius: 5px;
    transition: 300ms;
    font-size: 12px;
    font-weight: 600;
}

.EmployeeOptions button img {
    display: block;
    margin: 0 auto 3px;
    width: auto;
    max-width: 100%;
    height: 25px;
    filter: invert(1);
}

.EmployeeOptions button:last-of-type {
    background: #ac5656;
}

.EmployeeOptions button:first-of-type {
    background: #7b945a;
}

.EmployeeOptions button:hover {
    transform: scale(1.1);
    filter: brightness(120%);
    box-shadow: -4px -4px 1px 1px #00000012;
}

.FromPassVisibilityBtn {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 1/1;
    background: none;
    border: none;
    color: #cf6b6b;
    transition: 300ms;
}

.FromPassVisibilityBtn i {
    pointer-events: none;
}

.FromPassVisibilityBtn:hover {
    transform: scale(1.2);
    filter: brightness(85%);
}

.PassIsNowVisible {
    color: #65956f;
}

.TasksHeader {
    position: absolute;
    left: 0;
    top: 0;
    color: aliceblue;
    /* background: #1c1c1c; */
    width: 100%;
    padding: 17px 4%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.TasksHeader h4 {
    display: block;
    margin: 0 0;
    width: fit-content;
    font-weight: bold;
}

.TasksHeader button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #a94848;
    color: aliceblue;
    padding: 5px 13px;
    height: 100%;
    border: none;
    position: relative;
    overflow: hidden;
    border-radius: 1000px;
    padding-left: 30px;
    transition: 400ms;
}

.TasksHeader button i {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.TasksHeader button:hover {
    background: #ca5d5d;
    transform: scale(1.3);
}

#Tasks {
    padding-top: 100px;
    background-color: #000000;
    overflow: hidden !important;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.TasksHoldersGH {
    display: flex;
    justify-content: start;
    align-items: start;
    width: 100%;
    margin: 0 auto;
    height: 100%;
}

.TasksHolderItem {
    display: block;
    margin: 0 auto;
    width: 30%;
    background: #3f3f3f;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.TasksHolderHeader {
    display: block;
    margin: 0 auto;
    width: 100%;
    color: aliceblue;
    padding: 12px 7px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 222;
}

.TasksHolderHeader h2 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
}

#ToDoTaskHolder .TasksHolderHeader {
    background: #ac5656;
}

#DOINGTaskHolder .TasksHolderHeader {
    background: #3571be;
}

#DONETaskHolder .TasksHolderHeader {
    background: #65956f;
}

.TaskItem {
    display: block;
    margin: 16px auto 26px;
    width: 85%;
    background: #2e2e2e;
    padding: 10px 20px;
    color: aliceblue;
    user-select: none;
    /* cursor: pointer; */
    border-radius: 10px;
    transition: 400ms;
    border: solid 1px #2e2e2e;
    position: relative;
}

.TaskItem h4 {
    display: block;
    margin: 0 0;
    width: 90%;
    font-size: 16px;
    font-weight: bold;
    color: #3571be;
}

.TaskItem p {
    margin: 9px auto;
    width: 100%;
    font-size: 11px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.AssinedForThisTask {
    display: block;
    margin: 10px auto 0;
    width: 100%;
    font-size: 11px;
}

.AssinedForThisTask strong {
    display: flex;
    margin: 4px auto;
    width: 100%;
    flex-wrap: wrap;
}

.AssinedForThisTask strong g {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff1a;
    margin: 4px 0;
    margin-right: 8px;
    padding: 4px 11px;
    border-radius: 1000px;
    position: relative;
    padding-left: 25px;
    line-height: 11px;
    /* cursor: context-menu; */
    user-select: none;
}

.AssinedForThisTask strong g i {
    position: absolute;
    left: 3px;
    top: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #6da0e1;
}

.TaskItem label {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 10px;
    padding: 5px 0;
    border-bottom: solid 1px #ffffff0a;
    pointer-events: none;
}

.TaskItem label strong {
    float: right;
}

.TaskItem label strong i {
    margin-right: 7px;
}

.TaskItem:hover {
    /* transform: scale(1.05);
    background: #4d4d4d;
    border-color: #797979; */
}

.TaskOptions {
    display: none;
}

.TaskOptionsDiv {
    position: absolute;
    right: 0;
    top: 0;
    background: #424242;
    padding: 0;
    border: solid 1px #5c5c5c;
    /* border-radius: 10px; */
    margin: 20px;
    width: 180px;
    z-index: 222;
}

.TaskOptionsDiv ul {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 0;
}

.TaskOptionsDiv ul li {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 11px;
    padding: 10px 6px;
    border-bottom: solid 1px #ffffff0a;
    transition: 300ms;
    cursor: pointer;
}

.TaskOptionsDiv ul li i {
    margin-right: 5px;
}

.TaskOptionsDiv ul li:hover {
    background: #535353;
}

.DoingCircle {
    color: #3571be;
}

.DoneCircle {
    color: #65956f;
}

.TaskPreview {
    display: none;
}

.TaskPreviewInner {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999999999999999999999;
}

.TaskPreviewFade {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #939393;
    opacity: 0.5;
    cursor: pointer;
}

.TaskPreviewDiv {
    display: block;
    margin: 0 auto;
    width: 730px;
    background: #343434;
    max-height: 85%;
    padding: 20px 30px;
    overflow: hidden;
    overflow-y: auto;
    color: white;
    border-radius: 10px;
}

.TaskPreviewDiv h3 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-weight: bold;
    font-size: 17px;
    color: #3571be;
}

.TaskPreviewDiv p {
    display: block;
    margin: 11px auto;
    width: 100%;
    font-size: 12px;
}

.TaskPrevExtraInfo {
    display: flex;
    margin: 0 auto;
    width: 100%;
    flex-wrap: wrap;
}

.TaskPrevExtraInfo label {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 13px;
    margin: 5px 0;
    font-size: 12px;
    border-right: solid 1px #424242;
}

.TaskPrevExtraInfo label strong {
    margin-left: 8px;
}

.TaskPrevExtraInfo label strong i {
    margin-right: 6px;
}

.TaskPrevAssignedFor {
    display: block;
    margin: 25px auto;
    width: 100%;
}

.TaskPrevAssignedFor h4 {
    display: block;
    margin: 0 auto 8px;
    width: 100%;
    font-size: 13px;
}

.TaskPrevAssignedForGH {
    display: flex;
    justify-content: start;
    align-items: start;
    width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
}

.TaskPrevAssignedForGH h6 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    margin-right: 10px;
    background: #4a4a4a;
    padding: 6px 8px;
    border-radius: 1000px;
}

.TaskPrevAssignedForGH h6 i {
    margin-right: 7px;
    color: #6da0e1;
}


.TaskPrevExtraInfo label:last-child {
    border: none;
}

.TaskPrevExtraInfo label:first-child {
    padding-left: 0;
}

.AddCommentOnTask {
}

.AddCommentOnTaskHolder {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 90px;
    background: white;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden !important;
    border-radius: 10px;
}

.AddCommentOnTaskHolder textarea {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    z-index: 0;
    padding: 11px;
    font-size: 13px;
    background: none;
    border: none;
    color: #343434;
}

.AddCommentOnTaskHolder button {
    position: absolute;
    right: 0;
    bottom: 0;
    width: fit-content;
    padding: 6px 10px;
    margin: 10px;
    font-size: 11px;
    border: none;
    background: #ff8700;
    color: aliceblue;
    border-radius: 5px;
    z-index: 22;
    transition: 300ms;
}

.AddCommentOnTaskHolder button i {
    margin-right: 3px;
}

.AddCommentOnTaskHolder button:hover {
    background: #ff8700;
    transform: scale(1.1);
}

.CommentsGH {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.CommentItem {
    display: block;
    margin: 22px auto;
    width: 100%;
    background: #515151;
    padding: 14px 20px;
    padding-left: 70px;
    position: relative;
    border-radius: 10px;
    position: relative;
    padding-right: 60px;
}

.CommentItem img {
    position: absolute;
    left: 0;
    top: 0;
    width: 45px;
    margin: 10px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 1000px;
    background: #707070;
}

.CommentItem h4 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    color: #ff8700;
}

.CommentItem p {
    display: block;
    margin: 8px auto;
    width: 100%;
    font-size: 12px;
}

/* width */
.TasksGH::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.TasksGH::-webkit-scrollbar-track {
    background: #363636;
}

/* Handle */
.TasksGH::-webkit-scrollbar-thumb {
    background: #ffffff;
    border-radius: 1000px;
    transition: 300ms;
    cursor: grab;
}

/* Handle on hover */
.TasksGH::-webkit-scrollbar-thumb:hover {
    background: #a9a9a9;
}

.TasksPageBg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0.1;
}

.MyName {
    background: #ffffff30 !important;
}

.MyName i {
    color: #ffba00 !important;
}

.TasksGH {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    z-index: 1;
    padding-top: 56px;
}

.HiddenAudio {
    display: none;
    visibility: hidden;
}

.CreateTaskBtn {
    display: block;
    margin: 15px auto 32px;
    width: 84%;
    padding: 9px 0px;
    border: solid 2px;
    border-radius: 5px;
    color: #d1d1d1;
    background: none;
    transition: 400ms;
    font-weight: 700;
}

.CreateTaskBtn i {
    margin-right: 7px;
}

.CreateTaskBtn:hover {
    background: #d1d1d1;
    border-color: #d1d1d1;
    color: #3f3f3f;
}

.PreloaderBG {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    filter: grayscale(1);
    opacity: 0.2;
}

.Preloader {
}

.PreloaderInner {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999999;
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
}

.PreloaderDiv {
    display: block;
    margin: 0 auto;
    width: fit-content;
    text-align: center;
    color: aliceblue;
}

.PreloaderDiv img {
    display: block;
    margin: 0 auto 27px;
    width: auto;
    height: 56px;
}

.PreloaderDiv label {
}

.PreloaderDiv button {
    display: none;
    margin: 0 auto;
    width: fit-content;
    padding: 10px 35px;
    border: solid 2px;
    color: aliceblue;
    background: none;
    border-radius: 1000px;
    transition: 300ms;
    font-weight: 600;
}

.PreloaderDiv button:hover {
    background: aliceblue;
    border-color: aliceblue;
    color: #111111;
}

.HeaderLogo img:hover {
    transform: scale(1.1);
}

.LoginInner {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999999999999999;
    width: 100%;
    height: 100%;
    background: red;
    display: flex;
    justify-content: center;
    align-content: center;
}


.SomethingIsWrong {
    display: none;
}

.SomethingIsWrongInner {
    display: block;
    margin: 0 auto 10px;
    width: 94%;
    background: #cd9f9f;
    color: #a15656;
    padding: 15px 10px;
    position: relative;
    min-height: 80px;
    font-size: 13px;
    padding-left: 116px;
    overflow: hidden;
    /* border: solid 1px #a76b6b; */
    border-radius: 10px;
}

.SomethingIsWrongInner img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100%;
    background: #c48a8a;
    object-fit: cover;
}

.SomethingIsWrongInner label {
}

.AssignedForItem input {
    display: none;
}

.EmployeeIsAssigned {
    background: #3571be !important;
}

.FormItemHolder input[type=file] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    cursor: pointer;
}

.ContentLoader {
    display: none;
}

.ContentLoaderInner {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #7b7b7b7d;
    z-index: 999999999999;
}

.ContentLoaderDiv {
    display: block;
    margin: 0 auto;
    width: fit-content;
    max-width: 90%;
    color: aliceblue;
}

.ContentLoaderDiv img {
    display: block;
    margin: 19px auto;
    width: auto;
    height: 60px;
}

.ContentLoaderDiv label {
    display: block;
    margin: 0 auto;
    width: fit-content;
    font-size: 12px;
}

.PinnedProject {
    border: solid 2px #65956f;
    background: #415c47;
}

.TaskThumbNail {
    display: block;
    margin: 0 auto 30px;
    width: auto;
    max-height: 260px;
    max-width: 100%;
    border: solid 1px #3574c6;
    cursor: pointer;
    transition: 300ms;
    background-color: #262626;
}

.TaskThumbNail:hover {
    transform: scale(1.1);
    border-color: #d1bb23;
}

.ImagePreviewer {
    display: none;
}

.ImagePreviewerInner {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ImagePreviewerFade {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: black;
    z-index: -1;
    opacity: 0.5;
}

.ImagePreviewerDiv {
    background: #060606;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 90%;
}

.ImagePreviewerDiv img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    position: relative;
    object-fit: contain;
}


.EditProjectForm .FormItemHeader {
    letter-spacing: 0;
    font-size: 20px;
}

.SharedSuccess {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: fit-content;
    padding: 45px 0px;
    display: none;
    z-index: 99999999999999;
}

.SharedSuccessInner {
    display: block;
    margin: 0 auto;
    width: fit-content;
    background: #3c7849;
    padding: 15px 24px;
    border-radius: 10000px;
    box-shadow: 0px 0px 20px 0px #ffffff17;
}

.SharedSuccessInner p {
    display: block;
    margin: 0 auto;
    width: fit-content;
    color: aliceblue;
}

.DeleteCommentBtn {
    position: absolute;
    right: 0;
    top: 0;
    margin: 10px;
    width: 30px;
    aspect-ratio: 1/1;
    border-radius: 1000px;
    border: none;
    color: aliceblue;
    background: #a34f4f;
    font-size: 14px;
    transition: 300ms;
}

.DeleteCommentBtn i {
    pointer-events: none;
}

.CommentItem span {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 11px;
}


.DeleteCommentBtn:hover {
    transform: scale(1.2);
    background: #893f3f;
}

.ReportsInner {
    display: flex;
    flex-wrap: wrap;
}

.ReportsInnerBox {
    background: #1e1e1e;
    padding: 25px;
    margin: 26px 2%;
    width: 46%;
    border-radius: 10px;
    color: aliceblue;
}

.ReportsInnerBox h4 {
    display: block;
    margin: 0 auto 17px;
    width: 100%;
    font-weight: bold;
    font-size: 22px;
    color: #3574c6;
}

.ReportsInnerBox p {
    padding: 7px 0;
    border-bottom: solid 1px #2a2a2a;
}

.ReportsInnerBox p strong {
    float: right;
}

.ReportsInnerBox p i {
    margin-right: 7px;
    font-size: 13px;
}

.ReportsInnerBox p:last-child {
    border-bottom: none;
}

.Welcome {
}

.WelcomeInner {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #101010;
    color: aliceblue;
    overflow-y: auto;
}

.WelcomeDiv {
    display: block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.WelcomeDiv img {
    display: block;
    margin: 0 auto;
    width: auto;
    max-width: 80%;
    height: 46px;
}

.WelcomeDiv h1 {
    display: block;
    margin: 20px auto;
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: 300;
}

.WelcomeDiv button {
    display: block;
    margin: 0 6px;
    width: fit-content;
    padding: 7px 15px;
    background: #3471c1;
    color: aliceblue;
    border: none;
    border-radius: 5px;
    transition: 300ms;
    position: relative;
    overflow: hidden;
}

.WelcomeDiv button i {
    margin-right: 6px;
}


.WelcomeBG {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    mix-blend-mode: luminosity;
    opacity: 0.1;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
}


.LoginGH {
    display: block;
    margin: 0 auto;
    width: 600px;
    background: #0a0a0a;
    padding: 25px;
    max-width: 90%;
    border-radius: 10px;
    box-shadow: 1px 1px 161px -66px #ffffff0d;
}

.LoginLogo {
    display: block;
    margin: 0 auto 25px;
    width: auto;
    height: 50px;
}

.OTPVerficationDiv {
    display: block;
    margin: 0 auto;
    width: 400px;
    max-width: 80%;
    background: #0a0a0a;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 32px -7px #282828;
}


.OTPVerficationDiv p {
}


.OTPSubmit {
    display: block;
    margin: 23px auto 0;
    width: fit-content;
    padding: 7px 22px;
    color: aliceblue;
    background: #0072ff;
    border: none;
    border-radius: 5px;
    font-size: 14px;
}

.OTPLogOut {
    position: absolute;
    right: 0;
    top: 0;
    width: fit-content;
    background: #d14242;
    padding: 7px 15px;
    margin: 15px;
    border-radius: 5px;
    font-size: 15px;
    z-index: 22;
    cursor: pointer;
}

.OTPLogOut:hover {
    background: #891919;
}

.GuestHeader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: fit-content;
    z-index: 9999;
    background: #06060673;
    padding: 20px;
}

.GuestHeaderLogo {
    display: block;
    margin: 0 0;
    width: fit-content;
    cursor: pointer;
    transition: 300ms;
}

.GuestHeaderLogo img {
    height: 40px;
}


.GuestHeaderLogo:hover {
    transform: scale(1.2);
}

.HomeMainBtns {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: 0 auto;
}


.WelcomeDiv button:first-child {
    background-color: #c39135;
}


.ButtonShine {
    position: absolute;
    left: -20%;
    top: -15%;
    width: 0px;
    height: 140%;
    background: white;
    transform: rotate(19deg);
    box-shadow: 0px 0px 15px 3px white;
    -webkit-animation: ButtonShineAnimation 1s ease-in-out infinite;
    animation: ButtonShineAnimation 1s ease-in-out infinite;
}


@keyframes ButtonShineAnimation {
    0% {
        left: -20%;
    }
    100% {
        left: 120%;
    }
}

.WelcomeDiv button:hover {
    background: #e9e9e9;
    color: #3574c6;
}

.WelcomeDiv button:first-child:hover {
    color: #c39136;
}

.PlansGH {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.PLaneItem {
    display: block;
    margin: 36px auto;
    width: 300px;
    background: #0c0c0c;
    padding: 20px 27px;
    max-width: 90%;
    border-radius: 10px;
    max-height: 100%;
    position: relative;
    padding-bottom: 89px;
}

.PLaneICon {
    display: block;
    margin: -41px auto 24px;
    width: auto;
    max-width: 80%;
    height: 71px;
}

.PLaneItem h4 {
    display: block;
    margin: 15px auto;
    width: 100%;
    text-align: center;
    font-weight: bold;
}

.PLaneItem ul {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 0;
    min-height: 264px;
}

.PLaneItem ul li {
    display: block;
    margin: 20px auto;
    width: 100%;
    font-size: 13px;
}

.PLaneItem ul li u {
    text-decoration: none;
    margin-right: 4px;
}

.TaskCARDdESCRIPTION {
    display: block;
    margin: 12px auto;
    width: 100%;
    max-height: 63px;
    overflow: hidden;
}

.TaskCARDdESCRIPTION * {
    color: aliceblue !important;
    background: none !important;
}

.TaskPrevDescription {
    display: block;
    margin: 12px auto;
    width: 100%;
}

.TaskPrevDescription * {
    color: aliceblue !important;
    background: none !important;
}

.MeInAssignedForProject {
    background: #d39441 !important;
    cursor: not-allowed;
    transform: scale(1.0) !important;
}

#CreateNewTask {
    height: 690px;
}

.ProjectCounters label u {
    text-decoration: none;
    margin-left: 4px;
}

.EditTaskForm {
    height: 730px;
}

.TaskFiles {
    display: flex;
    justify-content: start;
    margin: 11px auto;
    width: 100%;
}

.TaskFiles button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #4861a9;
    color: aliceblue;
    border: none;
    width: 35px;
    aspect-ratio: 1/1;
    border-radius: 1000px;
    margin-right: 13px;
    transition: 300ms;
}

.TaskFiles .TaskCardImagePrevBtn {
    background: #5c7e53;
}

.TaskFiles button i {
    pointer-events: none;
}

.TaskFiles button:hover {
    transform: scale(1.2);
}

.AttentionLabel {
    position: absolute;
    right: -25px;
    top: -13px;
    width: auto;
    height: 55px;
    filter: hue-rotate(45deg) contrast(115%);
    display: none;
}

.PopUp {
    display: none;
}

.PopUpInner {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 420px;
    background: #202020;
    padding: 27px;
    height: fit-content;
    margin: 40px;
    border-radius: 10px;
}

.PopUpInner .Peeking {
    position: absolute;
    left: 19px;
    top: -90px;
    width: auto;
    height: 95px;
}

.PopUpInner h3 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-weight: bold;
    font-size: 25px;
    color: #ac5656;
}

.PopUpInner p {
    display: block;
    margin: 10px auto;
    width: 100%;
    font-size: 13px;
    color: aliceblue;
}

.PopUpInner button {
    display: block;
    margin: 0 auto;
    width: fit-content;
    float: right;
    background: #d39441;
    color: aliceblue;
    padding: 6px 13px;
    border: none;
    border-radius: 5px;
    transition: 300ms;
}

.PopUpInner button i {
    margin-right: 5px;
}

.PopUpInner button:hover {
    background: #a5702b;
    transform: scale(1.1);
}


.ConsolePredictorInner {
}

.ConsolePredictorDiv {
    display: block;
    margin: 28px auto;
    width: auto;
    max-width: 100%;
    text-align: center;
    color: white;
}

.ConsolePredictorDiv img {
    display: block;
    margin: 0 auto;
    width: auto;
    max-width: 85%;
    height: 245px;
}

.ConsolePredictorDiv h4 {
    display: block;
    margin: 16px auto 2px;
    width: fit-content;
    font-size: 36px;
    font-weight: bold;
    color: #bb3535;
    text-transform: uppercase;
}

.ConsolePredictorDiv p {
    display: block;
    margin: 12px auto;
    max-width: 90%;
    font-size: 17px;
    width: 340px;
}

/*.FormItemRow label, .checkbox label, .radio label {*/
/*    color: #252525 !important;*/
/*}*/

.ArchiveGH {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    width: 100%;
}

.ArchiveItem {
    display: block;
    margin: 25px 2%;
    width: 21%;
    position: relative;
    overflow: hidden;
    color: aliceblue;
    background: #474747;
    border-radius: 20px;
    overflow: hidden;
    min-width: 295px;
    padding-bottom: 50px;
}

.ArchivedBy {
    display: block;
    margin: 0 auto;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 26px 10px;
    padding-left: 70px;
    background: #595959;
}

.ArchivedBy img {
    position: absolute;
    left: 0;
    top: 0;
    width: 45px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 1000px;
    margin: 10px;
}

.ArchivedBy h4 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 11px;
}

.ArchivedBy h4 strong {
    font-weight: bold;
    color: #d39441;
    margin-left: 6px;
}

.ArchiveItemInfo {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 10px;
}

.ArchiveItemInfo p {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 12px;
    padding: 3px 0;
}

.ArchiveItemInfo p strong {
    float: right;
}

.ArchiveItemInfo p strong i {
    margin-right: 4px;
}

.ArchiveItemTaskDetails {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 10px;
}

.ArchiveItemTaskDetails h3 {
    margin: 0 auto 7px;
    width: 100%;
    font-size: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    color: #3571be;
}

.ArchiveItemTaskDescription {
    display: block;
    margin: 13px auto;
    width: 100%;
    height: 60px;
    overflow: hidden;
}

.ArchiveItemProjectInfo {
    display: flex;
    margin: 0 auto;
    width: 100%;
    height: 111px;
    position: relative;
    overflow: hidden;
    z-index: 22;
    align-items: end;
    flex-direction: column-reverse;
    padding: 10px 0;
    background: black;
}

.ArchiveItemProjectInfo img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0.5;
    filter: grayscale(70%);
    pointer-events: none;
}

.ArchiveItemProjectInfo h2 {
    margin: 0 auto 7px;
    width: 90%;
    font-size: 20px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.TasksHolderItem:first-child .YouAreAssignedForThisTask {
    background: #522323;
    border-color: #522323;
}

.TasksHolderItem:first-child .YouAreAssignedForThisTask h4 {
    color: #ffba00;
}

.TasksHolderItem:first-child .YouAreAssignedForThisTask .AttentionLabel {
    display: block;
}

.RefuseTaskBtn {
    position: absolute;
    right: 8px;
    top: 3px;
    width: fit-content;
    background: #af5454;
    color: aliceblue;
    padding: 6px 11px;
    border: none;
    margin: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    transition: 300ms;
    padding-left: 27px;
}

.RefuseTaskBtn i {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}

.RefuseTaskBtn:hover {
    transform: scale(1.1);
    background: #953e3e;
}

.OpenArchievedTaskBtn {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    aspect-ratio: 1/1;
    background: #3571be;
    color: aliceblue;
    border: none;
    border-radius: 1000px;
    margin: 10px;
    font-size: 17px;
    transition: 300ms;
}

.OpenArchievedTaskBtn i {
    pointer-events: none;
}


.OpenArchievedTaskBtn:hover {
    transform: scale(1.1);
    background: #2c5891;
}

.ArchiveItem .TaskFilesParent {
    background: #222222;
    padding: 7px 15px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    padding: 0;
    margin: 0 auto;
}

.ArchiveItem .TaskFilesParent .TaskFiles {
    margin: 0 auto;
    padding: 9px 17px;
    justify-content: center;
    width: 100%;
}

.ArchiveItem .TaskFilesParent .TaskFiles button {
    width: 31px;
}

.TaskFilesParent h1 {
    display: flex;
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-weight: 300;
    letter-spacing: 4px;
}

.PlaneInfo {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: fit-content;
    text-align: center;
    padding: 16px 0;
}

.PLaneItem h3 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 19px;
    font-weight: bold;
    color: #60af53;
}

.PLaneItem h3 strong {
    font-size: 14px;
    margin: 0 1px;
}

.PLaneItem label {
    display: block;
    margin: 5px auto;
    width: 100%;
    text-align: center;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 2px;
}


@media only screen and (max-width: 800px) {

    .WelcomeInner {
        display: block;
    }

}

.IdeasGH {
    display: flex;
    justify-content: space-between;
    width: 96%;
    margin: 0 auto;
    align-items: start;
    flex-wrap: wrap;
}

.IdeaItem {
    display: block;
    margin: 17px 0;
    width: 48%;
    background: #505050;
    padding: 27px 10px;
    padding-left: 110px;
    color: aliceblue;
    position: relative;
    min-height: 110px;
    border-radius: 35px 0px;
}

.IdeaUserImage {
    position: absolute;
    left: 0;
    top: 0;
    width: 65px;
    aspect-ratio: 1/1;
    background-color: #cdcdcd;
    border-radius: 1000px;
    margin: 20px;
}

.IdeaItemContent {
}

.IdeaItemContent h4 {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    color: #ffba00;
}

.IdeaItemContent h4 g {
    color: aliceblue;
    font-weight: 300;
    font-size: 13px;
    margin: 0 6px;
}

.IdeaItemContent h5 {
    display: block;
    margin: 10px auto 5px;
    width: 100%;
    font-weight: bold;
    font-size: 18px;
}

.IdeaItemContent p {
    display: block;
    margin: 5px auto;
    width: 100%;
    font-size: 14px;
}

.IdeaCardIcon {
    position: absolute;
    left: -9px;
    top: -8px;
    width: 52px;
    z-index: 2;
    transform: rotate(-32deg);
}