/* Global styling where applies */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

:root {
  --highlighted: rgb(0, 179, 255);
}

* {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  padding: 0;
}

html,
body,
.container {
  background-color: rgba(244, 242, 242, 0.388);
}

html,
body,
h1,
input,
.progress_bar,
.container,
.main_Content,
.calender_Days,
.content,
.card,
.tasks_Container,
.chart_Container,
.header,
.tasks_container {
  width: 100%;
}

*,
section {
  margin: 0;
}

html,
body,
.container,
.main_Content,
.middle_Card_Buttons {
  height: fit-content;
}

p {
  color: rgb(167, 164, 164);
}

.nav,
.setting,
h4,
select {
  font-size: 2vh;
}

h4 {
  color: #323c47;
}

strong {
  color: rgb(80, 80, 80);
  font-weight: 400;
}

i,
li,
.current_Day {
  text-align: center;
}

i,
.setting button,
.tasks_Container span,
.chart_Container span {
  font-size: 1.5vh;
}

i,
.current_Day,
input:hover,
input:focus,
input:hover::placeholder {
  color: white;
}

i {
  padding: 3px 0;
  font-style: normal;
  width: 7vw;
  background-color: rgb(27, 207, 105);
  border-radius: 4px;
}

button,
input,
select {
  border: none;
}

button {
  font-size: 1vh;
  background-color: transparent;
}

span,
ul,
h1,
li,
.toggle_Button,
.search_field,
.card_Heading,
.status,
.sidebar,
.header,
.profile,
.main_Content,
.content,
.calender_Content,
.card,
.setting,
.middle_Card_Buttons,
.text,
.tasks_Container,
.chart_Container {
  display: flex;
}

.search_field,
.header,
.profile,
.toggle,
.tasks_Container {
  flex-direction: row;
}

nav,
li,
.sidebar,
.proflie_Text,
.main_Content,
.content,
.calender_Content,
.card,
.text,
.chart_Container,
.setting {
  flex-direction: column;
}

.tasks_Container,
section,
.text {
  justify-content: center;
}

input,
.sidebar,
.setting {
  height: 100%;
}

h1,
.charts_Container, .header,
.nav,
.search_field {
  border-bottom: solid #ebeff2 1px;
}

section,
.content,
span,
h1,
.search_field,
.header,
.toggle_Button {
  align-items: center;
}

section,
.main_Content,
.card {
  border-radius: 5px;
}

/* display setting for desktop */

.container {
  display: grid;
  grid-template-columns: min-content repeat(2, 1fr);
  grid-template-rows: min-content repeat(2, 1fr);
  column-gap: 2.5vw;
  row-gap: 5.25vh;
  grid-template-areas:
    "sidebar search_field search_field   search_field"
    "sidebar main_Content  main_Content  charts_Container"
    "sidebar main_Content  main_Content  charts_Container";
  
   
  align-items: flex-start;
  padding-bottom: 5.25vh;
  padding-right: 2.5vw;
}

/* Main website sections */

.sidebar {
  grid-area: sidebar;
  width: 20vw;
}
.search_field {
  grid-area: search_field;
  padding: 20px 36px;
  margin-left:-2.5vw;
}

.main_Content {
  grid-area: main_Content;
  height: 100%;
}


.charts_Container {
  grid-area: charts_Container;
  display: flex;
  flex-direction: column;
  height: 100%;
  row-gap: 5.25vh;
  justify-content: space-between;
}

/* Search Header */

.search_field,
li {
  font-weight: 100;
  color: rgb(195, 199, 210);
}

/* SideBar */
h1,
select,
li:hover,
.icon:hover,
.nav a:hover,
.setting a:hover,
.setting button:hover,
.extend_Btn h4:hover {
  color: var(--highlighted);
}

h1,
.nav,
.setting,
.setting {
  padding-left: 20px;
}

h1 {
  font-family: "Open Sans", sans-serif;
  height: 127px;
  font-size: 3vh;
  font-weight: 600;
}

.profile {
  padding: 0 20px;
}

.proflie_Text {
  width: 12vw;
  height: 38px;
  padding: 18px;
  margin-bottom: 25px;
}

.proflie_Text span,
.search_field,
.content span {
  font-size: 1.75vh;
}

.profile img {
  width: 3vw;
}

.nav,
.setting,
li,
p {
  font-size: 2.5vh;
}

.nav,
.setting,
li:hover {
  font-weight: 550;
}

.nav a,
.setting a {
  padding: 10px;
}

.search_field,
.header,
.calender_Content span,
.content span,
.setting,
.calender_Days,
.card,
.card_Heading,
.status {
  justify-content: space-between;
}

.setting img,
.content svg {
  width: 14px;
}

.toggle_Button{
  padding-bottom:20px ;
}

