:host {
    display: flex;
    flex-direction: column;
}

#main {
    display: flex;
    flex-grow: 1;
}

#candy {
    background-color: #336699;
    height: 236px;
    flex-shrink: 0;
}

#apps {
    /*background-color: darkslategray;*/
    width: 280px;
    flex-shrink: 0;
    overflow-y: auto;
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
}

a {
    display: block;
    padding: 10px 20px 10px 20px;
}

a:focus, a:hover {
    text-decoration: none;
}

.active {
    background-color: #428bca;
}

.active > a {
    color: #fff;
}

span {
    margin-left: 8px;
}

.actions {
    margin-bottom: 1em;
}

.progress {
    height: 1em;
    width: 1em;
    float: right;
    margin: 14px;
    position: relative;
}

.pie {
    height: 100%;
    width: 100%;
    clip: rect(0, 1em, 1em, 0.5em);
    left: 0;
    position: absolute;
    top: 0;
}

.half-circle {
    height: 100%;
    width: 100%;
    border: 0.2em solid #3498db;
    border-radius: 50%;
    clip: rect(0, 0.5em, 1em, 0);
    left: 0;
    position: absolute;
    top: 0;
}

.shadow {
    height: 100%;
    width: 100%;
    border: 0.2em solid #bdc3c7;
    border-radius: 50%;
}

.right-side {
    display: none;
}

.half-circle {
    /*border-color: #e74c3c;*/
    border-color: rgb(0, 116, 217);
}

.left-side {
    /*transform: rotate(1turn);*/
    /*在前台用Angular填写*/
}

.second-half {
    clip: rect(auto, auto, auto, auto);
}

.second-half > .right-side {
    display: inherit;
    transform: rotate(0.5turn);
}

.fa-spin {
    margin: 14px;
    color: #0275d8;
    font-weight: bold;
    float: right;
}