$main-color: #006080;

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

span,
p {
    word-wrap: break-word;
}

p,
h3 {
    margin: 0;
}

ul,
li {
    margin: 0;
    list-style: none;
}

#app {
    width: 100%;
    height: 100%;
}

* {
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background: transparent;
    border-radius: 0;
}

::-webkit-scrollbar-track-piece {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    border: 0;
    background-color: rgba($main-color, .5);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    border: 0;
    background-color: $main-color;
}

// 震动
.shake_1 {
    animation: shake_1 .2s ease-out;
}

@keyframes shake_1 {
    2% {
        transform: translate(-.5px, .5px) rotate(-.5deg);
    }

    4% {
        transform: translate(2.5px, .5px) rotate(-.5deg);
    }

    6% {
        transform: translate(-.5px, 1.5px) rotate(1.5deg);
    }

    8% {
        transform: translate(.5px, .5px) rotate(-.5deg);
    }

    10% {
        transform: translate(-.5px, -1.5px) rotate(-.5deg);
    }

    12% {
        transform: translate(.5px, -.5px) rotate(1.5deg);
    }

    14% {
        transform: translate(1.5px, 2.5px) rotate(-.5deg);
    }

    16% {
        transform: translate(-.5px, -.5px) rotate(.5deg);
    }

    18% {
        transform: translate(2.5px, .5px) rotate(.5deg);
    }

    20% {
        transform: translate(.5px, -1.5px) rotate(-.5deg);
    }

    22% {
        transform: translate(2.5px, 2.5px) rotate(-.5deg);
    }

    24% {
        transform: translate(2.5px, 1.5px) rotate(1.5deg);
    }

    26% {
        transform: translate(.5px, 1.5px) rotate(-.5deg);
    }

    28% {
        transform: translate(1.5px, .5px) rotate(.5deg);
    }

    30% {
        transform: translate(-1.5px, 2.5px) rotate(1.5deg);
    }

    32% {
        transform: translate(.5px, .5px) rotate(.5deg);
    }

    34% {
        transform: translate(.5px, 1.5px) rotate(1.5deg);
    }

    36% {
        transform: translate(2.5px, -.5px) rotate(1.5deg);
    }

    38% {
        transform: translate(.5px, 1.5px) rotate(1.5deg);
    }

    40% {
        transform: translate(2.5px, 1.5px) rotate(1.5deg);
    }

    42% {
        transform: translate(2.5px, -1.5px) rotate(.5deg);
    }

    44% {
        transform: translate(.5px, -.5px) rotate(.5deg);
    }

    46% {
        transform: translate(1.5px, -1.5px) rotate(.5deg);
    }

    48% {
        transform: translate(-1.5px, -.5px) rotate(.5deg);
    }

    50% {
        transform: translate(2.5px, -1.5px) rotate(1.5deg);
    }

    52% {
        transform: translate(.5px, 1.5px) rotate(.5deg);
    }

    54% {
        transform: translate(2.5px, -.5px) rotate(.5deg);
    }

    56% {
        transform: translate(2.5px, 2.5px) rotate(.5deg);
    }

    58% {
        transform: translate(2.5px, 1.5px) rotate(-.5deg);
    }

    60% {
        transform: translate(1.5px, 1.5px) rotate(-.5deg);
    }

    62% {
        transform: translate(-.5px, .5px) rotate(-.5deg);
    }

    64% {
        transform: translate(2.5px, 1.5px) rotate(-.5deg);
    }

    66% {
        transform: translate(-1.5px, .5px) rotate(1.5deg);
    }

    68% {
        transform: translate(1.5px, -1.5px) rotate(.5deg);
    }

    70% {
        transform: translate(.5px, .5px) rotate(-.5deg);
    }

    72% {
        transform: translate(-.5px, 1.5px) rotate(1.5deg);
    }

    74% {
        transform: translate(-1.5px, 1.5px) rotate(1.5deg);
    }

    76% {
        transform: translate(2.5px, -.5px) rotate(.5deg);
    }

    78% {
        transform: translate(2.5px, 2.5px) rotate(.5deg);
    }

    80% {
        transform: translate(-1.5px, 2.5px) rotate(.5deg);
    }

    82% {
        transform: translate(-1.5px, -.5px) rotate(.5deg);
    }

    84% {
        transform: translate(.5px, 1.5px) rotate(-.5deg);
    }

    86% {
        transform: translate(-.5px, 2.5px) rotate(.5deg);
    }

    88% {
        transform: translate(2.5px, 2.5px) rotate(1.5deg);
    }

    90% {
        transform: translate(-.5px, -1.5px) rotate(-.5deg);
    }

    92% {
        transform: translate(1.5px, .5px) rotate(.5deg);
    }

    94% {
        transform: translate(-.5px, -.5px) rotate(.5deg);
    }

    96% {
        transform: translate(1.5px, .5px) rotate(1.5deg);
    }

    98% {
        transform: translate(.5px, -.5px) rotate(1.5deg);
    }

    0%,
    100% {
        transform: translate(0, 0) rotate(0);
    }
}

.el-select-dropdown__item.selected {
    color: #006080;
}
.el-select {
    --el-select-input-focus-border-color: #006080;
}
.el-dialog {
    .el-dialog__header {
        .el-dialog__headerbtn:focus .el-dialog__close,
        .el-dialog__headerbtn:hover .el-dialog__close {
            color: #006080;
        }
    }
    .el-dialog__body {
        padding: 10px 20px;
    }
    .el-button {
        --el-button-hover-text-color: #006080;
        --el-button-hover-bg-color: rgba(0, 96, 128, .1);
        --el-button-hover-border-color: rgba(0, 96, 128, .8);
        --el-button-active-text-color: #006080;
        --el-button-active-border-color: rgba(0, 96, 128, .8);
        --el-button-active-bg-color: rgba(0, 96, 128, .1);
    }

    .el-button--primary {
        --el-button-text-color: white;
        --el-button-bg-color: #006080;
        --el-button-border-color: #006080;
        --el-button-outline-color: rgba(0, 96, 128, .5);
        --el-button-active-color: rgba(0, 96, 128, .8);
        --el-button-hover-text-color: white;
        --el-button-hover-link-text-color: rgba(0, 96, 128, .5);
        --el-button-hover-bg-color: rgba(0, 96, 128, .7);
        --el-button-hover-border-color: rgba(0, 96, 128, .7);
        --el-button-active-bg-color: rgba(0, 96, 128, .8);
        --el-button-active-border-color: rgba(0, 96, 128, .8);
    }

}