/* Initiallizing the page */
* {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}
img {
  width: 100%;
}
/* Initializing the fonts used in the website */

@font-face {
  font-family: primary-font-b;
  src: url("../font/HelveticaNeueBold.ttf");
}

@font-face {
  font-family: primary-font-n;
  src: url("../font/HelveticaNeue-MediumCond.otf");
}

@font-face {
  font-family: primary-font-l;
  src: url("../font/HelveticaNeueLight.ttf");
}


:root {
  /* Font Family and Size */
  --backup-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --h1font: 20vh;
  --h2font: 5vh;
  --h3font: 3.5vh;
  --h4font:15px;
  --timerFont:13vh;
  /* Font Color and background color */
  --primary-color: #e8e5e5;
  --primary-color-l: #e9e6e6f9;
  --secondary-color: rgb(33, 33, 33);
  --secondary-color-dark-t: rgba(148, 148, 148, 0.358);  /*secondary color dark transparent */
  --border-radius: 8px;
  --secondary-color-settings:#6d6b6b;
  --setting-h1: 24px;
  --setting-p: 15px;
  --setting-h2: 18px;
  --toggle-bg:rgb(211, 211, 211);
  --toggle-bg-green: #4cbf3f;
  --todo-home:#fdeada;
  --todo-office:#DBEEF3;
  --brainDump-header-color:#ffd95a;
  --brainDump-list:rgb(255, 255, 255);
  --todo-container-color:#ECFBD5;
  --todo-header-container-color:#1a6840;
  /* Box Shadow */
  --box-shadow-m:rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}
/* Initializing the contains */
body {
  backface-visibility: hidden;
  font-family: var(--backup-font);
  color: var(--primary-color);
}
a{
  text-decoration: none;
  color:inherit
}
#main-box {
  background: url("../images/wallpaper0.svg") no-repeat center ;
  /* background-position: center; */
  background-size: cover;
  /* opacity: 0.80; */
}
li {
  list-style-type: none;
}
input {
  border: none;
  outline: none;
}

/* Input box for all toggle items */
#settingContainer input[type="checkbox"]{
  padding: 0;
  appearance: none;
  background: var(--toggle-bg-green);
  margin:0;
  font:inherit;
  color:currentColor;
  width: 2.2em;
  height: 1.24em;
  border: 0.15em solid var(--toggle-bg);
  border-radius: 10px;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

#settingContainer  input[type="checkbox"]::before {
  content: "";
  background: var(--primary-color);
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin-left: -13px;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

#settingContainer  input[type="checkbox"]:checked::before {
  border-radius: 50%;
  background: var(--primary-color);
  margin-left: 18px;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.main-container {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  width: 100vw;
}
/* Css for the top container starts here */
.top-container {
  margin: 20px auto;
  display: flex;
  /* background-color: aliceblue; */
  justify-content: space-between;
}
/* Heading left:Search  */
.header-left{
  background: var(--primary-color);
  height: fit-content;
  width:5vw;
  padding: 0.5vh 1.5vh;
  color: var(--secondary-color-settings);
  border-radius: 20px;
  box-shadow: var(--box-shadow-m);
  transition: box-shadow 0.3s;
  
}
.header-left a{
  /* padding-left: 2vh; */
  display: flex;
  align-items: center;
  gap:2%
}
.header-left:hover,.header-right:hover,.header-center img:hover,.center-left img:hover,.center-right:hover, .bottom-left:hover,.bottom-right:hover{
  box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5);
  border-radius: 30%;

}

.header-left:hover{
  border-radius: 20px;
}
.header-left img{
  width: 16px;
  
}
/* End of heading left Css */
/* Heading Center:BrainDump */
.header-center {
  position: relative;
  cursor: pointer;
}

