/**
Flash messages
 */


.flash-messages {
    position: absolute;
    top: 15px;  /* position the top  edge of the element at the middle of the parent */
    width:400px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    z-index: 99999;
    opacity: .98;}

.flash-messages-flex-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.flash-messages >.flash-messages-flex-wrapper > div.flash-message {
    display: flex;
    justify-content: start;
    width: 580px;
    /*height: 80px;*/
    background: #f7f7f7;
    border-radius: 10px;
    box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.2);
    overflow: hidden;
    animation: slide-in .5s ease-out forwards;
}

.flash-messages >.flash-messages-flex-wrapper > div.flash-message > div.flash-content {
    display: flex;
    align-items: center;
    justify-content: start;
}

.flash-messages >.flash-messages-flex-wrapper > div.flash-message > div.flash-content > div.colorbar {
    width: 5px;
    height: 80px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background: var(--green);
    opacity: .5;
}

.flash-messages >.flash-messages-flex-wrapper > div.flash-message.flash-error > div.flash-content > div.colorbar {
    background: var(--red);
}

.flash-messages >.flash-messages-flex-wrapper > div.flash-message.flash-warning > div.flash-content > div.colorbar {
    background: var(--orange);
}

.flash-messages >.flash-messages-flex-wrapper > div.flash-message > div.flash-content > div.icon {
    /*   transform: translate(30px,0); */
    margin-left: 30px;
    width: 35px;
    height: 35px;
    background: var(--green);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white
}

.flash-messages >.flash-messages-flex-wrapper > div.flash-message.flash-warning > div.flash-content > div.icon {
    background: var(--orange);
}

.flash-messages >.flash-messages-flex-wrapper > div.flash-message.flash-error > div.flash-content > div.icon {
    background: var(--red);
}

.flash-messages >.flash-messages-flex-wrapper > div.flash-message > div.flash-content > div.text {
    width: 400px;
    align-self: flex-start;
    flex-wrap: wrap;
    display:flex;
    align-items:start;
    margin-left: 30px;
    font-family: Tahoma,Arial,"Hiragino Sans GB","simsun",sans-serif;
}

.flash-messages >.flash-messages-flex-wrapper > div.flash-message > div.flash-content > div.text > * {
    margin: 0;
    width: 400px;
}

.flash-messages >.flash-messages-flex-wrapper > div.flash-message > div.flash-content > div.text p:first-child {
    font-weight: bold;
    margin-top: 15px;
}

.flash-messages >.flash-messages-flex-wrapper > div.flash-message > div.flash-content > div.text p:nth-child(2) {
    margin-top: 0;
    font-size:.8em;
    color: #878787;
    margin-bottom: 15px;
}

.flash-messages >.flash-messages-flex-wrapper > div.flash-message > div.flash-content > div.close {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    user-select: none;
    font-size: 2.5em;
    color: #666;
    cursor:pointer;
    width: 70px;
    height: 70px;
}

.flash-messages >.flash-messages-flex-wrapper > div.flash-message > div.flash-content > div.close > i {
    margin-right: 10px;
}

.flash-message-type {
    color:black;
}

@keyframes toast {
    0% {
        opacity: 1;
    }
    100% {
        transform: translate(0,-10px);
        opacity: 0;
    }
}

@keyframes slide-in {
    0% {
        transform: translate(0,-10px);
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}