/* Balloon Tooltips */

button[data-balloon] {
    overflow: visible;
}

[data-balloon] {
    border: 0px none;
    position: relative;
    background: transparent;
}

[data-balloon]:before,
[data-balloon]:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.18s ease-out 0.18s;
    transition: all 0.18s ease-out 0.18s;
    bottom: 100%;
    left: 50%;
    position: absolute;
    z-index: 99999 !important;
    -webkit-transform: translate(-50%, 10px);
    -ms-transform: translate(-50%, 10px);
    transform: translate(-50%, 10px);
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
}

[data-balloon]:after {
    background: rgba(34, 37, 40, 0.95);
    border-radius: 4px;
    color: #fff;
    content: attr(data-balloon);
    font-size: 12px;
    line-height: 1.4;
    padding: .5em 1em;
    white-space: nowrap;
    margin-bottom: 11px;
}
.Missio__Accounts__Lists [data-balloon]:after,
.Missio__Account__Portlet [data-balloon]:after,
.Form__Next.modal-body [data-balloon]:after {
    min-width: 210px;
    white-space: pre-wrap;
}

.Missio__Accounts__Lists [data-balloon-length='xs']:after,
.btn__navigator [data-balloon-length='xs']:after {
    min-width: inherit !important;
    text-align: center !important;
    white-space: nowrap;
}

.Missio__Profile__Account__Header [data-balloon]:after {
    min-width: 150px;
    white-space: pre-wrap;
}

[data-balloon]:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(34, 37, 40, 0.95)' d='M2.658 0h32.004c-6 0-11.627 12.002-16.002 12.002C14.285 12.002 8.594 0 2.658 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 6px;
    width: 18px;
    content: "";
    margin-bottom: 5px;
}

[data-balloon]:hover:before,
[data-balloon][data-balloon-visible]:before,
[data-balloon]:hover:after,
[data-balloon][data-balloon-visible]:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

[data-balloon].font-awesome:after {
    font-family: 'FontAwesome';
}

[data-balloon][data-balloon-break]:after {
    white-space: pre-wrap;
}

[data-balloon-pos="down"]:before,
[data-balloon-pos="down"]:after {
    bottom: auto;
    left: 50%;
    top: 100%;
    -webkit-transform: translate(-50%, -10px);
    -ms-transform: translate(-50%, -10px);
    transform: translate(-50%, -10px);
}

[data-balloon-pos="down"]:after {
    margin-top: 11px;
}

[data-balloon-pos="down"]:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(34, 37, 40, 0.95)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 6px;
    width: 18px;
    margin-top: 5px;
    margin-bottom: 0;
}

[data-balloon-pos="down"]:hover:before,
[data-balloon-pos="down"][data-balloon-visible]:before,
[data-balloon-pos="down"]:hover:after,
[data-balloon-pos="down"][data-balloon-visible]:after {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

[data-balloon-pos="left"]:before,
[data-balloon-pos="left"]:after {
    bottom: auto;
    left: auto;
    right: 100%;
    top: 50%;
    -webkit-transform: translate(10px, -50%);
    -ms-transform: translate(10px, -50%);
    transform: translate(10px, -50%);
}

[data-balloon-pos="left"]:after {
    margin-right: 11px;
}

[data-balloon-pos="left"]:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(34, 37, 40, 0.95)' d='M0 33.342V1.338c0 6 12.002 11.627 12.002 16.002C12.002 21.715 0 27.406 0 33.342z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 18px;
    width: 6px;
    margin-right: 5px;
    margin-bottom: 0;
}

[data-balloon-pos="left"]:hover:before,
[data-balloon-pos="left"][data-balloon-visible]:before,
[data-balloon-pos="left"]:hover:after,
[data-balloon-pos="left"][data-balloon-visible]:after {
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

[data-balloon-pos="right"]:before,
[data-balloon-pos="right"]:after {
    bottom: auto;
    left: 100%;
    top: 50%;
    -webkit-transform: translate(-10px, -50%);
    -ms-transform: translate(-10px, -50%);
    transform: translate(-10px, -50%);
}

[data-balloon-pos="right"]:after {
    margin-left: 11px;
}

[data-balloon-pos="right"]:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(34, 37, 40, 0.95)' d='M12 2.658v32.004c0-6-12.002-11.627-12.002-16.002C-.002 14.285 12 8.594 12 2.658z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 6px;
    height: 18px;
    margin-bottom: 0;
    margin-left: 5px;
}

