/* Tipso Bubble Styles */

.tipso_bubble, .tipso_bubble > .tipso_arrow{

	-webkit-box-sizing: border-box;

	-moz-box-sizing:    border-box;

	box-sizing:         border-box;
	

}

.tipso_bubble {

    position: absolute;

	text-align: center;

	border-radius: 6px;

	z-index: 9999;
	
}

.tipso_style{          /*********************  round under question mark **************************/

	cursor: help;
	border-bottom: none;
	/*border-bottom: 1px dotted;*/

}

.tipso_title {

	border-radius: 6px 6px 0 0; padding: 4px 0 4px 5px; font-size: 12px; text-align: left;

}

.tipso_content {                        /*************** content block *****************/

  	word-wrap: break-word;

	padding: 0.5em;
	/*background-color:#fff;*/
	background: linear-gradient(to top, #f5f7f4, #d5e9ff);
	border-right:1px solid #333333;
	border-left:1px solid #333333;
	border-bottom:1px solid #333333;
	border-bottom-left-radius:6px;
	border-bottom-right-radius:6px;
	color: #000;
	font-size: 12px;
	text-align: left;

}



/* Tipso Bubble size classes - Similar to Foundation's syntax*/

.tipso_bubble.tiny {                       /*****************  font   **************/

	font-size: 10px;

	text-align:left;
	color:#000!important;                                           

}

.tipso_bubble.small {

	font-size: 0.8rem;

}

.tipso_bubble.default {

	font-size: 1rem;
	

}

.tipso_bubble.large {

	font-size: 1.2rem;

	width: 100%;

}



/* Tipso Bubble Div */

.tipso_bubble > .tipso_arrow{

	position: absolute;

	width: 0; height: 0;

	border: 8px solid ;

	pointer-events: none;
	


}

.tipso_bubble.top > .tipso_arrow {    /***************  ARROW on the bottom *******************/

	border-top-color: #333333!important;

	border-right-color: transparent;

	border-left-color: transparent;

	border-bottom-color: transparent;

	top: 100%;

	left: 50%;

	margin-left: -8px;

	
}



.tipso_bubble.bottom > .tipso_arrow {

	border-bottom-color: #000;

	border-right-color: transparent;

	border-left-color: transparent;

	border-top-color: transparent;

	bottom: 100%;

	left: 50%;

	margin-left: -8px;
	
	

}

.tipso_bubble.left > .tipso_arrow {

	border-left-color: #000;

	border-top-color: transparent;

	border-bottom-color: transparent;

	border-right-color: transparent;

	top: 50%;

	left: 100%;

	margin-top: -8px;

}

.tipso_bubble.right > .tipso_arrow {

	border-right-color: #000;

	border-top-color: transparent;

	border-bottom-color: transparent;

	border-left-color: transparent;

	top: 50%;

	right: 100%;

	margin-top: -8px; 
}



.tipso_bubble .top_right_corner, 

.tipso_bubble.top_right_corner {

	border-bottom-left-radius: 0; 

}



.tipso_bubble .bottom_right_corner, 

.tipso_bubble.bottom_right_corner  {

	border-top-left-radius: 0;

}



.tipso_bubble .top_left_corner, 

.tipso_bubble.top_left_corner {

	border-bottom-right-radius: 0;

}



.tipso_bubble .bottom_left_corner, 

.tipso_bubble.bottom_left_corner  {

	border-top-right-radius: 0;

}

