﻿html{height:100%;background:linear-gradient(rgba(196,102,0,0.2),rgba(155,89,182,0.2)),url(/img/background//warping.png)}
#LoginDiv{position:fixed;left:50%;top:30%;transform:translate(-50%,-30%);width:360px;min-height:240px;border-radius:1em;background:rgba(248,248,248,.9);box-shadow:0 0 15px 1px rgba(0,0,0,.4)}
#LoginDiv>section{width:80%;height:50px;margin:0 auto;box-shadow:rgba(0,0,0,0.2) 0px 15px 5px -12px;color:#039;text-align:center;font-size:16px;line-height:46px}
#LoginDiv>section>i{display:inline-flex;position:relative;top:7px;width:3.5rem;height:2.4rem;background:url(/img/ilogo_list.png) no-repeat -184px 0;background-size:240px 30px}
.loginform li{display:flex;justify-content:space-between;width:88%;padding:1rem .8rem;text-align:center}
li>span.sic{display:inline-flex;position:relative;top:0;left:40px;width:40px;background:#fff;border:solid 2px #09f;border-right:solid 1px #09f;border-top-left-radius:.4em;border-bottom-left-radius:.4em}
li>input[type=text],li>input[type=password]{display:inline-flex;width:320px;margin-right:1rem;padding:0.8rem 4rem;border:solid 2px #09f;border-radius:.4em}
svg.icon{width:1em;height:1em;position:relative;z-index:9;padding-right:1rem}
svg.iac{font-size:2.6rem;top:0px;left:5px}
svg.ipc{font-size:2.9rem;top:2px;left:5px}
svg.ivc{font-size:2.4rem;top:4px;left:5px}
li>input.inpva{width:24%}
li>img{display:inline-flex;position:relative;width:22%;right:1rem}
li>.btnlg{position:relative;left:12.8rem}

.btnlg{user-select:none;display:flex;justify-content:center;align-self:center;cursor:pointer;width:150px;height:40px;background-image:linear-gradient(to top,#d8d9db 0%,#fff 80%,#fdfdfd 100%);border-radius:24px;border:1px solid #8f9092;box-shadow:0 4px 3px 1px #fcfcfc,0 6px 8px #d6d7d9,0 -4px 4px #cecfd1,0 -6px 4px #fefefe,inset 0 0 3px 0 #cecfd1;transition:all 0.2s ease;font-weight:600;color:#606060;text-shadow:0 1px #fff}
.btnlg > *{font-size:16px;line-height:32px;transition:transform 0.2s ease}
.btnlg:hover:not([disabled]){box-shadow:0 4px 3px 1px #fcfcfc,0 6px 8px #d6d7d9,0 -4px 4px #cecfd1,0 -6px 4px #fefefe,inset 0 0 3px 3px #cecfd1}
.btnlg:hover:not([disabled]) > *{transform:scale(0.975)}
.btnlg:focus:not(:active){animation:active 0.9s alternate infinite;outline:none}
.btnlg:active:not([disabled]){box-shadow:0 4px 3px 1px #fcfcfc,0 6px 8px #d6d7d9,0 -4px 4px #cecfd1,0 -6px 4px #fefefe,inset 0 0 5px 3px #999,inset 0 0 30px #aaa}
.btnlg:active:not([disabled]) > *{transform:scale(0.95)}
.btnlg:disabled{opacity:0.6}

@keyframes active{
     from{box-shadow:0 4px 3px 1px #fcfcfc,0 6px 8px #d6d7d9,0 -4px 4px #cecfd1,0 -6px 4px #fefefe,inset 0 0 10px 0px rgba(0,0,250,0.6)}
     to{box-shadow:0 4px 3px 1px #fcfcfc,0 6px 8px #d6d7d9,0 -4px 4px #cecfd1,0 -6px 4px #fefefe,inset 0 0 3px 3px #cecfd1}
}