/*****Custom status message*****/


/*Animated circle*/

.alert .close {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    outline: none;
}

.circle {
    overflow: hidden;
    position: absolute;
    right: 10px;
    top: 4px;
}

.circle-half {
    height: 20px;
    width: 10px;
    position: relative;
    overflow: hidden;
}

.circle-half:before {
    height: inherit;
    width: inherit;
    position: absolute;
    content: "";
    border-radius: 12px 0 0 12px;
    border: 3px solid black;
    border-right-color: transparent;
    border-right-style: hidden;
    background-color: transparent;
    transform-origin: 100% 50%;
    /* hidden by default */
    transform: rotate(180deg);
    opacity: 0.65;
    animation-name: rotate-circle-half;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.circle.hidden .circle-half:before {
    border-color: transparent;
}

.circle-half-right {
    transform: scale(-1, -1);
}

.circle-half-right:before {
    animation-name: rotate-circle-half-right;
}

@keyframes rotate-circle-half {
    0% {
        transform: rotate(180deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes rotate-circle-half-right {
    0% {
        transform: rotate(180deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(0deg);
    }
}