:root{
    --messagePreviewHeight: 100px;
    --iframeMinWidth: 400px; /*376px*/;
    --iframeMinHeight: 704px; /*696px;*/
    --iframeMaxWidth: 688px;
    --iframeMaxHeight: 786px;

}

#tiledesk-container {
    position: fixed; 
    right: 0px;
    bottom: 0px;
    width: auto;   
    height: auto;
    display: none;
    z-index: 3000000000; /*999999*/; 
}

#tiledesk-container.open.overlay--popup {
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    width: 100%;
    height: 100vh;
}
#tiledeskdiv {
    /* width: 100%;
    height: calc(100% - 40px);
    max-width: 420px;
    min-width: 416px;
    max-height: 640px; */
    width: var(--iframeMinWidth);
    height: var(--iframeMinHeight);
    /* min-width: var(--iframeMinWidth); 
    max-width: var(--iframeMaxWidth);  376px;
    max-height: 620px; */
    right: 0px;
    bottom: 0px;
    display: block;
    position: fixed;
    max-height: calc(100% - 50px);
    border-radius: 16px;
}

#tiledeskdiv.fullscreen {
    right: 0px;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;  
}

#tiledeskdiv.top-size {
    /* transition: width 50ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out; */
    position: relative;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0!important;
    right: 0!important;
    height: 100%; /*var(--iframeMaxHeight);*/
    /* transform: translate(-50%, -50%);   */
    /* transform: translate(-50%, 0%);   */
    width: 100%;
    max-width: 1024px;
    max-height: 100%;

    transition: 
    width 300ms, 
    height 300ms, 
    max-height 300ms, 
    transform 300ms cubic-bezier(0, 1.2, 1, 1), 
    opacity 300ms ease-out;
    /* per migliorare le prestazioni quando si usa transform */
    will-change: transform, opacity, width, height;
}

/* #tiledesk-container.open #tiledeskdiv.top-size #tiledeskiframe {
    border-radius: unset;
} */

@keyframes right-animate {
    0% {
        transform: translateX(140px);
    }
    100% {
        transform: translateX(20px);
    }
}

#tiledesk-container.closed #tiledeskdiv {
    width: 100px; /* 100X100 */
    height: 100px;
    min-width: auto;
    min-height: auto;
    box-shadow: none; /* NEW GAB */ 
    left: auto; /* NEW DEPA */ 
    top:auto;
    transform: none;
    transition: none;
}
#tiledesk-container.closed #tiledeskdiv.callout {
    /* width: 400px;
    height: 100px;
    min-width: 400px; */
    width: 100% !important;
    min-width: 400px;
    max-width: 400px;
}
#tiledesk-container.closed #tiledeskdiv.messagePreview {
    width: 340px; /*340px*/
    height: var(--messagePreviewHeight); /*300px*/
    min-width: 340px;
}

#tiledeskiframe {
    position: absolute;
    width: inherit;
    height: 100%;
    border-width: 0px;
    /*max-height: 620px;*/
    margin: 0px;
    margin: 0px;
    display: none;
    background-color: transparent;
}

#tiledesk-container.open #tiledeskiframe {
    display: block;
    /*width: 376px;*/
    border-radius: 16px;
    transition: box-shadow 0.8s ease-in;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 8px 36px 0px; /*NEW GAB*/
}
/* 
#tiledesk-container.open #tiledeskdiv.shadow {
    transition: box-shadow 0.8s ease-in;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 8px 36px 0px;
} 
*/

#tiledesk-container.open #tiledeskdiv {
    /* transition: box-shadow 0.8s ease-in;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 8px 36px 0px; */
}

#tiledesk-container.closed #tiledeskiframe {
    display: block;
    box-shadow: none;
}

#tiledesk-container.open #tiledeskdiv.min-size {
    transition: width 200ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out;
    width: var(--iframeMinWidth);
    height: var(--iframeMinHeight);
}

#tiledesk-container.open #tiledeskdiv.max-size {
    /* transition: width 1s, height 1s; */
    transition: width 200ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out;
    width: var(--iframeMaxWidth);
    height: var(--iframeMaxHeight);
}

#tiledeskiframe .full-screen-mode {
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    left: 0px;
    bottom: 0px;
    border-radius: 0px;
    max-height: none;
}


    /**************
    // nk: .chat21-sheet CUSTOM DIMENSIONS WHEN THE WINDOW WIDTH IS < 451PX 
    ***************/

    @media (max-width: 451px) {
        #tiledeskiframe {
            max-height: inherit;
            margin: 0;
        }
        #tiledesk-container {
            width: 100%;
            height: 100%;
        }
        #tiledesk-container.open #tiledeskiframe {
            width: 100%;
            height: 100%;
            margin-right: 0px;
            margin-bottom: 0px;
            left: 0!important;
            right: 0!important;
            top: 0!important;
            bottom: 0!important;
            border-radius: 0px;
        }
        #tiledesk-container.closed {
            width: auto;
            height: auto;
        }
        #tiledeskdiv {
            width: 100%;
            height: 100%;
            /* left: auto; */
            /* left: 0px!important;
            right: 0px!important; */
            top: auto;
            /* bottom: 0px!important;  THIS IS FOR DEFAULT BY mobileMarginY property*/
            max-width: 100%;
            max-height: 100%;
            min-width: 320px;
        }
        /* #tiledeskdiv.align-right { 
            right: 0!important;
        }
        #tiledeskdiv.align-left { 
            left: 0!important;
        } */
        #tiledesk-container.closed #tiledeskdiv.callout {
            min-width: auto;
            max-width: 100%;
        }

    }

.tiledesk-popup{
    opacity: 1;
    position: absolute;
    inset: 0px;
    outline-offset: -5px;
    background-color: rgba(0, 0, 0, 0.35);
    will-change: opacity;
}