/*
 [Important: Not erase this header]
 *@author: gabrielc200 <gabrielc200@gmail.com>
 *@name: Simple bubble notificator - 2021
 *@description: Plug-in for jQuery
 *@licence: MIT
 *@version: 1.2
*/
#bubble-parent {
    position: fixed;
    /*z-index: 1040;*/
    z-index:9999;
    display: block;
    width: auto;
    height: auto;
    max-height: 80%;
    max-width: 30%;
    overflow-y: auto;
    top: auto;
    right: auto;
    bottom: 0px;
    left: 0px;
    padding:1em 1em 0.5em 0px;
    margin: 0px;
}

.bubble-notification {
    min-width:250px;
    width: auto;
    min-height: 40px;
    height: auto;
    position: relative;
    display: block;
    border-radius: 8px;
    margin-left: 1em;
    margin-bottom: .5em;
    padding: 1.5em 2em;
    background-color:#fff;
    border:none;
    animation: notification-left ease 0.5s;
    -webkit-box-shadow: 0 0 8px rgba(0,0,0,.9);
    box-shadow: 0 0 8px rgba(0,0,0,.9);
}
.close-bubble{
  right: .8em !important;
    top: .8em !important;
}

.close-button {
  width: 1em;
  height: 1em;
  position: absolute;
  right: 2em;
  top: 1em;
  overflow: hidden;
  text-indent: 1em;
  font-size: 0.75em;
  border: none;
  background: transparent;
  color: transparent;
  cursor:pointer;
}
.close-button::before,
.close-button::after {
	content: '';
	position: absolute;
	width: 3px;
	height: 100%;
	top: 0;
	left: 50%;
	background: #bdc3c7;
}
.close-button::before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.close-button::after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.bubble-info{
  background: rgba(14,101,219,1);
  color: #fff;
}
.bubble-danger{
  background: rgba(219,14,14,1);
  color: #fff;
}
.bubble-success{
  background: rgba(1,136,78,1);
  color: #fff;
}
.bubble-warning{
  background: rgba(244,152,3,1);
  color: #000;
}

.bubble-progress{
  display: block;
  height: 2px;
  background: rgba(255,255,255,.3);
  position: absolute;
  bottom: 13px;
  right: 7%;
  width: 86%;
}
.bubble-start{
  animation: move 5s linear;
}
@keyframes move {
  0% {
    width: 86%;
  }
  100% {
    width: 0;
  }
}

@keyframes notification-left{
	from { 
		transform: translateX(-100px);
		transform-origin: left;
		opacity: 0;
	}
	to { 
		transform: translateX(0px); 
		opacity: 1;
	}
}

@media (min-width: 1px) and (max-width: 576px) {
  #bubble-parent {
    max-width: 100%;
  }
}