* {
    --dialog-header-height: 5rem;
}

/* modal dialogs */
.u-dialog {
    background: var(--color-background);
    box-shadow: 0px 10px 70px 0px color-mix(in srgb, var(--color-text, black) , transparent 70%);
    padding: 1rem 2rem;
    box-sizing: border-box;
    border-radius: 0.625rem;
}

.u-showdialog-shroud {
    position:fixed;
    left:0;
    top:0;
    width:var(--vw,100vw);
    height:var(--vh,100vh);
    cursor: auto;
    z-index:999; /* 1 below the doalog's */

    /*background-color: rgba(255, 255, 255, 0.6);*/  /* Use a semi-transparent white background */
    background-color: color-mix(in srgb, var(color-mode, white) , transparent 70%);
    backdrop-filter: blur(8px);   /* Apply the blur effect */
    opacity: 1; /* Ensure the opacity is set to 1 for the blur to be effective */
}

.coml-dialog-header {
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 1rem;
    height:var(--dialog-header-height);
    padding: calc(var(--dialog-header-height)/3);
    padding-top: 0;
    padding-bottom: 0;
    width:100%;
    cursor:grab;
    position:absolute;
    top:0;
    left:0;
    z-index: 10;
    background-color: var(--color-background, white);
}

.coml-dialog-header::before {
    content: attr(data-title);
    font-size: calc(var(--dialog-header-height)/2.5);
    color: var(--color-text, black);
    padding-left: 1rem;
    flex-grow: 1;
    text-align: center;
}
/* close button */

.dialog-close-button,
.dialog-minmax-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.coml-dialog-header .dialog-close-button,
.coml-dialog-header .dialog-minmax-button  {
    position:  initial;
}

.dialog-close-button::after{
    content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.414 12L17.707 7.70701C18.098 7.31601 18.098 6.68401 17.707 6.29301C17.316 5.90201 16.684 5.90201 16.293 6.29301L12 10.586L7.70701 6.29301C7.31601 5.90201 6.68401 5.90201 6.29301 6.29301C5.90201 6.68401 5.90201 7.31601 6.29301 7.70701L10.586 12L6.29301 16.293C5.90201 16.684 5.90201 17.316 6.29301 17.707C6.48801 17.902 6.74401 18 7.00001 18C7.25601 18 7.51201 17.902 7.70701 17.707L12 13.414L16.293 17.707C16.488 17.902 16.744 18 17 18C17.256 18 17.512 17.902 17.707 17.707C18.098 17.316 18.098 16.684 17.707 16.293L13.414 12Z' fill='%23575F54'/%3E%3C/svg%3E");
    padding-right: 0.5rem;
}

.dialog-minmax-button::after{
    content: url("data:image/svg+xml,%0A%3Csvg width='20' height='20' viewBox='0 0 25.588676 25.634777' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2' /%3E%3Cg id='layer1' transform='translate(-118.71311,-61.802014)'%3E%3Cpath fill='%23575F54' stroke='none' stroke-width='0.352778' d='m 120.58686,62.18127 c -2.05962,0.839294 -1.77931,3.204563 -1.77941,5.0298 v 13.405554 c 0,1.657527 -0.44972,4.15544 0.61464,5.56387 1.18565,1.568944 3.6648,1.138908 5.38258,1.138908 h 11.99444 c 1.70847,0 4.01924,0.394088 5.62893,-0.261867 2.05962,-0.839294 1.7793,-3.204563 1.77941,-5.0298 V 68.622181 c 0,-1.657562 0.44972,-4.15544 -0.61465,-5.56387 -1.18565,-1.568944 -3.66479,-1.138908 -5.38258,-1.138908 h -11.99444 c -1.70847,0 -4.01923,-0.394088 -5.62892,0.261867 m 20.79836,2.560355 V 84.49718 H 121.62967 V 64.741625 h 19.75555 M 125.863,78.852736 v 2.822222 h 11.28889 v -2.822222 z' id='path75' /%3E%3C/g%3E%3C/svg%3E%0A");
}


.u-dialog-minimized {
    max-height: var(--dialog-header-height, 2.5rem);
    overflow: hidden;
    box-sizing: border-box;
}



.u-dialog.u-msbox-info{
    box-shadow: none;
}

.u-msbox-warning{
    color: var(--BALERT1);
}

.u-msbox-error{
    color: var(--BERR1);
}

.u-msbox-outer.u-wait-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}