@charset "UTF-8";

* { padding:0; margin:0; }

body { background:url('../../img/view/logon/img-background.jpg') center center no-repeat; background-size:cover; }

#ly-Layout { width:100%; height:100vh; min-width:340px; display:-ms-flexbox; display:flex; justify-content:center; }

#ly-Logon { width:100%; min-width:300px; max-width:390px; padding:30px 40px; margin:auto; background-color:rgba(0, 131, 62, .7);  border:2px solid rgba(255, 255, 255, .3); }
#ly-Logon fieldset { border:none; }
#ly-Logon fieldset legend { width:1px; height:1px; overflow:hidden; position:absolute; top:-99999px; left:-99999px; }
#ly-Logon fieldset div.logo { text-align:center; margin-bottom:30px; }
#ly-Logon fieldset div.logo img { width:100%; max-width:300px; }
#ly-Logon fieldset div.input div:first-of-type { margin-bottom:10px; }
#ly-Logon fieldset div.input input { width:100%; box-shadow:2px 2px 2px rgba(0, 0, 0, .2); padding:15px 18px; color:#fff; font-size:1em; background-color:rgba(0, 0, 0, .7); border:none; border-bottom:1px solid transparent; }
#ly-Logon fieldset div.input input:focus { border-color:#ffd317; background-color:rgba(10, 0, 0, .7);  }
#ly-Logon fieldset div.button { margin-top:30px; text-align:center; }
#ly-Logon fieldset div.button button { padding:10px 30px; font-size:1em; font-weight:900; border:2px solid #fff; border-radius:200px; background-color:#00833e; color:#fff; box-shadow:1px 1px 2px rgba(0, 0, 0, .05); }
#ly-Logon fieldset div.button button:focus,
#ly-Logon fieldset div.button button:hover { background-color:#ffd317; color:#000; text-decoration:underline; }