.messageModal {
    --Surface-bgPrimary: #0D0D0D;
    --button-bgSecondary:var(--opacity-10w);
    --Text-primaryNoneBg:var(--base-white);
    --button-bgPrimary: var(--primary-dark-600);
    --Text-secondary: var(--opacity-70w);
    --Icon-secondaryNuneBg: var(--primary-dark-600);
    --Icon-primaryNuneBg: var(--opacity-90w);
}

@media (prefers-color-scheme: dark) {
    .messageModal {
        --Surface-bgPrimary: #0D0D0D;
        --button-bgSecondary:var(--opacity-10w);
        --Text-primaryNoneBg:var(--base-white);
        --button-bgPrimary: var(--primary-dark-600);
        --Text-secondary: var(--opacity-70w);
        --Icon-secondaryNuneBg: var(--primary-dark-600);
        --Icon-primaryNuneBg: var(--opacity-90w);

    }
}


.messageModal {
    display: flex;
    width: 100%;
    padding: 1.25rem 0.75rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    gap: 1.3125rem;
    background: var(--Surface-bgPrimary);
    border-radius: 1rem;
}


.messageModal> .modalContent> .modalTitle {
    color: var(--Text-primaryNoneBg);
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 24px 0;
    text-align: center;
}

.messageModal> .modalContent> .imageContainer {
    height: 13.04rem; 
    width: 100%;
    margin-bottom: 1.31rem;
}


.messageModal> .modalContent .modalImage {
    width: 100%;
    height: 13.04rem;
    object-fit: cover;
    border-radius: 0.625rem;
}

.messageModal>.modalContent .dotsContainer {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 1.31rem;
}

.messageModal>.modalContent .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--Icon-primaryNuneBg);
    transition: background 0.3s;
    cursor: pointer;
}


.messageModal>.modalContent .dot.active {
    background:var(--Icon-secondaryNuneBg);
}

.messageModal>.modalContent>.modalDescription {
    color: var(--Text-secondary);
    font-size: var(--typedef-size-md);
    text-align: center;
    font-weight: 400;
}

.messageModal>.modalContent>.modalSubtitle {
    color: var(--Text-secondary);
    font-size: var(--typedef-size-sm);
    font-weight: 400;
    margin-top: 1.31rem;
    margin-bottom: 1.31rem;
    text-align: center;
}

.messageModal>.modalContent>.buttonContainer {
    display: flex;
    flex-direction: row;
    gap: 1.31rem;
    margin-bottom: 1.31rem;
}

.messageModal>.modalContent>.buttonContainer > * {
    flex: 1;
}


.messageModal>.modalContent .checkboxLabel{
    color: var(--Text-secondary);
    font-size: var(--typedef-size-sm);
    font-weight: 400;
    width: 100%;
}

.messageModal>.modalContent>.checkboxContainer {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: anchor-center;
}

.messageModal>.modalContent>.checkboxContainer button{
    font-size: var(--typedef-size-sm);
    color: var(--Text-primaryNoneBg);
}