.floating-notification-area {
    position: fixed;
    bottom: 20px;
    z-index: 10000;
    text-align: center;
    width: 80%;
    left: 10%;
    right: 10%;
}

.floating-notification-area  .notification-item {
    display: inline-block;
    position: relative;
}

.floating-notification-area .notification-message {
    position: relative;
    /*right: 50%;*/
    /*border-radius: 8px;*/
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 10%;
    color: white;
    padding: 10px;
    min-width: 150px;
    text-align: center;
    display: inline-block;
    border: 1px solid black;
    transition: all 0.2s ease;
    box-shadow: 0 0 4px black;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 1;
}

.floating-notification-area .notification-message:before {
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.floating-notification-area .notification-message::before {
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.floating-notification-area .notification-message.notification-hidden {
    padding: 0;
    font-size: 0 !important;
    border: 0;
    opacity: 0;
}
.floating-notification-area .notification-message.notification-hidden:before {
    padding: 0;
    font-size: 0 !important;
    border: 0;
}
.floating-notification-area .notification-message.notification-hidden::before {
    padding: 0;
    font-size: 0 !important;
    border: 0;
}


.floating-notification-area .notification-info .notification-message {
    background-color: rgb(49, 163, 193);
    border-color: #31a3c1;
    box-shadow: 0 0 4px #31a3c1;
}

.floating-notification-area .notification-warning .notification-message {
    background-color: rgba(236, 151, 31, 1);
    border-color: #d58512;
    box-shadow: 0 0 4px #d58512;
}

.floating-notification-area .notification-success .notification-message {
    background-color: #47a447;
    border-color: #47a447;
    box-shadow: 0 0 4px #47a447;
}

.floating-notification-area .notification-facebook .notification-message {
    background-color: #4267b2;
    border-color: #4267b2;
    box-shadow: 0 0 4px #4267b2;
}

.floating-notification-area .notification-danger .notification-message,
.floating-notification-area .notification-error .notification-message {
    background-color: rgba(201, 48, 44, 1);
    border-color: #ac2925;
    box-shadow: 0 0 4px #ac2925;
}
.floating-notification-area .notification-loading .notification-message {
    background-color: rgba(0, 0, 0, 0.7);
    border-color: black;
}
.floating-notification-area .notification-loading .notification-message::before {
    content: "\f1ce";
    font: normal normal normal 14px/1 FontAwesome;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    animation: fa-spin 2s infinite linear;
}
@media(max-width:990px){
    .floating-notification-area .notification-message{
        white-space: normal;
        min-width: 700px;
    }
}
@media(max-width:768px){
    .floating-notification-area .notification-message{
        white-space: normal;
        min-width: 450px;
    }
}
@media(max-width:480px){
    .floating-notification-area .notification-message{
        min-width: 300px;
    }
}