.amaran.awesome
    width: 300px
    min-height: 65px
    background: #f3f3f3
    color: #222
    margin: 15px
    padding: 5px 5px 5px 70px
    font-family: 'Open Sans', Helvetica, Arial, sans-serif
    font-size: 16px
    font-weight: 600
    box-shadow: 1px 1px 1px #000

    .icon
        width: 50px
        height: 50px
        position: absolute
        top: 50%
        left: 10px
        background: #000
        margin-top: -25px
        border-radius: 50%
        text-align: center
        line-height: 50px
        font-size: 22px

    p
        padding: 0
        margin: 0

        span
            font-weight: 300

            &.light
                font-size: 13px
                display: block
                color: #777
    &.ok
        p.bold
            color: #178B13

        .icon
            background-color: #178B13
            color: #fff

    &.error
        p.bold
            color: #D82222

        .icon
            background-color: #D82222
            color: #fff

    &.warning
        p.bold
            color: #9F6000

        .icon
            background-color: #9F6000
            color: #fff

    &.yellow
        p.bold
            color: #CFA846

        .icon
            background-color: #CFA846
            color: #fff

    &.blue
        p.bold
            color: #2980b9

        .icon
            background-color: #2980b9
            color: #fff

    &.green
        p.bold
            color: #27ae60

        .icon
            background-color: #27ae60
            color: #fff

    &.purple
        p.bold
            color: #5B54AA

        .icon
            background-color: #5B54AA
            color: #fff