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

/* @media (prefers-color-scheme: light) { */
:root {
  --main-bg: #f2f2f2;
  --main-text-color: #1c1c1c;
  --secondary-bg: #ffffff;
  --filter-icon: invert(0);
  --secondary-text-color: #606060;
  --header-border-color: #ccc;
  --not-started-bg: #E3F2FD;
  --in-progress-bg: #90CAF9;
  --sent-bg: #A5D6A7;
  --done-bg: #4FD755;
  --mini-title-text-color: #1B1B1B;
  --model-bg-main: #f2f2f2;
  --input-radio-color: #fff
}

/*
  ::-webkit-calendar-picker-indicator {
    filter: invert(0);
  }
 

  .modal-header .btn-close {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
  }
}
 */


/*
@media (prefers-color-scheme: dark) {
  :root {
    --main-bg: #000000;
    --main-text-color: #fff;
    --secondary-bg: #1C1C1C;
    --filter-icon: invert(1);
    --secondary-text-color: #9B9C9D;
    --header-border-color: #6c6c6c;
    --not-started-bg: #4189db80;
    --in-progress-bg: #1056a780;
    --sent-bg: #44a14888;
    --done-bg: #1b5e1fd2;
    --mini-title-text-color: #cacaca;
    --model-bg-main: #0e0e0e;
    --input-radio-color: #1c1c1c;
  }

  ::-webkit-calendar-picker-indicator {
    filter: invert(1);
  }

  .modal-header .btn-close {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(0%);
  }
}
 */

@font-face {
  font-family: "Ntype";
  src: url(../assets/fonts/NType82-Regular.otf);
  font-weight: normal;
}

@font-face {
  font-family: "Ntype";
  src: url(../assets/fonts/NType82-Headline.otf);
  font-weight: 500;
}

@font-face {
  font-family: "Ndot";
  src: url(../assets/fonts/Ndot55.otf);
  font-weight: 400;
}

body {
  font-family: "Inter", sans-serif;
  background-color: var(--main-bg);
}

.navbar-brand {
  font-size: 32px;
  color: white;
}

.logo {
  font-family: "Ntype";
}

.banner-image {
  width: 100%;
  height: 100%;
  max-height: 300px;
  object-fit: contain;
}

.navbar-brand:hover {
  color: white;
}

/* Custom Font Sizes  */
.fs-14 {
  font-size: 14px;
}

.fs-7 {
  font-size: 7px;
}

.notesImage {
  width: 100%;
  height: 100%;
  max-height: 500px;
  object-fit: cover;
  border-radius: 30px;
  padding: 20px;
}

.notesTitleLink {
  color: #393e46;
  text-decoration: none;
  transition: color 1s ease;
}

.notesTitleLink:hover {
  color: #393e46;
  text-decoration: underline;
}

.search-keywords {
  margin: 5px;
  color: #dadada !important;
}

.full-img {
  display: block;
  position: relative;
  height: 400px;
  overflow: hidden;
  border-radius: 20px;
}

.full-img img {
  max-width: 100%;
}

.card-body {
  padding-top: 20px;
  padding-bottom: 20px;
}

.notes-hover {
  display: block;
  position: relative;
  transition: 0.3s all ease-in-out;
  border: 1px solid white;
}

.notes-hover:hover {
  border: 1px solid #ccc;
  background-color: #efefef;
}

.card {
  /* border-color: white; */
  border-radius: 0;
}

a:hover {
  text-decoration: none !important;
}

.bg-manual {
  padding: 24px 0;
  background-color: #000000;
  border-bottom: 1px solid #303030;
}

.navbar-expand-lg .navbar-nav .nav-link {
  color: white;
  font-size: 17px;
  padding-right: 20px;
  padding-left: 20px;
}

.not-found {
  margin: 0;
}

.login-btn {
  margin-left: 10px;
}

.custom-title {
  margin-top: 0 !important;
}

.custom-main-note-pad {
  padding: 60px;
}

.custom-main-note-pad-2 {
  padding: 60px;
}

.view-note-upper-details {
  display: block;
  position: relative;
}

/* .view-note-upper-details p {
  padding-left: 15px;
} */

.top-pad-tag {
  padding-top: 50px;
  margin: 0;
}

textarea:focus,
input:focus,
button:focus {
  outline: none !important;
}

button:focus,
a:focus {
  outline: none;
}

.navbar-toggler:focus {
  outline: none !important;
  box-shadow: none;
}

.add-btn-notes {
  margin: 3px;
  background-color: white;
  border: 1px solid white;
}

.add-btn-notes:hover {
  background-color: #efefef;
  border: 1px solid #ccc;
}

.custom-btn-notes {
  background-color: #0d6efd;
}

.custom-btn-notes:hover {
  background-color: #0345a8;
}

.custom-btn-notes a {
  color: white;
  text-decoration: none;
}

.sticky-lg-top {
  z-index: 1;
}

.list-group-item:first-child {
  border-radius: 0;
}

.list-group-item:last-child {
  border-radius: 0;
}

.note-list-upper-details {
  display: flex;
  position: relative;
  margin-top: 5px;
}

.note-list-details-p {
  padding-left: 20px;
}

