/* components.css */

.alert.custom-alert{
  border-radius: 0;
  border: 0 none;
  overflow: hidden;
  background: #FFF;
  position: relative;
  padding: 10px;
  color: #000;
  font-size: 13px;
  margin-bottom: 5px;
}

.alert.custom-alert .alert-triangler{
	background: #f3f4f4;
	display: block;
	position: absolute;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	transform: rotate(45deg);
	left: -65px;
}
.alert.custom-alert .alert-circle{
  position: absolute;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: block;
  color: #FFF;
  top: 12px;
  left: 5px;
  text-align: center;
  line-height: 17px;
  font-size: 10px;
}
.alert.custom-alert .alert-circle i.fa{
	display: none;
}
.alert.custom-alert h4{
	font-size: 16px;
	font-weight: 700;
	margin-top: 0px;
}

.alert.custom-alert .alert-content {
  text-align: justify;
  font-weight: 300;
}


.alert.custom-alert.alert-success .alert-circle{
	background: #00af43
}
.alert.custom-alert.alert-success .alert-circle i.fa.success{
	display: inline-block;
}
.alert.custom-alert.alert-info .alert-circle{
	background: #6aafea;
}
.alert.custom-alert.alert-info .alert-circle i.fa.info{
	display: inline-block;
}
.alert.custom-alert.alert-warning .alert-circle{
	background: #ff9800;
}
.alert.custom-alert.alert-warning .alert-circle i.fa.warning{
	display: inline-block;
}
.alert.custom-alert.alert-danger .alert-circle{
	background: #F00;
}
.alert.custom-alert.alert-danger .alert-circle i.fa.danger{
	display: inline-block;
}







.ballon-tooltip{
	background: #4e5f6f;
	color: #FFF;
	border-radius: 10px;
	padding: 20px;
	position: relative;
	margin-bottom: 15px;
	margin-top: 15px;
	font-size: 12px;
}
.ballon-tooltip::after{
	content: "";
	width: 10px;
	height: 10px;
	background: #4e5f6f;
	display: block;
	position: absolute;
	transform: rotate(45deg);
}


.ballon-tooltip.top-left::after{
	top: -5px;
	left: 25px;
}
.ballon-tooltip.top-center::after{
	top: -5px;
	left: calc(50% - 5px);
}
.ballon-tooltip.top-right::after{
	top: -5px;
	right: 25px;
}

.ballon-tooltip.bottom-left::after{
	bottom: -5px;
	left: 25px;
}
.ballon-tooltip.bottom-center::after{
	bottom: -5px;
	left: calc(50% - 5px);
}
.ballon-tooltip.bottom-right::after{
	bottom: -5px;
	right: 25px;
}

.ballon-tooltip.left-top::after{
	left: -5px;
	top: 25px;
}
.ballon-tooltip.left-center::after{
	left: -5px;
	top: calc(50% - 5px);
}
.ballon-tooltip.left-bottom::after{
	left: -5px;
	bottom: 25px;
}

.ballon-tooltip.right-top::after{
	right: -5px;
	top: 25px;
}
.ballon-tooltip.right-center::after{
	right: -5px;
	top: calc(50% - 5px);
}
.ballon-tooltip.right-bottom::after{
	right: -5px;
	bottom: 25px;
}