#mcs-preview {
    position:relative;
    display:inline-block;
}

#mcs-background {
    display:block;
    max-width:100%;
    height:auto;
}

#mcs-preview [data-field] {
    cursor:text;
    pointer-events:auto !important;
    user-select:text !important;
    -webkit-user-select:text !important;
    z-index:10 !important;
}

#mcs-preview [data-field]:focus {
    outline:1px dashed #38a3a5 !important;
    background:rgba(56,163,165,0.25) !important;
}

.mcs-download {
    display:block !important;
    margin-top:25px !important;
    padding:14px 35px !important;
    font-size:18px !important;
    font-weight:700 !important;
    border-radius:8px !important;
}

@media(max-width:768px){

    #mcs-preview {
        width:1080px !important;
        height:1080px !important;
        max-width:none !important;
    }

    #mcs-background {
        width:1080px !important;
        height:1080px !important;
    }

    .mcs-download {
        width:100% !important;
    }

}

@media(min-width:769px){

    .wrap > div[style*="display:flex"] {
        flex-direction:row !important;
        align-items:flex-start !important;
    }

    .wrap > div[style*="display:flex"] > div:first-child {
        width:350px !important;
    }

    .wrap > div[style*="display:flex"] > div:last-child {
        flex:1 !important;
        width:auto !important;
    }

}


input[name="name"],
textarea[name="biography"],
textarea[name="janazah"],
textarea[name="condolences"],
textarea[name="burial"],
textarea[name="location"],
select {
    color:#000 !important;
    -webkit-text-fill-color:#000 !important;
    background:#fff !important;
    opacity:1 !important;
}


.mcs-save,
.mcs-download {
    display:inline-block !important;
    width:220px !important;
    min-height:52px !important;
    padding:14px 35px !important;
    margin-top:25px !important;
    margin-right:10px !important;
    font-size:18px !important;
    font-weight:700 !important;
    border-radius:8px !important;
    box-sizing:border-box !important;
}

@media(max-width:768px){

    .mcs-save,
    .mcs-download {
        display:block !important;
        width:100% !important;
        margin-right:0 !important;
        margin-top:15px !important;
    }

}


@media(max-width:768px){

    input[name="name"],
    textarea[name="biography"],
    textarea[name="janazah"],
    textarea[name="condolences"],
    textarea[name="burial"],
    textarea[name="location"] {
        display:none !important;
    }

    input[name="name"] + *,
    textarea[name="biography"] + *,
    textarea[name="janazah"] + *,
    textarea[name="condolences"] + *,
    textarea[name="burial"] + *,
    textarea[name="location"] + * {
        display:none !important;
    }

}


@media(max-width:768px){

    /* stack layout vertically */
    .wrap > div[style*="display:flex"] {
        display:flex !important;
        flex-direction:column !important;
    }

    .wrap > div[style*="display:flex"] > div {
        width:100% !important;
    }

    /* hide input fields but keep labels/structure */
    .wrap input[name="name"],
    .wrap textarea[name="biography"],
    .wrap textarea[name="janazah"],
    .wrap textarea[name="condolences"],
    .wrap textarea[name="burial"],
    .wrap textarea[name="location"] {
        display:none !important;
    }

}


@media(max-width:768px){

    #mcs-preview {
        width:1080px !important;
        height:1080px !important;
        max-width:none !important;
        overflow:visible !important;
    }

    #mcs-background {
        width:1080px !important;
        height:1080px !important;
        max-width:none !important;
    }

    /* allow sideways scrolling only for preview */
    #mcs-preview {
        margin-bottom:20px;
    }

    .wrap {
        overflow-x:hidden !important;
    }

    .wrap > div[style*="display:flex"] > div:last-child {
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch;
    }

}