@keyframes zoomIn 
    0%
        opacity 0
        transform scale3d(.3, .3, .3)
    50% 
        opacity 1
@keyframes fadeIn
    0% 
        opacity 0
    100% 
        opacity 1

.oc-dialog-cover
    position fixed
    left 0
    top 0
    width 100%
    height 100%
    background-color rgba(0, 0, 0, .4)
    z-index 1000
    display flex
    transition opacity .15s linear
    animation-name fadeIn
    animation-duration .3s
    justify-content center
    align-items center
    .tip-icon
        position absolute
        left 10px
        top 50%
        transform translateY(-50%)
        width 30px
        height 30px
    &~.oc-dialog-cover
        background-color transparent
        transform translate(0px, 10px)
        &~.oc-dialog-cover
            transform translate(0px, 20px)
            &~.oc-dialog-cover
                transform translate(0px, 30px)
                &~.oc-dialog-cover
                    transform translate(0px, 40px)
                    &~.oc-dialog-cover
                        transform translate(0px, 50px)
                        &~.oc-dialog-cover
                            transform translate(0px, 60px)
    &.tips
        .oc-dialog
            min-width 300px
            min-height 45px
            background-color #e9edfb
            border 1px solid #e9edfb
            color #2639a0
            font-weight bold
            text-align left
            .dialog-hd
                padding 0 15px
                flex 0 0 10px
                background-color inherit
                border-bottom 0
                overflow visible
            .dialog-bd
                color #2639a0
                padding-right 20px
                padding-left 45px
                margin 0
                position relative
                .tip-icon
                    position absolute
                    left 10px
                    top 50%
                    transform translateY(-50%)
                    width 30px
                    height 30px
                    background url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAVCAYAAABCIB6VAAABbUlEQVQ4jbXVMWsUYRDG8d+u4WIjR7A4IYKBAz+AYEAFP0E0aU1jFUEQRGy0SWOKU0HBQo2N15j+IHZWYhlQUxghaVTQQhBORGLhncXuHufqvrvF3tPtzsz/fd5hZzY6fqqrQAdxHks4jVkcwGe8wXNsoP+/4qgAfBEdHCk6NVUfa7iHwXggziU28ATdClBo4i56OFQEjlLgSgVgXgvYTI39A76GC4HiV3gRiJ/F/ZHLtMct7MpdJ6dj+IhhIGeIeWxljq+XQGEZl0pyItwYd/wJR0uKquoXDseYqwjtZG5KNI2TMdoVnTzC7Yq57VgyYXWrEeP7BMA/YryfAHgnxle8rRH6Da+z7/hpjeBn+J2B1/GhBuhPyVIa7Yp9XBUe123JNUO6KRm2v5ZQT3gAmpgJxB/iQfaQ38d3cFkyllU1wC1cGX+ZB8NjnJDs11Br4CXOYDWfO1VQ8A7nJP+5xbS4lbr7Iul3D3tFJ/4BVt5D2LbUL1AAAAAASUVORK5CYII=') no-repeat center;
            .dialog-close
                color #666
                top 50%
                transform translateY(-50%)

    &.tipsNoCover
        background-color rgba(0, 0, 0, .2)
        .oc-dialog
            background-color #e9edfb
            border 1px solid #e9edfb
            color #2639a0
    &.red, &.error
        .oc-dialog
            background-color #ffeef0
            border 1px solid #ffeef0
            .dialog-bd
                color #e11e1f
                .tip-icon
                    background url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAVCAYAAABCIB6VAAADiklEQVQ4jX2VXUxbZRjHf+ectltbaM8sUiSxrbiPOORKvTCM6KYwNdmCC/NCQS82YLDEqUs2GFg2vXKLM1FgbonJBswYzfxaYvQCEmXoLtQoC84oJm01GFrWjpZKy05PvejeroUDz935P+/ze973n/d9jhT0eFkjyoFngW3AfcB6IAb8DowBXwFpo0JJgD3BQF4MeX0VwJvAS4B5jcZh4C3gXU8woBXUIy9fGfL6aoFfgf0CKplMKJX3YKmpQamoWH6it4GxkNd3d2HCtAxaD1wG1gGYN2/GeehlrDt2INls+XWZmX9JXrpE/Nw59HgcoA6YCHl9tZ5gIFJkBbAR+BFwIkmohw/jONjJrelpkh9/wtK1a+jJJIrbzfq6bdibmsim09zoPEjq6lXB+BZ4EtAKwWPAdgC1uwtHWxs3T58mPjAIur7CXMXlwn35S5TyciLNLYXw14B3hMePCai1oR7HgQPE+o4Tf6/fEApQum8fpspKMn//g2ugH7mkRKS6AIsAvyhU9cgRUleukBgaMgQCqEeP4ujsIHb8BLN79yJbrZS27hfpcuAZAX4cwLJ1K+ZNm4ifPbs2tCN3osT582Tm5kh++hm23bsLl22XAQm4F8D8YDVZTSP9/Q/G0O6uO9ALF/J6amICc1UVcmmpkB6QARe376tylws9GiWracbQ9nZi/r4iKEBmbg4AuaxMSFYZWBRf2VQKWVVBLn436rFuHO3tRP1+Q+9lVQVAj88L6ZYMJIFZgKXrvyFZLFhqau5Ae47haGsj6vezMDRsaNG6hx8iEw6j34gK6S+xtXGA9E8/kwmHKWl+IQft7cHR2kq0t3dVqGS1Yt+zh8WvvymUx8WT/ghoQtOIDwyyoc+P7HRia2jIQUcuGkIBNvT0IDudxM+cEdJ/wBdix58D1wESw8Msjo5i27mThYsfrg5VFNTuLkpamon5+9BmZkTmfWBeedWpAmSBSaCFbFZeHB3DUl2NfdcuzPdvRE8k8rdFcbuxPf0UrlOnsNXXEzvxBgsjIwI6DTwPpIvmccjr6wAGc+ZJ2Bsbcb5yCJPPV7xbXSf13Tg3T55kaWpKqPNArScYmAp5fSsHfcjrawX6AYtoYN6yBZPXg+IqIzM7y9LkJJlIpLBVEGj0BAO/3Gas+gd5hNwArzM2OB8a8AHwupjDK8CrxBPAc8CjQBVgByLAH8AoMAL8aVT4P9P7RBLxdOUcAAAAAElFTkSuQmCC') no-repeat center

    &.success
        .oc-dialog
            background-color #e7fcd8
            border 1px solid #e7fcd8
            .dialog-bd
                color #298b0b
                .tip-icon
                    background url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAVCAYAAABCIB6VAAABu0lEQVQ4jZ3VO2gUQRgA4C/rC4MGCx+oBCWlRrQLgoqPThECIiiSSkQQbISgqGBnEW3sRLHJgYWVjyJgYSoRLMTKRgxijIUEQVDiA12LmeWGYdcs98Nyt//MfDc7989s31jniIZYg1M4jF3YiD/4iBd4iMf4UTd4aU1uCS7gKgZq+m+N10l8wiV0cqTI7gfwCBM1aF1swiRuY1nTjPvxFCMtwDzOYi2Oo8xnfKtH9Gv8PIbxKlnBu3G6B/QdhoWlg2vYnMLj6OsB3S9USQcLwnKer+DVaKy5/6AHIjqMZ1gZ205U8AiWZwP/tkBnsT2i65L2LRgsMJQNvIlR/KpBZzJ0OkOrGCqwIknMCn/AE6F0UnxGWNOmmaaxqsC3JDEY0X5hu1Z4Hbq+AYX5Am+y5MGIVvio7uNva4GWeFvglW6RV3EowafwIaLTi6DwGl8K/Mb9mg4p3mamVUzS3SATQoHX4VMR3dACncPdFH6Pyw2d97VES5zD9xQmHEL3WgBNcVFYOjlc4gyux+9t46dwbN5Ik/lBX+IK9uL5ImCJB8JZcSdvrHs1iege7MBR7BR22QI+46Xw2HNNv/oPbQdi5b8TNREAAAAASUVORK5CYII=') no-repeat center;


    &.info
        .oc-dialog
            background-color #e9edfb
            border 1px solid #e9edfb
            .dialog-bd
                color #2639a0
                .tip-icon
                    background url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAVCAYAAABCIB6VAAABbUlEQVQ4jbXVMWsUYRDG8d+u4WIjR7A4IYKBAz+AYEAFP0E0aU1jFUEQRGy0SWOKU0HBQo2N15j+IHZWYhlQUxghaVTQQhBORGLhncXuHufqvrvF3tPtzsz/fd5hZzY6fqqrQAdxHks4jVkcwGe8wXNsoP+/4qgAfBEdHCk6NVUfa7iHwXggziU28ATdClBo4i56OFQEjlLgSgVgXgvYTI39A76GC4HiV3gRiJ/F/ZHLtMct7MpdJ6dj+IhhIGeIeWxljq+XQGEZl0pyItwYd/wJR0uKquoXDseYqwjtZG5KNI2TMdoVnTzC7Yq57VgyYXWrEeP7BMA/YryfAHgnxle8rRH6Da+z7/hpjeBn+J2B1/GhBuhPyVIa7Yp9XBUe123JNUO6KRm2v5ZQT3gAmpgJxB/iQfaQ38d3cFkyllU1wC1cGX+ZB8NjnJDs11Br4CXOYDWfO1VQ8A7nJP+5xbS4lbr7Iul3D3tFJ/4BVt5D2LbUL1AAAAAASUVORK5CYII=') no-repeat center;

     &.warning
        .oc-dialog
            background-color #fcf7cc
            border 1px solid #fcf7cc
            .dialog-bd
                color #ad5927
                .tip-icon
                    background url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAASCAYAAAC0EpUuAAABMklEQVQ4ja3UzStEURjH8c8dQxZqRhopWbBUUsLG20b5G6Rkw9jJxk5ZoESxQVasLPwHytJCycLCf2EjlLyUxb1Tt5m5d66X3+qc5zy/7+mc8zwneDkvyKA+rOEGZ42S8xmAbbhCL8p4x3maIZcBuh4BK9pH8S/QfqxWxTqx/VtogCM0R/N7PEfjJQz/BjqHqdh8BCfRuCnasK4/CVrEblXsA59Vm5R/At1EV8JaXFsoZYEOYTkDENrVnqgGmsOx8M6yah4TadBFjCaYW9FSJx7gUKyR4tCS8I6SdCfhYTCAlXrQHXQkmF5xKqzVJG2gOw4dw0KK4Rp7OEjJaRO2sCD6pW6ldAi+cIFx9KTkwWQehQZAwmqYbZBT0XQOT8Kv7T/0hstKGcxgUPJDZdEHHvD4DYV0K8+PU0wkAAAAAElFTkSuQmCC') no-repeat center;

