﻿.base-message-loading {
    min-width: unset;
    white-space: nowrap;
    padding: 12px 24px;
    border-radius: 0;
    border: none;
    background: #fff;
    box-shadow: 0 2px 30px 0 rgba(0,0,0,.12)
}

    .base-message-loading .el-message__content {
        display: flex;
        align-items: center
    }

    .base-message-loading .base-message-loading-icon {
        margin-right: 10px
    }

        .base-message-loading .base-message-loading-icon .circular {
            height: 18px;
            width: 18px;
            animation: loading-rotate 2s linear infinite
        }

        .base-message-loading .base-message-loading-icon .path {
            animation: loading-dash 1.5s ease-in-out infinite;
            stroke-dasharray: 40,54;
            stroke-dashoffset: 0;
            stroke-width: 2;
            stroke: #3673fe;
            stroke-linecap: round
        }

@keyframes loading-rotate {
    to {
        transform: rotate(1turn)
    }
}

@keyframes loading-dash {
    0% {
        stroke-dasharray: 1,100;
        stroke-dashoffset: 0
    }

    50% {
        stroke-dasharray: 40,70;
        stroke-dashoffset: -22px
    }

    to {
        stroke-dasharray: 40,70;
        stroke-dashoffset: -43px
    }
}

::-webkit-scrollbar {
    background-color: #f5f5f5;
    width: 6px;
    height: 6px
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0,0,0,.2)
}

.shake {
    display: inline-block;
    animation: shake .5s cubic-bezier(.36,.07,.19,.97) infinite
}

    .shake .el-checkbox__inner {
        border-color: #3673fe !important
    }

@keyframes shake {
    0% {
        transform: translateX(0)
    }

    15% {
        transform: translateX(-1px) rotate(1deg)
    }

    30% {
        transform: translateX(1px) rotate(-1deg)
    }

    45% {
        transform: translateX(-1px) rotate(1deg)
    }

    60% {
        transform: translateX(1px) rotate(-1deg)
    }

    75% {
        transform: translateX(-1px) rotate(1deg)
    }

    90% {
        transform: translateX(1px) rotate(-1deg)
    }

    to {
        transform: translateX(0)
    }
}

.twinkle {
    animation: twinkle .3s linear 2
}

@keyframes twinkle {
    0%,to {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}
