@keyframes notification {
  0%   { right:-300px; top:62px; opacity:0; background-color: #1f2933; }
  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: #1f2933; }
}

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


tag {
  display:inline-block;
  padding: 3px 5px;
  background-color: #4d5b69;
  border-radius:15px;
  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:#27b949;}
tag[blue] {background-color:#288afb;}
[ext-title]{display:flex; flex-direction:row; align-items: end;}


.btn-gray {
  background-color:#33404d;
  color:#cad1d8 !important;
  border-color:#606d7b;
}
.btn-gray:hover {
  background-color:#29343e;
  color:#cad1d8 !important;
  border-color:#606d7b;
}
.btn-gray-alt {
  background-color:#4d5b69;
  color:#cad1d8 !important;
  border-color:#4d5b69;
}
.btn-gray-alt:hover {
  background-color:#3f4d5a;
  color:#cad1d8 !important;
  border-color:#4d5b69;
}
.btn {transition: background-color .3s;}


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


.extension-btn-image2 {
  position: absolute;
  height: 53%;
  left: 14px;
  z-index: 4;
  top: 14px;
  border-radius: 9px;
}
.extension-btn-image {
  width:95px;
  height:100%;
  border-top-left-radius:7px;
  border-bottom-left-radius:7px;
  float: left;
  margin-right:10px;
  filter: blur(10px);
  -webkit-filter: blur(10px);
}
.extension-btn-text {
  font-size: 20px;
  margin:0;
  text-align:left;
  position: relative;
  left: -32px;
  z-index: 3;
  width: calc( 100% - 15px );
  font-weight: 600;
  margin-top: 11px;
  overflow: clip;
  text-overflow: ellipsis;
}
.extension-btn-version {
  font-size: 11px;
  text-align:left;
  margin:0;
  position: relative;
  left: -32px;
  z-index: 3;
  width: calc( 100% - 15px );
  overflow: clip;
  text-overflow: ellipsis;
}
.extension-btn-update {
  background-color: #194323;
  color: #3dd15f !important;
  border: 1px solid #265f33;
  font-weight: 700;
  border-radius: 12px;
  padding: 0 8px;
  display: inline-flex;
  flex-direction: row;
  gap: 5px;
  margin-left: 5px;
}
.extension-btn {
  background-color:#1f2933;
  color:#cad1d8;
  border-color:#00000000;
  height:calc(65px + 14px);
  padding: 0px !important;
  overflow:hidden;
  transition:background-color .2s;
  border-radius:8px;
}
.extension-btn:hover,
.extension-btn:active,
.extension-btn:focus {
  background-color:#1f2933;
  color:#cad1d8 !important;
  border-color:#00000000;
}
.extension-btn-overlay {
  height: calc(100% - 19px);
  width: 50%;
  position: absolute;
  z-index: 2;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  background: linear-gradient(90deg, rgba(31, 41, 51, 0.35) 0%, rgb(31, 41, 51) 95%);
}

.byte-img {
  width: 100px;
  opacity: .3;
  align-self: center;
}


.blueprint\:push-repo {
  position: absolute;
  top: 60px;
  right: 55px;
  background-color: #1f2933;
  width: 270px;
  z-index: 10;
  border-radius: 7px;
  padding: 10px;
  border: #33404d 2px solid;
  color: #83909e
}

.blueprint\:push-repo::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  right: 12px;
  margin-left: -7px;
  border-width: 7px;
  border-style: solid;
  border-color:
    transparent
    transparent
    #1f2933
    transparent;
}

@media screen and (width <= 600px) {
  .blueprint-extension-title-tag-icon {
    display: none;
  }
}
