﻿.envelopeChat #envelopeIframeChat:not(.hidden) {
    position: fixed;
    z-index: 55555;
    border: 2px solid #3dc5f5;
    width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0em;
    left: 6em;
    height: 700px;
    background: white;
    border-radius: .5em;
    box-shadow: 0 0 .3em #aaa
}


.envelopeChat iframe {
    width: 100%!important;
    height: 100%!important;
    border-radius: 0.3em;
}

i.closechat:before {
     content: "\f00d"; 
    font-family: 'Font Awesome 5 Free';
    position: absolute;
    z-index: 555;
    top: 1em;
    left: 1em;
    font-weight: bold;
    font-size: 2em;
    color: black;
    font-style: normal;
    cursor: pointer;
}
i.closechat:focus:before,
i.closechat:hover:before{
    background:white;
    padding:0 .2em;
    left: .8em;
    border-radius:.2em;
}

i.closechat:focus:before {border:1px solid black}

/*------------lobby --------------*/

.mobile .chatIcon {zoom: 0.8;}

.chatIcon {
    bottom: 2.8em;
    left: 2em;
    position: fixed;
    z-index: 888;
    width: 15.1em;
    height: 3.9em;
    cursor: pointer;
}

.chatIcon:not(.open):before {
    content: "צ'אט עם נציג אנושי ";
    font-size: 1.1em;
    width: 8.3em;
    font-weight: normal;
    top: 0em;
    position: absolute;
    left: 0;
    background: url(/PublishingImages/chat-icon.png) #ffd673 no-repeat;
    padding: 1.1em 3.7em 1.1em 1em;
    border-radius: 1.7em;
    animation: pulse-chat 2s ease infinite!important;
    /*animation: pulse3 2s ease!important;
	animation-iteration-count: 2!important;*/
    color: black;
    z-index: -7;
    /* border: 1px solid #baa36a; */
    background-position: 97%;
}


@keyframes pulse-chat {
        0% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgb(255 214 115);
        }

        70% {
            transform: scale(1);
            box-shadow: 0 0 0 1em rgb(255 214 115 / 0%);
        }

        100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgb(255 214 115 / 0%);
        }
    }


.chatIcon:not(.open):after {
    content: "";
    position: absolute;
    border-style: solid;
    left: 1.9em;
    top: 3.6em;
    border-width: 20px 28px 11px 0px;
    border-color: #ffd673 transparent transparent transparent;
}

.chatIcon.open {
    background: url(/PublishingImages/chat-icon.png);
    width: 46px;
    height: 47px;
}

.chatIcon.open:after {
    content: "";
    position: absolute;
    border-style: solid;
    left: 2em;
    top: -0.1em;
    border-width: 15px 10px 0px 10px;
    border-color: #3dc5f5 transparent transparent transparent;
    transform: rotate(-132deg);
}

@media (max-width: 768px) {
    .envelopeChat #envelopeIframeChat:not(.hidden) {
        left:0;
        width: calc(100% - 5px);
        height: calc(100% - 5px);
        top: 0
    }

    .chatIcon.open {
        display: none
    }

    .envelopeChat:not(.mobile) {
        display: none
    }
}
