#message {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    animation: bg 0.5s ease;
    background: rgba(51, 122, 183, 0.7);
    display: none;
    z-index: 99999999999;
}

#message .message {
    position: absolute;
    width: auto;
    height: 50px;
    top: 20px;
    left: 6%;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 15px;
    border: 1px solid #BBBBBB;
    border-radius: 4px;
    transition: 0.5s;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 16px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    animation: scale 0.5s ease;

    --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
    --docsearch-key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
    border: none;
    background: var(--docsearch-key-gradient);
    border-radius: 3px;
    box-shadow: var(--docsearch-key-shadow);
    color: var(--key-text-color);
}

#message .message .i {
    float: left;
    margin-top: 15px;
    font-size: 20px;
    margin-right: 0px;
}

#message .message .text {
    margin-top: 14px;
    height: auto;
    float: left;
    font-weight: bold;
    color: #969faf;
}

#message .close {
    content: "";
    width: 50px;
    height: 50px;
    border: 2px solid #555;
    border-radius: 12px;
    position: absolute;
    z-index: 10;
    top: 20px;
    left: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 16px 20px rgba(0, 0, 0, 0.2);
    background-size: cover;
    animation: move 0.5s ease;
    cursor: pointer;

    transition: 0.5s;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 16px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    overflow: auto;
    animation: scale 0.5s ease;

    --key-text-color: #969faf;
    --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
    --docsearch-key-gradient: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
    border: none;
    background: #FFFFFF url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
    border-radius: 3px;
    box-shadow: var(--docsearch-key-shadow);
    color: var(--key-text-color);
}

@keyframes scale {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes move {
    0% {
        right: -80px;
    }

    100% {
        right: 20px;
    }
}

@keyframes bg {
    0% {
        background: rgba(51, 122, 183, 0);
    }

    100% {
        background: rgba(51, 122, 183, 0.7);
    }
}