#snackbar {
        visibility: hidden; /* Hidden by default. Visible on click */
        min-width: 15%; /* Set a default minimum width */
        color: #E9EDEF; /* White text color */
        text-align: center; /* Centered text */
        border-radius: 2px; /* Rounded borders */
        padding: 16px; /* Padding */
        position: fixed; /* Sit on top of the screen */
        z-index: 999999; /* Add a z-index if needed */
        top: 8%; /* 10% from the top */
        right:1%; /* 30px from the right */
    }
    .bg-warning{
      background-color: rgba(243,156,18,.99); /* Orange background color */
    }
    .bg-success{
      background-color: rgba(38,185,154,.99); /* Green background color */
    }
    .bg-info{
      background-color: rgba(52,152,219,.99); /* Blue background color */
    }
    .bg-danger{
      background-color: rgba(231,76,60,.99); /* Red background color */
    }
    .bg-dark{
      background-color: rgba(52,73,94,.99); /* Black background color */
    }
    /* Show the snackbar when clicking on a button (class added with JavaScript) */
    #snackbar.show {
        visibility: visible; /* Show the snackbar */
    
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
    However, delay the fade out process for 2.5 seconds */
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }
    
    /* Animations to fade the snackbar in and out */
    @-webkit-keyframes fadein {
        from {top: 8%; opacity: 0;} 
        to {top: 8%; opacity: 1;}
    }
    
    @keyframes fadein {
        from {top: 8%; opacity: 0;}
        to {top: 8%; opacity: 1;}
    }
    
    @-webkit-keyframes fadeout {
        from {top: 8%; opacity: 1;} 
        to {top: 0; opacity: 0;}
    }
    
    @keyframes fadeout {
        from {top: 8%; opacity: 1;}
        to {top: 0; opacity: 0;}
    }
    .linker{
        color:#000;
    }
    .linker:hover{
        color:#000;
    }