html,body,div{margin:0;padding:0}
div,input{box-sizing:border-box}
html,body{position:relative;background-color:whitesmoke;height:100%;font-family:'arial regular',arial,sans-serif;color:#333}
a{color:#427fed;cursor:pointer;text-decoration:none;font-size:15px}
a:hover{text-decoration:underline}
h2{font-size:18px;font-weight:normal;margin:0 0 10px}

.clearfix{display:block;clear:both}
.hide{display:none}
.pull-right{float:right}

.header {
    text-align:center;
    font-weight: 400;
    padding-top: 30px;
}

.container {
    width:100%;
    max-width:420px;
    margin:0 auto;
    font-family: 'Open Sans', arial;
    -webkit-font-smoothing: antialiased;
    color: #555;
    font-size: 18px;
}

.container input {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.title {
    font-family: 'Courier New', Courier, 'Open Sans', arial, monospace;
    font-size: 56px;
    line-height: 56px;
    font-weight: bold;
}

.subtitle {
    font-weight: 400;
    font-family: 'Open Sans', arial;
    font-size: 18px;
    line-height: 20px;
}

#main{padding-bottom:10px}

#login-form{margin:20px 8px;padding:35px 30px 20px;background-color:white;border:1px #EEE solid;border-radius:4px;box-shadow:0 1px 4px #DDD}
#auth-panel{margin:20px 0;background-color:white;border-top:1px #EEE solid;border-bottom:1px #EEE solid;box-shadow:0 1px 4px #DDD;padding:20px}
#auth-panel #account-control{line-height:32px;color:#888;padding:0 10px 10px;border-bottom:1px solid #CCC;margin-bottom:10px;text-align:right}
#account-control .avatar{width:30px;height:30px;border:1px solid #EEE;vertical-align:middle}
#account-control .account-name{display:inline-block;min-width:80px;max-width:120px;vertical-align:middle;overflow:hidden;text-overflow:ellipsis}
#info-panel #third-party{padding:10px 0 20px;position:relative}
#third-party-name{cursor:pointer;display:inline-block;position:relative;font-size:22px;font-weight:bold}
#third-party-name .i-dropdown{position:absolute;right:-13px;top:12px}
#third-party #redirect-info{background:white;font-size:14px;width:240px;border:1px solid #ccc;border-radius:3px;padding:10px;position:absolute;z-index:99;top:45px;left:-1px;word-wrap:break-word;word-break:break-all}
#third-party #redirect-info:before{content:" ";display:block;border-color:#ccc transparent;border-style:solid;border-width:0 8px 8px 8px;width:0;height:0;position:absolute;top:-8px;left:30px}
#third-party #redirect-info:after{content:" ";display:block;border-color:white transparent;border-style:solid;border-width:0 8px 8px 8px;width:0;height:0;position:absolute;top:-7px;left:30px}
#info-panel #info-title{font-size:18px}#info-list{margin:0;padding:10px 0 0}
#info-list li{display:block;position:relative;font-size:16px;line-height:20px;padding:14px 0 14px 25px;border-color:#EEE;border-style:solid;border-width:1px 0;margin:0 0 -1px;word-break:break-all;word-wrap:break-word}
#info-list li.hide{display:none}
#info-list #more-info{cursor:pointer}
#info-list #more-info:hover{color:#222;background-color:#efefef}
#info-list li span{position:absolute;z-index:10;left:1px;top:50%;margin-top:-10px}
.display-all li.hide{display:block !important}
#confirm-action{padding-top:20px}
#confirm-info{font-size:14px}
#c-a-btns{padding-top:10px;min-height:42px}
#c-a-btns .btn-primary{margin-left:20px}
.warn-info{font-size:14px;line-height:26px;color:#F33;vertical-align:middle;margin-bottom:10px}
.form-input{display:block;width:100%;font-size:16px;padding:11px 11px 11px 42px;color:#666;margin:0;outline:0;background-color:#fff;border:1px solid #ccc;border-radius:3px;display:block;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}
.input-control{position:relative;margin-bottom:10px}
.input-control .icon{position:absolute;top:9px;left:8px;z-index:10}
.action-control{margin-top:20px}
.form-input:focus{color:#333;border:1px solid #56b4ef;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.05),0 0 8px rgba(82,168,236,0.6);box-shadow:inset 0 1px 3px rgba(0,0,0,0.05),0 0 8px rgba(82,168,236,0.6)}
.captcha-input{padding-right:110px;position:relative}
.captcha-input img{display:block;width:100px;position:absolute;top:0;right:0;border-radius:3px;border:1px solid #ccc}
.btn{text-decoration:none;display:inline-block;min-width:46px;text-align:center;color:#666;font-size:14px;font-weight:700;height:30px;padding:0;line-height:30px;border-radius:3px;cursor:default;background-color:#f5f5f5;background-image:-webkit-linear-gradient(top,#f5f5f5,#f1f1f1);background-image:-moz-linear-gradient(top,#f5f5f5,#f1f1f1);background-image:-ms-linear-gradient(top,#f5f5f5,#f1f1f1);background-image:-o-linear-gradient(top,#f5f5f5,#f1f1f1);background-image:linear-gradient(top,#f5f5f5,#f1f1f1);border:1px solid #dcdcdc;border:1px solid rgba(0,0,0,0.1)}
.btn:hover{text-decoration:none;box-shadow:0 1px 1px rgba(0,0,0,0.1);background-color:#f8f8f8;background-image:-webkit-linear-gradient(top,#f8f8f8,#f1f1f1);background-image:-moz-linear-gradient(top,#f8f8f8,#f1f1f1);background-image:-ms-linear-gradient(top,#f8f8f8,#f1f1f1);background-image:-o-linear-gradient(top,#f8f8f8,#f1f1f1);background-image:linear-gradient(top,#f8f8f8,#f1f1f1);border:1px solid #c6c6c6;color:#333}
.btn-primary{border:1px solid #3079ed;color:#fff;text-shadow:0 1px rgba(0,0,0,0.1);background-color:#4d90fe;background-image:-webkit-linear-gradient(top,#4d90fe,#4787ed);background-image:-moz-linear-gradient(top,#4d90fe,#4787ed);background-image:-ms-linear-gradient(top,#4d90fe,#4787ed);background-image:-o-linear-gradient(top,#4d90fe,#4787ed);background-image:linear-gradient(top,#4d90fe,#4787ed)}
.btn-primary:hover{border:1px solid #2f5bb7;color:#fff;text-shadow:0 1px rgba(0,0,0,0.3);background-color:#357ae8;background-image:-webkit-linear-gradient(top,#4d90fe,#357ae8);background-image:-moz-linear-gradient(top,#4d90fe,#357ae8);background-image:-ms-linear-gradient(top,#4d90fe,#357ae8);background-image:-o-linear-gradient(top,#4d90fe,#357ae8);background-image:linear-gradient(top,#4d90fe,#357ae8)}
.form-submit{margin-top:12px;width:100%;height:40px;line-height:40px}

.btn-connect{
    color:#f0f0f0;
    text-shadow:0 1px rgba(0,0,0,0.1);
    width:80%;
    height:30px;
    margin-bottom: 10px;
}
.btn-connect:hover{cursor: pointer; color: #fff; }
i.icon-connect {
    width:30px;
    height:30px;
    float:left;
    line-height:30px;
    border-right:solid #ccc 1px;
}

.icon{display:inline-block;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAMAAAAyNwimAAABjFBMVEWPj4+Pj4+Pj4+Pj4+Xl5eampqampqampqampqSkpKZmZmZmZmJiYmTk5OZmZmampqQkJCXl5eSkpKWlpaYmJiampqTk5OQkJCampqUlJSZmZmZmZmZmZmUlJSXl5eUlJTTTU3KSUnGSEjKSUnHSEiampqampqVlZWampqampqampqampqampqampqampqampqampqampqYmJiampqampqRkZGRkZGPj4+Tk5NmZmaSkpKYmJiPj4+ampqVlZWVlZWXl5eYmJjMSkrMSkrFSEiampqZmZmampqQkJCampqUlJSRkZGRkZHTTU2Tk5PLSkrGSEiampqAgICYmJiampqampqRkZGampqampqampqTk5OVlZWampqamprTTU2WlpbGSEiUlJTTTU3TTU3RTEzTTU3TTU2ampqamprTTU3FSEiQkJAAAACRkZGRkZH1e3vgZmbvdXX0enr0e3vuc3Psc3PfZmbudXX3fX3XXFzZXl71fHzfZWXwd3eYmJiTk5P///+RkZH3fn6ampr1JOubAAAAbXRSTlP7+/v+rnU/DHsbaCwM0IOT9DANHG6C1vcnyaOJiLwrKibO7NHoXSHBb5ZLYwZXeEUkoKuHge3i+cgE22TzNhcvsi7Bw/keYGn4LR7r5obTy/MSB2w8QulaG0jHvQMYKbbvzCNoqAWDCQ+A9vEAwN7tyQAAAelJREFUeNrNlWdPwzAQhpHYe++9994byt67FFpaZtOmidhQaJug3B+nrtX2nCC3CIF4P1jWa+ceXew7J0i/rD8FnH3nw9TkJPPwXJorbkDfgApyz55hw3zVaamqjI4VzzN2yjCElHcSJ6DLA0RW3fJ6NUSE/WNiKAoZVySsS7dJFE3uSwPgiAaR2fi1MnwJsKgAI0fBr0aCmDK0cHXuf/Z6n/3nV3rAMQ2SKGHtbxBvarJwvCC/qAQt5AJMCGQiTABUROyb67eAFlLg7fqGBXRQgJkBHBDLMyMZ5AGYprNpANkWtp3vJPjHBxnf3SyglwJWbTjOKbGWjfGFIBaxwrfPLvqigFuxjgF0AlULigNY+BSWAC7C8wuAtXACL1oUoPndDOCQhlCFHwDq7zHgdYetg3Yg6pbiAGzq/W3q7/ow4KGJAtib7ZJin4ERLH8FeGxgAWcqALTa+LeID2gM8H7RIOCyZOsgfTwrMyM7JmDrTkN6cWLAyZxCD7n/EBNqcCXHBNhFbzQDn2iPAPbazPjEmgXUi6xxAmgKuNCckUIbUvT7cYecrSxfJd00Z5YD4LYKFxi0KXFlBOBm96RpT6FmxwF4+HWg6v1E3K4XFhcXSLv+AcCq9x3ffpP5AIuDyUF1WP7Lo/8r+gT8buwKLsoaaAAAAABJRU5ErkJggg==") no-repeat;width:25px;height:25px;vertical-align:top}
.i-account{background-position:1px 0}
.i-pass{background-position:-48px 0}
.i-captcha{background-position:-23px 0}
.i-warn{background-position:-70px 0}
.i-dropdown{border-color:#777 transparent;border-style:solid;border-width:5px 5px 0 5px;width:0;height:0}
.i-info{display:inline-block;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAYFBMVEUmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYAAABIMq48AAAAIHRSTlMBBBQ5TE5KX1MRSxI7Vj5XYhATDFRgOgNlPAJkOBhmAJqIuFQAAACESURBVHjafdDXDoMwDEBRWuhi72z7//+ykg21ERX3JdGRnCjJ8E9XOMT3a5njR6GPAahQmx39E34Vtw1XUDnGgWdTYh0JIxxwJZzhUEe40H7KEmNQCIi89jIu2BDmgnJRZelMxInwTogOVO3+zFLs4TdEU1sm64z6usp1tm/a8fqTz30BukYssne+03kAAAAASUVORK5CYII=") no-repeat 0 0;width:20px;height:20px}
.i-more{display:inline-block;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAABFUlEQVQ4y9WUv04CQRDGf6KJDf4JG40RLB0JsTY+gk/iQ/EwVIbwAkb5CipMKFxtaLmzWZJzb+/Ao8GvmszsfPPtzM7CvuOgKmBm50Af6ALtcHYJzIGppO+tCM2sBTwA90Crol4GvAETSati4DBB9gTc1qkPsUvgyjk3895n60Cs4BHoxdmShpKGCeLrkEOJMPRs0GAOAzNzKYX9mp5twl2KsLfDa7lZG0cFZ7vYs1RW7Dez52CeVA2lKbKUwiXQiSr/Uhb7o9ySwo8dFM5ThFMgb0ioEqGkr7BOf8W7pM9UDwHGwFn4EFLTjLEAXip32XufO+dmwDFwUbPPebjNSFK27ffVCavYBU6BVZjmAniV5PmX+AG8Yk+t05Rw6AAAAABJRU5ErkJggg==") no-repeat 0 0;width:20px;height:20px}

.version {
    position: fixed;
    right: 0px;
    bottom: 0px;
    -moz-opacity: .60;
    filter: alpha(opacity = 50);
    opacity: .50;
    background-color: #FFF1A8;
    line-height: 12px;
    font-size: 12px;
}

.version:hover {
    position: fixed;
    right: 0px;
    bottom: 0px;
    -moz-opacity: .70;
    filter: alpha(opacity = 70);
    opacity: .80;
    background-color: #FFF1A8;
    font-size: 12px;
    line-height: 12px;
    color: #222;
}


a.icp {
    -moz-opacity: .70;
    filter: alpha(opacity = 70);
    opacity: .70;
    color:#888;
}

.color-blue { color: #0266C8; }
.color-red { color: #F90101; }
.color-yellow { color: #F2B50F; }
.color-green { color: #00933B; }

.logo { display:inline-block; background-repeat:no-repeat; width:48px; height:48px; vertical-align:top; cursor:pointer;
    margin: 4px;
}

.logo-100 { display:inline-block; background-repeat:no-repeat; width:100px; height:100px; vertical-align:top; cursor:pointer;
    margin: 4px 0 2px 2px;
}

.logo-egg {
    background-image: url("../img/tenant-egg.png");
}
.logo-oauth {
    background-image: url("../img/tenant-oauth.png");
}
.logo-cube {
    background-image: url("../img/tenant-cube.jpg");
}

.portrait {
    width: 120px;
    float: left;
    padding: 24px;
}

@media screen and (max-width:300px){
    #login-form{padding:20px 10px 10px;margin:10px 0;border-radius:0;box-shadow:none;border-left:0;border-right:0}
    .input-control .icon{display:none}
    .form-input{padding:11px}
}

@media screen and (min-width:300px) and (max-width:320px){
    #login-form{margin:20px 5px;padding:35px 20px 15px}
}
@media screen and (min-width:460px){
    #login-form{padding:30px 40px 25px}
}