#tiledesk-container {
    position: fixed; 
    right: 0px;
    bottom: 0px;
    width: auto;   
    height: auto;
    display: none;
    z-index: 2000000000; /*999999*/;
}
#tiledeskdiv {
    /* width: 100%;
    height: calc(100% - 40px);
    max-width: 420px;
    min-width: 416px;
    max-height: 640px; */
    width: 376px;
    height: calc(100% - 40px);
    max-width: 696px;  /*376px;*/
    min-width: 376px;
    max-height: 620px;
    right: 0px;
    bottom: 0px;
    display: block;
    position: fixed;
    
}

#tiledeskdiv.decreaseSize {
    /* transition: width 1s, height 1s; */
    transition: all 1s ease-out;
    width: 376px;
    max-height: 620px;
    /* animation: right-animate 1s ease infinite alternate; */

}

#tiledeskdiv.increaseSize {
    /* transition: width 1s, height 1s; */
    transition: all 1s ease-in;
    width: 696px;
    max-height: 712px;
    /* animation: right-animate 1s ease infinite alternate; */

}

@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 */ 
    
}
#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: 375px; /*340px*/
    height: 440px; /*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;*/
    /* -webkit-animation: fade-in-shadow 0.4s ease-in 0.0s both;
    animation: fade-in-shadow 0.4s ease-in 0.0s both; */
    /* border-radius: 16px; */
    /* box-shadow: rgba(0, 18, 46, 0.16) 0px 8px 36px 0px; */
    /* margin: 10px; */
}
#tiledesk-container.open #tiledeskdiv.shadow {
    transition: box-shadow 0.8s ease-in;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 8px 36px 0px; /*NEW GAB*/
}
/* @-webkit-keyframes fade-in-shadow {
    0% { box-shadow: rgba(0, 0, 0, 0.0) 0 0 0px; }
    100% { box-shadow: rgba(0, 0, 0, 0.1) 0 0 6px; }
}
@keyframes sk-bouncedelay {
    0% { box-shadow: rgba(0, 0, 0, 0.0) 0 0 0px; }
    100% { box-shadow: rgba(0, 0, 0, 0.1) 0 0 6px; }
} */

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


#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;
}