/* Modal */
@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes slideDown {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100%);
    }
}
.modal.show.animate-slide-up {
    animation: slideUp 300ms ease-out;
}
.modal:not(.show).animate-slide-up {
    animation: slideDown 300ms ease-out;
}

.modal-dialog {
    padding: 0 1rem;
}
.modal-content {
    border-radius: 5px;
    border: none;
    padding: 0;
    /* min-height: 50.625rem; */
    /* height: calc(100vh - (1.75rem * 3)); */
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

.modal-content .header-wrapper{
    gap: 0;
}

.modal-header {
    position: sticky;
    top: 0;
    padding: 0;
    border-bottom: none;
    align-items: flex-start;
    z-index: 99;
    padding: 2rem;

}

.blue-bg .modal-header{
    background: #004578;
}
.green-bg .modal-header{
    background:#9DC121;
}

.gray2-bg .modal-header{
    background: var(--color-gray);
}

.orange-bg .modal-header{
    background: #E65E24;
}

.modal-body {
    padding: 0 2rem 5.125rem;
    width: 75%;
}

.btn-close {
    --bs-btn-close-bg: url('data:image/svg+xml;charset=utf-8,<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M50.6411 10.6665L32.0025 30.5703L30.6569 32.0072L31.3297 32.7257L32.0025 33.4441L50.6272 53.3332H53.3188L33.3418 32.0072L53.3327 10.6665L50.6411 10.6665Z" fill="white"/><path d="M13.3576 10.6665L32.0025 30.5703L30.6569 32.0072L31.3297 32.7257L32.0025 33.4441L13.3715 53.3332H10.6799L30.6569 32.0072L10.666 10.6665L13.3576 10.6665Z" fill="white"/></svg>');
    --bs-btn-close-opacity: 1;
    width: 4rem;
    height: 4rem;
    background-size: 4rem;
}
.modal-header .btn-close {
    padding: 0;
    background-size: contain;
}

/* Responsive */
@media only screen and (max-width: 991px) {
    .modal-content .header-wrapper {
    gap: 0 !important;
    }
    .modal-dialog {
        padding: 0 1.5rem;
    }
    .modal-body {
        width: 100%;
        padding: 0 2rem 2rem;

    }
}

@media only screen and (max-width: 767px) {
    .modal-content {
        word-wrap: break-word;
    }
}

@media only screen and (max-width: 575px) {
    .modal-dialog {
        padding: 0;
    }
}