﻿.message-div {position: fixed;top: 32px;right: 0;width: 390px;height: 72px;background: #ffffff;
border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;
-webkit-box-shadow: 1px 1px 6px -3px rgb(0, 0, 0);
-moz-box-shadow: 1px 1px 6px -3px rgb(0, 0, 0);
box-shadow: 1px 1px 6px -3px rgb(0, 0, 0);
text-align: right;margin: 15px;border-top: 0px solid #ffffff;display: table;padding: 0px;
z-index: 999999999999999;
animation-name: run;-webkit-animation-name: run;animation-duration: .9s;-webkit-animation-duration: .9s;}

.flash_success {border-color: #4cae4c;/* background-color:#5cb85c; */}
.flash {height: 72px;display: table-cell;vertical-align: middle;text-align: center;}
.flash_box {margin: 0px;width: 70px;height: 70px;background: transparent; float: left;
-webkit-box-shadow: 1px 1px 6px -3px rgb(0, 0, 0);
-moz-box-shadow: 1px 1px 6px -3px rgb(0, 0, 0);
box-shadow: 1px 1px 7px -3px rgb(0, 0, 0);
color: #fff;display: flex;align-items: center;justify-content: center;}
.flash_box img{width: 30px; margin: 0 auto; display: block;}

.flash_message_text{width: 320px; float: right;align-items: center;justify-content: center; position: relative;}

.bg_success {background-color: #579901;}
.bg_error {background-color: #ff0000;}
.flash_error {border-color: #ff0000;/* background-color:#c9302c; */}
.flash_box .flash_icon {vertical-align: middle;height: 80px;width: 100%;display: table-cell;}
.flash_icon span {line-height: 0;font-weight: 700;text-transform: uppercase;margin-right: 0;font-size: 50px;}
.flash_icon .fa {font-size: 50px;vertical-align: middle;margin-top: -1px;}
.flash_text {position: absolute;top: 60%;z-index: 4;font-size: 14px;line-height: 18px;padding: 0 10%;}
.flash_text span {color: #000000;}
.flash_close {width: 20px; float: right; margin: 5px 0px 0 0; position: relative; z-index: 5;}
.flash_close img{width: 13px;}
.closeFlashMsg .message-div {right: -100%;animation-name: stop;-webkit-animation-name: stop;animation-duration: .3s;-webkit-animation-duration: .3s;}

@keyframes run {
0% {right: -25%;}
50% {right: 0;}
100% {right: 0;}}

@keyframes stop {
0% {right: 0;}
50% {right: 0;}
100% {right: -50%;}
}

@-webkit-keyframes stop {
0% {right: 0;}
50% {right: 0;}
100% {right: -50%;}
}

@-webkit-keyframes run {
0% {right: -25%;}
50% {right: 0;}
100% {right: 0;}
}

@-webkit-keyframes rubberBand {
from {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
30% {-webkit-transform: scale3d(1.25, 0.75, 1);transform: scale3d(1.25, 0.75, 1);}
40% {-webkit-transform: scale3d(0.75, 1.25, 1);transform: scale3d(0.75, 1.25, 1);}
50% {-webkit-transform: scale3d(1.15, 0.85, 1);transform: scale3d(1.15, 0.85, 1);}
65% {-webkit-transform: scale3d(0.95, 1.05, 1);transform: scale3d(0.95, 1.05, 1);}
75% {-webkit-transform: scale3d(1.05, 0.95, 1);transform: scale3d(1.05, 0.95, 1);}
to {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
}

@keyframes rubberBand {
from {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
30% {-webkit-transform: scale3d(1.25, 0.75, 1);transform: scale3d(1.25, 0.75, 1);}
40% {-webkit-transform: scale3d(0.75, 1.25, 1);transform: scale3d(0.75, 1.25, 1);}
50% {-webkit-transform: scale3d(1.15, 0.85, 1);transform: scale3d(1.15, 0.85, 1);}
65% {-webkit-transform: scale3d(0.95, 1.05, 1);transform: scale3d(0.95, 1.05, 1);}
75% {-webkit-transform: scale3d(1.05, 0.95, 1);transform: scale3d(1.05, 0.95, 1);}
to {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
}

@media only screen and (max-width:300px), (max-width:350px){
.closeFlashMsg .message-div {right: -130%;}
}