.brainDumpContainer {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 5vh;
  left: -12vw;
  width: 400px;
  min-height: 10vh;
  background: var(--primary-color-l);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-m);
  z-index: 1;
  color: var(--secondary-color);
  gap: 10px;
}
.brainDumpHeader {
  background: var(--brainDump-header-color);
  z-index: 2;
  padding: 8px 20px;
  border-top-right-radius: var(--border-radius);
  border-top-left-radius: var(--border-radius);
}
.brainDumpInput {
  margin-left: 20px;
  margin-right: 20px;
  padding: 4px;
  display: flex;
  justify-content: space-between;
  background:var(--primary-color);
  border-radius: var(--border-radius);
}
.brainDumpContainer input {
  padding: 4px;
  background: none;
  border: none;
  width: 100%;
}


.brainDumpContainer input[type="checkbox"]:checked::before {
  border-radius: 0;
  background: none;
  margin-left: 0;
  -webkit-transition: none;
  transition: none;
}
.addIdeas,
.editIdeas {
  background: rgb(82, 163, 12);
  border-radius: var(--border-radius);
  color: var(--primary-color);
  height: max-content;
  width: max-content;
  border: none;
  margin-right: 4px;
  padding: 1% 3% 1% 3%;
}
.editIdeas {
  background: rgb(167, 167, 2);
}

.brainDumpIdeas {
  /* overflow-y: scroll; */
  padding: 4px;
  margin: 8px 20px;
}

#eachIdeaContainer {
  display: flex;
  justify-content: space-between;
  border-radius: var(--border-radius);
  background:var(--brainDump-list);
  padding: 8px;
  margin-bottom: 8px;
  box-shadow: var(--box-shadow-m);
}
.brainDumpIdeas li {
  width: 85%;
}
#eachIdeaContainer img {
  width: 5%;
  /* height: 5%; */
}
/* End of heading center */
/* Css for the top container ends here */

/* Css for the center container starts her */
.center-container {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  height: 50vh;
}
/* Center top Container */
.center-top-container {
  display: flex;
  gap: 2%;
  align-items: center;
  align-self: center;
  justify-content: center;
  width: 70%;
}
.center-left {
  position: relative;
  cursor: pointer;
}
.changeOptionsContainer {
  position: absolute;
  display: none;
  justify-content: space-evenly;
  width: 10vw;
  height: 2vw;
  right: 2vw;
  border-radius: var(--border-radius);
  background-color: var(--primary-color-l);
  padding: 2%;
  top: 0;
  transition: transform 1s ease-in-out;
  transform: translateX(-10%);
}
.center-left,
.center-right {
  width: 2.5vw;
}
/* End of center top container */
/* Center Center container */
.center-center {
  font-family: "primary-font-b";
  font-size: var(--h1font);
  align-self: center;
  display: flex;
  position: relative;
}

#centerPercentage {
  display: none;
  width: 30vh;
  height: 30vh;
  /* background: red; */
  position: relative;
}

#innerCircle {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  position: absolute;
  width: 20vh;
  height: 20vh;
  border: 3px solid var(--primary-color);
  margin: 5.1vh;
  border-radius: 50%;
  
}

#outerCircle {
  position: absolute;
  width: 30vh;
  height: 30vh;
  border: 5px solid var(--primary-color);
  border-radius: 50%;
  
}

#innerText {
  font-size: var(--h2font);
}
#innerText p {
  font-size: var(--h3font);
}
/* For the pomodoro clock */
#pomodoroContainer{
  display:flex;
  width:30vw;
  flex-direction: column;
  height:30vh;
  background: rgba(255, 255, 255, 0.332);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-m);
}

