/**
* alertRotulosStyles.css
* Ruta:              /estampillas/css/alertRotulosStyles.css
* Fecha Creación:    03/Ene/2019
*
* Contiene los estilos para el alert de notificacion de rotulos minimos
*
*
* @author           Michael Ortiz <michael.ortiz@turrisystem.com>
* @copyright        2019 Michael Ortiz
* @license          GPL 2 or later
* @version          2019-01-03
*
*/

.notification {
  /* height: 8%; */
  width: 20%;
  background-color: #f2dede;
  margin-top: 5%;
  margin-left: 76%;
  transform-origin: right;
  -webkit-animation: notify 3s ease-in-out infinite;
  animation: notify 3s ease-in-out infinite;
  position: fixed;
  top: 0;
  z-index: 100;
  border-color: #a94442;
}

@-webkit-keyframes notify {
  0% {transform: scaleX(0);}
  10% {transform: scaleX(1);}
  13% {transform: scale(1.1);}
  16% {transform: scale(1);}
  55% {transform: scaleX(1); border-radius: 0%;}
  65% {transform: scaleX(0.25); border-radius: 50%;}
  95% {transform: scaleX(0.25); border-radius: 50%;}
  100% {transform: scaleX(0);}
}

@keyframes notify {
  0% {transform: scaleX(0);}
  10% {transform: scaleX(1);}
  13% {transform: scale(1.1);}
  16% {transform: scale(1);}
  55% {transform: scaleX(1); border-radius: 0%;}
  65% {transform: scaleX(0.25); border-radius: 50%;}
  95% {transform: scaleX(0.25); border-radius: 50%;}
  100% {transform: scaleX(0);}
}

.identifier {
  position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #94DACD;
  margin-top: 5.5px;
  margin-left: 7.5px;
  -webkit-animation: exit 3s ease-in-out infinite;
  animation: exit 3s ease-in-out infinite;
}

.text {
  width: 200px;
  color: #a94442;
  font-weight: bold;
  margin-top: 12.25px;
  margin-bottom: 12.25px;
  margin-left: 40px;
  -webkit-animation: exit 3s ease-in-out infinite;
  animation: exit 3s ease-in-out infinite;
}

@-webkit-keyframes exit {
  0% {opacity: 1;}
  55% {opacity: 1;}
  65% {opacity: 0;}  
  100% {opacity: 0;}
}

@keyframes exit {
  0% {opacity: 1;}
  55% {opacity: 1;}
  65% {opacity: 0;}  
  100% {opacity: 0;}
}

.number {
  position: fixed;
  font-family: 'Open Sans', sans-serif;
  font-size: 30px;
  color: #a94442;
  margin-top: 2.7%;
  margin-left: 92.4%;
  -webkit-animation: enter 3s ease-in-out infinite;
  animation: enter 3s ease-in-out infinite;
  z-index: 101;
  font-weight: bold;
}

@-webkit-keyframes enter {
  0% {opacity: 0;}
  55% {opacity: 0;}
  65% {opacity: 1; transform: scaleX(1);}
  95% {opacity: 1; transform: scaleX(1);}
  100% {opacity: 0; transform: scaleX(1);}
}

@keyframes enter {
  0% {opacity: 0;}
  55% {opacity: 0;}
  65% {opacity: 1; transform: scaleX(1);}
  95% {opacity: 1; transform: scaleX(1);}
  100% {opacity: 0; transform: scaleX(1);}
}