.tour-tip-container
{
    position: absolute;
    display: none;
    /* z-index: 9999; */
    z-index: 28; /* under autosaved notices */
}

.tour-tip
{
    position: relative;
    color: #ffffff;
    border-radius: 4px;
    background-color: #50c8b5;
    padding: 10px;
    font-size: 14px;
    box-shadow: -1px 1px 1px 2px rgba(0, 0, 0, 0.3);
    font-family: calluna_sans, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.tour-tip p {
    margin: 0;
}

.tour-tip button {
    cursor: pointer;
    color: #fff;
    border-radius: 4px;
    background-color: #e0684a;
    border: 0;
    padding: 6px 12px;
    outline: none;
    margin-top: 5px;
    margin-bottom: 5px;
}

.tour-tip .nowrap
{
    white-space: nowrap;
}

.tour-tip.with-down-arrow
{
    box-shadow: -1px 1px 1px 2px rgba(0, 0, 0, 0.3);
    margin-top: -14px;
    text-align: center;
}

.tour-tip.with-up-arrow
{
    box-shadow: 1px -1px 1px 2px rgba(0, 0, 0, 0.3);
    margin-top: 14px;
    text-align: center;
}

.tour-tip.with-left-arrow
{
    box-shadow: -1px -1px 1px 2px rgba(0, 0, 0, 0.3);
    margin-top: 14px;
    text-align: center;
}

.tour-tip.with-right-arrow
{
    box-shadow: 1px -1px 1px 2px rgba(0, 0, 0, 0.3);
    margin-top: 14px;
    text-align: center;
}



.with-down-arrow::after
{
    content: "";
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: -14px;
    bottom: -14px;
    left: 50%;
    box-sizing: border-box;
    border: 7px solid black;
    border-color: transparent transparent #50c8b5 #50c8b5;
    transform-origin: 0 0;
    transform: rotate(-45deg);
    box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.4);
}

.with-up-arrow::after
{
    content: "";
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: -14px;
    top: 0px;
    left: 50%;
    box-sizing: border-box;
    border: 7px solid black;
    border-color: #50c8b5 #50c8b5 transparent transparent;
    transform-origin: 0 0;
    transform: rotate(-45deg);
    box-shadow: 2px -2px 2px 0 rgba(0, 0, 0, 0.4);
}

.with-left-arrow::after
{
    content: "";
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: -10px;
    top: 50%;
    left: 0;
    box-sizing: border-box;
    border: 7px solid black;
    border-color: #50c8b5 transparent transparent #50c8b5;
    transform-origin: 0 0;
    transform: rotate(-45deg);
    box-shadow: -2px -2px 2px 0 rgba(0, 0, 0, 0.4);
}

.with-right-arrow::after
{
    content: "";
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: -4px;
    top: 50%;
    right: 0;
    box-sizing: border-box;
    border: 7px solid black;
    border-color: transparent #50c8b5 #50c8b5 transparent;
    transform-origin: 0 0;
    transform: rotate(-45deg);
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.4);
}