html {
  overflow: hidden;
  position: fixed;
  height:100%;
  width: 100%;
  background: #242424;
}
.bigContainer{
  overflow: hidden;
  scale: 2;
  background: #242424;
  max-width: 360px;
  margin: 0 auto 0 auto;
  margin-top: 300px;
}
h1 {
  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  font-size: 3rem;
  text-align: center;
  margin-top: 20px;
  padding-top: 50px;
  margin-bottom: 10px;
}
.column {
  display: flex;
  flex: 1;
  width: 50%;
  margin-right: 0;
}
.column1 {
  display: flex;
  flex: 1;
  width: 50%;
  margin-left: 6rem;
  justify-content: space-around
}
#heading1 {
  color: #ffffff;
  text-align: left;
  display: flex;
}
.button1 {
  
  margin-top: 30px;
  border-style: solid;
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;

  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  font-size: 20px;
  background: #606060;
  padding: 5px 11px 5px 11px;
  text-decoration: none;
}
.button2 {

  border-style: solid;
  margin-top: 27px;
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;

  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  font-size: 20px;
  background: #606060;
  padding: 5px 13px 5px 13px;
  text-decoration: none;
}
button1:active {
  background-color: #333;
}
.ConntrolButton {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  border-style: solid;
  text-shadow: 1px 1px 3px #666666;
  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  font-size: 20px;
  padding: .8rem 1.5rem .8rem 1.5rem;
  text-decoration: none;
}
.Logo {
  z-index: 500;
  position: absolute;
  top: 3em;
  right: 3em;
  width: 64px;
  height: 64px;
}
.sessions {
  font-size: 35px;
}
#start{
  background: #2dc200;
}
#stop{
  background: #da0000;
}
#reset{
  background: #ff7b00;
}
#plus {
  margin-left: 10px;
}

#sessionCounter {
  margin-top: 2.5rem;
}

#dim-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999; /* set a high z-index to make sure it's on top of other elements */
  opacity: 0; /* start with zero opacity */
  transition: opacity 0.5s ease;
  pointer-events: none;
}

#dim-overlay.active {
  opacity: 1;
  display: block;
  pointer-events: none4; /* enable mouse events */
}


.footer {
  right: 0;
  left: 0;
  overflow: hidden;
  bottom: -100%;
  border-radius:50px 50px 0px 0px;
  -moz-border-radius:50px 50px 0px 0px;
  -webkit-border-radius:50px 50px 0px 0px;
  background-color:#2c2c2c;
  border-width:3px;
  border-style:solid;
  border-color:#3a3a3a;
  position: absolute;
  width: 100%;
  height: 110%;
  z-index: 800;
  transition: all 0.35s ease-in-out;
}

.footer.show {
  bottom: 0%;
}

.floating-box {
  display: flex;
  overflow: hidden;
  position: absolute;
  top: 0px;
  right: -100%;
  width: 66%;
  height: 100%;
  z-index: 50;
  background-color: rgb(61, 61, 61);
  box-shadow: 1px 1px 3px #666666;;
  transition: right 0.2s ease-in-out;
}
.flatpickr-calendar.inline {
  position: absolute;
  top: 0px;
}
.floating-box.show {
  right: 0%;
}

.arrow {
  position: absolute;
  top: 2.4rem;
  right: 4rem;
  height: 4rem;
  width: 4rem;
}

.arrow1 {
  rotate: 180deg;
  position: absolute;
  top: 13%;
  right: 4rem;
  height: 4rem;
  width: 4rem;
  z-index: 999;
}

.chartMenu {
  width: 100vw;
  height: 40px;
  background: #1A1A1A;
  color: rgba(54, 162, 235, 1);
}
.chartMenu p {
  padding: 10px;
  font-size: 20px;
}
.chartCard {
  position: absolute;
  right: 0%;
  margin-top: 25%;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: right .3s ease-in-out;
}
.chartCard.slide {
  right: 100%;
}
.arrowNavigationContainer {
  position: relative;
  width: 90%;
  right: 0%;
  margin-top: 3%;
  margin-right: 5%;
  margin-bottom: 3%;
  margin-left: 5%;
  height: 5%;
  transition: right .3s ease-in-out;
}
.arrowNavigationContainer.slide {
  right: 100%;
}
.chartNavigation {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  background-color: #3c3c3c;
}
.chartInfo {
  margin: 0;
  font-size: 2.5rem;
  color: #ffffff;
}
.diary {
  position: relative;
  display: flex;
  margin-top: -12.5%;
  right: -100%;
  width: 90%;
  margin-right: 5%;
  margin-left: 5%;
  transition: right .3s ease-in-out;
}
.verticalCol{
  height: 33%;
}
.diary.slide {
  right: 0%;
}
.datePickerForm {
  position: absolute;
  width: 100%;
  top: 1rem;
}
.diaryContaier{
  position: absolute;
  scale: 1;
}
.diaryAndInfoContaier {
  display: flex;

  width: 100%;
}