.btn-group-sm>.btn,
.btn-sm {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 24px;
  padding-right: 24px;
  font-size: 16px;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.6)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.welcome-page-btn {
  display: block;
  position: relative;
  background-color: #0d6efd;
  padding: 10px;
  margin-top: 20px;
}

.welcome-page-btn:hover {
  background-color: #0345a8;
}

.welcome-page-btn a {
  color: white;
  text-decoration: none;
}

.bottom-left {
  position: absolute;
  bottom: 35px;
  left: 50px;
  /* transform: translate(-50%, -50%); */
  color: white;
  font-size: 28px;
  /* text-align: center; */
  line-height: 1;
}

.bottom-left a {
  color: white;
  text-decoration: none;
}

.right-float-btn {
  float: right;
}

.all-note-page-btn {
  display: block;
  position: relative;
  background-color: #0d6efd;
  padding: 10px;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-radius: 3px;
}

.all-note-page-btn:hover {
  background-color: #0345a8;
}

.all-note-page-btn a {
  color: white;
  text-decoration: none;
}

.inside-view-main-btn {
  display: block;
  position: relative;
}

.main-btns-ul {
  position: relative;
  display: flex;
  float: right;
  margin: 0;
  padding: 0;
  margin-top: 20px;
}

.main-btns-ul a {
  list-style-type: none;
  padding: 10px 20px;
  margin: 5px;
  background: #efefef;
  transition: 0.3s all;
  border: 1px solid #ccc;
}

.main-btns-ul a:hover {
  background: #dfdfdf;
}

.main-btns-ul a:nth-child(2) {
  background: #c92e41;
  color: white;
  transition: 0.3s all;
  border: 1px solid #ccc;
}

.main-btns-ul a:nth-child(2):hover {
  background: #7a1622;
}

.margin-top-for-action-btn {
  margin-top: 20px;
}

.fw-600 {
  font-weight: 600;
}

.fw-500 {
  font-weight: 500;
}

/* .card-text {
  padding: 40px;
  background: #f4f4f2;
  border-radius: 0;
  border: 2px dotted #ccc;
} */

.special-letter-space {
  letter-spacing: -0.8px;
}

@media only screen and (max-width: 768px) {
  .full-img {
    height: auto;
  }

  .custom-mobile-pad-top-image {
    padding-top: 12px;
  }

  .mobile-pad-top-publicnote {
    padding-top: 30px;
  }

  .bottom-left {
    position: absolute;
    bottom: 20px;
    left: 35px;
    color: white;
    font-size: 24px;
    line-height: 1;
  }

  .title-margin {
    padding-top: 20px;
  }

  .right-float-btn {
    float: left;
  }

  .extra-all-note-details {
    margin-top: 0px;
    padding-bottom: 20px;
  }

  .all-note-page-btn {
    margin-bottom: 50px;
  }

  .btn-width-for-mobile {
    width: 100%;
  }

  .custom-main-note-pad-2 {
    padding: 30px;
  }

  /* .card-text {
    padding: 20px;
    background: #f4f4f2;
    border-radius: 0;
    border: 2px dotted #ccc;
  } */
}

[type="submit"] {
  /* border: 1px solid #ccc; */
  font-size: 14px;
  padding: 8px;
}

.progress-bg {
  display: block;
  position: relative;
  border-radius: 20px;
}

.progress-bg p {
  margin: 0;
  padding: 5px 25px;
  border-radius: 25px;
  color: white;
  font-weight: 300;
}

.progress-bg img {
  width: 45%;
}

.btn {
  transition: 0.2s all ease-in;
}

.btn:hover {
  background-color: #000;
  transition: 0.2s all ease-in;
}

/* Define CSS rules for each progress class */
.progress-bg.not-started {
  background-color: #5e5e5e;
  /* Grey color for Not Started */
}

.progress-bg.in-progress {
  background-color: #11639a;
  /* Blue color for In Progress */
}

.progress-bg.submit {
  background-color: #12723a;
  /* Light Green for Sent File */
}

.progress-bg.done {
  background-color: #02350d;
  /* Dark Green for Done */
}

.mobile-none {
  display: block;
}

@media only screen and (max-width: 768px) {
  .mobile-none {
    display: none;
  }
}

.change-search-btn {
  padding: 10px 30px;
}

.custom-main-note-pad-3 {
  padding: 50px 50px 10px 50px;
}

.custom-main-note-pad-4 {
  padding: 10px 50px 50px 50px;
}

.non-border {
  border: none !important;
}

.comments-padding {
  padding: 20px 0;
}

.custom-progress-class select {
  color: white;
  padding: 0.8rem 25px !important;
  border-radius: 0;
  margin-bottom: 6px;
  background: #121212;
  border: none;
  border-radius: 20px;
}

.custom-progress-class input {
  width: 100%;
  /* padding: 0.8rem !important;
  background-color: #0d6efd; */
  color: #ffffff;
  font-weight: 500;
  font-size: 16px;
}

.progress-margin-bottom {
  margin-bottom: 1.5rem;
}

/* .custom-progress-class input:hover {
  background-color: #003380;
} */

.dark-bg-cover {
  background-color: #121212;
}

