@font-face {
  font-family: "Inter";
  src: url(public/fonts/Inter/Inter-VariableFont.ttf);
  font-weight: 100 200 300 400 500 600 700 800;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url(public/fonts/Inter/Inter-Italic-VariableFont.ttf);
  font-weight: 100 200 300 400 500 600 700 800;
  font-style: italic;
}
.desktopWrapper {
  display: flex;
  flex: auto;
}
.mobile-block {
  display: none;
}
@media (max-width: 1279px) {
  .desktopWrapper {
    display: none;
  }
  .mobile-block {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: auto;
    padding: 32px;
    font-size: 1.5rem;
    background: rgb(252, 252, 252);
    color: rgb(34, 34, 34);
  }
}

html {
  font-family: "Inter", sans-serif;
}
body {
  background-color: rgb(252, 252, 252);

  display: flex;
  flex-direction: column;
  margin: auto;
  position: relative;

  height: 100vh;
}
.bodyWrapper {
  display: flex;
  flex-direction: column;
  flex: auto;

  padding: 48px;
  gap: 32px;
}
#popUp {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  background-color: rgba(7, 119, 106, 0.9);
  width: 100%;
}
#textPopUp {
  color: rgb(252, 252, 252);
  padding: 0 12px 0 12px;
}
#popUpLink {
  color: rgba(252, 252, 252, 1);
  text-decoration: underline;
}
#popUpLink:hover {
  color: rgb(219, 255, 231);
}

/*  Side Nav */
.sidenav {
  width: 249px;
  height: 100%;

  position: relative;
  display: flex;
  flex-direction: column;

  border-right: 1px solid rgba(178, 178, 178, 1);
}

.logo {
  height: 100px;

  position: relative;

  border-bottom: 1px solid rgba(178, 178, 178, 1);
}

.logoImage {
  height: 30px;
  width: 162px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin-top: -15px;
  margin-left: -81px;
}

.sideMenu {
  margin: 40px 32px 0 32px;
  padding: 0px;
  position: relative;

  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: auto;

  list-style: none;
}

