﻿/* Version: 1 */

.AQR_Modal{
    display: none;
}

.Modal {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .Modal .backdrop {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(94, 110, 141, 0.9);
        display: none;
    }

    .Modal .sec {
        background-color: #fff;
        z-index: 2;
        border-radius: 15px;
        width: 400px;
        max-width: 95%;
        box-shadow: 0 0 20px #00000033;
        transition: all 300ms;
        transform: translateY(-100px);
        opacity: 0.3;
    }

        .Modal .sec .content {
            padding: 20px;
            color: #48555c;
            display: flex;
            flex-direction: column;
            gap: 15px;
            max-height: calc(95vh - 80px);
            overflow: auto;
        }

            .Modal .sec .content .title {
                font-weight: 700;
                text-align: center;
            }

            .Modal .sec .content .text {
                font-weight: 500;
            }

            .Modal .sec .content .icon {
                width: 70px;
                height: 70px;
                background-position: center;
                background-size: 100%;
                background-repeat: no-repeat;
                margin: auto;
                margin-bottom: 15px;
            }

                .Modal .sec .content .icon.danger {
                    background-image: url('icon/Error.png')
                }

                .Modal .sec .content .icon.primary,
                .Modal .sec .content .icon.info {
                    background-image: url('icon/Info.png')
                }

                .Modal .sec .content .icon.success {
                    background-image: url('icon/Success.png')
                }

                .Modal .sec .content .icon.warning {
                    background-image: url('icon/Warning.png')
                }

        .Modal .sec .btn-box {
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
        }

            .Modal .sec .btn-box .btn {
                width: 100%;
                justify-content: center;
            }






    .Modal ::-webkit-scrollbar {
        width: 13px;
    }

    .Modal ::-webkit-scrollbar-track {
        background: #fff;
        border-radius: 30px 0 0 50px;
    }

    .Modal ::-webkit-scrollbar-thumb {
        background: #9f9f9f;
        border: 4px solid #ffffff;
        border-radius: 50px;
    }

        .Modal ::-webkit-scrollbar-thumb:hover {
            background: #7f7f7f;
        }







.Modal .btn {
    border: none;
    background-color: #ddd;
    border-radius: 7px;
    color: #5f5f5f;
    padding: 7px 12px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

    .Modal .btn.outline {
        background-color: transparent;
        outline: 1px solid #777;
    }

        .Modal .btn.outline:hover {
            background-color: #77777725;
        }

    .Modal .btn[disabled] {
        cursor: not-allowed !important;
        pointer-events: none !important;
    }

    .Modal .btn.sm {
        padding: 0px 10px;
        min-height: 25px;
        font-size: 0.75rem;
    }

    .Modal .btn.danger {
        background-color: #fb5555;
        color: #fff;
    }

    .Modal .btn.outline-danger {
        background-color: transparent;
        outline: 1px solid #fb5555;
        color: #fb5555;
    }

        .Modal .btn.outline-danger:hover {
            background-color: #fb555525;
        }

    .Modal .btn.info {
        background-color: #12b0d0;
        color: #fff;
    }

    .Modal .btn.outline-info {
        background-color: transparent;
        outline: 1px solid #108aa3;
        color: #108aa3;
    }

        .Modal .btn.outline-info:hover {
            background-color: #108aa325;
        }

    .Modal .btn.success {
        background-color: #11e2ae;
        color: #fff;
    }

    .Modal .btn.outline-success {
        background-color: transparent;
        outline: 1px solid #11e2ae;
        color: #11e2ae;
    }

        .Modal .btn.outline-success:hover {
            background-color: #11e2ae25;
        }

    .Modal .btn.warning {
        background-color: #f2c94c;
        color: #fff;
    }

    .Modal .btn.outline-warning {
        background-color: transparent;
        outline: 1px solid #f2c94c;
        color: #f2c94c;
    }

        .Modal .btn.outline-warning:hover {
            background-color: #f2c94c25;
        }

    .Modal .btn.primary {
        background-color: #0d6efd;
        color: #fff;
    }

    .Modal .btn.outline-primary {
        background-color: transparent;
        outline: 1px solid #0d6efd;
        color: #0d6efd;
    }

        .Modal .btn.outline-primary:hover {
            background-color: #0d6efd25;
        }