.itrk-tooltip {
    position: relative;
}

/** itrk-ui.css **/
itrk-input-content itrk-input-wrapper.info .itrk-tooltip,
itrk-checkbox-content itrk-checkbox-wrapper.info .itrk-tooltip {
	position: absolute;
	/* height: 100%; */
    width: 15px;
	margin-right: 10px;
    top: 0px;
	right: -3px;
}

itrk-checkbox-content itrk-checkbox-wrapper.info .itrk-tooltip {
    top: 1px;
	right: -35px;
}

itrk-input-content itrk-input-wrapper.action .itrk-tooltip,
itrk-input-content itrk-input-wrapper.action.regex .itrk-tooltip {
    right: 36px;
}
itrk-input-content .itrk-tooltip i.fa-info-circle {
    margin-top: 10px;
}
.inline.itrk-tooltip, span.itrk-tooltip {
	display: inline-block;
}

.itrk-tooltip-text {
	min-width: 100%;
	max-width: 100%;
	width: 100%;
	padding: 10px 20px;
	color:var(--dark-gray);
	background-color:white;
	font-weight: normal;
	font-size: 13px;
	border-radius: 8px;
	position: absolute;
	z-index: 100;
	box-sizing:border-box;
	display: none;
	margin-top: 25px;
	left: 50%;
	transform: translate(-50%, 0);
	filter: drop-shadow(3px 3px 10px #00000029);
	-webkit-filter: drop-shadow(3px 3px 10px #00000029);
}

.itrk-tooltip .itrk-tooltip-text.tooltip-top {
	margin-top: 0;
	top: 0;
	left: 0%;
	transform: translateX(0) translateY(-100%) translateY(-25px); 
}
@media all and (min-width: 768px) {
	.itrk-tooltip-text {
		min-width: 260px;
		max-width: 360px;
	}
	.itrk-tooltip:hover .itrk-tooltip-text {
		display: block;
	}
	.itrk-tooltip .itrk-tooltip-text.tooltip-top {
		left: 50%;
		transform: translateX(-50%) translateY(-100%) translateY(-25px);
	}
}
.itrk-tooltip-text > .tooltip-text-inner {
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: none;
}

.itrk-tooltip .itrk-tooltip-text::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f0d8";
	position: absolute;
	font-size: 50px;
	line-height: 30px;
	left: 50%;
	top: 0px;
	margin-top: -23px;
	margin-left: -15px;
	color: white;
	background: none;
}

.itrk-tooltip .itrk-tooltip-text.tooltip-top::before {
	content: "\f0d7";
	top:initial;
	margin-top: initial;
	bottom: 0;
	margin-bottom: -19px;
}
.itrk-tooltip .itrk-tooltip-text.itrk-tooltip-fulltext {
	white-space: normal;
}

/** new .itrk-tooltip.tooltip-small **/
.itrk-tooltip.tooltip-small:before {
    content: attr(data-text);
    position: absolute;
    font-size: 15px;
    font-weight: 300;
    left: 100%;
    min-width: 200px;
    width: 100%;
    padding: 6px 15px;
    border-radius: var(--itrk-border-radius);
    background: var(--dark-gray);
    color: white;
    display: none;
}

.itrk-tooltip.tooltip-small:after {
    content: "";
    position: absolute;
    left: 100%;
    margin-left: -2px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid var(--dark-gray);
    border-color: transparent var(--dark-gray) transparent transparent;
    display: none;
}

.itrk-tooltip.tooltip-small:hover:before,
.itrk-tooltip.tooltip-small:hover:after {
    display: block;
}

/** Tooltip Bottom **/
.itrk-tooltip.tooltip-small.tooltip-bottom:before {
    top: -50%;
    left: 50%;
    transform: translateX(-50%) translateY(50%) !important;
    margin-left: 0;
    margin-top: 11px;
}
.itrk-tooltip.tooltip-small.tooltip-bottom:after {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(50%) !important;
    margin-left: 0;
    margin-top: -1px;
    border-color: transparent transparent var(--dark-gray) transparent;
}

/** Tooltip Top **/
.itrk-tooltip.tooltip-small.tooltip-top:before {
    top: -50%;
    left: 50%;
    transform: translateX(-50%) translateY(-100%) !important;
    margin-left: 0;
    margin-top: 5px;
}
.itrk-tooltip.tooltip-small.tooltip-top:after {
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) !important;
    margin-left: 0;
    margin-top: -1px;
    border-color: var(--dark-gray) transparent transparent transparent;
}

/** Tooltip Right **/
.itrk-tooltip.tooltip-small.tooltip-right:before {
    top: 50%;
    transform: translateY(-50%);
    margin-left: 10px;
}
.itrk-tooltip.tooltip-small.tooltip-right:after {
    top: 50%;
    transform: translateY(-50%);
    left: 100%;
    margin-left: -2px;
}

/** Tooltip Left **/
.itrk-tooltip.tooltip-small.tooltip-left:before {
    top: 50%;
    transform: translateX(-100%) translateY(-50%) !important;
    margin-left: 1px;
    left: -100%;
}
.itrk-tooltip.tooltip-small.tooltip-left:after {
    top: 50%;
    transform: translateX(-100%) translateY(-50%) !important;
    border-color: transparent transparent transparent var(--dark-gray);
    margin-left: 0;
    left: 0%;
}