[data-balloon-pos="right"]:hover:before,
[data-balloon-pos="right"][data-balloon-visible]:before,
[data-balloon-pos="right"]:hover:after,
[data-balloon-pos="right"][data-balloon-visible]:after {
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

[data-balloon-length]:after {
    white-space: normal;
}

[data-balloon-length="auto"]:after {
	width: auto!important;
    max-width: inherit !important;
    text-align: center !important;
}
[data-balloon-length="small"]:after {
	width: 80px !important;
    max-width: 80px !important;
    min-width: inherit !important;
    text-align: center !important;
}
[data-balloon-length='xs']:after {
    text-align: center !important;
    white-space: nowrap;
}

[data-balloon-length="medium"]:after {
	width: 250px;
    text-align: center;
}
[data-balloon-length="large"]:after {
	width: 280px;
    text-align: justify;
}
[data-balloon-length="xlarge"]:after {
	width: 90vw;
    text-align: left;
}

@media screen and (min-width: 768px) {
	[data-balloon-length="xlarge"]:after {
		width: 350px;
	}
}
[data-balloon-length="fit"]:after {
	width: 100%;
}

@media (max-width: 767px) {
    /* Right */
    [data-balloon-mobile-pos='right']:before,
    [data-balloon-mobile-pos='right']:after {
        top: 50%;
        left: 100%;
        bottom: auto;
        transform: translate(-10px, -50%);
    }
    [data-balloon-mobile-pos='right']:after {
        margin-left: 11px;
    }
    [data-balloon-mobile-pos='right']:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(34, 37, 40, 0.95)' d='M12 2.658v32.004c0-6-12.002-11.627-12.002-16.002C-.002 14.285 12 8.594 12 2.658z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 100% auto;
        height: 18px;
        width: 6px;
        margin-bottom: 0;
        margin-left: 5px;
    }
    [data-balloon-mobile-pos='right']:hover:before,
    [data-balloon-mobile-pos='right'][data-balloon-visible]:before,
    [data-balloon-mobile-pos='right']:hover:after,
    [data-balloon-mobile-pos='right'][data-balloon-visible]:after {
        transform: translate(0px, -50%);
    }

    /* Down */
    [data-balloon-mobile-pos='down']:before,
    [data-balloon-mobile-pos='down']:after {
        left: 50%;
        top: 100%;
        bottom: auto;
        transform: translate(-50%, -10px);
    }

    [data-balloon-mobile-pos='down']:after {
        margin-top: 11px;
    }

    [data-balloon-mobile-pos='down']:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(34, 37, 40, 0.95)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 100% auto;
        height: 6px;
        width: 18px;
        margin-top: 5px;
        margin-bottom: 0;
    }

    [data-balloon-mobile-pos='down']:hover:before,
    [data-balloon-mobile-pos='down'][data-balloon-visible]:before,
    [data-balloon-mobile-pos='down']:hover:after,
    [data-balloon-mobile-pos='down'][data-balloon-visible]:after {
        transform: translate(-50%, 0px);
    }

    /* Left */
    [data-balloon-mobile-pos='left']:before,
    [data-balloon-mobile-pos='left']:after {
        top: 50%;
        left: auto;
        right: 100%;
        bottom: auto;
        transform: translate(10px, -50%);
    }
    [data-balloon-mobile-pos='left']:after {
        margin-right: 11px;
    }
    [data-balloon-mobile-pos='left']:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(34, 37, 40, 0.95)' d='M0 33.342V1.338c0 6 12.002 11.627 12.002 16.002C12.002 21.715 0 27.406 0 33.342z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 100% auto;
        height: 18px;
        width: 6px;
        margin-right: 5px;
        margin-bottom: 0;
    }
    [data-balloon-mobile-pos='left']:hover:before,
    [data-balloon-mobile-pos='left'][data-balloon-visible]:before,
    [data-balloon-mobile-pos='left']:hover:after,
    [data-balloon-mobile-pos='left'][data-balloon-visible]:after {
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }

    [data-balloon-mobile-length='medium']:after {
        width: 185px;
        text-align: center;
    }
}