*, *:before, *:after {
         -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
      }
      
      html, body {
          height: 100%;
          font-family: "Lato", sans-serif;
          margin:0;
          padding:0;
          background-image: linear-gradient(#EFEFEF, #505050);
          background-repeat: no-repeat;
          background-attachment: fixed;
      }
      .sidenav {      /*Main sidnav*/
          width: 0;
          position: fixed;
          z-index: 1;
          top: 0;
          left: 0;
          bottom: 0;
          background-color: #000A0F;
          overflow-x: hidden;
          transition: .5s;
          padding-top: 0px;
      }

      .sidenav a{           /*sidenav buttons*/
         padding: 6px 8px 6px 16px;
         text-decoration: none;
         font-size: 20px;
         color: #f1f1f1;
         display: block;
         border: none;
         background: none;
         text-align: left;
         cursor: pointer;
         transition: 0.3s;
      }

      .sidenav a:hover {      /*sidnav button hover*/
          color: #818181;
      }

      .main {
         top: 46px;
         width:100%;
         font-size: 20px;
      }

      .active {
         background-color: #000A0F;
         color: white;
      }

      .sidenav .closebtn {
         position: absolute;
         display:inline-block;
         color: #f1f1f1;
         text-align: center;
         width: 60px;
         top: 0px;
         right: 0px;
         font-size: 30px;
         padding: 6px 0px 6px 0px;
      }
      
      .sidenav .usernm {
         display:inline-block;
         color: #f1f1f1;
         text-align: left;
         width: 185px;
         top: 0px;
         left: 0px;
         font-size: 20px;
         padding: 13px 0px 10px 15px;
      }
      
      .header {
        top: 0;
        left: 0px;
        width:100%;
        height: 46px;
        display: inline-block;
        margin-top: 0px;
        margin-bottom: 0px;
        background-color: #004063;
        border-style: solid;
        border-width: 0px 1px 0px 1px;
        border-color: #f1f1f1;
      }
      
      .openbt {
         float: left;
         width:160px;
         right: 0;
         display: block;
         font-size:30px;
         cursor:pointer;
         background-color:#004063;
         padding: 3px 0px 2px 20px;
         color: #f1f1f1;
         border-style: solid;
         border-width: 0px 1px 0px 0px;
         border-color: #f1f1f1;
      }
      
      .openbt:hover {      /*sidnav button hover*/
         color: #818181;
      }
      
      .wrapper {
        text-align: center;  
      }
      
      .form {
        font-size: 18px;
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 20px;
        background-color: white;
        width: 85%;
        min-width: 300px;
        box-shadow: 10px 10px 7px rgba(100, 100, 100, 0.7);
        border-radius: 10px;
        overflow-x:auto;
      }
      
      .button {
        box-shadow: 5px 5px 7px rgba(100, 100, 100, 0.7);
        color: #000000;
        display: inline-block;
        font-size: 25px;
        padding: 0px 10px 0px 10px;
        background-color: white;
      }
      
      .button:hover {
        background-color: #CCCCCC;
      }
      
      @media screen and (max-height: 200px) {
        .sidenav {padding-top: 15px;}
        .sidenav a {font-size: 18px;}
      }
      
      .error {
        color: #FF0000;
        font-size: 13;
      }
      
      .note {
        font-size: 13;
        font-style: italic;
      }