/* ============================================================
   Mobile adaptation for registration form page (usu/index.html)
   Applies when screen <= 768px
   ============================================================ */

@media screen and (max-width: 768px) {

  html, body { width: 100% !important; overflow-x: hidden; }
  body { background-size: 100% 100%; }

  #reg { width: 100% !important; }
  .tp_login {
    width: 100% !important;
    padding: 10px 0 !important;
    box-sizing: border-box;
  }
  .tp_login .top { height: 15px !important; background-size: 100% 100%; }
  .tp_login .foot { height: 15px !important; background-size: 100% 100%; }
  .tp_login .cen {
    width: 92% !important;
    padding: 10px 4% !important;
    box-sizing: content-box;
    background-size: 100% 100%;
  }

  /* form tables: stack label / input / hint vertically */
  .tp_login .cen table {
    float: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    margin: 0 !important;
  }
  .tp_login .cen table tr {
    float: none !important;
    display: block;
    width: 100% !important;
    padding-left: 0 !important;
    height: auto !important;
    margin-bottom: 4px;
  }
  .tp_login .cen table tr td {
    display: block;
    width: auto !important;
    height: auto !important;
    padding: 3px 0 !important;
    text-align: left;
  }

  /* inputs stretch to full width */
  .tp_login .divinput,
  .tp_login .divinppu,
  .tp_login .divinppp {
    width: 96% !important;
    max-width: 320px;
    box-sizing: border-box;
    background-size: 100% 100%;
  }
  .tp_login .divinput input { width: 94% !important; }
  .tp_login .divinppu input,
  .tp_login .divinppp input { width: 80% !important; }

  .tp_login .timg { margin: 6px 0 !important; }
  .tp_login .blogin { margin: 10px auto !important; }
  #msg { margin: 10px 0 0 0 !important; }

  /* captcha row: input + image side by side */
  .tp_login .cen table tr td UL { width: 100% !important; }
  .tp_login .cen table tr td UL LI { width: 50% !important; }

}