@font-face {
  font-family: "Roboto-Bold";
  src: url('../fonts/roboto/Roboto-Bold.ttf');
}
.sidebar-notificacao {transition:all 0.5s;-webkit-transition:all 0.5s;}

.toggle-notificacao{
  font-size: 1.875rem;
  border-radius: 1.875rem;
  display:inline-block;
  height: 2.5rem;
  width: 2.5rem;
  cursor:pointer;
}
.ico{
  margin-top:-0.25rem;
}

.sidebar-notificacao{
  position:fixed;
  width: 23.22875rem;
  right:-31.25rem;
  background-color:rgba(255,255,255,0.9);
  border-left:1px solid white;
  height:100%;
  top:0px;
  float: right;
  right: -20rem;
  z-index: 1000;
}
.sidebar-notificacao h2{
  padding-top: 3.5625rem;
  padding-left: 0.4375rem;
  color:black;
  text-align:left;
  font-family: 'Roboto-Bold', sans-serif;
  font-size: 0.9375rem;
  font-weight: bold;

}
.conteudo{
  font-family: 'Roboto-Regular', sans-serif;
  font-size: 0.8125rem;
  color: #545354
}
.sidebar-notificacao.active{
  right:0px;
}

.notibox-com-informacao{
  color: #322F61;
  font-family: 'Roboto-Bold', sans-serif;
  background-color:rgba(223, 80, 83, 0.2);
  padding: 0.9375rem;
  margin-top: 0.9375rem;
  margin-bottom: 0.9375rem;
  position:relative;
  border-left-style: solid;
  border-left-color: #E05350;
  height: 5.726875rem;
}
.notibox-sem-informacao{
  color:white;
  font-family: 'Muli', sans-serif;
  background-color: transparent;
  width:calc(100% - 60px);
  padding:0.9375rem;
  margin:0.9375rem;
  border-radius:0.25rem;
  position:relative;
}
.titulo-notificacao{
  font-size: 0.875rem;
  font-family: 'Roboto-Bold', sans-serif;
  color: #322F61
}

.data-notificacao{
  font-size: 0.5625rem;
  font-family: 'Roboto-Bold', sans-serif;
  align-self: flex-end;
  color: #DC406D;

}

.cancel{
  position:absolute;
  right: 0.4375rem;
  top: 0.625rem;
  cursor:pointer;
  padding: 0.1875rem;
  padding-left: 0.5rem;
  padding-right:0.5rem;
  border-radius: 1.25rem;
}
.cancel:hover{
  color:black;
  background-color:white;
}
.gone{
  display:none;
}