#pomodoroTopContainer{
  position: relative;
  display: flex;
  justify-content: center;
  border-top-left-radius:  var(--border-radius);
  border-top-right-radius:  var(--border-radius);
  height: 25%;
  gap:10px;
  align-items: center;
}
#pomodoroPopUpContainer{
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center ;
  width: 20vw;
  height: 27vh;
  top:1.5vh;
  border-radius: var(--border-radius);
  background: #ffffff;
  box-shadow: var(--box-shadow-m);
  transition-timing-function: ease-in-out;
  z-index: 2;
  color:black;

}
#popUpImg{
  width:20%
}
#popUpTextH1{
  font-size: 15px;
  color:black;
}
#popUpTextH2{
  font-size: 12px;
  color:var(--secondary-color)
}
#pomodoroTopContainer button, #pomodoroBottomContainer button{
  border:none;
  }
#pomodoroTopLeft, #pomodoroTopRight, #pomodoroBottom, #pomodoroBottomShortBreak, #pomodoroBottomLongBreak{
  align-self: center;
  padding: 1vh;
  background: none;
  border-radius: var(--border-radius);
  font-size:var(--h4font);
}
#pomodoroCenterContainer{
  display: flex;
font-size: var(--timerFont);
align-items: center;
justify-content: center;
height:50%;
}

#pomodoroBottomContainer{
  display: flex;
  justify-content: center;
  height: 25%;
  text-align: center;
  font-size: var(--h3font);
}
#pomodoroBottom, #pomodoroBottomShortBreak, #pomodoroBottomLongBreak{
  background: var(--primary-color);
  color:#424242;
  letter-spacing: 1.2px;
}
.not-allowed-cursor{
  cursor:not-allowed;
  background:"red"
}

/* End of the pomodoro timer css */
.popUp {
  cursor: pointer;
  position: relative;
}

.popUp .popup-text {
  visibility: hidden;
  position: absolute;
  width: max-content;
  height: max-content;
  background-color: #e8e5e5;
  border-radius: 4px;
  padding: 1vh;
  color: var(--secondary-color);
}
.popUp .show {
  visibility: visible;
}

/* End of Center top Css  */
/* Center Middle Css */
.center-middle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-family: "primary-font-b";
  font-size: var(--h2font);
  cursor: pointer;
  transition-timing-function:  120s ease-in-out;
}
.center-bottom{
  padding-left: 1vh;
  cursor: pointer;
}
.center-middle input,
.center-bottom input {
  background: none;
  border: 0;
  outline: none;
  color: var(--primary-color);
  width: max-content;
  
}
hr {
  border-radius: var(--border-radius);
  border: 1.5px solid;
  width: 100%;
  border-color: var(--primary-color);
}

.center-container ::placeholder {
  color: var(--primary-color);
  font-family: "primary-font-l";
}

.center-bottom,
.center-middle + div {
  text-align: center;
  font-family: var(--backup-font);
  font-size: var(--h3font);
  position: relative;
}

.center-bottom input[type="checkbox"] {
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Customized checkbox */
.mainTaskCheckBox {
  position: absolute;
  width: 2.5vh;
  height: 2.5vh;
  bottom: 14%;
  left: -45%;
  border-radius: 4px;
  border: 2px solid var(--primary-color);
  
}
.mainTaskCheckBox:hover {
  background-color: var(--primary-color-l);
}
.center-bottom input:checked ~ .mainTaskCheckBox {
  background: url("../images/charm_tick.svg") no-repeat center;
  background-position: contain;
}

/* Pop Up after the main task is completed. */
.mainTaskPopUp,.invalidPopUp {
  display: none;
  position: fixed;
  top: 1%;
  left: 45%;
  background-color: var(--primary-color);
  border-radius: 20px;
  min-width: fit-content;
  padding: 0.5%;
  height: fit-content;
  color: var(--secondary-color);
  transition-timing-function: ease-in-out;
}
.invalidPopUp{
  left: 40%;
  color: var(--primary-color);
}

/* Css for the central container ends here */

/* Css for the bottom container starts here */
.bottom-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px auto;
}
.bottom-container img {
  max-width: fit-content;
}
/* Css for bottom center container */
.bottom-center {
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  cursor: pointer;
}
.bottom-center:hover {
  translate: 0 -15px;

  transition-duration: 2s;
}
/* End of center center container */
/* Start of bottom rigth container */
.bottom-right {
  position: relative;
}
.todoListContainer {
  display: none;
  position: absolute;
  bottom: 40px;
  right: 2%;
  width: 600px;
  flex-direction: column;
  height: fit-content;
  min-height: 300px;
  max-height: 600px;
  background: var(--todo-container-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-m);
  z-index: 1;
  color: var(--secondary-color);
  border: none;
  overflow-y: auto;
}
.todoListContainer div {
  display: flex;
  justify-content: center;
  background-color: var(--todo-header-container-color);
  height: 30px;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  color: var(--primary-color);
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
  color:var(--primary-color);
  font-weight:bold;
  text-align: center;
}


