/*
 * Copyright (c) 2022, 2024, Oracle and/or its affiliates.
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License, version 2.0,
 * as published by the Free Software Foundation.
 *
 * This program is designed to work with certain software (including
 * but not limited to OpenSSL) that is licensed under separate terms, as
 * designated in a particular file or component or in included license
 * documentation.  The authors of MySQL hereby grant you an additional
 * permission to link the program and your derivative works with the
 * separately licensed software that they have either included with
 * the program or referenced in the documentation.
 *
 * This program is distributed in the hope that it will be useful,  but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See
 * the GNU General Public License, version 2.0, for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software Foundation, Inc.,
 * 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
 */

.modal {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.error {
    position: relative;
    background-color: #000;
    border: 4px solid var(--error-color);
    width: 50%;
    margin: 30px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation-name: animateFromTop;
    animation-duration: 0.4s;
    padding: 16px;
    color: var(--error-color);
    overflow: hidden;
    max-height: 400px;
}

@keyframes animateFromTop {
    from {
        top: -300px;
        opacity: 0;
    }

    to {
        top: 0px;
        opacity: 1;
    }
}

.error p {
    width: 100%;
    padding-bottom: 16px;
    font-weight: 600;
    white-space: pre-wrap;
    overflow: scroll;
}

.error .errorButtons {
    display: flex;
    gap: 16px;
}

.error button {
    background: var(--error-color);
    color: #000;
    margin-top: 16px;
}
