/* Big Tooltip container */
.bigtooltip {
	position: relative;
	display: inline-block;
	color: #000;
	border-bottom: 0.5px dotted #000; /* If you want dots under the hoverable text */
	cursor: pointer;
}
/* Tooltip text */
.bigtooltip .bigtooltiptext {
	visibility: hidden;
	width: 200px;
	top: 0px;
	left: 105%;
	background-color: #000;
	color: #000;
	font-weight: bold;
	text-align: center;
	padding: 5px;
	border: 1px solid #CCC;
	border-radius: 4px;
	font-size: 14px;
	margin-left: 0px;
	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
}
.bigtooltip .bigtooltiptext::after {
	content: " ";
	position: absolute;
	top: 50%;
	right: 100%; /* To the left of the tooltip */
	margin-top: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent #000 transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.bigtooltip:hover .bigtooltiptext {
	visibility: visible;
}

/* Start Left Tooltip Scripts */
.lefttooltip {
	position: relative;
	display: inline-block;
	color: #000;
	border-bottom: 0.5px dotted #999999; /* If you want dots under the hoverable text */
	cursor: pointer;
}
/* Left Tooltip text */
.lefttooltip .lefttooltiptext {
	visibility: hidden;
	position: absolute;
	width: 225px;
	top: -80px;
	right: 120%;
	background-color: lightyellow;
	color: #000;
	text-align: left;
	padding: 10px;
	border: 1px solid #000000;
	border-radius: 4px;
	font-size: 12px;
	margin-left: 5px;
	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
}
.lefttooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #000;
}
/* Show the tooltip text when you mouse over the tooltip container */
.lefttooltip:hover .lefttooltiptext {
	visibility: visible;
}

/* Left Tooltip text */
.lefttooltip {
	position: relative;
	display: inline-block;
	color: #000;
	border-bottom: 0.5px dotted #999999; /* If you want dots under the hoverable text */
	cursor: pointer;
	z-index: 10
}
/* End Left Tooltip Scripts */

/* Start Red Tooltip Scripts */
.redtooltip {
	position: relative;
	display: inline-block;
	color: red;
	border-bottom: 0.5px dotted #999999; /* If you want dots under the hoverable text */
	cursor: pointer;
}
/* Left Tooltip text */
.redtooltip .redtooltiptext {
	visibility: hidden;
	position: absolute;
	width: 225px;
	top: -80px;
	right: 120%;
	background-color: floralwhite;
	color: red;
	text-align: left;
	padding: 10px;
	border: 1px solid red;
	border-radius: 4px;
	font-size: 12px;
	margin-left: 5px;
	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
}
.redtooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent red;
}
/* Show the tooltip text when you mouse over the tooltip container */
.redtooltip:hover .redtooltiptext {
	visibility: visible;
}

/* Left Tooltip text */
.redtooltip {
	position: relative;
	display: inline-block;
	color: red;
	border-bottom: 0.5px dotted #999999; /* If you want dots under the hoverable text */
	cursor: pointer;
	z-index: 1000
}
/* End Left Tooltip Scripts */


/* Start Warning Tooltip Scripts */
.warningtooltip {
	position: relative;
	display: inline-block;
	color: orange;
	/* border-bottom: 0.5px dotted #999999; If you want dots under the hoverable text */
	cursor: pointer;
}
/* Warning Tooltip text */
.warningtooltip .warningtooltiptext {
	visibility: hidden;
	position: absolute;
	width: 225px;
	top: -80px;
	right: 120%;
	background-color: #fff3cd;
	color: #86640f;
	text-align: left;
	padding: 10px;
	border: 1px solid #86640f;
	border-radius: 4px;
	font-size: 12px;
	margin-left: 5px;
	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
}
.warningtooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #86640f;
}
/* Show the tooltip text when you mouse over the tooltip container */
.warningtooltip:hover .warningtooltiptext {
	visibility: visible;
}

