.full-height {
    height: 100%;
    background-color: @main_color_l
}

.w-sdc-main-container {
    position: absolute;
    top: @header_height + @top_nav_height;
    left: 0;
    right: 0;
    bottom: 0;

    .w-sdc-main-right-container {
        .bg_n;
        bottom: 0;
        padding: 22px 12px;
        position: absolute;
        left: 240px;
        right: 0;
        top: 0;
        overflow: hidden;

        & > div:first-child {
            padding-bottom: 80px;
        }

        .sdc-tile {
            margin: 10px;
            .sdc-tile-content {
                overflow: visible;

                .sdc-tile-content-icon {
                    width: 100%;
                    margin-top: -1em;
                    text-align: right;
                }

                .sdc-tile-content-info {
                    .sdc-tile-info-line {
                        display: inline-block;

                        &.title {
                            line-height: 1.4em;
                            height: auto;
                        }
                    }
                }
            }
        }

    }
}

.w-sdc-tile-multiline-ellipsis {
    .multiline-ellipsis-dots {
        background: linear-gradient(to right, transparent 0%, #ffffff 80%);
        padding-left: 1em;
    }
}

.w-sdc-row-flex-items {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

}

.sdc-loading-page {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    height: 100%;
    width: 100%;

    .caption1 {
        .p_24;
        text-align: center;
    }

    .caption2 {
        .p_16_m;
        display: block;
    }
}

.main-loader {
    @green: #cccccc;
    @blue: #dddddd;
    @red: #eeeeee;
    @yellow: #bbbbbb;
    @white: #ffffff;

    @width: 80px;

    .loader {
        position: relative;
        margin: 0px auto;
        width: @width;
        &:before {
            content:'';
            display: block;
            padding-top: 100%;
        }
    }

    .circular {
        animation: rotate 2s linear infinite;
        height: 100%;
        transform-origin: center center;
        width: 100%;
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
        margin: auto;
    }


    .path {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
        animation:
        dash 1.5s ease-in-out infinite,
        color 6s ease-in-out infinite;
        stroke-linecap: round;
    }

    @keyframes rotate{
        100%{
            transform: rotate(360deg);
        }
    }
    @keyframes dash{
        0%{
            stroke-dasharray: 1,200;
            stroke-dashoffset: 0;
        }
        50%{
            stroke-dasharray: 89,200;
            stroke-dashoffset: -35px;
        }
        100%{
            stroke-dasharray: 89,200;
            stroke-dashoffset: -124px;
        }
    }
    @keyframes color{
        100%, 0%{
            stroke: @red;
        }
        40%{
            stroke: @blue;
        }
        66%{
            stroke: @green;
        }
        80%, 90%{
            stroke: @yellow;
        }
    }

}
//temporary fix. should be removed after converting all the modals to onap-ui modals
sdc-modal{
    .sdc-modal, .modal-background{
        z-index: 1050;
    }
}