.tip_mod_container {
    position: absolute;
    display: none;
    margin-top: 8px;
    z-index: 4000;
}
.tip_mod_container.north {
    margin-top: -8px;
}

.tip_mod_container .tip_outer {
    position: absolute;
}
.tip_mod_container.north .tip_outer {
    bottom: 0;
}

.tip_mod_container[data-arrow="top"]:after,
.tip_mod_container[data-arrow="top"]:before {
    border: solid transparent;
    content: "";
    left: 0;
    height: 0;
    width: 0;
    bottom: 100%;
    position: absolute;
    pointer-events: none;
}
.tip_mod_container[data-arrow="top"].north:after,
.tip_mod_container[data-arrow="top"].north:before {
    bottom: auto;
    top: 100%;
}
.tip_mod_container[data-arrow="top"]:before {
    border-width: 8px;
    margin-left: -8px;
    border-bottom-color: rgba(0, 0, 0, 0.45);
}
.tip_mod_container[data-arrow="top"].north:before {
    border-bottom-color: transparent;
    border-top-color: rgba(0, 0, 0, 0.45);
}
.tip_mod_container[data-arrow="top"]:after {
    border-width: 7px;
    margin-left: -7px;
    border-bottom-color: #fffef0;
}
.tip_mod_container[data-arrow="top"].north:after {
    border-bottom-color: transparent;
    border-top-color: #fffef0;
}

.tip_mod_container .tip_outer .tip_inner {
    white-space:           nowrap;
    display:               block;
    position:              relative;
    /*min-width:             300px;*/
    /*left:                  -50%;*/
    padding:               10px;
    color:                 #5e5d62;
    font-size:             14px;
    line-height:           18px;
    background:            #fffef0;
    -webkit-box-shadow:    0 0 5px 0 rgba(0, 0, 0, 0.75);
    -moz-box-shadow:       0 0 5px 0 rgba(0, 0, 0, 0.75);
    box-shadow:            0 0 5px 0 rgba(0, 0, 0, 0.75);
    /*border:                1px solid #8a8990;*/
    /*z-index:               2;*/

    border-radius:         6px 6px 6px 6px;
    -o-border-radius:      6px 6px 6px 6px;
    -ms-border-radius:     6px 6px 6px 6px;
    -moz-border-radius:    6px 6px 6px 6px;
    -icab-border-radius:   6px 6px 6px 6px;
    -khtml-border-radius:  6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    behavior:              url("border-radius.htc");
}
.tip_mod_container .tip_outer .tip_inner > div > p  {
    margin-top: 7px;
}
.tip_mod_container .tip_outer .tip_inner > div > p:first-child  {
    margin-top: 0;
}

/* style black */
.tip_mod_container[data-arrow="top"].style_black:before {
    display: none;
}
.tip_mod_container[data-arrow="top"].style_black:after {
    border-width: 4px;
    border-bottom-width: 7px;
    margin-left: -4px;
    border-bottom-color: #000000;
}
.tip_mod_container.style_black .tip_outer .tip_inner {
    background: black;
    box-shadow: none;
    padding: 4px 9px 6px;
    color: white;
    border-radius: 4px;
}
/* * style black */

/* style white */
.tip_mod_container.style_white {
    margin-top: 12px;
}
.tip_mod_container[data-arrow="top"].style_white:before {
    border-width: 9px;
    margin-left: -9px;
    border-bottom-width: 13px;
}
.tip_mod_container[data-arrow="top"].style_white:after {
    border-width: 8px;
    margin-left: -8px;
    border-bottom-color: #FFFFFF;
    border-bottom-width: 12px;
}
.tip_mod_container.style_white .tip_outer .tip_inner {
    background: white;
    padding: 15px 18px;
    color: black;
}
/* * style black */