/* Warning Tooltip text */
.warningtooltip {
	position: relative;
	display: inline-block;
	color: red;
	/* border-bottom: 0.5px dotted #999999; If you want dots under the hoverable text */
	cursor: pointer;
	z-index: 10
}
/* End Warning Tooltip Scripts */

/* Start Left Tooltip Sub Scripts */
.lefttooltipsub {
	position: relative;
	display: inline-block;
	color: #000;
	border-bottom: 0.5px dotted #999999; /* If you want dots under the hoverable text */
	cursor: pointer;
}
/* Left Tooltip text */
.lefttooltipsub .lefttooltipsubtext {
	visibility: hidden;
	position: absolute;
	width: 175px;
	top: -32px;
	right: 120%;
	background-color: gold;
	color: #000;
	text-align: left;
	padding: 5px;
	border: 1px solid #000000;
	border-radius: 4px;
	font-size: 12px;
	margin-left: 5px;
	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
}
.lefttooltipsubtext::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #000;
}
/* Show the tooltip text when you mouse over the tooltip container */
.lefttooltipsub:hover .lefttooltipsubtext {
	visibility: visible;
}

/* Left Tooltip text */
.lefttooltipsub {
	position: relative;
	display: inline-block;
	color: #000;
	border-bottom: 0.5px dotted #999999; /* If you want dots under the hoverable text */
	cursor: pointer;
}
/* End Left Tooltip Sub Scripts */

/* Start Left Tooltip 2 Scripts */
.lefttooltipplan {
	position: relative;
	display: inline-block;
	color: #000;
	border-bottom: 0.5px dotted #999999; /* If you want dots under the hoverable text */
	cursor: pointer;
}
/* Left Tooltip2 text */
.lefttooltipplan .lefttooltipplantext {
	visibility: hidden;
	position: absolute;
	width: 225px;
	top: -12px;
	right: 120%;
	background-color: gold;
	color: #000;
	text-align: left;
	padding: 5px;
	border: 1px solid #000000;
	border-radius: 4px;
	font-size: 12px;
	margin-left: 5px;
	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 2000;
}
.lefttooltipplantext::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #000;
}
/* Show the tooltip text when you mouse over the tooltip container */
.lefttooltipplan:hover .lefttooltipplantext {
	visibility: visible;
}

/* Left Tooltip text */
.lefttooltipplan {
	position: relative;
	display: inline-block;
	color: #000;
	border-bottom: 0.5px dotted #999999; /* If you want dots under the hoverable text */
	cursor: pointer;
}
/* End Left Tooltip 2 Scripts */

/* Bottom Tooltip text */
.bottomtooltip {
	position: relative;
	display: inline-block;
	color: #000000;
	cursor: pointer;
}
/* Bottom Tooltip text */
.bottomtooltip .bottomtooltiptext {
	visibility: hidden;
	position: absolute;
	width: 120px;
    bottom: 100%;
    left: 50%;
	background-color: gold;
	color: #000;
	text-align: left;
	padding: 5px;
	border: 1px solid #000000;
	border-radius: 4px;
	font-size: 12px;
	margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
	position: absolute;
	z-index: 1;
}
.bottomtooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #FFFFCC transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.bottomtooltip:hover .bottomtooltiptext {
	visibility: visible;
}


/* Top Tooltip text */
.toptooltip {
	position: relative;
	display: inline-block;
	color: #000000;
	border-bottom: 0.5px dotted #999999;
	cursor: pointer;
}
/* Top Tooltip text */
.toptooltip .toptooltiptext {
	visibility: hidden;
	position: absolute;
	width: 225px;
	top: -80px;
	right: 120%;
	background-color: lightyellow;
	color: #000;
	text-align: left;
	padding: 10px;
	border: 1px solid #000000;
	border-radius: 4px;
	font-size: 12px;
	margin-left: 5px;
	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
}
.toptooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #000;
}
/* Show the tooltip text when you mouse over the tooltip container */
.toptooltip:hover .toptooltiptext {
	visibility: visible;
}