@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");

@keyframes notification {
  0%   {right:-300px;top:62px;opacity:0;background-color: #2a3743;}
  10%  {right:12px;top:62px;opacity:1;background-color: #1f2933;}
  90%   {right:12px;top:62px;opacity:1;background-color: #1f2933;}
  100% {right:-300px;top:62px;opacity:0;background-color: #2a3743;}
}

/* hides admin cache reminder once new changes to this css file are applied */
#cacheOverlay {
  display:none;
}

.notification {
  opacity:0;
  position:fixed;
  right:-300px;
  top:62px;
  height:auto;
  width:300px;
  z-index:99999;
  background-color:#1f2933;
  color:#9aa5b1;
  padding:10px;
  border-radius:10px;
  animation-name: notification;
  animation-duration: 10s;
}

tag {
  display:inline-block;
  padding:3px;
  background-color:#505050;
  border-radius:5px;
  font-size:12px;
  color:white;
}
tag[mg-left] {margin-left:5px;}
tag[mg-right] {margin-right:5px;}
tag[red] {background-color:#ff4040;}
tag[green] {background-color:#32fb62;}
tag[blue] {background-color:#288afb;}
[ext-title]{display:flex; flex-direction:row; align-items:center;}

.btn-gray {background-color:#33404d;color:#cad1d8;border-color:#606d7b;}
.btn-gray:hover {background-color:#29343e;color:#cad1d8;border-color:#606d7b;}

.btn-gray-alt {background-color:#4d5b69;color:#cad1d8;border-color:#4d5b69;}
.btn-gray-alt:hover {background-color:#3f4d5a;color:#cad1d8;border-color:#4d5b69;}


.img-btn {
  width:25px;
  height:25px;
  border-radius:3px;
  margin-right:2px;
}