/*Custom class for modal and component*/
.content-container {
    padding: 24px;
    background: var(--atom-palette-background-light);
}

.custom-modal .bm-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--atom-palette-text-primary);
}

.custom-modal .bm-header {
    align-items: center !important;
}

.custom-modal {
    width: 475px !important;
    max-width: 100%;
    background: var(--atom-palette-background-light) !important;
}

.custom-modal.large {
    width: 800px !important;
    max-width: 100%;
}

.modal-action-btn-container {
    display: flex;
    justify-content: end;
    gap: 24px;
}

/* Medium screens */
@media (max-width: 768px) {
    .custom-modal.large {
        width: 600px !important;
    }
}

/* Small screens */
@media (max-width: 576px) {
    .custom-modal {
        width: 400px !important;
    }

    .custom-modal.large {
        width: 500px !important;
    }
}

/* Extra small screens */
@media (max-width: 440px) {
    .custom-modal {
        width: 310px !important;
    }

    .custom-modal.large {
        width: 350px !important;
    }

    .modal-action-btn-container {
        flex-direction: column-reverse;
        gap: 12px;
    }
}