.app-dialog {
    border-radius: 8px;
    background-color: transparent;
    .app-dialog-title {
        text-align: left;
        font-size: var(--wm-modal-title-font-size);
        font-weight: var(--wm-modal-title-font-weight);
        color: var(--wm-modal-title-color);
        letter-spacing: var(--wm-modal-title-letter-spacing);
        line-height: var(--wm-modal-title-line-height);
        font-family: var(--wm-modal-title-font-family);
        i {
            font-size: var(--wm-modal-icon-font-size);
            color: var(--wm-modal-icon-color);
        }

        // span {
        //    font-size: 24px;
        // }
    }

    .app-dialog-close {
        font-size: 24px;
    }

    .app-dialog-body {
        padding: 16px;
    }

    .modal-content {
        background-color: var(--wm-modal-background);
        border-radius: var(--wm-modal-radius);
        padding: var(--wm-modal-body-padding) !important;
        min-width: var(--wm-modal-min-width);
        margin-top: var(--wn-modal-margin);
        margin-bottom: var(--wn-modal-margin);
        padding: 24px;
        .app-dialog-header {
            border-color: transparent;
        }
    }
}
.app-dialog .modal-content .app-dialog-header{
    //header
    padding: var(--wm-modal-header-padding);
    border-style: var(--wm-modal-header-border-style);
    border-color: var(--wm-modal-header-border-color);
    border-width: var(--wm-modal-header-border-width);
    background-color: var(--wm-modal-header-background);
}

.app-dialog .app-dialog-close{
    border-width: var(--wm-modal-header-close-btn-border-width);
    border-color: var(--wm-modal-header-close-btn-border-color);
    border-style: var(--wm-modal-header-close-btn-border-style);
    background-color: var(--wm-modal-header-close-btn-background);
    width: auto;
    height: auto;
}

.app-dialog .app-dialog-close .app-icon::before{
    font-size: var(--wm-modal-header-close-btn-font-size);
    color: var(--wm-modal-header-close-btn-color);
    width: auto;
    height: auto;
}

.app-alert-dialog .app-dialog-message{
    font-weight: var(--wm-modal-description-font-weight);
    font-family: var(--wm-modal-description-font-family);
    color: var(--wm-modal-description-color);
    font-size: var(--wm-modal-description-font-size);
}

.app-alert-dialog .app-dialog-footer .ok-action.app-button{
    background-color: var(--wm-modal-btn-ok-background);
    color: var(--wm-modal-btn-ok-color);
    border-width: 0px;
    border-style: none;
}

.app-confirm-dialog .app-dialog-footer .app-button:last-child{
    background-color: var(--wm-modal-btn-ok-background);
    color: var(--wm-modal-btn-ok-color);
    border-width: 0px;
    border-style: none;
}

.app-confirm-dialog .app-dialog-footer .app-button:first-child {
    background-color: var(--wm-modal-btn-cancel-background);
    color: var(--wm-modal-btn-cancel-background);
    border-width: 0px;
    border-style: none;
}

.app-dialog-footer {
    padding: var(--wm-modal-footer-padding);  
}

//styleWorkspace Template
.native_mobile-dialog {
        background-color: var(--wm-modal-background);
        border-radius: var(--wm-modal-radius);
        padding: var(--wm-modal-body-padding) !important;
        min-width: var(--wm-modal-min-width);
        margin-top: var(--wn-modal-margin);
        margin-bottom: var(--wn-modal-margin);
.dialog-header{
    padding: var(--wm-modal-header-padding);
    border-style: var(--wm-modal-header-border-style);
    border-color: var(--wm-modal-header-border-color);
    border-width: var(--wm-modal-header-border-width);
    background-color: var(--wm-modal-header-background);
}

.dialog-icon .wi-check:before{
        font-size: var(--wm-modal-icon-font-size);
        color: var(--wm-modal-icon-color);
} 

.dialog-icon .wi-file:before{
        font-size: var(--wm-modal-icon-font-size);
        color: var(--wm-modal-icon-color);
} 

.dialog-icon .wi-alert:before{
        font-size: var(--wm-modal-icon-font-size);
        color: var(--wm-modal-icon-color);   
}

.dialog-title {
        font-size: var(--wm-modal-title-font-size);
        font-weight: var(--wm-modal-title-font-weight);
        color: var(--wm-modal-title-color);
        letter-spacing: var(--wm-modal-title-letter-spacing);
        line-height: var(--wm-modal-title-line-height);
        font-family: var(--wm-modal-title-font-family);
}
.dialog-close{
    border-width: var(--wm-modal-header-close-btn-border-width);
    border-color: var(--wm-modal-header-close-btn-border-color);
    border-style: var(--wm-modal-header-close-btn-border-style);
    background-color: var(--wm-modal-header-close-btn-background);
    width: auto;
    height: auto;
}

.dialog-close .wi-close:before{
    font-size: var(--wm-modal-header-close-btn-font-size);
    color: var(--wm-modal-header-close-btn-color);
    width: auto;
    height: auto;
}

.dialog-message{
    font-weight: var(--wm-modal-description-font-weight);
    font-family: var(--wm-modal-description-font-family);
    color: var(--wm-modal-description-color);
    font-size: var(--wm-modal-description-font-size);   
}

.dialog-actions {
    padding: var(--wm-modal-footer-padding) !important; 
}

.dialog-btn.cancel-btn{
    background-color: var(--wm-modal-btn-cancel-background) !important;
    color: var(--wm-modal-btn-cancel-color) !important;
    border-width: 0px !important;
    border-style: none !important;
}

.dialog-btn.confirm-btn{
    background-color: var(--wm-modal-btn-ok-background) !important;
    color: var(--wm-modal-btn-ok-color) !important;
    border-width: 0px !important;
    border-style: none !important;
}

}