/* Alert Trigger Styling */

.alert-trigger {
  position:relative;
  width: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25em;
  opacity: 0.8;
  color: #403939;
  margin-left:2em;
}

.alert-trigger .badge {
  border-radius: 50%;
  background: #C44D58;
  margin-left: -0.75em;
}

.alert-trigger.active {
  opacity: 1;
  transition: all 0.25s ease;
}

.alert-trigger.active .badge {
  background: #444;
  margin-left: -0.85em;
  transition: all 0.25s ease;
}

.alert.collapsing {
  -webkit-transition: none;
  transition: none;
  display: none;
}



/* Alert Trigger Styling */
@media (max-width:992px) {


  .main-alert {
    top: 73px;
    z-index: 1000;
    right: 0px;
    position: fixed;
  }

  /* .main-alert:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -7px;
    right: 27.5px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
  } */

  /* .main-alert:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -10px;
    right: 25.5px;
    border-style: solid;
    border-width: 0 12px 12px 12px;
    border-color: transparent transparent #09b transparent;
  } */

  .main-alert.alert-info:before {
    border-color: transparent transparent #bce8f1 transparent;
  }
  .main-alert.alert-info:after {
    border-color: transparent transparent #daedf7 transparent;
  }

  .main-alert.alert-warning:before {
    border-color: transparent transparent #faebcc transparent;
  }
  .main-alert.alert-warning:after {
    border-color: transparent transparent #fcf8e3 transparent;
  }

  .main-alert.alert-danger:before {
    border-color: transparent transparent #ebccd1 transparent;
  }
  .main-alert.alert-danger:after {
    border-color: transparent transparent #f2dede transparent;
  }

/* 
  .alert-trigger {
    position: absolute;
    top: 0;
    left: auto;
    right: 12px;
    bottom: 0;
    
  } */

  .alert-trigger {
    position: absolute;
    top: 89px;
    right: 21px;
    color: #908779;
    font-size: 1.65em;
  }

  .alert-trigger .badge {
    border-radius: 50%;
    box-shadow: 1px 2px 2px gray;
    background: #C44D58;
    margin-left: -0.75em;
  }

  .alert-trigger.active {
    opacity: 1;
    transition: all 0.25s ease;
  }

  .alert-trigger.active .badge {
    background: #444;
    margin-left: -0.85em;
    transition: all 0.25s ease;
  }


}