:root {
    --blmodal-head-top-margin: 30px; /* 241002 -Trying 5% instead of 20px*/
    --blmodal-head-height: 45px;
    --blmodal-foot-height: 50px;
    --blmodal-body-padding-y: 20px;
    --blmodal-body-padding: 20px var(--blmodal-body-padding-y);
    /*--blmodal-body-padding_mob: 10px 10px;*/
}
.blmodal {
    /*display:none;*/
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: #00000043;
    z-index: 10000;
    display: block;
    opacity: 0;
    overflow: hidden;
    -webkit-transition: opacity ease-in-out 0.5s;
    transition: opacity ease-in-out 0.5s;
}
    .blmodal.active {opacity: 1;}
    .blmodal .modal-dialog { pointer-events:none; }
    .blmodal.active .modal-dialog  { pointer-events:auto;}

    .blmodal .modal-content, .blmodal .modal-content form,
    .blmodal-side .modal-side-content form {
        display: contents;
    }

    /*--- Dialog loading ---*/
    .blmodal.loading .modal-body:before {
        content: '⚈';
        position: absolute;
        padding-top:20px;
        top:0px;
        left: 0px;
        width: 100%;
        height: 100%;
        text-align: center;
        color: black;
        z-index: 1000;
        font-size: 30px;
        background-color:#ffffff9f;
        animation: modalloadingicoanim 1s infinite linear;
    }
        @keyframes modalloadingicoanim {
            50% {
                content: '⚉';
            }
        }

    .blmodal .modal-dialog {
        margin: var(--blmodal-head-top-margin) auto 0 auto;
        transform: rotate3d(1, 0, 0, 30deg);
        max-width: 80vw;
        background-color: #ffffff;
        border: 0px solid #ffffff;
        border-radius: 5px;
        box-shadow: 0px 0px 15px 0px rgba(40,40,40,0.70);
        -webkit-transition: transform ease-in-out 0.5s;
        transition: transform ease-in-out 0.5s; /*, box-shadow ease-in-out 0.5s*/
    }
    .blmodal.active .modal-dialog {
        transform: rotate3d(0, 0, 0, 0);
        /*box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.71);*/
    }
    .blmodal .modal-header {
        display: flex;
        width: 100%;
        background-color: rgba(230,230,230, 0.5);
        background: linear-gradient(1deg,rgba(235, 235, 235, 1.0), rgba(245, 245, 245, 1.0));
        color: rgba(80, 80, 80, 1.0);
        height: var(--blmodal-head-height);
        margin: 0 0 0px 0;
        border-radius: 4px 4px 0px 0px;
    }

        .blmodal .modal-header .modal-ico, .modal-side .modal-header .modal-ico {
            display: flex;
            justify-content: center; /* Centering y-axis */
            align-items: center; /* Centering x-axis */
            width: 20px;
            height: 100%;
            margin: 0px 5px 0px 15px;
            padding: 0px 0px 0px 0px;
        }
            .blmodal .modal-header .modal-ico img, .modal-side .modal-header .modal-ico img {
                max-height: 20px; max-width: auto;}

            .blmodal .modal-header .modal-ico.bright img, .modal-side .modal-header .modal-ico.bright img  {
                filter: brightness(30%);}

        .blmodal .modal-header .modal-title {
            font-weight: 400;
            width: 100%;
            padding: 0;
            margin: 0;
            padding: 1px 10px 0px 10px;
            line-height: var(--blmodal-head-height);

        }
/*        .blmodal .modal-header .btn-group {
            display: flex;
            flex-wrap: nowrap;
            height: var(--blmodal-head-height);
        }
        .blmodal .modal-header .btn-close {
            display: flex;
            flex-wrap: nowrap;
        }*/
        /*.blmodal .modal-header .titlebar-close {
            padding: 1rem 1rem;
            margin: -1rem -1rem -1rem auto;
            background-color: transparent;
            border: 0;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            float: right;
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1;
            color: #000;
            text-shadow: 0 1px 0 #fff;
            opacity: .5;
            text-decoration:none;
        }
            .blmodal .modal-header .titlebar-close .rzi-times:before {
                content: '\00D7';
                display: block;
                height: 100%;
                vertical-align: middle;
                width: 40px;
            }*/
        .blmodal .modal-header .titlebar-close, .blmodal .modal-header .titlebar-fullscreen, .modal-side .titlebar-close, .modal-side .titlebar-fullscreen {
            width: 40px;
            background-color: transparent;
            border: 0;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            font-size: 25px;
            font-weight: 700;
            color: #000;
            text-shadow: 0 1px 0 #fff;
            opacity: .5;
        }
            .blmodal .modal-header .titlebar-fullscreen::before, .modal-side .titlebar-fullscreen::before {
                content: '\26F6';
                display: block;
                font-size: 24px;
                transition: text-shadow 0.2s;
            }
            .blmodal .modal-header .titlebar-close::before, .modal-side .titlebar-close::before {
                content: '\00D7';
                display: block;
                transition: text-shadow 0.2s;
            }
            .blmodal .modal-header .titlebar-close:hover, .blmodal .modal-header .titlebar-fullscreen:hover, .modal-side .titlebar-close:hover, .modal-side .titlebar-fullscreen:hover {
                /*color: #ffffff;*/
                opacity: 1;
                text-shadow: 0 1px 10px #fff;
            }
