@import url('https://fonts.googleapis.com/css?family=Roboto');

  
    @media screen, print {
      html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html {
        overflow: hidden;
      }

      html:after {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url("../img/lake-view.jpg") no-repeat center;
        background-size: cover;
        background-attachment: fixed;
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
        filter: blur(5px);
        z-index: -1;
      }

      body {
        background-color: rgba( 255, 255, 255, 0 );
        Xfont-family: Arial, Sans-Serif;
        font-family: Roboto;
        font-size: 100%;
        overflow: auto;
      }

      .wrapper {
        margin: 30px auto;
        background-color: rgba( 255, 255, 255, 0.8 );
        box-sizing: border-box;
      }

      .wrapper * {
        box-sizing: border-box;
      }
      
      .dark {
        background-color: rgba( 0, 0, 0, 0.7 );
      }
      
      .center {
        text-align: center;
      }
      
      .invisible {
        background-color: rgba( 255, 255, 255, 0 );
      }

      /* wrapper sizing */
      .small {
        width: 340px;
      }

      .medium {
        width: 100%;
        max-width: 768px;
      }

      .large {
        width: 100%;
        min-height: 100%;
        max-width: 768px;
      }

      form {
        background-color: rgba( 255, 255, 255, 0 );
        border: 1px solid rgba(255, 255, 255, 0);
        padding: 0 10px;
        width: 100%;
      }
      
      section {
        margin: 0 auto;
        display: flex;
        Xjustify-content: flex-start;
        justify-content: center;
      }

      .column {
        font-family: Roboto;
        background-color: rgba(255, 0, 0, 0);
        border: 1px solid rgba(255, 255, 255, 0);
        margin: 10px 10px 0 10px;
        /* flex default */
        flex: 0 1 50%;
      }

      select,
      textarea,
      input[type='text'],
      input[type='number'],
      input[type='date'],
      input[type='email'],
      input[type='phone'],
      input[type='password'] {
        border-radius: 2px;
        border: 1px solid rgba(102, 102, 102, 0.9);
        padding: 10px;
        color: #333;
        font-size: 14px;
        margin-top: 5px;
      }

      input[type='date'] {
        font-family: Roboto;
        padding: 8px 10px 8px 10px;
      }

      select, input, textarea {
        width: 100%;
        -webkit-appearance: none;
        appearance: none;
      }

      form .column label {
        display: block;
        font-weight: bold;
        font-size: 13px;
        white-space: nowrap;
        margin-top: 5px;
      }

      button {
        border-radius: 3px;
        border: 1px solid black;
        padding: 10px 12px;
        font-size: 14px;
        cursor: pointer;
        text-align: center;
        width: 100%;
      }

      button.submit { background-color: rgb( 60, 108, 165, 0.4 ); }
      button.submit:focus { background-color: rgb( 60, 108, 165, 0.8 ); }
      button.submit:hover { background-color: rgb( 60, 108, 165, 0.8 ); }

      button.cancel { background-color: rgb( 255, 0, 0, 0.4); }
      button.cancel:focus { background-color: rgb( 255, 0, 0, 0.8); }
      button.cancel:hover { background-color: rgb( 255, 0, 0, 0.8); }

      button.reset { background-color: rgb( 255, 255, 100, 0.4); }
      button.reset:focus { background-color: rgb( 255, 255, 100, 0.8); }
      button.reset:hover { background-color: rgb( 255, 255, 100, 0.8); }

      button.passive { background-color: rgb( 0, 255, 0, 0.4); }
      button.passive:focus { background-color: rgb( 0, 255, 0, 0.8); }
      button.passive:hover { background-color: rgb( 0, 255, 0, 0.8); }

      // login and staff pages
      h3.success { color: green; text-align: center; }
      h3.error { color: red; text-align: center; }
    }