@charset "UTF-8";

* { padding:0; margin:0; }

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

button:focus,
input:focus,
select:focus,
textarea:focus { outline:none; }

#ly-Layout { width:100%; height:100%; min-width:300px; display:flex; align-items:center; justify-content:center; }

#ly-Login { width:100%; min-width:280px; max-width:420px; padding:30px 35px; border:1px solid rgba(255, 255, 255, .2); background-color:rgba(0, 0, 0, .8); transition:all ease .5s; transition-property:background; }
#ly-Login:hover { background-color:rgba(0, 0, 0, .6); }
#ly-Login h1 { margin-bottom:30px; text-align:center; }
#ly-Login h1 img { height:50px; }
#ly-Login fieldset { border:none; }
#ly-Login div.input input { width:100%; padding:10px 15px; color:#fff; font-size:1em; background-color:rgba(0, 0, 0, .75); border:none; border-bottom:1px solid rgba(255, 255, 255, .2);  transition:all ease .2s; transition-property:border, background; }
#ly-Login div.input input:focus { border-color:#ff0; background-color:rgba(25, 25, 25, .75);  }
#ly-Login div.button { margin-top:20px; text-align:center; }
#ly-Login div.button div.regist { margin-top:10px; }
#ly-Login div.button div button { width:100%; padding:10px 30px; font-size:1em; text-shadow:0 0 4px #000; background-color:transparent; cursor:pointer; transition:all ease .2s; transition-property:border, background, color; }
#ly-Login div.button div.login button { border:2px solid rgba(255, 255, 255, .5); font-weight:700; color:#fff; }
#ly-Login div.button div.login button:focus,
#ly-Login div.button div.login button:hover { border-color:rgba(0, 100, 0, .4); background-color:rgba(0, 100, 0, .4); color:#fff; }
#ly-Login div.button div.regist button { border:none; color:#aaa; }
#ly-Login div.button div.regist button:focus,
#ly-Login div.button div.regist button:hover { color:#fff; }

#obj-Profile { position:relative; }
#obj-Profile label { width:122px; height:122px; display:block; }
#obj-Profile label div.avatar { width:100%; height:100%; background-color:#fff; border:1px solid #f0f0f0; border-radius:200px; overflow:hidden; }
#obj-Profile label div.avatar img { width:100%; height:100%; }
#obj-Profile label input { width:1px; height:1px; position:absolute; top:0; z-index:-1; opacity:0; }
#obj-Profile label input:focus + div.avatar,
#obj-Profile label input:hover + div.avatar { border-color:#aaa; }
#obj-Profile div.close { width:30px; height:30px; position:absolute; top:10px; left:90px; display:none; }
#obj-Profile div.close button { width:100%; height:100%; border:1px solid #dadada; border-radius:200px; background-color:#fff; text-align:center; color:#a00; }
#obj-Profile div.close button:focus,
#obj-Profile div.close button:hover { border-color:#a00; background-color:#a00; color:#fff; }
#obj-Profile.active div.close { display:block; }

*.fixed-popup div.input > dl > dd.address div { display:flex; }
*.fixed-popup div.input > dl > dd.address div button { padding-left:12px; padding-right:12px; border:1px solid transparent; background-color:#0078e5; font-size:.9em; color:#fff; transition:all ease .2s; transition-property:border, background, color; }
*.fixed-popup div.input > dl > dd.address div button:focus,
*.fixed-popup div.input > dl > dd.address div button:hover { border-color:#0078e5; background-color:#fff; color:#0078e5; }