/* Main Content */

.calender_Days {
  padding-top: 40px;
}

.content {
  margin-top: 2px;
}
.divider {
  height: 1px;
  width: 104.5%;
  background-color: #ebeff2;
  left: -20px;
}
.divider,
.current_Day {
  position: relative;
}
.card {
  height: 20vh;
  margin: 2vh 0;
  padding: 3vh;
}

i:hover {
  background-color: rgb(97, 227, 10);
  box-shadow: rgb(43, 255, 0) 0 0 20px 1px;
}

i:hover,
.middle_Indicator:hover,
input:hover::placeholder,
li:hover,
.icon:hover,
.nav a:hover,
.setting a:hover,
.setting button:hover,
.extend_Btn h4:hover {
  transition: 0.5s;
}

.middle_Indicator {
  height: min-content;
  background-color: rgb(235, 92, 92);
}

.middle_Indicator:hover {
  background-color: red;
  box-shadow: rgb(231, 13, 13) 0 0 20px 1px;
}

.extend_Btn h4 {
  margin: 15px 0 5px;
  font-weight: 700;
  width: fit-content;
}

input {
  border-radius: 2px;
}

select,
input:hover,
input:focus {
  outline: none;
}

input:hover,
input:focus {
  background-color: var(--highlighted);
  box-shadow: var(--highlighted) 0 0 30px 1px;
  transition: 0.5s ease-in-out;
}

select {
  appearance: none;
  padding-right: 5px;
  padding-left: 2px;
  background-image: url(../Resources/drop_Down_Arrow.svg);

  background-position: right;
}

select,
.current_Day {
  background-repeat: no-repeat;
}

section select {
  padding-right: 10px;
}
select img {
  width: 7px;
}

select img,
.progress_bar,
.progress {
  height: 4px;
}
select:hover {
  font-weight: bolder;
}
.progress_bar {
  margin: 10px 0px 20px;
  background-color: #f5f3f3;
}

.progress {
  width: 80%;
  background-color: rgb(51, 194, 96);
}
.progress_bar,
.progress {
  border-radius: 10px;
}

li {
  list-style: none;
}

li span {
  margin: 20px 0;
  margin-left: 4px;
}

.current_Day {
  background-image: url("../Resources/date_23rd_Ellipse.svg");
  padding-bottom: 4px;
  padding-left: 5px;
  height: 30px;
  width: 30px;
  margin-top: 16px;
}

/*Charts Section */

.chart {
  width: 24vw;
  align-self: center;
}

.tasks_Chart {
  width: 23.75vw;
  padding: 2vw;
}

section,
.card,
.search_field,
.sidebar {
  box-shadow: 0 0 8px 2px rgb(234, 236, 236);
}

section,
.search_field,
.header,
.sidebar,
.main_Content {
  background-color: white;
}

.proflie_Text span,
.search_field span input,
.content span,
::placeholder {
  color: rgba(108, 107, 117, 0.811);
}

.nav svg,
.setting span svg,
.toggle_Button svg,
.content svg,
span svg,
span img {
  width: 22px;
  margin-right: 9px;
}

.icon {
  color: #c2cfe0;
}

section .text {
  padding-right: 20px;
}

.header {
  padding: 0 20px 10px;
}

.calender_Content .header {
  padding: 0 0 10px;
}

.tasks_container {
  height: 40vh;
}

section span {
  padding: 5px 0px;
}

.chart_Container span,
.main_Content,
section,
.top_Chart_Container {
  padding: 20px;
}

.elipse {
  width: 8px;
  margin-right: 5px;
}

/* Media Queries for responsivity*/

@media (max-width: 848px) {
  .profile img {
    display: none;
  }
  .proflie_Text span {
    font-size: 1vw;
    justify-content: center;
  }
}

@media (max-width: 645px) {
  .nav svg,
  .setting span svg,
  .toggle_Button svg {
    display: none;
  }
}

@media (max-width: 425px) {
  html,
  body,
  .container {
    display: block;
  }

  html,
  body,
  .container,
  .calender_Content,
  .main_Content,
  section,
  .top_Chart_Container,
  .chart,
  .tasks_Chart,
  .header {
    width: 100%;
  }
  .sidebar,
  .calender_Days,
  .search_field,
  .divider,
  .edit_Button,
  .extend_Btn,
  section h4 {
    display: none;
  }
  .calender_Content,
  .main_Content,
  section,
  .top_Chart_Container {
    margin: 0;
  }

  section .header {
    justify-content: flex-end;
  }

  section,
  .top_Chart_Container {
    box-shadow: none;
  }

  p,
  h4,
  i,
  select,
  .content span {
    font-size: 10px;
  }
  i {
    font-size: 7px;
    width: 19vw;
  }
}