@loadmask-zindex: @zindex-modal + 100;
@loadmask-image-height: 28px;
@loadmask-image-width: 28px;
@loadmask-small-image-height: 20px;
@loadmask-small-image-width: 20px;

.asc-loadmask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    zoom: 1;
    background-color: transparent;
    z-index: @loadmask-zindex;
}

.asc-loadmask-body {
    position: absolute;
    z-index: @loadmask-zindex + 1;
    padding: 24px;
    line-height: @loadmask-image-height;
    border: none;
    background-image: none;
    background-color: fade(@black, 90%);
    color: @gray-light;
    .border-radius(@border-radius-large);

    left: 50%;
    top: 50%;
    transform: translate(-50%);

    & > div {
        display: inline-block;
        vertical-align: middle;
    }

    .asc-loadmask-image {
        background-image: ~"url(@{common-image-const-path}/load-mask/loading.svg)";
        height: @loadmask-image-height;
        width: @loadmask-image-width;
        float: left;
        margin-left: 8px;
    }

    .asc-loadmask-title {
        .fontsize(@font-size-large);
        margin: 0 8px 0 12px;
    }

    .left-panel & {
        line-height: @loadmask-small-image-height;
        background-color: transparent;
        color: @gray-deep;
        padding: 8px;
        top: 78px;
        transform: translate(-50%, 0);

        .asc-loadmask-image {
            background-image: ~"url(@{common-image-const-path}/load-mask/loading-small.svg)";
            height: @loadmask-small-image-height;
            width: @loadmask-small-image-width;
        }

        .asc-loadmask-title {
            margin: 0 8px;
        }
    }
}

.app-error-panel {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
    z-index: 10;

    .message-block {
        display: inline-block;
        vertical-align: middle;
        width: 100%;

        .message-inner {
            width: 550px;
            margin: auto;
            padding: 30px;
            background-color: #e3e3e3;
            text-align: center;

            .title {
                font-size: 24px;
                margin: 0 0 14px;
            }

            .text {
                font-size: 14px;
            }
        }
    }

    .message-auxiliary {
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }
}