.modal-side .titlebar-close {
    align-content: center;
}
.modal-header-icotitle {
    display: flex;
    justify-content: center;
}

.blmodal .modal-body {
    overflow-y: auto;
    padding: var(--blmodal-body-padding);
    --blmodal-available-height: calc(100vh - 13px - var(--blmodal-head-top-margin) - var(--blmodal-body-padding-y) - var(--blmodal-head-height) - var(--blmodal-foot-height));
    max-height: var(--blmodal-available-height);
    min-height: min( 300px, var(--blmodal-available-height) );
    /*Setting height with clamp does the same as min-height + max-height above.*/
    /*height: clamp( 100px, var(--blmodal-available-height), 300px );*/
}

/*--- Min height -- No longer needed, min-height is now a clamp above..*/
/*(Edited to 300px 241002, used to ber 120)*/
/*.blmodal .modal-body {
    min-height: 300px;
}*/
/*(Edited to 300px 241002, used to ber 120)*/
/*@media screen and (max-width:650px) {
    .blmodal .modal-body {
        min-height: 200px;
    }
}*/
/*--- Min height - END --*/

.blmodal .nopadd .modal-body{
    padding:0;
}

.blmodal iframe.contentframe, .modal-side iframe.contentframe {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    /*height: calc(100vh - 160px);*/
    border: 0;
}

    .blmodal .modal-footer {
        display: flex;
        height: var(--blmodal-foot-height);
        background-color: rgba(40, 40, 40, 0.2);
        border-top: 1px solid rgba(140, 140, 140, 0.1);
        text-align: center;
        padding: 5px 10px;
        justify-content: center;
        align-items: center;
        border-radius: 0px 0px 4px 4px;
    }

        .blmodal .modal-footer label {white-space:nowrap;}

    .blmodal .modal-footer button{
        border-radius: 5px;
        padding:0px 9px 0px 9px;
        line-height:32px;
        height:30px;
        min-width:110px;
        margin:0px 5px;
/*        color:white;*/
    }

    .modal .modal-footer button.colorcanc { color:white; background-color: rgba(124, 75, 70, 0.9);}
    .modal .modal-footer button.colorconf { color:white; background-color: rgba(86, 122, 76, 0.9);}
    .modal .modal-footer button:hover { background-color: rgba(80, 80, 80, 0.9); }


/*--- SIDEPANEL ---*/
/* Base styles for side modal */
.modal-side {
    position: fixed;
    display:flex;
    flex-direction:column;
    z-index: 1050;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    /*overflow: auto;*/
    transition: transform 0.3s ease-in-out;
    outline: none;
}

/* Position: left */
.modal-side-position-left {
    top: 0;
    bottom: 0;
    left: 0;
    width: 500px;
    max-width: 100%;
    transform: translateX(-100%);
    height: 100vh;   /* fallback for older browsers */
    height: 100dvh;  /* dynamic viewport height: adjusts for mobile browser toolbar (Chrome 108+, Firefox 116+, iOS Safari 15.4+) */
}

/* Position: right */
.modal-side-position-right {
    top: 0;
    bottom: 0;
    right: 0;
    width: 500px;
    max-width: 100%;
    transform: translateX(100%);
    height: 100vh;   /* fallback for older browsers */
    height: 100dvh;  /* dynamic viewport height: adjusts for mobile browser toolbar (Chrome 108+, Firefox 116+, iOS Safari 15.4+) */
}

/* Position: top */
.modal-side-position-top {
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    transform: translateY(-100%);
}

/* Position: bottom */
.modal-side-position-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    transform: translateY(100%);
}

/* When modal is open */
.modal-side.active /* .modal-side.modal-side[tabindex="0"] */ {
    transform: translate(0, 0);
}


.modal-side-content > * {
    flex-shrink: 0;
}
.modal-side .modal-footer, .modal-side-framed .modal-footer {
    flex-shrink: 0;
    padding: 4px 10px;
    gap: 10px;
    display: flex;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
}
    .modal-side .modal-footer.centered, .modal-side-framed .modal-footer.centered {
        justify-content: center;
    }

