@charset "utf-8";
@import url('comiis_style.css');
html, body {width:100%;height:100%;min-height:600px}
body {display:flex;flex-direction:column;justify-content:space-between;align-items:center;background:#c8e2fb;background-image:linear-gradient(45deg, #fbecd6, #c8e2fb, #fbecd6);font-family:sans-serif}
body.st-d {background:#0a0a0a}
*, *::before, *::after {box-sizing:inherit}
.darkmode {align-self:flex-end;width:45px;height:45px;border-radius:0 0 0 45px;overflow:hidden;cursor:pointer}
.st-a .darkmode {background:rgba(255, 255, 255, 0.6)}
.st-d.st-a .darkmode {background:#131313}
.darkmode > div {position:relative;height:100%}
.darkmode .dk-light, .darkmode .dk-dark {position:absolute;top:0;right:0;transform-origin:100% 0;transition:transform 0.4s ease}
.st-l .dk-dark {transform:rotate(-90deg)}
.st-d .dk-light {transform:rotate(90deg)}
.st-a .dk-light {transform:rotate(35deg)}
.st-a .dk-dark {transform:rotate(-35deg)}
.darkmode svg {fill:#838c94;margin:6px 6px 0 0}
.darkmode ul {display:block;position:absolute;right:14px;background:var(--admincp-ff);padding:8px 0;border-radius:6px;box-shadow:0px 3px 6px rgba(0, 0, 0, 0.2);z-index:10}
.darkmode ul li {display:block;padding:4px 10px;white-space:nowrap}
.darkmode ul li:hover {background:#aaa}
.darkmode ul li.current {background:rgb(247, 206, 158);color:var(--admincp-ff)}
.container {display:flex;border-radius:10px;overflow:hidden;box-shadow:0 0 10px rgba(0, 0, 0, 0.1);transition:box-shadow 0.3s}
.container:hover {box-shadow:0 5px 20px rgba(0, 0, 0, 0.2)}
.intro {background:#1a9bfc url(./loginbg.svg) no-repeat left bottom;background-size:200px;color:var(--admincp-ff);width:350px;padding:30px;position:relative}
.intro:after {content:'';background:linear-gradient(90deg, #393f47, #1d1f24);width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1}
.st-d .intro {background-color:#000;color:var(--admincp-fc)}
.intro h3 {font-size:24px;padding-bottom:15px;border-bottom:1px solid rgba(255, 255, 255, 0.3);margin-bottom:15px;-webkit-background-clip:text;color:var(--admincp-ff)}
.intro h3 span {font-weight:600;margin-right:10px;font-size:28px}
.intro p {font-size:14px;opacity:0.6;background-image:linear-gradient(to bottom, #e8a833, #ebc874, #ae7222);-webkit-background-clip:text;color:var(--admincp-ff)}
.intro p a {color:var(--admincp-ff)}
.intro svg {display:flex;position:absolute;bottom:1.6rem}
.st-d .intro img {filter:none;opacity:0.6}
.loginbox {display:flex;flex-direction:column;width:350px;padding:30px;background:var(--admincp-ff)}
.st-d .loginbox {background:#181818}
.loginbox img {margin:5px auto 30px;width:220px;height:auto}
.loginbox img.user_avatar {margin:5px auto 0;width:80px;border-radius:6px;box-shadow:0px 1px 6px rgba(0, 0, 0, 0.2)}
.loginbox h1 {font-size:16px;margin:15px 0 20px;text-align:center}
.st-d .loginbox h1 {color:var(--admincp-fc)}
.loginbox p {display:flex;align-items:center;margin:5px 0;color:var(--admincp-fc);font-size:14px;line-height:20px;cursor:pointer;transform:translate(0, -7px)}
.loginbox p span {display:inline-flex;width:14px;height:14px;border:1px solid;border-radius:4px;margin-right:4px}
.loginbox .loginqa {display:none}
.intro svg #logo {fill:rgba(255,255,255,.7)}
.qrcodeswitch {width:100%;display:inherit;justify-content:flex-end;position:relative;top:-20px;line-height:0px;right:-30px;margin-top:-10px;height:0px}
.qrcodeswitch a {width:0;height:0;border-top:50px solid #1d1f24;border-left:50px solid transparent;text-decoration:none;border-top-right-radius:10px}
.qrcodeswitch a:before {position:relative;top:-35px;left:-25px;color:#ccc;font-size:20px}
.qrcodeswitch a.qrcode:before {font-style:normal;font-family:mitframeicon;content:"\e621"}
.qrcodeswitch a.pwd:before {font-style:normal;font-family:mitframeicon;content:"\e617"}
#qrcodeimg img {width:250px !important;height:250px !important;margin:0 !important}
#qrcodebox {text-align:center}
footer {padding:20px 0 30px;font-size:12px;color:var(--admincp-fa);user-select:none}
footer {opacity:0.6}
footer a {color:var(--admincp-fa);text-decoration:none}
footer em {font-style:normal}
input, select, button, a.btn {height:38px;margin-bottom:16px;padding:7px 10px;font-size:14px;border:1px solid var(--admincp-bordera);background:var(--admincp-ff);color:var(--admincp-fa);resize:none;border-radius:6px}
.st-d input, .st-d select {background:#222;border-color:var(--admincp-fa);color:var(--admincp-fb)}
input:focus, select:focus {border-color:#1A9BFC;background:#F5F9FD;outline:0;box-shadow:0 0 2px 1px rgba(43, 122, 205, 0.2)}
 button:focus, a.btn:focus {border-color:#1A9BFC;background:var(--admincp-color);outline:0;box-shadow:0 0 2px 1px rgba(43, 122, 205, 0.2);opacity:1}
.st-d input:focus, .st-d select:focus, .st-d button:focus, .st-d a.btn:focus {opacity:0.8;box-shadow:none}
.sslcert {cursor:pointer;height:38px;padding:6px 11px;margin-bottom:16px;border:1px solid var(--admincp-bordera);border-radius:5px;font-size:16px}
.st-d .sslcert {border-color:#666;color:#777}
input[type="file"] {display:none}
button, a.btn {height:40px;margin-bottom:0;border-color:#1a9bfc;background:#1a9bfc;color:var(--admincp-ff);cursor:pointer}
button:hover, a.btn:hover {opacity:0.8}
a.btn {line-height:26px}
.st-d button, .st-d a.btn {}
a.btn {text-align:center;text-decoration:none;margin-top:26px;margin-bottom:26px}
@media (max-width:768px) {
.container {flex-direction:column}
.loginbox img.logo {display:none}
}
@media (max-width:576px) {
body {background:var(--admincp-ff)}
body.st-d {background:#181818}
.darkmode {position:absolute}
.st-a .darkmode {background:rgba(255, 255, 255, 0.1)}
.darkmode svg {fill:rgba(255, 255, 255, 0.2)}
.container {border-radius:0;box-shadow:none}
.container:hover {box-shadow:none}
.intro img {display:none}
.intro, .loginbox {width:100%}
.intro svg{position:inherit;bottom:-10px}
.intro p {padding-bottom:15px}
footer {color:var(--admincp-fc);text-align:center;margin-bottom:10px}
footer a {color:var(--admincp-fc)}
}