/* 整体滚动条 */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #f0f0f0;
    border-radius: 10px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 10px;
}

/* 滚动条滑块悬停效果 */
::-webkit-scrollbar-thumb:hover {
    background-color: #1565C0;
}


html, body {
    font-size: 12px;
    height: 100%;
    width: 100%;
    padding: 0;
    min-width:900px;
    /*background: #fff;*/
}

a, [data-href] {
    text-decoration: none;
    cursor: pointer;
}

* {
    vertical-align: middle;
}

input::-webkit-input-placeholder {
    color: #999;
}

input::-moz-input-placeholder {
    color: #999;
}

input::-ms-input-placeholder {
    color: #999;
}

input, textarea {
    outline: none;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 12px;
    margin-bottom: 15px;
    width: 160px;
    color: #333;
}

textarea:focus {
    border: 1px solid #eee;
}

select {
    border: 1px solid #e8e8e8;
    border-radius: 5px;
    padding: 0 10px;
    height: 28px;
    line-height: 28px;
    margin-bottom: 15px;
}


form > div > * {
    display: block;
    width: 100% !important;
}

form > div > textarea, form > div > input {
    width: calc(100% - 20px);
}

form a {
    display: block;
    background: #0094ff;
    color: #fff;
    text-align: center;
    padding: 10px;
    font-size: 14px;
    border-radius: 5px;
}

button {
    border: none;
    background-color: transparent;
    outline: none;
    padding: 0;
}

label.error {
    display: none !important;
}

input.error {
    border: 1px solid #ff3300;
}

.sumbit {
    border: none !important;
    background: #0094ff;
    color: #fff;
    display: inline-block;
    height: 32px;
    width: 240px;
    border-radius: 5px;
}


.bg-blueviolet {
    background-color: blueviolet;
}

.bg-brown {
    background-color: brown;
}

.bg-darkblue {
    background-color: darkblue;
}

.bg-forestgreen {
    background-color: forestgreen;
}

.bg-chocolate {
    background-color: chocolate;
}

.bg-goldenrod {
    background-color: goldenrod;
}

.bg-steelblue {
    background-color: steelblue;
}

.bg-hotpink {
    background-color: hotpink;
}

.bg-rebeccapurple {
    background-color: rebeccapurple;
}

.bg-darkslategrey {
    background-color: darkslategrey;
}

.bg-purple {
    background-color: purple;
}

.left-nav i {
    font-size: 16px;
    color: #999;
}

.left-nav {
    position: fixed;
    top: 50px;
    width: 150px;
    height: calc(100% - 50px);
    background: #fff;
    overflow-y: scroll;
    background: #fff;
    border-right: 1px solid #eee;
    padding-top: 50px;
    padding-bottom: 30px;
    margin-top: 15px;
}

.left-nav::-webkit-scrollbar {
    width: 0;
}


.left-nav-menu span {
    margin-left: 3px;
}


.left-nav-menu {
    position: relative;
    padding: 7px 15px;
}

.left-nav-menu-right {
    position: absolute;
    right: 10px;
    top: 7px;
}

.left-nav-content {
    overflow: hidden;
    height: auto;
}

.left-nav-content.active {
    background: #ff990010;
}

.left-nav-content.close .left-nav-items {
    height: auto;
    animation: close-left-nav-item .3s forwards;
}

@keyframes close-left-nav-item {
    from {
        max-height: 500px;
    }

    to {
        max-height: 0;
    }
}

.left-nav-content.open .left-nav-items {
    height: auto;
    animation: show-left-nav-item .3s forwards;
}

@keyframes show-left-nav-item {
    from {
        max-height: 0;
    }

    to {
        max-height: 500px;
    }
}

.left-nav-item.active {
    background: #ff990020;
}


.left-nav-item {
    padding: 7px 0;
    padding-left: 25px;
    position:relative;
}
.left-nav-item span:nth-child(3) {
    position: absolute;
    right: 5px;
    margin-top:2px;
    background: #ff3300;
    color:#fff;
    border-radius:5px;
    transform:scale(.8);
    width:30px;
    text-align:center;
    line-height:20px;
}
.left-nav + .main {
    margin-left: 150px;
}

.project div::before {
    left: -10.6066px;
}

.project div::after {
    right: -10.6066px;
}

.project div::before, .project div::after {
    content: "";
    height: 21.2132px;
    width: 21.2132px;
    transform: rotate(45deg);
    position: absolute;
    background: #0094ff;
    top: 4.4px;
}

.project div {
    color: #fff;
    background: #0094ff;
    width: 100px;
    line-height: 24px;
    display: inline-block;
    position: relative;
    overflow: visible;
}

.project {
    text-align: center;
    margin-bottom: 15px;
}

.project-box {
    position: fixed;
    top: 50px;
    left: 0;
    height: 50px;
    width: 149px;
    padding-top: 10px;
    padding-bottom: 15px;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.036);
    z-index: 1024;
}

.main {
    margin-top: 50px;
    background: #fff;
    height: calc(100% - 50px);
    width: calc(100% - 150px);
}