.notes-h3 {
  color: #fff;
  font-weight: 600;
  font-size: 28px;
  line-height: 110%;
  margin-bottom: 0;
}

.pad-50 {
  padding: 50px !important;
}

.mb-12 {
  margin-bottom: 12px !important;
}

.mb-24 {
  margin-bottom: 24px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.mt-40 {
  margin-top: 40px !important;
}

.mt-24 {
  margin-top: 24px !important;
}

.notes-login-p {
  color: #dadada !important;
  font-weight: 300;
  align-items: center;
}

.additional-note-info p {
  display: flex;
}

.form-control {
  background-color: transparent !important;
  font-size: 16px;
  border: 1px solid #383838;
  padding: 10px 30px;
  color: var(--main-text-color) !important;

  font-weight: 300;
}

::placeholder {
  color: #6e6d7a !important;
}

.tb-border {
  border-top: 1px solid #383838 !important;
  border-bottom: 1px solid #383838 !important;
}

.password-eye {
  background: #3f51b5;
  border-left: none !important;
  border-right: none !important;
  color: #fff;
}

.notes-btn {
  background: #3f51b5;
  font-weight: 500;
  height: 45px;
  border-radius: 50px;
  border: none;
  transition: 0.3s all ease-in;
}

.notes-btn:hover {
  background: #394494;
}

a {
  color: #7c9dde;
  text-decoration: underline;
  text-underline-position: from-font;
}

.border-radius-20 {
  border-radius: 20px;
}

label {
  color: #dadada;
}

.nav-btn-bg {
  background: #121212;
  border: 1px solid #000000 !important;
  border-radius: 50px;
  width: 50px;
  height: 50px;
  transition: 0.2s all ease-in;
}

.nav-btn-bg:hover {
  background: #000;
  border: 1px solid #383838 !important;
  transition: 0.2s all ease-in;
}

.nav-btn-bg-check:checked+.nav-btn-bg,
.nav-btn-bg.active,
.nav-btn-bg.show,
.nav-btn-bg:first-child:active,
:not(.nav-btn-bg-check)+.nav-btn-bg:active {
  background: #000;
  border: 1px solid #383838 !important;
  transition: 0.2s all ease-in;
}

.nav-btn-bg img {
  width: 20px;
}

.nav-btn-bg-img {
  width: 25px !important;
}

.center-icon {
  align-content: center;
  width: 100%;
  display: block;
  text-align: center;
  height: 100%;
}


.pt-80 {
  padding-top: 80px !important;
}

.pb-80 {
  padding-bottom: 80px !important;
}

.pt-50 {
  padding-top: 50px !important;
}

.pt-60 {
  padding-top: 60px !important;
}

.pt-70 {
  padding-top: 70px !important;
}

.pt-40 {
  padding-top: 40px !important;
}

.pt-30 {
  padding-top: 30px !important;
}

.pb-30 {
  padding-bottom: 30px !important;
}

.pb-40 {
  padding-bottom: 40px !important;
}

.pb-50 {
  padding-bottom: 50px !important;
}

.pb-60 {
  padding-bottom: 60px !important;
}

.notes-main-h2 span {
  background-image: linear-gradient(to bottom right, #5d7dd4, #394494);
  background-clip: text;
  color: transparent;
}

.new-search-btn .change-search-btn {
  background-color: #3f51b5 !important;
  border: none !important;
}

.new-search-btn [type="submit"] {
  font-size: 16px;
}

.change-search-btn {
  padding: 12px 25px;
}

.single-note-body {
  display: block;
  position: relative;
}

.single-note {
  display: block;
  position: relative;
  height: 350px;
  background-color: #121212;
  border-radius: 20px;
  align-content: center;
}

.add-new-note-area {
  display: block;
  position: relative;
  display: block;
  position: relative;
  width: 100px;
  height: 100px;
  background: #282828;
  border-radius: 50px;
  display: block;
  text-align: center;
  align-content: center;
}

.single-note a {
  text-align: -webkit-center;
  text-decoration: none !important;
}

.single-note h3 {
  margin-top: 20px;
}

.single-note-details {
  height: 350px;
  background-color: #121212;
  border-radius: 20px;
  padding: 35px;
}

.single-note-details a {
  text-decoration: none;
}

.single-note-details h3 {
  margin-bottom: 10px;
}

.single-footer-details {
  display: flex;
  position: relative;
  place-content: space-between;
  align-items: end;
}

.action-details {
  display: flex;
  position: relative;
}

.action-btn {
  display: block;
  position: relative;
}

.action-btn a {
  width: 50px;
  height: 50px;
  display: block;
  background: #282828;
  align-content: center;
  text-align: center;
  border-radius: 50px;
  font-size: 20px;
  color: white;
}

.mr-10 {
  margin-right: 10px !important;
}

.note-link-area {
  display: block;
  position: relative;
  height: 80%;
}

.note-link-area a {
  display: block;
  height: 100%;
}

.single-footer-details {
  height: 20%;
}

.mini-label {
  color: #dadada;
}

.submit-btn {
  background-color: #3f51b5;
  border: none;
  height: 42px;
  font-weight: 500;
  font-size: 15px;
  border-radius: 20px;
  margin-top: 20px;
  transition: 0.2s ease-in all;
}

.submit-btn:hover {
  background: #394494;
  transition: 0.2s ease-in all;
}

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-internal-autofill-selected {
  transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

.select-option-dark {
  background-color: #121212 !important;
}

.mb-5 {
  margin-bottom: 5px !important;
}

.view-note-header-main {
  display: flex;
  position: relative;
  justify-content: space-between;
  margin-bottom: 40px;
}

.mt-10 {
  margin-top: 10px !important;
}

/* Custom select container */
.custom-select {
  position: relative;
  width: 100%;
}

/* Hide the default select arrow */
.custom-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  outline: none;
  width: 100%;
  padding: 10px;
  /* Adjust padding as needed */
  cursor: pointer;
}

/* Style the custom select arrow */
.custom-select::after {
  content: "\221F";
  position: absolute;
  top: 40%;
  right: 25px;
  transform: translateY(-50%);
  pointer-events: none;
  rotate: -45deg;
  color: var(--secondary-bg);
}

.no-pad {
  padding: 0 !important;
}

.comment-user-name {
  font-size: 22px;
  font-weight: 600;
  color: #dadada;
}

.comment-date-time {
  color: #dadada !important;
  font-weight: 300;
}

.comment-msg {
  color: #dadada;
  font-weight: 300;
}

.new-search-btn input {
  padding-left: 25px;
}

.list-group-item {
  border-color: #383838;
}

.comment-main-pad {
  padding: 20px 60px;
}

.comment-main-pad p {
  color: #fff;
  margin: 0;
}

.popup-alert {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 500px;
  border: 1px solid #383838;
}

.popup-content {
  position: relative;
}

.popup-close {
  position: absolute;
  top: 0;
  right: 10px;
  cursor: pointer;
  /* font-size: 20px; */
}

.alert-content {

  font-weight: 400;
  font-size: 16px;
  margin: 0;
}

.alert-content i {
  margin-right: 10px;
}

.border {
  border-color: #383838 !important;
}

.bi-x-circle-fill::before {
  content: "\f622";
  color: #dadada !important;
}

.text-white {
  color: #dadada;
}

.color-btn {
  background-color: #3f51b5;
}

.color-btn:hover {
  background: #394494;
  color: #fff;
  transition: 0.2s ease-in all;
}

.search-title {
  color: #dadada;
}

.keep-btn {
  transition: 0.2s all ease-in;
  border: 1px solid #ccc !important;
}

.keep-btn:hover {
  background-color: #d3d4d5;
}

.delete-btn {
  transition: 0.2s all ease-in;
}

.delete-btn:hover {
  background-color: #bb2d3b;
}

.add-new-note-area {
  transition: 0.3s all linear;
}

.add-new-note-area:hover {
  background-color: #1d1d1d;
}

.additional-note-info {
  position: relative;
  display: flex;
}

.additional-note-info i {
  font-size: 20px;
  margin-right: 8px;
}

.additional-note-first-p {
  margin-right: 15px;
}

.view-note-body .card-text a {
  color: white !important;
  background-color: transparent !important;
}

#navbarSupportedContent {
  display: flex;
}

@media only screen and (max-width: 768px) {
  .view-note-header-main {
    display: block;
    margin-bottom: 30px;
  }

  /* .row > * {
    padding-left: 20px !important;
    padding-right: 20px !important;
  } */



  .pad-50 {
    padding: 40px !important;
  }

  .custom-main-note-pad {
    padding: 40px !important;
  }
}

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

#loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.d-none {
  display: none;
}

