#chatWidget {
    z-index: 2147483647 !important;
    position: fixed;
    bottom: 20px;
    right: 20px;
}

#chatBtn {
    z-index: 2147483647 !important;
    width: 80px;
    height: 80px;
    border: 1px solid #ccc;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
    background-color: white;
}

#chatImg {
    width: auto;
    height: 100%;
}


#mainChatContainer {
    position: absolute;
    /*top: -420px;*/
    bottom: 85px;
    right: 0;
    width: 396px;
    /* 376px + 20px */
    /*height: 413px;*/
    height: 65vh;
    display: none;
    background-color: #f5f5f5;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #ccc;
    transition: width 0.5s ease, height 0.5s ease, top 0.5s ease;
}


#chatContainer {
    flex: 1;
    height: 100%;
    /* Occupy full height */
    position: relative;
    /* border: 1px solid #ccc; */
    border-radius: 10px;
}

#resize-btn {
    position: absolute;
    left: -5px;
    z-index: 2;
    margin-top: 0.3rem;
    margin-left: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 5px 0px 0px 5px;
}


#resize-btn-old {
    position: absolute;
    right: -5px;
    z-index: 2;
    margin-top: 0.3rem;
    margin-right: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 5px 0px 0px 5px;
}


#resize-btn:hover, #resize-btn-old:hover {
    cursor: pointer;
}

#normal-svg {
    height: 15px;
    width: 15px;

}

#normal-svg:hover {
    transition: transform 0.2s;
}

#resized-svg {
    height: 15px;
    width: 15px;
}

#chatIframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
}

#resized-svg:hover {
    transition: transform 0.2s;
}

@media (max-width: 450px) {
    #mainChatContainer {
        width: 85vw !important;
    }
}

.fade-in {
    animation: fadeInAnimation 0.25s forwards ease-in-out;
}

.fade-out {
    animation: fadeOutAnimation 0.25s forwards ease-in-out;
}

@keyframes fadeInAnimation {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOutAnimation {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}