/* APPLICATION NOTIFIER */

.sq_notifier {
  position: fixed;
  width: 30em;
  height: unset;
  background-color: #ffffff;
  z-index: 9999;
  box-shadow: 0px 2px 5px rgba(33,33,33,0.5);
  top: -1.5em;
  left: 50%;
  padding: 1.2em 1.3em;
  transform: translate(-50%);
  opacity: 0;
  transition: 0.5s;
}

.sq_notifier.show {
  top: 1.5em;
  opacity: 1;
  background-color: #ffffff;
}

/* APPLICATION NAME */

.sq_notifier label.appname {
  font-size: 1em;
  font-weight: 600;
  color: #3D7EA1;
  padding: 0.3em;
}

/* APPLICATION MESSAGE */

.sq_notifier p.text_message {
  display: block;
  padding: 0.3em;
}

/* APPLICATION CANCEL */

.sq_notifier .sq_button {
  top: 0em;
  right: 0.5mm;
  width: 5mm;
  height: 5mm;
  position: absolute;
  background-color: transparent;
  border: 0em;
  padding: 0em !important;
  margin: 0.2em 0em;
}

.sq_notifier .sq_button img{
  width: 100%;
  height: 100%;
}

.sq_notifier .sq_button label{
  display: none;
}

.sq_notifier:before {
  content: '';
  width: 100%;
  height: 100%;
  top: 0em;
  left: 0em;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 35%;
  background-position: 110%;
  filter: blur(4px) opacity(30%);
}

/* CSS NOTIFIER TYPE MODIFIER */

  /* TYPE: NORMAL */
  .sq_notifier { border-bottom: 3px solid #337AB7; }
  .sq_notifier label.appname { color: #337AB7; }

  /* TYPE: INFO */
  .sq_notifier.info { border-bottom: 3px solid #5BC0DE; }
  .sq_notifier.info:before { background-image: url(https://squid.sqreemtech.com/images/default_info_icon.png); }
  .sq_notifier.info label.appname { color: #5BC0DE; }

  /* TYPE: WARNING */
  .sq_notifier.warning { border-bottom: 3px solid #F0AD4E; }
  .sq_notifier.warning:before { background-image: url(https://squid.sqreemtech.com/images/default_warning_icon.png); }
  .sq_notifier.warning label.appname { color: #F0AD4E; }

  /* TYPE: DANGER */
  .sq_notifier.danger {border-bottom: 3px solid #D9534F; }
  .sq_notifier.danger:before { background-image: url(https://squid.sqreemtech.com/images/default_danger_icon.png); }
  .sq_notifier.danger label.appname { color: #D9534F; }

  /* TYPE: SUCCESS */
  .sq_notifier.success { border-bottom: 3px solid #5CB85C; }
  .sq_notifier.success:before { background-image: url(https://squid.sqreemtech.com/images/default_success_icon.png); }
  .sq_notifier.success label.appname { color: #5CB85C; }

@media only screen and (max-width: 500px) {
  
  .sq_notifier { width: 100%; }
  .sq_notifier.show { top: 0em; }
  
}