@font-face {
  font-family: 'Inter';
  font-weight: 125 950;
  font-stretch: 75% 125%;
  font-style: oblique 0deg 12deg;
  src: url('fonts/Inter/Inter-VariableFont_slnt_wght.ttf')
    format('woff2-variations');
}

:root {
  --backGroundSection: #f5f5f5;
  --borderColour: #d1d1d1;
  --navbar: #293647;
  --navbar_active: #091931;
  --textColor: #000;
  --mainColorDarkBlue: #2a3647;
  --urgentColour: #ff3b00;
  --mediumColour: #ffb32a;
  --lowColour: #7be129;
  --mainColorLightBlue: #36afe4;
  --colorLightGrey: #d1d1d1;
  --boxShadowColor: #00000014;
  --emailColor: #007cee;
  --blueColor: #29abe2;
  --btnColor: #293647;
  --boxShadow: #d3d3d3;
  --transitionSpeed: 150ms;
  --boxShadowBubble: #c4c4c5;
  --moreContactsAssignedTo: #2a3647;
  --backgroundProgressbar: #f4f4f4;
}

* {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 16px;
}

body {
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
  height: 100vh;
}

::placeholder {
  color: var(--colorLightGrey);
}

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

.hide-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

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

.flex {
  display: flex;
}

.flexColumn {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.d-none {
  display: none !important;
}

.cursor-pointer {
  cursor: pointer;
}

.text {
  color: var(--textColor);
  margin-bottom: 5px;
  margin-top: 15px;
}

.subText {
  margin-left: 100px;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
  margin-bottom: 3%;
}

.headline h1 {
  margin: 0;
  font-size: 61px;
}

.subheadline {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subheadline span {
  font-size: 27px;
  letter-spacing: 1px;
}

.blue-border {
  border-right: 4px solid var(--mainColorLightBlue);
  padding-right: 20px;
}

.btn-blue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  background-color: var(--mainColorDarkBlue);
  color: white;
  height: 50px;
  border: unset;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 16px;
  transition: all var(--transitionSpeed) ease-in-out;
}

.btn-white {
  cursor: pointer;
  background-color: white;
  color: var(--mainColorDarkBlue);
  height: 50px;
  border-radius: 10px;
  border: 1px solid var(--mainColorDarkBlue);
  padding: 0 10px;
  font-size: 16px;
  transition: all var(--transitionSpeed) ease-in-out;
  min-width: 115px;
}

.btn-white img {
  filter: invert(0.8);
  rotate: 45deg;
  width: 15px;
  vertical-align: middle;
}

.btn-blue:hover {
  background-color: var(--blueColor);
  box-shadow: 0 5px 5px var(--boxShadow);
}

.btn-white:hover {
  border: 1px solid var(--blueColor);
  color: var(--blueColor);
  box-shadow: 0 5px 5px var(--boxShadow);
}

.btn-white:hover img {
  filter: invert(69%) sepia(28%) saturate(4986%) hue-rotate(166deg)
    brightness(91%) contrast(94%);
  transition: all var(--transitionSpeed) ease-in-out;
}

.priorityBox {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5%;
}

.statusButton {
  box-shadow: 1px 1px 3px rgb(0 0 0 / 30%);
  height: 40px;
  width: 100%;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border: none;
  background-color: white;
  cursor: pointer;
  gap: 5px;
}

.statusButton p {
  margin: 0;
}

.statusButton img {
  height: 20px;
  width: 20px;
}

.initials {
  height: 42px;
  width: 42px;
  font-size: 14px;
}

.initialCircle {
  border-radius: 100%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid white;
}

.pageHeader {
  font-size: 61px;
}

.deleteBtn {
  min-width: unset;
  height: 60px;
  width: 60px;
}

.deleteBtn:hover {
  border: 1px solid red;
  color: red;
}

.boxContent {
  background-color: white;
  box-shadow: 0px 0px 4px rgb(0 0 0 / 25%);
  border-radius: 30px;
  padding: 50px;
}

.mainContainer {
  width: 100%;
  height: 100vh;
  background-color: var(--backGroundSection);
  overflow: auto;
}

.fade-in {
  background: transparent;
  animation: backgroundFadeIn 1s forwards alternate;
}

@keyframes backgroundFadeIn {
  from {
    backhground-color: transparent;
  }

  to {
    background-color: rgba(0, 0, 0, 0.3);
  }
}

.fade-out {
  -webkit-animation: fade-out 1s ease-out 1.5s both;
  animation: fade-out 1s ease-out 1.5s both;
}

@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.modalContainer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title input,
.dueDate input,
select,
textarea {
  border-radius: 5px;
  border: 1px solid lightgray;
  outline: none;
  resize: none;
}

.title input,
.dueDate input,
select {
  height: 40px;
  padding-left: 15px;
}

textarea {
  padding: 16px;
  padding-bottom: 0;
  min-height: 60px;
  overflow: auto;
}

.taskHeader {
  margin-top: 15px;
  margin-bottom: 0;
  text-transform: capitalize;
  vertical-align: middle;
  overflow: auto;
  white-space: nowrap;
}

.contactArea,
.summaryArea {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 45px;
}

#messageToBoard {
  bottom: 42px;
  width: 225px;
  height: 45px;
  background: var(--mainColorDarkBlue);
  position: absolute;
  left: calc(50% - 225px / 2);
  border-radius: 10px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  z-index: 99;
}

#messageToBoard span {
  margin: 0;
}

.container {
  position: relative;
  width: 100%;
  margin-top: 20px;
}

.container ul {
  margin-top: 0;
  overflow: auto;
  max-height: 125px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 2;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
}

