.tip {
	position: absolute;
	top: -100px;
	left: -100px;
	padding: 1em;
	z-index: 10000;
	cursor: default;
}

.tip-panel {
	min-width: 1em;
	min-height: 1.5em;
}

.tip.tip-disabled {
	display: none;
}

.tip.tip-display-mode-wide .tip-content {
	max-width: 18.8em;
}

.tip-content,
.tip-items {
	margin-right: 0.4em;
}

.align-left .tip-content,
.align-left .tip-items {
	margin-right: 0.7em;
}

.tip-content {
	overflow: hidden;
	word-wrap: break-word;
	font-size: 1.4em;
	white-space: pre-wrap;
}

.tip-tools-wrap > * {
	margin-left: 0.5em;
}

.tip-tools-wrap .t-btn-wrapper {
	padding: 0;
	margin: -0.4em -0.4em;
}

.tip-white .tip-border {
	background-color: #fff;
	border-color: transparent;
}

.tip-green .tip-border {
	background-color: #fff;
	border-color: #8ecb60;
}

.tip-tools-close-btn {
	background-repeat: no-repeat;
	background-position-x: 0.3em;
	background-position-y: 0.2em;
}

.tip-anchor:before {
	position: absolute;
	font-size: 1.2em;
	color: transparent;
	z-index: -1;
	text-shadow: 0 0 0.3em rgba(0, 0, 0, 0.3);
}

.tip-white .tip-anchor {
	border-color: white;
}

.tip-white .tip-anchor:after {
	border-color: white;
}

.tip-green .tip-anchor {
	border-color: #8ecb60;
}

.tip-green .tip-anchor:after {
	border-color: white;
}

.tip-red .tip-border {
	background-color: #ffede9;
	border-color: #ff7a64;
}

.tip-red .tip-anchor {
	border-color: #ff7a64;
}

.tip-red .tip-anchor:after {
	border-color: #ffede9;
}

.tip-blue .tip-border {
	background-color: #fff;
	border-color: #5FD9FF;
}

.tip-blue .tip-anchor {
	border-color: #5FD9FF;
}

.tip-blue .tip-anchor:after {
	border-color: #fff;
}

.tip-yellow .tip-border {
	background-color: #fff;
	border-color: #FFD700;
}

.tip-yellow .tip-anchor {
	border-color: #FFD700;
}

.tip-yellow .tip-anchor:after {
	border-color: #fff;
}

.tip-anchor,
.tip-anchor:after {
	border-style: double;
}

.tip-anchor {
	position: absolute;
	border-width: 0.6em;
}

.tip-anchor:after {
	content: '';
	border-width: 0.6em;
	position: absolute;
}

.align-top .tip-anchor:before {
	left: -.5em;
	top: -1em;
	content: '▼';
}

.align-top .tip-anchor {
	left: 50%;
	top: 100%;
}

.align-top .tip-anchor:after {
	margin-top: -1em;
}

.align-bottom .tip-anchor:after,
.align-top .tip-anchor:after {
	margin-left: -0.6em;
}

.align-bottom .tip-anchor,
.align-top .tip-anchor {
	margin-left: -0.5em;
	margin-top: -1.1em;
}

.align-bottom .tip-anchor {
	left: 50%;
}

.align-bottom .tip-anchor:after {
	margin-top: -0.2em;
}

.align-bottom .tip-anchor:before {
	left: -0.5em;
	top: -0.6em;
	content: '▲';
}

.tip.align-bottom .tip-anchor,
.tip.align-bottom .tip-anchor:after {
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-color: transparent;
	border-bottom-style: solid;
}

.align-right .tip-anchor:before {
	left: -0.3em;
	top: -.8em;
	content: '◄';
}

.align-right .tip-anchor {
	top: 50%;
}

.align-right .tip-anchor:after {
	margin-left: -0.2em;
	margin-top: -0.6em;
}

.align-right .tip-anchor,
.align-left .tip-anchor {
	margin-top: -0.5em;
	margin-left: -1.1em;
}

.align-left .tip-anchor:before {
	left: -0.6em;
	top: -0.7em;
	content: '►';
}

.align-left .tip-anchor {
	top: 50%;
	left: 100%;
}

.align-left .tip-anchor:after {
	margin-left: -1em;
	margin-top: -0.6em;
}

.tip.align-top .tip-anchor,
.tip.align-top .tip-anchor:after {
	border-left-color: transparent;
	border-right-color: transparent;
	border-bottom-color: transparent;
	border-top-style: solid;
}

.tip.align-right .tip-anchor,
.tip.align-right .tip-anchor:after {
	border-left-color: transparent;
	border-bottom-color: transparent;
	border-top-color: transparent;
	border-right-style: solid;
}

.tip.align-left .tip-anchor,
.tip.align-left .tip-anchor:after {
	border-right-color: transparent;
	border-bottom-color: transparent;
	border-top-color: transparent;
	border-left-style: solid;
}

.align-bottom .tip-tools-wrap {
	padding-top: 1.3em;
}

.align-left .tip-tools-wrap {
	padding-right: 1.3em;
}

.tip-tools-wrap {
	position: absolute;
	top: 1em;
	right: 1em;
	padding-top: 1em;
	padding-right: 1em;
	padding-bottom: 0px;
	padding-left: 0px;
}

.tip-display-mode-narrow .tip-border {
	padding: 1.1em 1.5em;
}

.tip-border {
	padding: 1.5em;
	border: 0.3em solid;
	box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.6em 0.02em;
	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.2em;
	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.2em;
}

.align-bottom .tip-border {
	border-left: none;
	border-bottom: none;
	border-right: none;
}

.align-top .tip-border {
	border-left: none;
	border-right: none;
	border-top: none;
}

.align-right .tip-border {
	border-bottom: none;
	border-right: none;
	border-top: none;
}

.align-left .tip-border {
	border-left: none;
	border-bottom: none;
	border-top: none;
}

/*rtl:begin:ignore*/
html[dir="rtl"] {
	.align-left .tip-anchor {
		&:before {
			content: "◄";
		}
	}

	.align-right .tip-anchor {
		&:before {
			top: -0.7em;
			content: "►";
		}
	}
}
/*rtl:end:ignore*/