.infoDiaryText {
  position: absolute;
  right: -5%;
  width: 38%;
}
.infoDiaryPText {
  font-size: xx-large;
  color: #ffffff;
  line-height: 1.2;
  margin: 0;
}

.chartBox {
  scale: 3;
  width: 30%;
  margin-left: 3%;
  margin-right: 7%;
  z-index: 800;
  padding: 20px;
}
.chartBox svg {
  height: 100%;
  width: 100%;
}
.infoText {
  margin: 0;
  font-size: 5rem;
  color: #ffffff;
}

p {
  font-family: 'Roboto', sans-serif;
}

.editor {
  max-height: 20vh;
  overflow-y: scroll;
  padding: 0;
  margin: 0;
  border: none;
  zoom:2.5;
  top: .5rem;

}
.diaryInteraction {
  width: 100%;
  margin-left: 100%;
  transition: all 0.3s ease-in-out;
}
.diaryInteraction.slide {
  margin-left: 0%;
}
.editorContainer {
  width: 100%;
  margin-left: 100%;
  transition: all 0.275s ease-in-out;
}
.editorContainer.slide {
  margin-left: 0%;
}
.save {
  margin-left: 100%;
  margin-top: .75rem;
  position: absolute;
  height: 4rem;
  width: 4rem;
  right: -107.5%;
  transition: all 0.275s ease-in-out;
}
.save.slide {
  margin-left: 0%;
  right: 7.5%;
}
.diaryTypeSelector {
  width:90%;
  margin-left: 4%;
  margin-right: 4%;
  height: 8rem;
  background-color: #3c3c3c;
  display: flex;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  padding-left: 1%;
  padding-right: 1%;
}

.VertCol {
  height: 100%;
  width: 33%;
  display: grid;
}
.arrowNavigation {
  display:flex;
  border-radius:50px;
  -moz-border-radius:50px;
  -webkit-border-radius:50px;
  margin-right: 5%;
  margin-left: 5%;
  width: 90%;
  height: 7.5%;
  margin-top: 30%;
  background-color:#3c3c3c;
}
.diaryTypeButton {
  align-self: center;
  justify-self: center;
  width:90%;
  height:65%;
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  border-style: solid;
  text-shadow: 1px 1px 3px #666666;
  font-family: 'Roboto', sans-serif;
  color: #FFFFFF;
  background-color: #3e4850;
  font-size: 2rem;
  text-decoration: none;
}
.arrowCol1 {
  display: grid;
  height: 100%;
  width: 25%;
}

.arrowCol2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 50%;
}

.arrowCol3 {
  display: grid;
  height: 100%;
  width: 25%;
}

.chartArrowCol1 {
  display: grid;
  height: 100%;
  width: 15%;
}

.chartArrowCol2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 70%;
}

.chartArrowCol3 {
  display: grid;
  height: 100%;
  width: 15%;
}

.backArrow {
  margin: auto;
  transform: rotate(270deg);
  height: 4rem;
  width: 4rem;
}

.frontArrow {
  margin: auto;
  transform: rotate(90deg);
  height: 4rem;
  width: 4rem;
}

.containerForMenu {
  display: flex;
  width: 100%;
  height: 100%;
  margin-top: 8rem;
}

.columnsForInfo {
  width: 70%;
  height: 100%;
  
}
.infoDiaryPText
.columnsForSwitches {
  width: 30%;
  height: 100%;
}

.barGraph {
  position: absolute;
  width: 90%;
  height: 50%;
  top: 20%;
  margin-left: 5%;
  margin-right: 5%;
  z-index: 800;
}

.switch {
  scale: 2;
  margin-right: 60%;
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin-top: 3em;
  margin-bottom: 2em;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #696969;
  transition: .3s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: rgb(169, 169, 169);
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.infoMenuText1 {
  color:rgb(235, 235, 235);
  font-family:"Helvetica";
  font-size: 3em;
  margin-top: .8em;
  margin-bottom: .8em;
  margin-left: 1.5em;
}

.infoMenuText2 {
  color:rgb(235, 235, 235);
  font-family:"Helvetica";
  font-size: 3em;
  margin-top: 1.3em;
  margin-bottom: .8em;
  margin-left: 1.5em;
}

h2 {
  
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 3.5rem;
  color: #ffffff;
  margin-top: 15px;
  margin-bottom: 0px;
  text-align: center;
}
#container {
  display: flex;
  margin-top: 50px;
}
#containerForColumn {
  display: flex;
  margin: 0 auto;
}
.col {
  flex: 1;
  width: 33%;
  margin-right: 0;
}
.col button {
  display: flex;
  margin: 0 auto;
}