.notification {
display:flex;
justify-content:center;
align-items:center;
padding:15px;
background:rgba(201, 64, 64, 0.808);
color:#fff;
font-size:16px;
font-weight:100;
width:300px;
position: fixed;
right:0px;
top:20px;
transform:translateX(300px);
transition: .2s cubic-bezier(0.250, 0.460, 0.450, 0.940);
box-shadow: 0px 0px 3px 1px rgba(206, 64, 64, 0.5);
}
.notifications {
display:flex;
justify-content:center;
align-items:center;
padding:15px;
background:rgba(126, 201, 64, 0.808);
color:#fff;
font-size:16px;
font-weight:100;
width:300px;
position: fixed;
right:0px;
top:20px;
transform:translateX(300px);
transition: .2s cubic-bezier(0.250, 0.460, 0.450, 0.940);
box-shadow: 0px 0px 3px 1px rgba(126, 201, 64, 0.808);
}
.pop {
transform:none;
}
.notification svg {
fill:#fff;
margin-right:15px;
}
.popper {
top:20px;
right:20px;
background:rgb(0, 0, 0);
padding:15px 45px;
border-radius:50px;
font-family:"Raleway";
box-shadow: 0px 0px 3px 1px rgb(0,0,0,.5);
}

/* Snackbar css */
.snackbar {
visibility: hidden;
min-width: 250px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
font-size: 14px;
transform: translateX(-50%);
}

.snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}

@keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}

@-webkit-keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}

@keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}


.hidden {
position: absolute;
width: 0px;
height: 0px;
left: -999999px;
}

.action-button {
border: 1px solid black;
background: none;
padding: 8px;
cursor: pointer;
outline: 0;
border-radius: 6px;


}

.action-button.mode-upload {
color: #004085;
border-color: #b8daff;
background-color: #cce5ff;
}

.action-button.mode-remove {
color: #721c24;
border: 1px solid #f5c6cb;
background-color: #f8d7da;
}
body {
    background-color: transparent;
font-family: "Jost", sans-serif;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
padding: 20px;
}




.float{
position:absolute;
width:40px;
height:40px;
margin-right:10px;
margin-top:20px;
background-color:#516acc;
color:#FFF;
border-radius:40px;
text-align:center;
left:120px;
box-shadow: 2px 2px 3px rgba(151, 151, 151, 0.452);
}

.float1{
position:absolute;
width:40px;
height:40px;
margin-left:10px;
margin-top:20px;
background-color:#516acc;
color:#FFF;
border-radius:40px;
text-align:center;
right:120px;
box-shadow: 2px 2px 3px rgba(151, 151, 151, 0.452);
}

.my-float{
margin-top:14px;
}