body {
    	max-width: 400px;
      width: 100%;
      height: 560px;
      margin: 0 auto;
      font-family: sans-serif;
    }

    /* disable swipe down refresh */
    #top {
      position: relative;
      overscroll-behavior-y: contain;
    }

    ::-webkit-scrollbar {
        display: none;
    }

    #contain {
      background-color: #fff;
      max-width: 400px;
      width: 100%;
      margin: 0 auto;
      height: 560px;
    }

    #container {
      background-color: transparent;
    }

    form {
      margin-bottom: 0em;
    }

    fieldset {
      margin: 0;
      padding: 0;
      border: 0;
    }

    .form__field {
      position: relative;
      text-align: center;
    }

    .form__actions {
      margin-bottom: 10px;
    }

    input {
      height: 26px;
      line-height: 26px;
    }

    input, textarea {
      width: 90%;
      margin: 1px 0;
      padding: 1rem .5rem;
      font-size: 24px;
      /*border-width: 3px;
      border-radius: .5em;*/
      color: #333;
      /*outline: none !important;**/
      border: #ddd 2px solid;
    }

    input:focus, textarea:focus {

      /*outline: none !important;**/
      border: orange 2px solid;

    }

    input::selection, textarea::selection {
      color: white;
      background-color: #032344;
    }

    #delBtn1, #delBtn2, #btnNote, #note-close, #submit, #storage-size, #userid, #showhistory, #signin, #acctpage,#search {
      user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
    }

    button:focus {
      outline: none !important;
      /*border: #143455 3px solid;*/
    }

    .btn {
      display: block;
      width: 95%;
      color: white;
      margin: 0 auto -15px;
      text-align: center;
      white-space: nowrap;
      user-select: none;
      transition:all .2s ease-in-out;
      font-size: .95rem;
      /*padding: 1rem 0;*/
      border: 2px solid rgba(0,0,0,.15);
      border-radius: .5rem;
      cursor:pointer;
    }

    #delBtn1, #delBtn2, #btnNote {
      opacity: 1;
      position: absolute;
      margin: 0 ;
      z-index: 5;
      top: 3px;
      right: 3%;
      width: 58px;
      height: 58px;
      background-color: #eee;
      color: #880000;
      font-weight: bold;
      border-radius: 0;
      border-width: 0px 0px 1px 1px;
    }

    #delBtn1, #btnNote {
      border-bottom-width: 0px;
    }

    #info-box, #alert-box {
      display:none;
      position: absolute;
      top:0;
      left:0;
      z-index: 100;
      width:100%;
      /*height: 560px;*/
      margin: 0;
      padding: 0;
      background-color: transparent;
    }

    #info-msg, #alert-msg {
      margin: 2px;
      padding: 0 20px 20px 20px;
      color: #032344;
      background-color: #ffffff;
      border: 3px orange solid;
      font-size: .9rem;
    }

    #alert-msg {
      border: 3px red solid;
    }

    #dont-show, #info-close {
      padding: 10px;
    }

    #loc-err, #sig-err, #num-err, #note-err {
      display: block;
      color: red;
      font-weight: 500;
      padding-left: 10px;
    }

    #note_screen {
      position: absolute;
      top: 0;
      z-index: 15;
      display: none;
      max-width: 400px;
      width: 100%;
      height: 215px;
      background-color: #ddd;
    }

    #actions {
      position: fixed;
      top: 0;
      z-index: 10;
      display: none;
      max-width: 400px;
      width: 100%;
      height: 500px;
      background-color: #fff;
    }
  
    #pickups {
      width: 50%;
      float: left;
    }

    #dropoffs {
      width: 50%;
      float: left;
    }

    .pickup {
      margin: 2px auto;
      background-color: #049;
      padding: 1.25em 0;
    }

    .dropoff {
      margin: 2px auto;
      background-color: green;
      padding: 1.25em 0;
    }

    #signature {
      display: none;
      margin: 0 auto 5px;
    }

    .btn--primary {
      margin-top: 0px;
      padding: 2.5em 0;
      background-color: #032344;
      width: 95%;
    }

    #userinfo {
      width: 95%;
      margin: 0 auto;
      color: #032344;
      font-size: 24px;
      text-align: center;
      cursor: default;
    }
    /*
    #userlogin, #register, #userinfo {
      width: 95%;
      margin: 0 auto;
      color: #143455;
      font-size: 24px;
      text-align: center;
      cursor: default;
    }

    #userlogin, #register {
      display: none;
      margin: 10px auto;
      height: 230px;
      padding-top: 20px;
      background-color: #143455;
    }

    #register {
      height: 310px;
    }

    #adminpass, #setuser, #new_email, #new_user, #new_pass {
      width: 80%;
      text-align: center;
      margin-top: 10px;
    }

    #closeuser, #saveuser, #new_cancel, #new_submit {
      margin: 10px auto;
      width: 80%;
      color: #444444;
      border: 1px solid white;
      padding: 10px;
      cursor: pointer;
    }
    */
    .width50 {
      width: 50%;
      float: left;
    }

    span#userid {
      text-align: center;
    }

    #storage {
      margin: 20px auto;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      color: #fff;
      background-color: #032344;
      text-align: center;
    }

    #storage h1 {
      padding: 10px;
      margin: 0;
      -webkit-margin-before: 0;
      -webkit-margin-after: 0;
    }

    #controls {
      position: fixed;
      width:100%;
      background-color: white;
      max-width: 400px;
      height: 40px;
      padding-top: 10px;
      z-index: 20;
   }

    div.showhide {
      margin-top: 0px;
      width: 33.33%;
      float: left;
      text-align: center;
    }

    div.showhide > button {
      width: 85%;
      padding: 10px 0;
      color: white;
      background-color: #032344;
      border-color: #032344;

    }

    button:hover {
      /*background-color: #254566;
      border-color: #143455;*/
      opacity: .9;
    }

    button:active {
      /*background-color: #143455;
      border-color: #143455;*/
      opacity: 1;
    }

    #signin, #signout, #hidehistory {
      display: none;
      color: white;
      background-color:#800;
      border-color:#800;
    }

    #datadump {
      display: none;
      margin-top: 0;
      padding: 50px 0 10px 10px;
      background-color: white;
    }

    #datadump p{
      margin: 10px 0;
    }

    @media (min-width: 429px) {
      #container {
        margin-top:50px;
        height:600px;
        background-image: url("phonebg.png");
        background-repeat: no-repeat;
        background-position: top;
      }
      #contain {
        position:relative;
        top: 60px;
        width: 260px;
        height: 450px;
        background-color: #fff;
      }
      h1 {
        font-size: 1.35em;
      }
      .btn--primary {
        padding:3em 0;
      }
      input {
        height: 14px;
        line-height: 14px;
      }
      input, textarea {
        font-size: 12px;
        padding: .6rem .4rem;
      }

      #delBtn1, #delBtn2, #btnNote {
        height: 33px;
        width: 33px;
      }

      #info-box, #alert-box {
        width:100%;
        height:450px;
      }

      #info-msg, #alert-msg {
        font-size: .6875rem;
      }

      #loc-err, #sig-err, #num-err, #note-err {
        font-size: 14px;
      }
      #actions {
        top: 110px;
        width:260px;
        height: 450px;
        background-color: #fff;
      }
      .btn {
        font-size: .5em;
      }
      #storage {
        width: 45px;
        height: 45px;
      }
      #userinfo {
        font-size: 18px;
      }
      #controls {
        position: sticky;
      }
      #datadump {
        padding-top: 0px;
        height: 360px;
        overflow: scroll;
      }
    }