td {
  color: #fff !important;
  border: 1px solid #ccc;
  padding: 5px;
}

.progress-logs-main-pad {
  padding: 10px 25px;
}

.current-pro-det p {
  color: #dadada;
  margin: 0;
}

.progress-user-name {
  font-size: 20px;
  font-weight: 600;
  color: #dadada;
}

.assign_style {
  padding: 20px 50px;
  border: 1px solid #383838 !important;
  border-radius: var(--bs-border-radius);
}

.assign_style .form-check-input {
  background-color: #121212 !important;
  border-radius: 50% !important;
  border-color: #737373 !important;
}

.assign_check {
  padding-left: 0 !important;
}

.modal-title {
  font-size: 24px;
  font-weight: 500;
  color: var(--main-text-color);
  font-family: "Inter", sans-serif;
}


.modal-header {
  border-bottom: none !important;
  padding: 20px 30px;
  background: var(--secondary-bg);
}

.modal-header button {
  background: none !important;
  padding: 0 !important
}

.modal-header button span {
  color: white;
  font-size: 20px;
}

.modal-body .form-group label {
  margin-bottom: 8px;
}

.modal-body .form-group input {
  border: 1px solid #363636 !important
}

.modal-footer {
  border-top: none;
  padding: 0 100px 50px 100px;
}


.modal-body {
  color: #dadada;
  padding: 50px 100px 20px 100px;
}

.custom_body_task {
  background: #121212 !important;
  border-radius: 5px !important;
  padding: 20px !important;
  color: white !important;
  /* margin-top: 10px !important; */
  /* border: 1px solid #383838 !important; */
}