.todoListContainer div img {
  width: 18px;
  height: 18px;
}

.todoListContainer tr {
  border-bottom: 0.002px solid var(--secondary-color-dark-t);
  height:30px;
}
#toDoTableheader{
  border: none;
  background-color: var(--todo-header-container-color);
  color:var(--primary-color);
  margin:0;
}


#initialAddTask{
  position: absolute;
  bottom:2%;
  cursor: pointer;
  background: var(--toggle-bg-green);
  color: var(--primary-color);
  border-radius: var(--border-radius);
  padding: 0.75vh;
  box-shadow: var(--box-shadow-m);
  border: none;
  width: fit-content;
  align-self: center;
}
#initialAddTask:hover{
  background: green;
}
#crossTodo{
  margin-bottom: 0.5vh;
  display: flex;
  width: 100%;
  padding: 0vh 0vh 0.2vh ;
  cursor: pointer;
  justify-content: space-between;
  padding: 0 0.5vh;
}
#tableBody{
  text-align: center;
}
#addTaskPopUp{
  display: none;
  position: absolute;
  left: -400px;
    top: -33vh;
  background-color: var(--primary-color);
  z-index: 2;
  width: fit-content;
  height: fit-content;
  border-radius: var(--border-radius);
  padding: 2vh;
  color:var(--secondary-color);
  box-shadow:var(--box-shadow-m);
}

#addtaskForm{
  margin-top: 2vh;
}
#addtaskForm> * {
  margin-bottom: 1.5vh;
  border-radius: var(--border-radius);
  padding: 0.5vh;
}

#addTaskPopUp input, #addTaskPopUp select{
  border:none
}
#addTaskPopUp #addNewTask{
  margin-left:35%;
  background: var(--toggle-bg-green);
  color:var(--secondary-color)
}
.bottom-left{
  position: relative;
  cursor: pointer;
}
.bottom-right #todo{
  font-size: 20px;
  font-weight: bolder;
  cursor: pointer;
}

/* TODo  customized Checkbox  */
#todocheckbox input[type="checkbox"]{
  padding: 0;
  appearance: none;
  background: var(--primary-color);
  margin-left:30%;
  font:inherit;
  color:currentColor;
  width: 1.5em;
  height: 1.5em;
  border: 0.15em solid var(--toggle-bg);
  border-radius: 10px;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

#todocheckbox input[type="checkbox"]::before {
  content: "";
  width: 1em;
  height: 1em;
  margin-top: -10px;
  margin-left: 5px;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

#todocheckbox input[type="checkbox"]:checked::before {
  content: "✔";
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}
/* End of bottom right container */
/* Setting Container */
#settingContainer{
  display: none;
  justify-content: center;
  position: absolute;
  bottom: 40px;
  width: 750px;
  height: 300px;
  padding: 3vh 1vh;
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
  box-sizing: var(--box-shadow-m);
  color:  var(--secondary-color-settings);
  font-size: 18px;
}


#settingOptions{
  width: 30%;
  border-right: 2px solid var(--secondary-color-dark-t);
  padding-top: 5%;
  cursor: pointer;
}
#settingOptions li{
  padding-bottom: 5%;
  width: fit-content;
  padding: 5%;
  border-radius: var(--border-radius);
}

