*{
  text-align: center;
}

body {
  background-color: #bfbfbf;
}

#maincontent {
  overflow: auto;
  background-image: url('season');
}

#box4{
  text-align: center;
}

#box5{
  text-align: center;
}

#title{
  margin-top: 100px;
  text-align: center;
    color: black;
}
#title1{
  text-align: center;
    color: black;
}
h2{
  text-align: center;
}
h1{
  text-align: center;
}
button {
    background-color: #04AA6D;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 20%;
    text-align: center;
  }
 button:hover{
  background-color: grey;
 }
  .cancelbtn {
    width: 15%;
    
    background-color: #f44336;
  }

  .cancelbtn2 {
    position:absolute;
    bottom:0;
    margin-left:-50px;
    left:46%;
    width: 15%;
    background-color: #f44336;
  }

  #resetpass {
    position:absolute;
    bottom:55px;;
    margin-left:-50px;
    left:46%;
    width: 15%;
    background-color: #04AA6D;
  }

  #id01{
    text-align: center;
    padding-top: 50px;
  }
  #text{
    
    height: 100px;
    width: 292px;
  }
  #userLogInput{
    width:250px;
    height:50px;
    background-color: white;
  }
  #passLogInput{
    width:250px;
    height:50px;
    background-color: white;
  }
  #uname{
    margin-right: 177px;
    font-size: large;
  }
  #psw{
    margin-right: 177px;
    font-size: large;
  }
  
  #two{
    margin-top: 50px;
  }
  #submit{
    width:15%;
  }
  #nameInput{
    width:225px;
    height:25px;
    background-color: white;
  }
  #emailInput{
    width:225px;
    height:25px;
    background-color: white;
  }
  #userInput{
    width:225px;
    height:25px;
    background-color: white;
  }
  #passInput{
    width:225px;
    height:25px;
    background-color: white;
  }
  #confirmInput{
    width:225px;
    height:25px;
    background-color: white;
  }
  #name{
    margin-right: 185px;
    font-size: large;
  }
  #email{
    margin-right: 184px;
    font-size: large;
  }
  #uname2{
    margin-right: 153px;
    font-size: large;
  }
  #psw2{
    margin-right: 153px;
    font-size: large;
  }
  #confirmpsw{
    margin-right: 85px;
    font-size: large;
  }
  h4{
    margin-top: 4px;
    margin-left: 10px;
    position:absolute;
    top:0;
    left:62px;
  }
  #date{
    margin-top: 10px;
    margin-left: 10px;
    position:absolute;
    top:20px;
    left:57px;
  }
  #date7{
    font-size: medium;
    margin-top: 10px;
    margin-left: 8px;
    position:absolute;
    top:20px;
    left:50px;
  }
  #time{
    background-color: black;
    position:absolute;
    margin-left:40px;
    margin-left:2px;
    border: 2px solid white;
    top:50px;
    left: 0;
  }
  #pswR{
    color:white;
  }
  #entry{
    background-color: white;
    color: black;
    padding: 14px 20px;
    margin: 8px;
    border: 2px solid black;
    cursor: pointer;
    width: 20%;
    text-align: center;
    float: inherit;
  }
  #entry:hover{
    background-color: grey;
  }

  .switch {
    width: 60px;
    height: 34px;
    position:absolute;
    margin-bottom:0;
    margin-right:0;
    right:1px;
    bottom:3px;
    margin-left:70px;
    left:80%;
    border-radius:25px;
    }
  
    #mycheck {
      position:absolute;
      margin-bottom:0;
      margin-right:0;
      right:1px;
      bottom:3px;
      margin-left:70px;
      left:80%;
      width: 65px;
      height: 34px;
      border-radius:25px;
      }
    
    input:checked {
    background-color: #2196F3;
    background-image: url('season');
    }  

  #entryquestion{
    margin-top:30px;
    margin-left:-10px;
    top:15%;
    left:21%;
    position:absolute;
    font-size:17px;
  }

  #diarytitle {
    background-color: #bfbfbf;
    opacity: 0.6;
    margin-top:20px;
    border: none;
    font-size: 20px;
    margin-left:4px;
    width:80%;
    overflow:hidden;
  }

  #entrybox {
    top:60px;
    left:30%;
    height:400px;
    width:850px;
    border: 2px dashed black;
    background-color: white;
    text-align:top;
  }

  .logoutbtn {
    position:absolute;
    bottom:0;
    margin-left:-50px;
    left:47%;
    width: 15%;
    background-color: #f44336;
  }

  .homepagebtn {
    position:absolute;
    bottom:55px;;
    margin-left:-50px;
    left:47%;
    width: 15%;
    background-color: #04AA6D;
  }

  .logoutbtn2 {
    position:absolute;
    bottom:0;
    margin-left:-50px;
    left:57%;
    width: 15%;
    background-color: #f44336;
  }

  .savebtn {
    position:absolute;
    bottom:0;
    margin-left:-40px;
    left:37%;
    width: 15%;
    background-color: #04AA6D;
  }

  #recorded {
    position:absolute;
    margin-top:50px;
    margin-bottom:-50px;
    top:32%;
    margin-left:-40px;
    left:41%;
    font-size:40px;
    text-align:center;
  }

  #diarydate {
    text-align:center;
    margin-top:20px;
    top:20%;
    font-family: "Lucida Console", "Courier New", monospace;
  }

  #date2 {
    text-align:center;
    margin-top:20px;
    top:30%;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  #date3 {
    margin-top: 10px;
    margin-left: 10px;
    position:absolute;
    top:20px;
    left:57px;
  }

  #date4 {
    margin-top: 10px;
    margin-left: 10px;
    position:absolute;
    top:20px;
    left:57px;
  }

  #time2{
    background-color: black;
    position:absolute;
    margin-left:40px;
    margin-left:2px;
    border: 2px solid white;
    top:50px;
    left: 0;
  }

  #time3{
    background-color: black;
    position:absolute;
    margin-left:40px;
    margin-left:2px;
    border: 2px solid white;
    top:50px;
    left: 0;
  }
  
  .search-container input[type=text] {
    padding: 6px;
    font-size: 17px;
    border: none;
  }
  
  .search-container button {
    padding: 6px;
    position:absolute;
    margin-top: 30px;
    top:36%;
    margin-right: 16px;
    right:34%;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
  }
  
  @media screen and (max-width: 600px) {
   .search-container {
      float: none;
    }

    .search-container button {
      float: none;
      position:absolute;
      text-align: left;
      width: 70%;
      margin: 0;
      padding: 14px;
    }
  }

  #searchbutton {
    width:10%;
    background-color: black;
    height:4.67%;
  }

  #searchbar {
    width:20%;
    border: 2px solid black;
    margin-top: 187px;
    top:30%;
    margin-left:36px;
    left:60%;
    margin-right:190px;
    right:100%;
  }

  #time4{
    background-color: black;
    position:absolute;
    margin-left:40px;
    margin-left:2px;
    border: 2px solid white;
    top:50px;
    left: 0;
  }

  
  #date5 {
    margin-top: 10px;
    margin-left: 10px;
    position:absolute;
    top:20px;
    left:57px;
  }

  #time5{
    background-color: black;
    position:absolute;
    margin-left:40px;
    margin-left:2px;
    border: 2px solid white;
    top:50px;
    left: 0;
  }

  #date6 {
    margin-top: 10px;
    margin-left: 10px;
    position:absolute;
    top:20px;
    left:57px;
  }

  #searchbar2 {
    width:20%;
    border: 2px solid black;
    position:absolute;
    margin-right:100px;
    right:70%;
    margin-left:0;
    left:1%;
    margin-top:30px;
  }

  #searchbutton2 {
    position:absolute;
    width:10%;
    background-color: black;
    height:4.67%;
    margin-left:0;
    left:22%;
    margin-bottom:200px;
    bottom:200%;
    top:14.85%;
  }

  #results {
    position:absolute;
    left:15px;
    margin-left:0;
    font-size:22px;
    font-weight:bold;
    margin-bottom:30px;
    bottom:50%;
    margin-top:50px;
    top:22%;
    font-family: Arial, Helvetica, sans-serif;
  }

  .resultbox {
    position:absolute;
    border: 1px solid black;
    margin-top:50px;
    top:28.5%;
    margin-bottom:-30px;
    margin-left:15px;
    margin-right:70px;
    padding:5px;
    width:40%;
    height:30px;
  }

  #editpastentry {
    position:absolute;
    font: white;
    background-color: #40e0d0;
    margin-top:50px;
    top:28.5%;
    margin-bottom:-30px;
    margin-left:70px;
    left:40%;
    margin-right:70px;
    height:44px;
    width:150px;
    display:inline;
    text-align:center;
  }

  #uname3{
    margin-right: 177px;
    font-size: large;
  }
  #psw3{
    margin-right: 177px;
    font-size: large;
  }
  #newpsw{
    margin-right: 177px;
    font-size: large;
  }
  #newpswC{
    margin-right: 177px;
    font-size: large;
  }
  #userC{
    width:225px;
    height:25px;
    background-color: white;
  }
  #passC{
    width:225px;
    height:25px;
    background-color: white;
  }
  #newPass{
    width:225px;
    height:25px;
    background-color: white;
  }
  #newPassC{
    width:225px;
    height:25px;
    background-color: white;
  }

  #searchlogoutbtn {
    position:absolute;
    bottom:0;
    margin-left:-50px;
    left:47%;
    width: 15%;
    background-color: #f44336;
  }

  .calendar-wrapper {
    position:absolute;
    width: 360px;
    margin: 3em auto;
    padding: 2em;
    border: 1px solid #dcdcff;
    border-radius: 5px;
    background: #fff;
    justify-content:top;
    float:right;
    float:top;
    width:auto;
    margin-right:0;
    right:1%;
    margin-top:0;
    top:3%;
    display:inline;
    overflow:hidden;
  }
  
  .calendar-wrapper table {
    clear: both;
    width: 100%;
    border: 1px solid #dcdcff;
    border-radius: 3px;
    border-collapse: collapse;
    color: #444;
    justify-content:right;
    float:right;
  }
  .calendar-wrapper td {
    height: 48px;
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid #dcdcff;
    border-top: 1px solid #dcdcff;
    width: 14.28571429%;
  }
  thead td {
    border: none;
    color: #28283b;
    text-transform: uppercase;
    font-size: 1.5em;
  }
  
  td.not-current {
    color: #c0c0c0;
  }
  
  td.today {
    font-weight: 700;
    color: #28283b;
    font-size: 1.5em;
  }
  
  #btnPrev {
    float: left;
    margin-bottom: 20px;
  }
  #btnPrev:before {
    content: '\f104';
    font-family: FontAwesome;
    padding-right: 4px;
  }
  #btnNext {
    float: right;
    margin-bottom: 20px;
  }
  
  #btnNext:after {
    content: '\f105';
    font-family: FontAwesome;
    padding-left: 4px;
  }
  
  #btnPrev,
  #btnNext {
    background: transparent;
    border: none;
    outline: none;
    font-size: 1em;
    color: #c0c0c0;
    cursor: pointer;
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    transition: all 0.3s ease;
  }
  
  #btnPrev:hover,
  #btnNext:hover {
    color: #28283b;
    font-weight: bold;
  }