.custom_btn_done {
  padding: 8px 13px !important;
  border-radius: 100px !important;
  background: black;
  border: 1px solid #383838;
  color: #5cb85c;
}

.custom_btn_edit {
  padding: 8px 13px !important;
  border-radius: 100px !important;
  background: rgb(70, 61, 61);
  border: 1px solid #383838;
  color: #fff;
}

.date_note {
  margin-bottom: 4px;
  opacity: 0.3;
  font-size: 14px;

  font-weight: 300;
}

.head_note {
  margin-bottom: 0px;

  font-size: 24px;
}

.notes-main-h2 {
  font-weight: 500;
  font-size: 38px;
  color: var(--main-text-color);
  margin-bottom: 0;
  font-family: "Ntype";
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner-border {
  width: 3rem;
  height: 3rem;
}

.close {
  border: none;
}

.mobile_non_flex {
  display: flex;
}


@media only screen and (max-width: 768px) {
  .mobile_non_flex {
    display: block;
  }

  .text_btn {
    padding-top: 20px;
  }
}

.form-select {
  background-color: var(--secondary-bg);
  color: var(--main-text-color);
  border: none;
  border-radius: 0;
  font-size: 16px;
  padding: 20px 30px;
  font-weight: 400;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.add_task_dropdown_input {
  padding-right: 20px;
}

/* Focus state for select box */
.form-select:focus {
  background-color: #444;
  border-color: #007bff;
  outline: none;
}

/* Label styling */
label {
  color: #ccc;
  font-weight: bold;
  font-size: 1.1rem;
}

/* Add some spacing between the form elements */
.mb-4 {
  margin-bottom: 20px;
}

/* Increase the size of the select box for better UX */
.form-select-lg {
  font-size: 1.2rem;
}

/* Custom styling for the select box options */
.form-select option {
  background-color: var(--main-bg);
  color: var(--main-text-color);
  font-weight: 300;
}

.form-select option:checked {
  background-color: #FFC800;
}

.form-select option:hover {
  background-color: var(--secondary-bg);
  color: var(--main-text-color);
}

.input-group {
  border-radius: 20px;
  overflow: hidden;
}

.input-group-text {
  background: var(--secondary-bg);
  border: none;
  /* color: #c3c3c3; */
  font-size: 18px;
  padding: 15px 20px;
}

.modal-content {
  background: var(--model-bg-main);
}


.form-label {
  margin-bottom: .5rem;

  font-size: 14px;
  font-weight: 400;
}

.custom_add {
  color: white;
  width: 100%;
  background-color: #0D88FD;
  padding: 10px;
  font-size: 16px;
  font-weight: 400;
  border-radius: 20px;
}

.custom_add:hover {
  background-color: #003268;
  color: #c3c3c3;
}

.custom_cancel {
  color: white;

  background-color: #e7000c;
  padding: 8px 25px;
  font-size: 14px;
}

.custom_cancel:hover {
  background-color: #880007;
  color: #c3c3c3;
}

.custom_grey {
  color: white;

  background-color: #565e64;
  padding: 8px 25px;
  font-size: 14px;
}

.custom_grey:hover {
  background-color: #2e3235;
  color: #c3c3c3;
}

.modal-body .form-control {
  background-color: transparent !important;
  font-size: 16px;
  border: none;
  padding: 20px 30px;
  color: var(--main-text-color) !important;
  font-weight: 400;
}

.delete_contact_op p {
  font-weight: 400;
  font-size: 16px;
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  color: var(--main-text-color);
}

.form-control:focus {
  border-color: #363636;
  outline: 0;
  box-shadow: none;
}

.person_deadline {
  display: flex;
  position: relative;
}

.person_deadline p {
  font-size: 14px;

  padding: 6px 20px;
  margin-bottom: 0;
  align-content: center;
  margin-right: 10px;
  border-radius: 20px;
}


.assign_person {
  color: #fff;
  font-weight: 500 !important;
  background-color: #1E1F22;
  border: 1px solid #ffffff1f;
}

.deadline_date {
  color: #D71921;
  font-weight: 500 !important;
  background-color: rgba(215, 25, 33, 0.1);
  border: 1px solid #d7192257;
}

.right_side_menu {
  display: flex;
  position: relative;
}

.custom_btn_more {
  background-color: transparent;
  cursor: pointer !important
}

.custom_btn_more:hover {
  background-color: transparent;
}


.custom_btn_more:focus {
  outline: none;
  box-shadow: none;
}


.custom_btn_more i {
  color: #fff;
}


button:focus {
  outline: none;
  box-shadow: none;
}

button:focus {
  outline: none;
  box-shadow: none;
}



.btn.show {
  border: 0px;
}

.btn.show:focus-visible {
  box-shadow: none;
}

.btn:first-child:active {
  background-color: transparent;
  border-color: transparent;
}

/* Dark background for 'Not Started' tasks */
.bg-not_started {
  /* background-color: #343a40;
  color: #e9ecef; */
  border: 1px solid #383838 !important;
  background-color: rgba(52, 58, 64, 0.2) !important;
}

/* Dark grayish yellow background for 'In Progress' tasks */
.bg-in_progress {
  /* background-color: #6c757d;
  color: #f8f9fa; */
  border: 1px solid #1d4f6f !important;
  background-color: rgba(29, 79, 111, 0.2) !important;
}

/* Dark blue background for 'Sent' tasks */
.bg-sent {
  /* background-color: #1d4f6f;
  color: #ffffff; */
  border: 1px solid #39664a !important;
  background-color: rgba(57, 102, 74, 0.2) !important;
}

/* Dark green background for 'Completed' tasks */
.bg-completed {
  /* background-color: #2a9d8f;
  color: #ffffff; */
  border: 1px solid #389d2a !important;
  background-color: rgba(56, 157, 42, 0.2) !important;
}

.upper_header_note {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #383838;
}

.profile_pic_area {
  display: inline-block;
  position: relative;
  align-content: center;
}

.profile_pic_area h2 {
  display: grid;
  place-items: center;
  /* Perfect centering */
  width: 55px;
  height: 55px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  /* Perfect circle */
  font-family: "Ndot";
  font-size: 24px;
  background-color: #1E1F22;
  color: white;
  margin: 0;
  text-align: center;
  box-sizing: border-box;
  line-height: 100%;
  margin-right: 15px;
}

.profile_pic_task_name {
  display: flex;
  position: relative;
}

.text_count {
  display: block;
  position: relative;
}

.mb-50 {
  margin-bottom: 50px;
}

.bg-sent .upper_header_note {
  border-color: #37706a62 !important
}

.bg-sent .person_deadline .assign_person {
  background-color: #132019 !important
}

.bg-in_progress .upper_header_note {
  border-color: #1d506f48 !important
}

.bg-in_progress .person_deadline .assign_person {
  background-color: #10222d !important
}

.bg-completed .upper_header_note {
  border-color: #389d2a56 !important
}

.bg-completed .person_deadline .assign_person {
  background-color: #12300e !important
}

.task_countation_details {
  display: flex;
  position: relative;
  margin-top: 20px;
}

.total_task_count {
  color: #fff;
  font-weight: 500 !important;
  background-color: #1E1F22;
  border: 1px solid #ffffff1f;
  margin-right: 10px;
}

.notstart_task_count {
  color: #fff;
  font-weight: 500 !important;
  background-color: #1E1F22;
  border: 1px solid #ffffff1f;
  margin-right: 10px;
}

.progress_task_count {
  color: #fff;
  font-weight: 500 !important;
  margin-right: 10px;
  border: 1px solid #1d4f6f !important;
  background-color: rgba(29, 79, 111, 0.2) !important;
}

.sent_task_count {
  color: #fff;
  font-weight: 500 !important;
  border: 1px solid #39664a !important;
  background-color: rgba(57, 102, 74, 0.2) !important;
}

.task_countation_details p {
  font-size: 12px;

  padding: 4px 15px;
  margin-bottom: 0;
  align-content: center;
  border-radius: 5px;
}

.add_task_btn button {
  padding: 10px 25px;
  font-size: 16px;
  letter-spacing: 0;
  background-color: #0D88FD;
  border: none;
  color: white;
  border-radius: 8px;
  float: right;
}

.add_task_btn button i {
  padding-right: 10px;
  font-size: 20px;
  color: white;
}

.main_header_content h2 {
  margin-bottom: 10px;
  line-height: 100%;
}

.main_header_content p {
  color: #86868b;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0;
}

.add_task_btn {
  text-align-last: right;
}

.main_header_row {
  border-bottom: 1px dashed var(--header-border-color);
}

.task_filter_area {
  display: block;
  position: relative;
}

.task_filter_area h6 {
  color: var(--mini-title-text-color);
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 400;
  margin-left: 20px;
  padding-bottom: 25px;
  margin-bottom: 0;
}

.sort-options {
  display: block;
  position: relative;
  cursor: pointer;
}

.sort-item {
  display: flex;
  position: relative;
  justify-content: space-between;
}

.sort_item_icontext {
  display: flex;
  position: relative;
}

.sort_item_icontext img {
  max-width: 24px;
  max-height: 24px;
  margin-right: 15px;
  filter: var(--filter-icon);
}

.sort-options .sort-item {
  background-color: var(--secondary-bg);
  margin-bottom: 2px;
  padding: 15px 20px;
  cursor: pointer;
}

.sort_item_icontext span {
  color: var(--main-text-color);
  font-weight: 400;
  font-size: 16px;
}

.sort-options .sort-item:first-child {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.sort-options .sort-item:last-child {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.sort-options input {
  width: 18px;
  accent-color: var(--input-radio-color);
}

.task_status_area {
  display: block;
  position: relative;
}

.task_status_area h6 {
  color: var(--mini-title-text-color);
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 400;
  margin-left: 20px;
  padding-bottom: 25px;
  padding-top: 25px;
  margin-bottom: 0;
}

.sort_item_answer {
  display: block;
  position: relative;
}

.sort_item_answer p {
  color: var(--main-text-color);
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 0;
}

.main_search_and_details {
  padding-left: 100px;
}

.search_btn input {
  background-color: var(--secondary-bg) !important;
  border: none;
  padding-left: 0;
}

.main_special_area {
  display: block;
  position: relative;
}

.main_special_area h6 {
  color: var(--mini-title-text-color);
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 400;
  margin-left: 20px;
  padding-bottom: 25px;
  padding-top: 25px;
  margin-bottom: 0;
}

.single_task_button_area {
  display: flex;
  position: relative;
}

.single_task_button_area .single_task_btns {
  margin-right: 10px;
}

.single_task_button_area .single_task_btns:last-child {
  margin-right: 0;
}

.single_task_button_area .single_task_btns a {
  text-decoration: none;
  color: var(--main-text-color);
}

.view_more_area, .deadline_area, .progress_area, .more_option_area {
  display: flex;
}

.view_more_area img,
.deadline_area img,
.progress_area img,
.more_option_area img {
  margin-right: 10px;
  max-width: 24px;
  max-height: 24px;
  filter: var(--filter-icon);
}

.deadline_area img {
  filter: invert(0) !important
}

.view_more_area {
  background-color: var(--main-bg);
  padding: 6px 20px;
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
}

.deadline_area {
  /* background-color: #D71921; */
  padding: 6px 20px;
  border-radius: 8px;
  overflow: hidden;
  color: white;
  font-size: 14px;
}



.progress_area {
  background-color: #E3F2FD;
  padding: 6px 20px;
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
  color: var(--main-text-color);
}

.more_option_area {
  background-color: var(--main-bg);
  padding: 6px 20px;
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
  border: none;
  color: var(--main-text-color);
}

.main_single_task {
  display: block;
  position: relative;
  background-color: var(--secondary-bg);
  padding: 30px;
}

.task_header_task_text_area p {
  color: var(--secondary-text-color);
  font-size: 14px;
  margin-bottom: 10px;
}

.task_header_task_text_area h2 {
  color: var(--main-text-color);
  font-size: 24px;
  margin-bottom: 0;
  font-weight: 400;
}

.single_task_header_area {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

.past-deadline {
  background-color: #D71921;
}

.upcoming-deadline {
  background-color: #ebd3d3;
  color: var(--main-text-color);
}

.upcoming-deadline img {
  filter: invert(1) !important;
}

.task_header_image_area {
  display: flex;
  position: relative;
  background-color: var(--main-bg);
  color: var(--main-text-color);
  height: 60px;
  width: 60px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.task_header_image_area h3 {
  margin-bottom: 0;
  font-family: "Ntype";
  margin-top: 5px;
}

.task_assign_list .main_single_task:first-child {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.main_single_task {
  margin-bottom: 5px;
}

.task_assign_list .main_single_task:last-child {
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  margin-bottom: 0px;
}

.dropdown-toggle::after {
  display: none;
}

.more_option_area img {
  margin-right: 8px;
}

.dropdown-menu {
  background-color: var(--secondary-bg);
  padding: 0;
  border: none;

  /* border-radius: 12px;
  padding: 0;
  width: 180px !important; */
}

.dropdown-menu .dropdown-item {
  color: var(--main-text-color);
  padding: 9px 16px;
  font-weight: 400;
  border-bottom: none !important;
  background-color: var(--main-bg);
}

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

.dropdown-menu .dropdown-item:hover {
  background-color: #ffc80054;
  color: #000;
}

.dropdown-menu li a {
  color: var(--main-text-color) !important;
  font-size: 14px;
}

.dropdown-menu li {
  border-radius: 0px;
  overflow: hidden;
  margin-bottom: 1px;
}

.dropdown-menu li:first-child {
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.dropdown-menu li:last-child {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  margin-bottom: 0;
}



@media (min-width: 1200px) {
  .modal-xxl {
    max-width: 70vw;
    /* or use fixed: 1400px, 1600px, etc. */
  }
}

.modal-xxl .modal-content {
  max-height: 90vh;
  overflow-y: auto;
}

.add_task_custom_input {
  background-color: var(--secondary-bg);
  margin-bottom: 2px;
}

.modal-body .add_task_custom_input:first-child {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.edit_first_input {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.modal-body .add_task_custom_input:last-child {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  margin-bottom: 0;
}

.form-select:focus {
  outline: none;
  box-shadow: none;
  border-color: inherit;
  background-color: var(--secondary-bg);
}

.progress_task_dropdown_input {
  /* background-color: #ffffff; */
  padding-right: 20px;
  border-radius: 20px;
  overflow: hidden;
}

#progressModal .modal-body {
  padding: 40px 60px 30px 60px;
}

#progressModal .modal-footer {
  padding: 0 60px 40px 60px;
}

.ql-toolbar.ql-snow {
  border: none;
  font-family: "Inter", sans-serif;
  padding: 20px 30px;
}

.ql-editor {
  color: var(--main-text-color);
  font-size: 16px;
  font-weight: 400;
}

.ql-container {
  font-family: "Inter", sans-serif;
  padding: 0 30px 20px 30px;
}

.ql-container.ql-snow {
  border: none;
}

.ql-editor.ql-blank::before {
  padding: 0 30px 20px 30px;
  color: var(--secondary-text-color);

}

#deleteModal .modal-body {
  padding: 20px 30px;
}

#deleteModal .modal-footer {
  padding: 10px 30px 20px 30px;
}

.main_top_header_details {
  display: block;
  position: relative;
  padding: 20px 0;
  background-color: var(--secondary-bg);
}

.main_top_header_details p {
  color: var(--secondary-text-color);
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 0;
}

.main_top_header_details p span {
  color: #0BD75D;
}

.top_head_link {
  text-decoration: none;
}

.main_task_indepth_details_area {
  margin-top: 80px;
}

.single_task_indepth_details {
  background-color: var(--secondary-bg);
  padding: 30px;
  border-radius: 0;
  margin-bottom: 2px;
}

.small_task_indepth_details {
  padding: 20px 30px;
}

.main_task_indepth_details_area .single_task_indepth_details:first-child {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.main_task_indepth_details_area .single_task_indepth_details:last-child {
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  margin-bottom: 0;
}

.single_task_indepth_header p {
  color: var(--secondary-text-color);
  font-size: 14px;
  margin-bottom: 10px;
}

.single_task_indepth_header h2 {
  font-family: "Ntype";
  font-weight: 500;
  font-size: 38px;
  margin-bottom: 30px;
  color: var(--main-text-color);
}

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

.single_task_progress_area h6 {
  font-size: 16px;
  color: var(--main-text-color);
  font-weight: 500;
  margin-bottom: 0;
}

.single_task_progress_area p {
  font-size: 16px;
  color: var(--main-text-color);
  font-weight: 400;
  margin-bottom: 0;
}

.single_task_description_area h6 {
  font-size: 16px;
  color: var(--main-text-color);
  font-weight: 500;
  margin-bottom: 40px;
}

.single_task_description_area p {
  font-size: 16px;
  color: var(--main-text-color);
  font-weight: 400;
  margin-bottom: 0;
}

.sticky-filter {
  position: sticky;
  top: 20px;
  /* adjust as needed */
  max-height: calc(100vh - 40px);
  /* keeps it scrollable inside */
  overflow-y: auto;
}

.input-group img {
  filter: var(--filter-icon);
}

.single_task_description_area h1,
.single_task_description_area h2,
.single_task_description_area h3,
.single_task_description_area h4,
.single_task_description_area h5,
.single_task_description_area h6,
.single_task_description_area ul,
.single_task_description_area li {
  color: var(--main-text-color);
}

.animated-gradient-btn {
  background: linear-gradient(120deg, #6a11cb, #2575fc);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background-size: 200% 200%;
  transition: background-position 0.6s ease, box-shadow 0.4s ease;
}

/* Extraordinary animated gradient on hover */
.animated-gradient-btn:hover {
  background-image: linear-gradient(270deg, #ff6ec4, #7873f5, #429c60, #2da790);
  background-size: 400% 400%;
  background-position: right center;
  animation: moveGradient 2.5s ease infinite;
  box-shadow: 0 8px 20px rgba(255, 110, 196, 0.4);
}

@keyframes moveGradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}


.completed_tasks_button_area {
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid #ccc;
}

.completed_tasks_button_area a img {
  max-width: 100%;
  border-radius: 20px;
}

.complete_text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.complete_text h2 {
  margin-bottom: 0;
  font-family: "Ntype";
  margin-top: 5px;
  color: white;
}

.completed_tasks_button_area {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.completed_tasks_button_area a {
  display: block;
  position: relative;
}

.completed_tasks_button_area::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  transform: rotate(25deg);
  transition: top 0.6s ease;
}

.completed_tasks_button_area:hover::before {
  top: 100%;
}

.completed_tasks_button_area a img {
  max-width: 100%;
  border-radius: 20px;
  transition: transform 0.5s ease, filter 0.5s ease;
}

.completed_tasks_button_area:hover a img {
  transform: scale(1.05);
  filter: brightness(1.15);
}

.completed_tasks_button_area:hover {
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2),
    0 0 25px rgba(0, 255, 255, 0.2);
  transform: scale(1.01);
}

.login_box {
  background: #fff;
  padding: 45px;
  border-radius: 20px;
  width: 100%;
  max-width: 460px;
}

.login_box input {
  width: 100%;
  margin: 12px 0;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 16px;
  background: #F2F2F2 !important;
  padding: 12px 15px;
  padding-left: 25px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-width: 0 0 1px;
  border-style: solid;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #808080;
  background-image: none;
  border: 0px solid #ccc;
  border-color: ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.login_box input:first-child {
  margin-top: 0;
  margin-bottom: 0;
}

.login_box button {
  width: 100%;
  padding: 12px;
  border: none;
  background: #FFC800;
  color: var(--main-text-color);
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
}


.error {
  color: red;
  text-align: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.login_box h2 {
  font-family: "Ntype";
  font-weight: 500;
  font-size: 38px;
  margin-bottom: 30px;
  color: var(--main-text-color);
}

.login_box p {
  color: #86868B;
  font-size: 16px;
  font-weight: 400;
  margin: 12px 0 24px 0;
}

.login_box p span {
  color: #FFC800;
}

.single_task_description_area img {
  max-width: 100%;
}