#settingOptions li:hover{
  cursor: pointer;
  color: var(--secondary-color);
  box-shadow: var(--box-shadow-m)
}

#settingOptionInformation{
  margin-left:4%;
  height: 85%;
  width: 60%;
  color: var(--secondary-color-settings);
  overflow-y: auto;
  overflow-x: hidden;
  cursor: pointer;
}
/* For Setting Scroll */
/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: var(--border-radius);
  background: #f1f1f1; 
  box-shadow: var(--box-shadow-m);
  border-radius: var(--border-radius);
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  border-radius: var(--border-radius);
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-color-settings)
}
/* End of the scroll css */

#settingOptionInformation h1{
  color:var(--secondary-color);
  font-size:var(--setting-h1);
  margin-bottom:0px
}

#settingOptionInformation p{
  font-size:var(--setting-p)
}

#settingOptionInformation h2{
  
  color:var(--secondary-color);
  font-size: var(--setting-h2);
}
/* Background Ideas */
#settingBackgroundChangeContainer{
  display: none;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
#backgroundMainContainer{
  display: flex;
  width: 100%;
  height: 70%;
  gap:40px;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
 #backgroundMainContainer> *{
width:25%;
height:40%;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow-m);
background-repeat: no-repeat;
background-size: cover;
 }
/* End of background Container */
/* Balance Setting */
#enableBalanceModeContainer, #hourContainer,.bottom-border{
  margin-top:1.5vh;
  border-top: 0.5px solid var(--secondary-color-dark-t);
  padding: 1.5vh 0;
  border-bottom: 0.5px solid var(--secondary-color-dark-t);
  margin-bottom: 1.5vh;
}

#enableBalanceModeContainer{
  display: flex;
  justify-content: space-between;
}
#uptimeHourContainer>*:hover{
  cursor: pointer;
  color: var(--secondary-color);
  
}

/* End of balance container */
/* General Setting */
#settingGeneralContainer,#settingBalanceContainer, #settingAboutContainer, #settingBackgroundChangeContainer{
  margin-right: 1.5vh;
}
#settingBalanceContainer, #settingAboutContainer, #settingBackgroundChangeContainer{
  overflow:visible
}

#settingGeneralContainer h2{
  margin-top: 1.5vh;
}

#showContainer h3{
  font-weight: normal;
  font-size: 17px;
}

#linkDiv,#greetingDiv,#mainTaskDiv,#todoDiv,#quoteDiv,#brainDumpDiv,#timerDiv,#weatherDiv{
  display: flex;
  justify-content: space-between;
  margin-top:1.5vh;
  border-top: 0.5px solid var(--secondary-color-dark-t);
  padding-top: 0.75vh;
  align-items: flex-end;
}
#themeContainer{
  display: flex;
  justify-content: space-between;
}
#themeDiv{
  display: flex;
  width: 35%;
  justify-content: space-between;
}
/* For dark mode */
.dark-theme{
 --primary-color:rgb(33, 33, 33);
 --primary-color-l:rgb(80, 80, 80);
 --secondary-color: #e8e5e5;
 --secondary-color-l:#e9e6e6f9;
 --secondary-color-settings:rgb(208, 208, 208);
 --todo-header-container-color:var(--secondary-color-l);
 --todo-container-color:rgb(33, 33, 33);
 --todo-home:#5f2628;
 --todo-office:#116D6E;
 --brainDump-header-color:#806200;
 --brainDump-list:rgb(42, 42, 42);
}
/* End of general container */

/* Media query */


@media screen and (max-width: 780px ) and (min-width:420px) {
  #settingContainer {
    width: 374px;
    height: 300px;
    font-size: 16px;
  }

  .brainDumpContainer {
    width: 60vw;
    left:-120px;
  }
  .todoListContainer {
    width: 400px;
    margin-right: 4%;
  
  }
}