.color-box code {
    background: transparent;
    padding: 0;
    font-size: 16px;
    color: inherit
}

    .color-box code a {
        background: transparent;
        margin: 0
    }



.break {
    margin-bottom: 20px !important;
}


.color-box {
    margin: 20px;
    padding-left: 20px;
    position: relative;
}

.note-box, .warning-box, .tip-box {
    padding: 15px 15px 2px 28px;
    min-height:6rem;
}


/*Green tip box*/
.tip-box {
    color: #2e5014;
    background: #d5efc2
}

    .tip-box a {
        color: #439800
    }

.tip-icon {
    background: #92CD59;
    color: #ffffff;
    font-size: 24px;
}

    .tip-icon::before {
        background: #75b436
    }


/* Blue note box*/
.note-box {
    color: #144261;
    background: #d5e9f6
}

    .note-box a {
        color: #4395c6
    }

.note-icon {
    background: #47ADE0;
    color: #ffffff;
    font-size: 24px;
}

    .note-icon::before {
        background: #75b436
    }



/*Red Warning box*/
.warning-box {
    color: #913944;
    background: #ecd2d7
}

    .warning-box a {
        color: #d45565
    }

.warning-icon {
    background: #AD3C3C;
    color: #ffffff;
    font-size: 24px;
}

    .warning-icon::before {
        background: #75b436
    }


.info-tab {
    width: 40px;
    height: 40px;
    display: inline-block;
    position: absolute;
    top: 16px;
    left: 0
}

    .info-tab::before, .info-tab::after {
        content: "";
        display: inline-block;
        line-height: normal;
        position: absolute;
        left: 0;
        bottom: -15px;
        transform: rotateX(60deg)
    }


    .info-tab code {
        font-size: 24px;
    }

        .info-tab code::before, .info-tab code::after {
            content: "";
            display: inline-block;
            position: absolute;
            left: 0;
            bottom: -15px;
            transform: rotateX(60deg)
        }

        .info-tab code::before {
            width: 20px;
            height: 20px;
            box-shadow: inset 12px 0 13px rgba(0,0,0,0.5)
        }

        .info-tab code::after {
            width: 0;
            height: 0;
            border: 12px solid transparent;
            border-bottom-color: #fff;
            border-left-color: #fff;
            bottom: -18px
        }