#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: 376px;
    min-width: 376px;
    max-height: 620px;
    right: 0px;
    bottom: 0px;
    display: block;
    position: fixed;
    box-shadow: rgba(0, 18, 46, 0.16) 0px 8px 36px 0px; /* NEW GAB */
}


#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: 340px;
    height: 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: 10px; */
    /* box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px; */
    /* margin: 10px; */
} 

/* @-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;
        }

        #tiledesk-container.open #tiledeskdiv {
            /* restore widget to default fullscreen dimension when it is open*/
            right: 0px !important;
            left: 0px !important;
            bottom: 0px !important;
            top: 0px !important;

        }
        /* #tiledeskdiv.align-right { 
            right: 0!important;
        }
        #tiledeskdiv.align-left { 
            left: 0!important;
        } */
        #tiledesk-container.closed #tiledeskdiv.callout {
            min-width: auto;
            max-width: 100%;
        }

    }


