html {
    height: 100%;
    overflow-y: hidden;
}

body {
    margin: 0;
    height: 100%;
    min-width: 1000px;
    font-family: "Microsoft YaHei", "微软雅黑", Arial, Helvetica, sans-serif;
    font-size: 13px;
    background: #d9d9d9 url('./loginbg.png') no-repeat center center;
    position: relative;
    overflow: hidden;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    perspective: 1200px;
}

h1, h2, h3, h4, h5, h6, form, select, p, ul {
    margin: 0;
    padding: 0;
}

input, select, textarea, span {
    outline: none;
    font-family: "Microsoft YaHei", "微软雅黑", Arial, Helvetica, sans-serif;
    vertical-align: middle;
    resize: none;
    margin: 0;
    padding: 0;
}

a {
    outline: none;
    text-decoration: none;
}

select {
    border: solid 1px #CED0D2;
    padding: 3px;
}

select:focus {
    border-color: #64A2FF;
    box-shadow: 0 0 2px #0066FF;
}

fieldset {
    margin: 10px;
    padding: 10px;
    border: solid 1px rgb(173, 173, 177);
}

legend {
    font-weight: bold;
}
.green{
    color: green;
}
.gray{
    color: gray;
}
.contain {
    width: 100%;
    height: 100%;
}

.readonly {
    color: #8F8F8F;
}

.label {
    display: inline-block;
    text-align: right;
}

