.ui-app {
    box-shadow: 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.12);
    position: absolute;

    .app-wrap {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .app-ctrlbar {
        height: 28px;
        line-height: 28px;
        font-size: 18px;
        background-color: rgb(43,87,151);
        color: white;
        padding-left: 6px;
    }

    .ctrlbar-btn {
        width: 28px;
        height: 28px;
        color: white;
        background-color: transparent;
        border: none;
        outline: none;
        padding: 0;
    }

    .close-btn {
        &:hover {
            background-color: lighten(rgb(238,17,17), 10%);
        }
    }

    .expand-btn, .compress-btn {
        &:hover {
            background-color: darken(rgb(43,87,151), 10%);
        }
    }
    
    .app-icon {
        display: block;
        float: left;
        width: 20px;
        height: 20px;
        margin-top: 4px;
        pointer-events: none;
    }

    .app-title {
        display: block;
        float: left;
        margin-left: 6px;
        font-size: 16px;
        line-height: 28px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: default;
        pointer-events: none;
    }

    .app-body {
        flex: 1;
        border: none;
        background-color: white;
    }

    .opacity-wrap {
        position: absolute;
        z-index: 100;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

}