/*===== Notification =====*/
#dashboard_notification{
    position: fixed;
    display: none;
    opacity: 0;
    align-items: center;
    justify-content: center;
    top: var(--navbar-height);
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    transition: all 0.2s ease-in-out;
  }
  
  .dashboard_notification_container{
    padding: 2rem;
    max-width: 80%;
  }
  
  #dash_notification_desc{
    margin: 1rem 0;
  }
  
  .dash_notification_buttons{
    display: flex;
    justify-content: flex-start;
  }
  
  .dash_notification_header{
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
  
  .dash_notification_header .material-symbols-outlined{
    margin-right: .5rem;
    color: #FFC107;
    font-size: 1.5rem !important;
  }
  
  .active_notification{
   display: flex !important;
   opacity: 1 !important; 
   transition: all 0.2s ease-in-out;
  }
  
  .opacity_0{
    opacity: 0;
  }

  .dash_panel{
    background-color: #fff;
    border-radius: 9px;
    box-shadow: 0px 4px 10px rgba(198, 218, 255, 0.3);
  }

  .button{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #38CB89;
    border-radius: 4px;
    width: 100%;
    padding: .5rem;
    transition: all .2s ease-in-out;
    margin-right: .5rem;
  }
  
  .button:hover{
    cursor: pointer;
    box-shadow: 0px 4px 10px rgba(198, 218, 255, 1);
    transition: all .2s ease-in-out;
  }


  .button_red{
    background: var(--red-color);
  }