.modal-dialog {
    box-sizing: border-box;
    padding: 2rem 2rem 1.5rem;

    .modal-close-icon {
        position: absolute;
        top: 1.25rem;
        right: 1.25rem;

        cursor: pointer;
    }

    .modal-content {
        display: flex;
        flex-flow: column nowrap;
        align-items: stretch;
        gap: 1.5rem;

        .modal-header {
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            gap: 1.5rem;

            .modal-header-title {
                text-align: center;
                font-size: 1.25rem;
            }
        }

        .modal-body {
            display: flex;
            flex-flow: column nowrap;
            gap: 1.5rem;

            .description {
                text-align: center;
                line-height: 1.375rem;
            }

            .modal-body-content {
                display: flex;
                flex-direction: column;
                gap: 1.5rem;
            }

        }
        .modal-buttons {
            display: flex;
            flex-flow: row nowrap;
            gap: 1.5rem;
            justify-content: end;

            margin-top: 0.5rem;
        }
    }
}

.confirm-dialog {
    width: 36.25rem;
}

.confirm-icon {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;

    padding: 1rem;

    border-radius: 99px;
    background-color: #FFE3B8;

    &.error {
        background-color: #F8D6DE;
    }
}