.oc-dialog
    display flex
    flex-direction column
    overflow hidden
    position relative
    box-shadow 0 0 10px rgba(100, 100, 100, .4)
    min-width 215px
    min-height 100px
    max-height 80%
    background-color #fff
    font-size 12px
    border solid 1px #fafafa
    border-radius 4px
    animation-name zoomIn
    animation-duration .3s
    &.yellow
        border 1px solid #faebcc
        box-shadow -10px -3px 10px rgba(100,100,100,.2)
        .dialog-hd
            min-height 40px
            background #fff9ee
            border-color #faebcc
            color #8a6d3b
            text-transform capitalize 
       
    .dialog-hd
        text-align center
        position relative
        overflow hidden
        min-height 40px
        color #333
        font-size 14px
        font-weight bold
        line-height 40px
        border-bottom solid 1px #ddd
    .dialog-close
        position absolute
        right 0
        top 0
        z-index 2
        display block 
        
        width 36px 

        text-align center
        line-height 40px
        font-size 20px
        font-weight normal
        cursor pointer
        &:hover 
            color #000        
    .dialog-bd
        position relative
        padding 20px
        padding-left 20px
        overflow-y auto
        flex 1 1 auto
        font-size 12px
        color #333
        &.icon-type
            padding-left 40px
    .dialog-ft
        min-height 40px
        justify-content center
        align-items center

        text-align center
        button
            padding 0 10px
            min-width 60px
            height 25px
    .dialog-hd + .dialog-bd + .dialog-ft
        margin 10px 0px
    .dialog-hd + .dialog-bd
        margin 0
.ocTooltipsWarn
    z-index 1001
    box-shadow 0 0 15px rgba(100, 100, 100, .15)
    background #fff 
    border 1px solid #ddd
    padding 10px 10px 10px 30px
    white-space nowrap
    color #222
    border-radius 2px
    font-size 13px
    line-height 1em !important
                
    &:before
        content "!"
        display block
        width 18px
        height 18px
        line-height 20px
        font-weight border
        position absolute
        left 7px
        top 7px
        border-radius 2px
        text-align center
        background rgba(254, 181, 37, 1) 
        color #fff
        font-family '-webkit-pictograph', 'monospace'

    &:after
        content ""
        border-top 5px solid transparent
        height 0
        width 0
        display block
        position absolute
        margin-top -5px
        top -7px 
        left 15px
        border-bottom 8px solid #fff
        border-left 6px solid transparent
        border-right 6px solid transparent