/* Copyright CloudLinux Zug GmbH 2010-2017 All Rights Reserved
 *
 * Licensed under CLOUD LINUX LICENSE AGREEMENT
 * http://cloudlinux.com/docs/LICENSE.TXT
 */

.simple-notification {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-bottom: 10px;
    color: #fff;
    cursor: pointer;
    transition: all 0.5s;
    border-radius: 3px;
    box-shadow: 0 1px 9px 0 rgba(0, 0, 0, 0.37);
    outline: none;


    .inner-block {
        display: flex;
        justify-content: space-between;

        i {
            font-size: 30px;
        }
        .text-wrapper {
            width: 100%;
            padding: 0 10px;
            font-weight: normal;
            .title {
                color: #fff;
                font-size: 15px;
                font-weight: bold;
            }
            .content {
                font-size: 13px;
                line-height: 20px;
            }
            .detail_link {
                margin-top: 10px;
                text-decoration: underline;

            }
            a {
                color: #fff;
                font-weight: bold;
            }
        }

        svg {
            box-sizing: border-box;
            width: 37px;
            height: 37px;
            padding: 3px;
            fill: #fff;
        }
    }

    .detail_text {
        max-height: 0;
        overflow-y: scroll;
        margin: 0;
        padding: 0 10px;
        transition: all 300ms ease-out;
        &.open {
            border-top: 1px solid rgba(256, 255, 255, 0.13);
            margin-top: 10px;
            padding: 10px;
            max-height: 440px;
        }
    }

    .progress-loader {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
    }

    .progress-loader span {
        float: left;
        height: 100%;
    }

    &.rtl-mode {
        direction: rtl;

        .content {
            padding: 0 0 0 50px;
        }

        svg {
            left: 0;
            right: auto;
        }
    }

    &.error {
        background: rgba(239,83, 80, 0.96);

        .progress-loader span {
            background: #D32F2F;
        }
    }

    &.success {
        background: rgba(67, 160, 71, 0.96);

        .progress-loader span {
            background: #689F38;
        }
    }

    &.alert {
        background: rgba(255, 219, 91, 0.96);

        .progress-loader span {
            background: #edc242;
        }
    }

    &.warning {
        background: rgba(247, 124, 0, 0.96);
    }

    &.info {
        background: rgba(43, 152, 240, 0.96);

        .progress-loader span {
            background: #0288D1;
        }
    }

}