.sideMenuItem {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sideMenuIcon {
  width: 32px;
  height: 32px;
}

.profile {
  width: 168px;
  height: 48px;
  padding: 15px;

  display: flex;
  position: relative;
  gap: 6px;
  margin: auto;
  margin-bottom: 20px;

  border: 1px solid rgb(178, 178, 178);
  border-radius: 15px;
}

.avatar {
  position: relative;
  display: flex;

  gap: 8px;
}

.avatarName {
  width: 102px;

  display: flex;
  flex-direction: column;
  margin: auto;
  gap: 2px;
}

.avatarImage {
  width: 40px;
  height: 40px;

  margin: auto;

  border-radius: 20px;
}

.paginationIcon {
  transform: rotate(180deg);
  padding-bottom: 4px;
}

/*  Dashboard */

.dashboardKPI {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
/* Header */
.dashboardHeader {
  display: flex;
  flex-direction: row;
  flex: 0 0 auto;
  justify-content: space-between;

  padding: 32px;

  border-radius: 20px;

  background-color: rgba(7, 119, 106, 1);
  box-shadow: 0 0 12px 0 rgba(7, 119, 106, 0.6);
}
.dashboardHeaderText {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.dashboardButtonsWrapper {
  display: flex;
  align-items: center;
  gap: 24px;
}
/* Main Chart*/
.mainChart {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;

  border-radius: 20px;
  border: 1px solid rgba(178, 178, 178, 0.4);
  box-shadow: 0 0 8px 0 rgba(178, 178, 178, 0.4);
}
.divChart {
  display: flex;
  height: 400px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: 1 0 0;
}
.headerChart {
  display: flex;
  padding-right: 32px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.headerTextChart {
  display: flex;
  padding: 12px 32px 12px 32px;
  align-items: center;
  gap: 8px;
}
#legendContactsChart::marker {
  color: rgba(127, 86, 217, 1);
  font-size: 1.4em;
}
#legendProjectsChart::marker {
  color: rgba(182, 146, 246, 1);
  font-size: 1.4em;
}
.graphChart {
  display: flex;
  justify-content: center;
  min-width: 664px;
  margin: 0 auto;
}
#lineDivChart {
  border: none;
  border-right: 1px solid rgba(178, 178, 178, 1);
  height: 320px;
}
.sideKPIChart {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  padding: 32px 64px;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
@media (max-width: 1520px) {
  .sideKPIChart {
    padding: 32px 48px;
  }
}
.sideKPICardChart {
  display: flex;
  padding: 12px;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
#lineDivKPIChart {
  border: none;
  border-top: 1px solid rgba(178, 178, 178, 1);
  width: 200px;
}
/* Cards */
.gridCards {
  display: grid;
  height: 226px;
  row-gap: 20px;
  column-gap: 20px;
  align-self: stretch;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(3, minmax(0, 1fr));

  border-radius: 20px;
}
.card {
  display: flex;
  padding: 20px;
  align-items: flex-start;
  gap: 10px;
  flex: 1 0 0;
  align-self: stretch;

  border-radius: 20px;
  border: 1px solid rgba(178, 178, 178, 0.4);
  box-shadow: 0 0 8px 0 rgba(178, 178, 178, 0.4);
}
.textCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 0 0;
}
/* Projects Screen */
.headerProjects {
  display: flex;
  padding: 32px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;

  border-radius: 20px;
  background: #fafafa;
  box-shadow: 0 0 8px 0 rgba(7, 119, 106, 0.5);
}
.textHeaderProjects {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.buttonsWrapperHeaderProjects {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}
.mainSectionProjects {
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
  column-gap: 64px;
  row-gap: 64px;
  flex-wrap: wrap;
}
.cardProjects {
  display: flex;
  width: 260px;
  height: fit-content;
  flex-direction: column;
  align-items: center;

  border-radius: 20px;
  border: 1px solid rgba(233, 234, 235, 1);
  background: rgba(245, 245, 245, 1);
  box-shadow: 0 0 4px 0 rgba(178, 178, 178, 0.4);
}
.headerCardProjects {
  display: flex;
  padding: 20px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;

  border-bottom: 1px solid rgba(237, 238, 239, 1);
}
.taskWrapperProjects {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  align-self: stretch;
}
.taskCardProjects {
  display: flex;
  padding: 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;

  border-radius: 10px;
  border: 1px solid #e2e2e2;
  background: #fcfcfc;
  box-shadow: 0 2px 8px 0 #767676;
}
.tagsWrapperProjects {
  margin-top: 8px;
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 8px;
  align-self: stretch;
  flex-wrap: wrap;
}
.tagsProjects {
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;

  border-radius: 20px;
  background: rgba(230, 230, 230, 1);
}
.lineDivCardProjects {
  width: 100%;
  border: none;
  border-top: 1px solid rgba(237, 238, 239, 1);
  margin: 0;
}
.footerCardWrapperProjects {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.buttonCardWrapperProjects {
  display: flex;
  padding: 16px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;

  border-top: 1px solid rgba(237, 238, 239, 1);
}
/* Links */
a {
  color: rgb(34, 34, 34);
  text-decoration: none;
}
a:visited {
  color: rgb(34, 34, 34);
}
a:hover {
  color: rgb(96, 96, 96); /* when hovered */
}
a:active {
  color: rgb(50, 50, 50); /* while clicking */
}

/* Button Style 1 */
.button1 {
  display: flex;
  padding: 14px;
  justify-content: center;
  align-items: center;

  border-radius: 20px;
  border: none;
  background: rgba(252, 252, 252, 0.9);
  color: rgb(34, 34, 34);
  font-size: 16px;
  box-shadow: 0 0 8px 0 rgba(44, 44, 44, 0.8);
}
.button1:hover {
  background: rgba(252, 252, 252, 0.95);
  box-shadow: 0 0 8px 0 rgba(242, 242, 242, 0.8);
}
.button1:active {
  background-color: rgba(246, 255, 247, 0.95);
  box-shadow: 0 0 8px 0 rgba(242, 242, 242, 0.9);
}
/* Button Style 2 */
.button2 {
  display: flex;
  padding: 14px 22px;
  align-items: center;

  border-radius: 20px;
  border: none;
  background: rgba(67, 67, 67, 0.3);
  font-size: 16px;
  color: rgba(252, 252, 252, 1);
  box-shadow: 0 0 4px 0 rgba(252, 252, 252, 0.8);
}
.button2:hover {
  border: none;
  background: rgba(110, 180, 121, 0.2);
  color: rgba(252, 252, 252, 1);
  box-shadow: 0 0 8px 0 rgba(252, 252, 252, 0.9);
}
.button2:active {
  background: rgba(110, 180, 121, 0.3);
}
/* Button Style 3 */
.button3 {
  display: flex;
  padding: 10px 14px;
  align-items: center;

  border-radius: 20px;
  border: 2px solid rgba(7, 119, 106, 1);
  background-color: rgba(252, 252, 252, 1);
  box-shadow: 0 0 8px 0 rgba(7, 119, 106, 0.1);
  font-size: 16px;
  color: rgba(7, 119, 106, 1);
}
.button3:hover {
  color: rgba(7, 119, 106, 1);
  box-shadow: 0 0 8px 0 rgba(7, 119, 106, 0.4);
}
.button3:active {
  background: rgba(33, 184, 56, 0.1);
}
/* Button Style 4 */
.button4 {
  display: flex;
  padding: 12px 16px;
  align-items: center;

  border-radius: 20px;
  border: none;
  background-color: rgba(7, 119, 106, 1);
  font-size: 16px;
  color: rgba(252, 252, 252, 1);
  box-shadow: 0 0 8px 0 rgba(7, 119, 106, 0.4);
}
.button4:hover {
  box-shadow: 0 0 8px 0 rgba(7, 119, 106, 0.8);
}
.button4:active {
  background-color: rgb(18, 138, 124);
}
.buttonTasks {
  display: flex;
  padding: 8px 0;
  justify-content: center;
  align-items: center;
  width: 100%;

  border-radius: 20px;
  border: none;
  background: rgba(7, 119, 106, 0.8);
  box-shadow: 0 0 8px 0 rgba(0, 99, 180, 0.4);
  color: rgba(252, 252, 252, 1);
}
.buttonTasks:hover {
  box-shadow: 0 0 8px 0 rgba(0, 99, 180, 0.8);
}
.buttonTasks:active {
  background: rgba(7, 119, 106, 0.8);
}
/*  Text */
p {
  margin: 0px;
}
.subheadingText {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}
.bodyText {
  font-size: 16px;
  color: rgb(34, 34, 34);
}
.bodyTextStrong {
  font-size: 16px;
  font-weight: 600;
  color: rgb(34, 34, 34);
}
.bodyTextSmall {
  font-size: 14px;
  color: rgb(34, 34, 34);
}
.bodyTextXSmall {
  font-size: 11px;
  color: rgb(34, 34, 34);
}
.sideMenu {
  font-size: 20px;
  text-decoration: none;
}
.KPI {
  font-size: 24px;
}
.KPIchange {
  font-size: 16px;
  padding-bottom: 2px;
}
.textTags {
  font-size: 11px;
  letter-spacing: -0.44px;
  color: rgba(90, 90, 90, 1);
}

/*  Colors */
.colorBlack {
  color: rgb(34, 34, 34);
}
.colorWhite {
  color: rgba(252, 252, 252, 1);
}
.colorProjectCardBorder {
  color: rgba(233, 234, 235, 1);
}
.colorProjectCardBackground {
  color: rgba(245, 245, 245, 1);
}
.colorGreen {
  color: rgba(0, 218, 102, 1);
}
.colorRed {
  color: rgba(222, 4, 0, 1);
}
.colorGrayTertiary {
  color: rgba(178, 178, 178, 1);
}