/* Title bar */
.modal-side .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    /*background-color: #95c964;*/ /*Organization*/
    background-color: #bababa;
    border-bottom: 1px solid #ddd;
}
    .modal-side .modal-header > div {
        display: flex;
        justify-content: center;
    }

.modal-side, .modal-side .modal-header {
    border-radius: 15px 0 0 0;
}

/* Title text */
.modal-side .modal-title {
    text-transform:uppercase;
    font-size: 0.95rem;
    font-weight: bold;
    color: #FFF;
    margin-left:10px;
}

    .modal-side .titlebar-close, .modal-side .titlebar-fullscreen {
        width: auto;
        min-width: 30px;
        margin-left: 15px;
        text-align: center;
        text-shadow:none;
        color: white;
        opacity: 1;
        font-size: 2rem;
    }

/* Close button */
/*.modal-side .titlebar-close {
    font-size: 1.2rem;
    color: #666;
    text-decoration: none;
    padding: 0.25rem;
    cursor: pointer;
}

    .modal-side .titlebar-close:hover {
        color: #000;
    }
*/

/* Modal content */
/*---STICKY BOT ---*/
/*.modal-side-content {*/
    /*padding: 1rem;*/
    /*min-height:100%;*/
    /*display: flex;
    flex-direction: column;
    min-height: calc(100vh - 45px);
}*/
.modal-side-content {
    display: flex;
    align-content: stretch;
    align-items: stretch;
    align-self: stretch;
    justify-content: stretch;
    justify-items: stretch;
    justify-self: stretch;
    flex-direction: column;
    height: 100%;
    /*height: calc(100vh - 60px);*/

    flex: 1 1 auto;
    overflow: hidden;
}
    .modal-side-content .modal-body {
        overflow: auto;
        /*max-height: calc(100vh - 87px);*/
        flex: 1 1 auto;
    }
.modal-side.modal-side-position-right .modal-header, .modal-side.modal-side-position-left .modal-header {
    /*position: sticky;
    top: 0px;*/
    z-index: 1;
}
.modal-side.modal-side-position-right .modal-footer, .modal-side.modal-side-position-left .modal-footer {
    /*position: sticky;
    bottom: 0px;*/
    z-index: 1;
}
.modal-side .modal-header-float{
    position:absolute;
    display:flex;
    right:0;
    background-color:#ddd;
    border-radius: 0 0 0 5px;
}
.modal-side .modal-header-float div {
    display:flex;
}
.modal-side .modal-load-error{
    padding:10px;
    font-weight:bold;
}


        /*--- SIDEPANEL - END ---*/

/*BASIC STYLES*/
/*.blmodal.basicstyles input, .blmodal.basicstyles select {
    width: 100%;
    max-width: 100%;
}*/

/*MEDIA ------------------------------------------------*/
@media screen and (max-width:1200px) {} @media screen and (max-width:1000px) {
    .blmodal .modal-dialog {
        max-width: 95vw;}

} @media screen and (max-width:850px) {
    :root {
        --blmodal-body-padding-y: 10px;
        --blmodal-body-padding: 10px var(--blmodal-body-padding-y);
    }
   /* .blmodal .modal-body {
        padding: var(--blmodal-body-padding_mob);
    }*/

} @media screen and (max-width:650px) {


} @media screen and (max-width:450px) {} @media screen and (max-width:380px) {}


/*--- Basic dialog styles ---*/
.modal-dialog.basic :not(.ql-tooltip) > input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]), .modal-dialog.basic textarea, .modal-dialog.basic select {
    width: 100%;
    max-width: 100%;
}
.modal-dialog.basic .flexcontainer {
    /*display: flex;
        flex-wrap: wrap;*/
    flex-direction: column;
    justify-content: center;
    padding: 0px;
}
    .modal-dialog.basic .flexcontainer label {
        display: inline-block;
        padding: 2px;
    }
.modal-dialog.basic .flexitem {
    /*align-items: stretch;*/
    flex-grow: unset;
    flex-basis: unset;
    width: auto;
    padding: 5px 0px;
}
/*--- Basic dialog styles - END ---*/


/*--- Schema dialog ---*/
.modal-dialog .validation-message {
    color: red;
    font-weight: bold;
}
/*--- Schema dialog - END ---*/


/* === LOADING === */
.modal-body-loading {
    padding: 16px;
}
.modal-body-loading::before {
    content: "";
    display: block;
    height: 16px;
    margin-bottom: 12px;
    border-radius: 6px;
    background: linear-gradient( 90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63% );
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
}
.modal-body-loading::after {
    content: "";
    display: block;
    height: 80px;
    border-radius: 6px;
    background: linear-gradient( 90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63% );
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}
/* === LOADING - END ===*/