.line {
    margin-bottom: 10px;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.cb {
    clear: both;
}

.green {
    color: green;
}

.red {
    color: red;
}

.winclose {
    display: block;
    width: 21px;
    height: 21px;
    position: absolute;
    right: 4px;
    top: 4px;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    color: #574f4f;
    border-radius: 10px;
}

.winclose:hover {
    background: #CC0000;
    color: #fff;
}

.window {
    position: fixed;
    border: 2px solid #ACC1FF;
    left: 50%;
    top: 50%;
    background: #fff;
    display: none;
    z-index: 1000;
}

.window .close {
    display: block;
    width: 21px;
    height: 21px;
    position: absolute;
    right: 4px;
    top: 4px;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    color: #574f4f;
    border-radius: 10px;
}

.window .close:hover {
    background: #CC0000;
    color: #fff;
}

.window h4 {
    position: relative;
    height: 30px;
    line-height: 30px;
    border-bottom: solid 1px #DAD8D8;
    background: #f6f9fe;
    padding-left: 10px;
    font-size: 14px;
    cursor: move;
}

.window .box {
    padding: 20px 20px 0 20px;
    position: relative;
}

.window .box span {
    display: inline-block;
    width: 65px;
    text-align: right;
    vertical-align: middle;
}

.window .box select {
    width: 208px;
}

.window .box .textbox {
    width: 168px;
}

.window .box p {
    margin-bottom: 10px;
}

.window .box .log {
    width: 450px;
    height: 95px;
    padding: 5px;
    line-height: 20px;
    overflow: auto;
}

.window .box .equal {
    display: none;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url('./equal.png');
}

.window .box .unequal {
    display: none;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url('./unequal.png');
}

.window .box .equal.on {
    display: inline-block;
}

.window .box .unequal.on {
    display: inline-block;
}

.mask {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.3;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    display: none;
}

.dialog {
    width: 240px;
    height: 80px;
    background: #fff;
    position: fixed;
    left: 50%;
    top: -100px;
    z-index: 1000;
    margin-left: -120px;
    border-radius: 4px;
}

.dialog i {
    height: 80px;
    width: 80px;
    display: inline-block;
    vertical-align: middle;
}

.dialog i.info {
    background: url('./info.png') no-repeat 50% 50%;
}

.dialog i.err {
    background: url('./err.png') no-repeat 50% 50%;
}

.dialog i.ok {
    background: url('./ok.png') no-repeat 50% 50%;
}

.dialog i.load {
    background: url('./loading.gif') no-repeat 50% 50%;
}

.dialog span {
    width: 150px;
    display: inline-block;
    vertical-align: middle;
}

.loading {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('./loading.gif') no-repeat center center;
}

.title {
    cursor: pointer;
    height: 36px;
    border-bottom: solid 1px #B0B0B0;
    border-top: solid 1px #D6D6D6;
    background: url('./titlebg.png') repeat-x 0 bottom;
}

.title:first-child {
    border-top: 0;
}

.title i {
    display: inline-block;
    vertical-align: middle;
    width: 36px;
    height: 36px;
    background: url('./arrow.png') no-repeat center center;
}

.title span {
    height: 36px;
    line-height: 36px;
    display: inline-block;
    vertical-align: middle;
}

.table {
    border-collapse: collapse;
    background: #fff;
    width: 100%;
    border-top: solid 1px #d7dadf;
}

.table th, table td {
    text-align: center;
    padding: 6px;
    border-left: solid 1px #d7dadf;
    border-bottom: solid 1px #d7dadf;
}
.table th.alignLeft {
    text-align: left;
    text-indent: 1em;
}
.table th {
    padding: 8px 0;
    background: url('./titlebg.png') repeat-x 0 bottom;
    border-bottom: solid 2px #B5BAC4;
}

.table th:first-child, table td:first-child {
    border-left: none;
}
.table td span{
    display: inline-block;
    vertical-align: top;
}
.table .btn {
    display: inline-block;
    vertical-align: middle;
    height: 25px;
    line-height: 25px;
    border: 0;
    background: #4096ee;
    color: #fff;
    width: 50px;
    text-align: center;
    cursor: pointer;
    border-radius: 2px;
}

.table .btn:hover {
    background: #226497;
}

.table .btn.del {
    background: #D50000;
}

.table .btn.del:hover {
    background: #9D0000;
}

.table .btn.more {
    background: #009900;
}

.table .btn.more:hover {
    background: #006400;
}

.table .btn.pause {
    width: 70px;
    background: #CC7A00;
}

.table .btn.pause:hover {
    background: #975A00;
}

.table .btn.start {
    width: 70px;
    background: #3019c4;
}

.table .btn.start:hover {
    background: #24148a;
}

.toolbox {
    padding: 10px;
}

.pager, .pager2 {
    height: 32px;
    padding: 10px;
}

.pager span, .page span {
    display: inline-block;
    height: 32px;
    line-height: 32px;
}

.page, .page2 {
    list-style: none;
}

.page li, .page2 li {
    float: left;
    margin-right: 5px;
}

.page li a, .page2 li a {
    display: inline-block;
    height: 30px;
    padding: 0 10px;
    border: solid 1px #ccc;
    line-height: 30px;
    text-align: center;
    color: #000;
    cursor: pointer;
}

.page li a.on, .page li a:hover,.page2 li a.on, .page2 li a:hover {
    font-weight: bold;
    background: #DBEDFF;
}

.textbox {
    height: 28px;
    border: 1px solid #CED0D2;
    padding: 0 8px;
    /*line-height: 28px;*/
    vertical-align: middle;
    width: 170px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

.textbox:focus {
    border-color: #64A2FF;
    box-shadow: 0 0 2px #0066FF;
}

.textbox[readonly]:focus {
    border-color: #CED0D2;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

.textbox.long {
    width: 412px;
}
.textbox .meduim {
    width:200px;
}
.textbox.short {
    width: 100px;
}

.button {
    display: inline-block;
    vertical-align: middle;
    height: 30px;
    line-height: 30px;
    background: #4096ee;
    color: #fff;
    width: 80px;
    text-align: center;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
}

.button:hover {
    background: #226497;
}

.button.fix {
    height: 30px;
    line-height: 20px;
}

.button.more:hover {
    background: #9D0000;
}

.button.more {
    background: #009900;
}

.button.more:hover {
    background: #006400;
}

.button.delbtn {
    background: #D50000;
}

.button.delbtn:hover {
    background: #9D0000;
}

.button:disabled {
    cursor: not-allowed;
    background: buttonface;
    color: graytext;
    border: 1px solid #d5d3d3;
}

.textbox.ng-invalid-number, .textbox.ng-invalid-maxlength {
    border:solid 1px #9D0000;
    box-shadow: 0 0 2px #9D0000;
}

.copyright {
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    bottom: 0;
    color: #747474;
    margin-bottom: 18px;
}

/******登陆*******/

.loginbox {
    width: 750px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -375px;
    margin-top: -150px;
}

.loginbox .logo {
    width: 385px;
    height: 130px;
    margin-top: 74px;
    float: left;
    background: url('./logo.png') no-repeat center center;
}

.loginbox .form {
    float: right;
    height: 100%;
    width: 302px;
    padding-left: 38px;
    padding-top: 50px;
    background: url('./line.png') no-repeat 0 0;
}

.loginbox .form label {
    display: inline-block;
    width: 65px;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    font-weight: bold;
    letter-spacing: 4px;
}

.loginbox .form p {
    margin-bottom: 14px;
}

.loginbox .form .tip {
    margin-top: 20px;
}

.center {
    width: 1024px;
    margin: 0 auto;
}

.top {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    height: 50px;
    width: 100%;
    background: #273750;
    min-width: 1000px;
}

.top h1 {
    display: inline;
    color: #fff;
    float: left;
    font-size: 16px;
    height: 23px;
    margin: 15px 0 0 16px;
    line-height: 23px;
}

.top h2 {
    display: inline;
    float: right;
    color: #fff;
    margin-top: 15px;
    margin-right: 10px;
    font-size: 14px;
    font-weight: normal;
}

.top h2 a {
    color: #fff;
}

.top h2 a:hover {
    color: #009fff;
}

.nav {
    float: left;
    height: 100%;
    width: 144px;
    background: #4b6c8b;
    overflow-y: auto;
    border-right: solid 1px #475f79;
}

.nav ul {
    margin-top: 50px;
    display: block;
    width: 100%;
    list-style: none;
}

.nav ul li {
    display: block;
    padding-left: 1px;
}

.nav ul li a {
    display: block;
    border-top: solid 1px #587796;
    border-bottom: solid 1px #2d4c6b;
    background: #4b6c8b;
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #8baece;
    position: relative;
    text-shadow: 0 0 1px #000;
}

.nav ul li a.active + ul {
    display: block;;
}

.nav ul li a i {
    width: 4px;
    height: 100%;
    background: #5caee6;
    position: absolute;
    left: 0;
    top: 0;
    border-right: solid 1px #475f79;
    display: none;
}

.nav ul li a:hover {
    color: #fff;
}

.nav ul li a.active {
    color: #fff;
    background: #3c5b77 url('./navbg.png') no-repeat 4px 0;
}

.nav ul li a.active i {
    display: block;
}

.nav ul ul {
    display: none;
    width: auto;
    margin-top: 0;
    padding: 10px;
    background: #1b344b;
    overflow: hidden;
}

.nav ul ul a {
    height: 18px;
    line-height: 18px;
    background: #1b344b;
    border: none;
    margin-bottom: 5px;
    text-shadow: none;
}

.nav ul ul li:last-child a {
    margin-bottom: 0;
}

.nav ul ul a.active {
    color: #020f1a;
    background: #cadbeb;
}

.main {
    position: absolute;
    min-width: 836px;
    top: 60px;
    left: 154px;
    right: 10px;
    bottom: 10px;
    background: #fff;
    overflow: auto;
    overflow-x: hidden;
    border: 1px solid #BDB9B9;

}

/*

    Zebra_DatePicker: a lightweight jQuery date picker plugin

    Twitter Bootstrap theme

    copyright (c) 2011 - 2013 Stefan Gabos
    http://stefangabos.ro/jquery/zebra-datepicker/

*/

.Zebra_DatePicker *,
.Zebra_DatePicker *:after,
.Zebra_DatePicker *:before {
    -moz-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
    box-sizing: content-box !important
}

.Zebra_DatePicker {
    position: absolute;
    background: #FFF;
    border: 1px solid #999;
    display: none;
    z-index: 100;
    padding: 5px
}

.Zebra_DatePicker * {
    margin: 0;
    padding: 0;
    color: #373737;
    background: transparent;
    border: none
}

/* = GLOBALS
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker table {
    border-collapse: collapse;
    border-spacing: 0
}

.Zebra_DatePicker td,
.Zebra_DatePicker th {
    text-align: center;
    padding: 5px 0
}

.Zebra_DatePicker td {
    cursor: pointer
}

.Zebra_DatePicker .dp_daypicker,
.Zebra_DatePicker .dp_monthpicker,
.Zebra_DatePicker .dp_yearpicker {
    margin-top: 3px
}

.Zebra_DatePicker .dp_daypicker td,
.Zebra_DatePicker .dp_daypicker th,
.Zebra_DatePicker .dp_monthpicker td,
.Zebra_DatePicker .dp_yearpicker td {
    width: 30px
}

.Zebra_DatePicker,
.Zebra_DatePicker .dp_header .dp_hover,
.Zebra_DatePicker td.dp_selected,
.Zebra_DatePicker .dp_footer .dp_hover,
.Zebra_DatePicker td.dp_hover {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

/* = HEADER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_header td {
}

.Zebra_DatePicker .dp_header .dp_previous,
.Zebra_DatePicker .dp_header .dp_next {
    width: 30px
}

.Zebra_DatePicker .dp_header .dp_caption {
    font-weight: bold
}

.Zebra_DatePicker .dp_header .dp_hover {
    background: #DEDEDE;
    color: #373737
}

.Zebra_DatePicker .dp_header .dp_blocked {
    color: #DEDEDE;
    cursor: default
}

/* = DATEPICKER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_daypicker th {
    font-weight: bold
}

.Zebra_DatePicker td.dp_not_in_month {
    color: #DEDEDE;
    cursor: default
}

.Zebra_DatePicker td.dp_not_in_month_selectable {
}

.Zebra_DatePicker td.dp_weekend {
}

.Zebra_DatePicker td.dp_weekend_disabled {
    color: #DEDEDE;
    cursor: default
}

.Zebra_DatePicker td.dp_selected {
    background: #039;
    color: #FFF !important
}

.Zebra_DatePicker td.dp_week_number {
    cursor: text;
    font-weight: bold
}

/* = MONTHPICKER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_monthpicker td {
    width: 33%
}

/* = YEARPICKER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_yearpicker td {
    width: 33%
}

/* = FOOTER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_footer {
    margin-top: 3px
}

/* = SOME MORE GLOBALS (MUST BE LAST IN ORDER TO OVERWRITE PREVIOUS PROPERTIES)
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker td.dp_current {
    color: #3A87AD
}

.Zebra_DatePicker td.dp_disabled_current {
    color: #3A87AD
}

.Zebra_DatePicker td.dp_disabled {
    color: #DEDEDE;
    cursor: default
}

.Zebra_DatePicker td.dp_hover {
    background: #DEDEDE
}

/* = ICON
----------------------------------------------------------------------------------------------------------------------*/
button.Zebra_DatePicker_Icon {
    display: block;
    outline: none;
    position: absolute;
    width: 16px;
    height: 16px;
    background: url('./calendar.png') no-repeat left top;
    text-indent: -9000px;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 0;
    vertical-align: top
}

button.Zebra_DatePicker_Icon_Disabled {
    background-image: url('./calendar-disabled.png')
}

/* don't set vertical margins! */
button.Zebra_DatePicker_Icon {
    margin: 0 0 0 3px
}

button.Zebra_DatePicker_Icon_Inside {
    margin: 0 3px 0 0
}

/*
.view.ng-enter, .view.ng-leave {
    -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;
    transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;
}

.view.ng-enter {
    opacity: 0;
    transform: translateY(60px);
    -webkit-transform: translateY(60px);
}

.view.ng-enter.ng-enter-active {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
}

.view.ng-leave {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
}

.view.ng-leave.ng-leave-active {
    opacity: 0;
    transform: translateY(-60);
    -webkit-transform: translateY(-60px);
}*/
.view.ng-enter, .view.ng-leave {

}

.view.ng-enter {
    -webkit-animation: moveFromRight .6s ease both;
    -moz-animation: moveFromRight .6s ease both;
    animation: moveFromRight .6s ease both;
    -webkit-animation-delay: .3s;
    -moz-animation-delay: .3s;
    animation-delay: .3s;
}

.view.ng-enter.ng-enter-active {

}

.view.ng-leave {
    -webkit-transform-origin: 0% 50%;
    -webkit-animation: rotateRightSideFirst .8s both ease-in;
    -moz-transform-origin: 0% 50%;
    -moz-animation: rotateRightSideFirst .8s both ease-in;
    transform-origin: 0% 50%;
    animation: rotateRightSideFirst .8s both ease-in;
}

.view.ng-leave.ng-leave-active {

}


@-webkit-keyframes moveFromRight {
    from { -webkit-transform: translateX(100%); }
}
@-moz-keyframes moveFromRight {
    from { -moz-transform: translateX(100%); }
}
@keyframes moveFromRight {
    from { transform: translateX(100%); }
}


@-webkit-keyframes rotateRightSideFirst {
    40% { -webkit-transform: rotateY(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
    100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@-moz-keyframes rotateRightSideFirst {
    40% { -moz-transform: rotateY(15deg); opacity: .8; -moz-animation-timing-function: ease-out; }
    100% { -moz-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@keyframes rotateRightSideFirst {
    40% { transform: rotateY(15deg); opacity: .8; animation-timing-function: ease-out; }
    100% { transform: scale(0.8) translateZ(-200px); opacity:0; }
}
.alignLeft {
    text-align:left!important;
}
.device li{
    display: block;
}
.device .table th {
    text-indent: 1em;
}
.device .table td {
    line-height: 2;
}
input.ng-pristine + ul#strength {
    display:none;
}
ul#strength {
    bottom: 35px;
    left: 70px;
    position: absolute;
    list-style:none;
    margin:0;
    margin-left:15px;
    padding:0;
    vertical-align:2px;
}
.point:last {
    margin:0 !important;
}
.point {
    background:#DDD;
    border-radius:2px;
    display:inline-block;
    height:5px;
    margin-right:1px;
    width:20px;
}
#footer {
    position:fixed;
    bottom:5px;
}
.condition {
    margin-bottom: 10px;
}
.nomb {
    margin-bottom: 0!important;
}
table.repo-table td{
    padding: 15px 12px;
}
.alignRight .back {
    float: right;
}
th.alignLeft .fr {
    float: right;
    padding-right: 10px;
}
.table a.width80 {
    width: 80px;
}
.select-list {
    list-style: none;
    text-align: center;
}
.select-list li {
    padding: 5px 0;
    color: #333;
}
.hlNum {
    color: #f00;
}
.sum {
    font-weight: bold;
    padding: 10px 10px 0;
    text-align: right;
    color: #333;
}
.msg-block {
    position: absolute;
    left: 20px;
    bottom: 62px;
    height: 18px;
}
.msg-error, .msg-valid {
    padding-left: 63px;
    width: auto!important;
    color: #f00;
    text-align: left;
}
.msg-valid {
    color: #11A735;
}
.user-form {
    position: relative;
    /*border: 1px solid #ccc;*/
    padding: 20px;
    width: 250px;
    margin: 50px auto 10px;
}
div.form-group {
    margin-bottom: 20px;
}
div.form-group .meduim {
    margin-left: 5px;
    width: 170px;
}
.user-form .button {
    display: block;
    margin: 25px auto 0;
}
.user-form .meduim {
    width: 232px;
}
.user-form .msg-block{
    bottom: 20px;
}
.user-form h2 {
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
    color: #333;
    padding-bottom: 8px;
}
.user-form p {
    margin-bottom: 10px;
}
.user-form form {
    margin-bottom: 50px;
}
.device .table td:first-child{
    border-left: none 0;
}
.device .table td, .repo-table td{
    border-left: solid 1px #d7dadf!important;
}
.infomation {
    padding: 5px;
    border-bottom: 1px solid #ccc;
}
.uploadaccount {
    width:580px;
    margin: 50px auto;
}