﻿
<style id="custom-chaty-css" >
#chaty-widget-0 .Phone-channel .color-element {
    fill: #03E78B;
    color: #03E78B;
}

#chaty-widget-0 .channel-icon-Phone .color-element {
    fill: #03E78B;
    color: #03E78B;
}

#chaty-widget-0 .Phone-channel .chaty-custom-icon {
    background-color: #03E78B;
}

#chaty-widget-0 .Phone-channel .chaty-svg {
    background-color: #03E78B;
}

#chaty-widget-0 .channel-icon-Phone .chaty-svg {
    background-color: #03E78B;
}

#chaty-widget-0 .Whatsapp-channel .color-element {
    fill: #49E670;
    color: #49E670;
}

#chaty-widget-0 .channel-icon-Whatsapp .color-element {
    fill: #49E670;
    color: #49E670;
}

#chaty-widget-0 .Whatsapp-channel .chaty-custom-icon {
    background-color: #49E670;
}

#chaty-widget-0 .Whatsapp-channel .chaty-svg {
    background-color: #49E670;
}

#chaty-widget-0 .channel-icon-Whatsapp .chaty-svg {
    background-color: #49E670;
}

#chaty-widget-0 .chaty-channel {
    width: 54px;
    height: 54px;
}

    #chaty-widget-0 .chaty-channel > a {
        width: 54px;
        height: 54px;
    }

        #chaty-widget-0 .chaty-channel > a .chaty-custom-icon {
            display: block;
            width: 54px;
            height: 54px;
            line-height: 54px;
            font-size: 27px;
        }

    #chaty-widget-0 .chaty-channel button {
        width: 54px;
        height: 54px;
        margin: 0;
        padding: 0;
        outline: none;
        border-radius: 50%;
    }

    #chaty-widget-0 .chaty-channel .chaty-svg {
        width: 54px;
        height: 54px;
    }

        #chaty-widget-0 .chaty-channel .chaty-svg img {
            width: 54px;
            height: 54px;
        }

    #chaty-widget-0 .chaty-channel span.chaty-icon {
        width: 54px;
        height: 54px;
    }

    #chaty-widget-0 .chaty-channel a {
        width: 54px;
        height: 54px;
    }

    #chaty-widget-0 .chaty-channel .chaty-svg .chaty-custom-channel-icon {
        width: 54px;
        height: 54px;
        line-height: 54px;
        display: block;
        font-size: 27px;
    }

#chaty-widget-0 .chaty-i-trigger .chaty-cta-button {
    background-color: rgb(40, 61, 145);
}

    #chaty-widget-0 .chaty-i-trigger .chaty-cta-button button {
        background-color: rgb(40, 61, 145);
    }

#chaty-widget-0 .chaty-i-trigger .ch-pending-msg {
    background-color: #dd0000;
    color: #ffffff;
}

#chaty-widget-0 .chaty-channel-list {
    height: 124px;
}

#chaty-widget-0 .chaty-channel-list {
    width: 62px;
}

#chaty-widget-0 .chaty-open .chaty-channel-list .chaty-channel:nth-child(1) {
    -webkit-transform: translateY(-124px);
    transform: translateY(-124px);
}

#chaty-widget-0 .chaty-open .chaty-channel-list .chaty-channel:nth-child(2) {
    -webkit-transform: translateY(-62px);
    transform: translateY(-62px);
}

#chaty-widget-0 .chaty-open .chaty-channel-list .chaty-channel:nth-child(3) {
    -webkit-transform: translateY(-0px);
    transform: translateY(-0px);
}

#chaty-widget-0 .chaty-widget {
    bottom: 15px
}

#chaty-widget-0 .chaty-widget {
    right: 15px;
    left: auto;
}

.chaty-outer-forms.pos-right.chaty-form-0 {
    right: 15px;
    left: auto;
}

.chaty-outer-forms.active.chaty-form-0 {
    -webkit-transform: translateY(-84px);
    transform: translateY(-84px)
}

#chaty-widget-0 .chaty-tooltip:after {
    background-color: #ffffff;
    color: #333333
}

#chaty-widget-0 .chaty-tooltip.pos-top:before {
    border-top-color: #ffffff;
}

#chaty-widget-0 .chaty-tooltip.pos-left:before {
    border-left-color: #ffffff;
}

#chaty-widget-0 .chaty-tooltip.pos-right:before {
    border-right-color: #ffffff;
}

#chaty-widget-0 .on-hover-text {
    background-color: #ffffff;
    color: #333333
}

#chaty-widget-0 .chaty-tooltip.pos-top .on-hover-text:before {
    border-top-color: #ffffff;
}

#chaty-widget-0 .chaty-tooltip.pos-left .on-hover-text:before {
    border-left-color: #ffffff;
}

#chaty-widget-0 .chaty-tooltip.pos-right .on-hover-text:before {
    border-right-color: #ffffff;
}

.chaty-outer-forms.chaty-form-0 .chaty-agent-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

.chaty-outer-forms.chaty-whatsapp-form.chaty-form-0 .chaty-whatsapp-content {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

.chaty-outer-forms.chaty-contact-form-box.chaty-form-0 .chaty-contact-inputs {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

#chaty-widget-0, #chaty-widget-0 .chaty-tooltip:after {
    font-family: Tajawal
}

</style >
