.view-frame-top {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    /*width:100%;*/
    background: white;
    border-bottom: 1px #d7d7d7 solid;
    padding-left: 200px;
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
}

.view-frame-left {
    position: fixed;
    left: 0;
    width: 200px;
    top: 0;
    height: 100%;
    overflow: auto;
    z-index: 2;
    background: white;
    box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
    border-right: 1px #e0e0e0 solid;
}

.view-frame-logo {
    height: 64px;
    padding: 0 10px;
    border-bottom: 1px #d7d7d7 solid;

    border-bottom: 1px #e0e0e0 solid;
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
}

.view-frame-nav-list {
    padding: 30px 0;
}

.view-frame-nav-list a {
    height: 45px;
    cursor: pointer;
}

.view-frame-nav-list a:active {
    opacity: 0.7;
}

.view-frame-nav-text {
    font-size: 0.95em;
}

.view-frame-nav-list ul > li > a {
    padding: 0 10px;
}

.view-frame-nav-list ul > li > ul > li > a {
    padding: 0 10px 0 25px;
}

.view-frame-nav-list ul > li > ul > li > ul > li > a {
    padding: 0 10px 0 40px;
}

.view-frame-nav-list ul > li > ul > li > ul > li > ul > li > a {
    padding: 0 10px 0 55px;
}

.view-frame-nav-list ul > li > ul > li > ul > li > ul > li > ul > li > a {
    padding: 0 10px 0 65px;
}

.view-frame-nav-list a.view-frame-nav-ac {
    background-color: rgba(24, 144, 255, 0.2);
    font-weight: bold;
    color: rgba(24, 144, 255, 1);
}

.view-frame-nav-list a.view-frame-nav-ac .view-frame-nav-text {

}

.view-frame-nav-list a:hover {
    color: rgba(24, 144, 255, 1);
}

.view-frame-nav-list i {
    font-size: 1.3em;
}

.view-frame-nav-list ul ul {
    display: none;
}

.view-frame-nav-list ul li.view-frame-nav-open > ul {
    display: block;
}

.view-frame-nav-list ul li.view-frame-nav-open > a > i {
    transform: rotate(90deg);
}