/* COMMON STYLES*/
.popup {
    margin-bottom: 15px;
    box-shadow: 4px 4px 10px -10px rgba(0, 0, 0, 1);
    justify-content: space-around;
    align-items: center;
    display: flex;
    border-radius: 4px;
    font-weight: 300;
  }
  .popup svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .popup-icon svg {
    margin: 5px;
    display: flex;
    align-items: center;
  }
  .close-icon {
    margin-left: auto;
  }
  .close-svg {
    cursor: pointer;
  }
  .close-path {
    fill: grey;
  }
  
  /*SEPERATE STYLES*/
  
  /* SUCCESS */
  .success-popup {
    display: none;
    background-color: #edfbd8;
    border: solid 1px #84d65a;
  }
  .success-icon path {
    fill: #84d65a;
  }
  .success-message {
    color: #2b641e;
  }
  
  /* ALERT */
  .alert-popup {
    background-color: #fefce8;
    border: solid 1px #facc15;
  }
  .alert-icon path {
    fill: #facc15;
  }
  .alert-message {
    color: #ca8a04;
  }
  
  /* ERROR */
  
  .error-popup {
    display: none;
    background-color: #fef2f2;
    border: solid 1px #f87171;
  }
  .error-icon path {
    fill: #f87171;
  }
  .error-message {
    color: #991b1b;
  }
  
  /* INFO */
  
  .info-popup {
    background-color: #eff6ff;
    border: solid 1px #1d4ed8;
  }
  .info-icon path {
    fill: #1d4ed8;
  }
  .info-message {
    color: #1d4ed8;
  }