.popup_msg_succuess {
    background-color:#efe;
}

.popup_msg_dot_succuess {
    background-color: #afa;
    box-shadow: 1px 1px 2px green;
}

.popup_msg_error {
    background-color:#fee;
}

.popup_msg_dot_error {
    background-color: #faa;
    box-shadow: 1px 1px 2px red;
}


.popup_msg {
    position: fixed; 
    width: 99%;
    height: 60px;
    display: flex;
    border-radius: 15px;    /*角丸く*/
    box-shadow: 2px 2px 4px gray;
    left: 0px;
    top: 0px;
    z-index: 10000;
}

.popup_msg_visible {
    opacity: 1;
    animation: popup_msg_visible_ani 0.5s , popup_msg_slidein_ani 0.5s;
}

.popup_msg_hide {
    opacity: 0;
    animation: popup_msg_hide_ani 0.5s;
}


.popup_msg_dot {
    width: 5px;
    height: 50%;
    margin-top: auto;
    margin-bottom: auto;
}

.popup_msg_msg {
    margin-top: auto;
    margin-bottom: auto;
}

@keyframes popup_msg_slidein_ani {
    0% {
      transform: translateY(-64px);
    }
    100% {
      transform: translateY(0);
    }
}

@keyframes popup_msg_hide_ani {
    0% {
      opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes popup_msg_visible_ani {
    0% {
      opacity: 0;
    }
    100% {
        opacity: 1;
    }
}