.select-btn {
  position: relative;
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border: 1px solid var(--colorLightGrey);
  border-radius: 5px;
  cursor: pointer;
  background-color: #fff;
  margin-top: 5px;
}

.select-btn .btn-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--textColor);
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.select-btn .arrow-down {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 21px;
  width: 21px;
  font-size: 14px;
  transition: 0.3s;
}

.list-items {
  position: relative;
  background-color: #fff;
  padding: 0;
  display: none;
}

.select-btn.open {
  border-bottom: unset;
  border-radius: 5px 5px 0 0;
}

.select-btn.open .arrow-down {
  transform: rotate(-180deg);
}

.select-btn.open ~ .list-items {
  display: block;
  border: 1px solid var(--colorLightGrey);
  border-top: unset;
}

.list-items .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  height: 40px;
  padding-left: 16px;
  cursor: pointer;
  transition: 0.3s;
}

.list-items .categoryItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  height: 40px;
  padding: 0 16px;
  cursor: pointer;
  transition: 0.3s;
}

.list-items .categoryItem div:first-child {
  gap: 10px;
  display: flex;
  width: 100%;
}

.list-items .item:hover {
  background-color: var(--colorLightGrey);
}

.item-text {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  display: flex;
  gap: 10px;
}

.item .checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10px;
  width: 10px;
  border-radius: 4px;
  margin-right: 12px;
  border: 1.5px solid #c0c0c0;
  transition: all 0.3s ease-in-out;
}

.categoryCheckbox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 15px;
  width: 15px;
  border: 1px solid #fff;
  border-radius: 50%;
  font-size: 14px;
}

.checkbox .check-icon {
  font-size: 6px;
  transform: scale(0);
  transition: all 0.3s ease-in-out;
}

.item.checked .check-icon {
  transform: scale(1);
}

.newCategoryContainer,
.newSubtasksInputContainer {
  display: flex;
  align-items: center;
  height: 100%;
  border-radius: 5px;
  border: 1px solid var(--colorLightGrey);
  background-color: #fff;
}

.newCategoryInput,
.newSubtasksInput {
  height: 40px;
  width: 100%;
  outline: none;
  border: unset;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;

  padding-left: 15px;
}

.newCategoryContainer span,
.newSubtasksInputContainer span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  cursor: pointer;
}

.newCategoryContainer span:last-of-type,
.newSubtasksInputContainer span:last-of-type {
  border-left: 1px solid var(--colorLightGrey);
  padding-left: 2.5px;
  margin-left: 2.5px;
}

.categoryColors {
  height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 16px;
  gap: 0.5rem;
}

.colorBubble {
  cursor: pointer;
}

.colorBubble.checked {
  box-shadow: 0px 5px 5px var(--boxShadowBubble);
}

.verticalLine hr {
  margin-left: 0;
  width: 100px;
  height: 3px;
  display: none;

  border: none;
  background-color: var(--mainColorLightBlue);
}

.assignedToContacts {
  margin-top: 5px;
  display: flex;
  gap: 5px;
  cursor: default;
}

.subtasksContainer {
  overflow: auto;
  max-height: 25vh;
}

.subtasksPlus {
  padding-right: 10px;
}

.substasksIcons {
  display: flex;
}

.subtask {
  display: flex;
  align-items: center;
  margin-top: 5px;
  gap: 10px;
}

.hiddenInput {
  width: 1px;
  height: 0;
  outline: none;
  border: none;
  background-color: transparent;
}

/**
*
******************   Help Section   ****************** 
*
**/
#help {
  position: absolute;
  top: 78px;
  left: 177px;
  right: 0;
  bottom: 0;
  padding: 34px;
  background: white;
}

.scrollBox {
  height: calc(100vh - 200px);
  overflow-y: auto;
  word-break: break-word;
}

.arrow {
  height: 25px;
  width: 25px;
  object-fit: cover;
  cursor: pointer;
}

table {
  border-spacing: 0 20px;
}

.nrTable {
  padding-right: 20px;
  font-size: 20px;
  font-weight: bolder;
  vertical-align: top;
  word-break: normal;
}

/**
*
******************   KeyFrames for Login ****************** 
*
**/
.slide-in-bottom-login {
  animation: slide-in-bottom-login 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    1.2s both !important;
}

@keyframes slide-in-bottom-login {
  0% {
    transform: translateY(1000px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-out-bck-tl-login {
  animation: slide-out-bck-tl-login 1s cubic-bezier(0.55, 0.085, 0.68, 0.53)
    0.1s both;
}

@keyframes slide-out-bck-tl-login {
  0% {
    transform: translateZ(0) translateY(calc(100vh / 2))
      translateX(calc(100vw / 2));
    opacity: 0.2;
  }

  100% {
    opacity: 1;
    transform: translateY(15px);
  }
}

.slide-in-right-login {
  animation: slide-in-right-login 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide-in-right-login {
  0% {
    transform: translateX(1000px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-left-login {
  animation: slide-in-left-login 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide-in-left-login {
  0% {
    transform: translateX(-1000px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/**
*
******************   KeyFrames for Addtask, Board etc. ****************** 
*
**/

.slide-in-right {
  animation: slide-in-right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide-in-right {
  0% {
    transform: translateX(1000px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-out-right {
  animation: slide-out-right 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@keyframes slide-out-right {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(1000px);
    opacity: 0;
  }
}

.slide-in-bottom {
  animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide-in-bottom {
  0% {
    transform: translateY(1000px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-out-bottom {
  animation: slide-out-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide-out-bottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(1000px);
    opacity: 0;
  }
}

.slide-in-left {
  animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-1000px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}