@font-face {
    font-family: 'Vazir';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/Vazir.ttf");
    src: local('Vazir'), local('Vazir'), url("../fonts/Vazir.eot") format('eot'), url("../fonts/Vazir.ttf") format('truetype');
}

html,
body {
    font-family: 'Vazir', 'yekan', Tahoma, sans-serif;
    font-size: 13px;
}

.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}

.raychat_main_buttom {
    right: 45px;
    bottom: 45px;
    height: 65px;
    width: 65px;
    position: fixed;
    border-radius: 50%;
    cursor: pointer;
    background-image: url('../Images/supportg60.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    z-index: 999999;
    transition: box-shadow .2s ease-in-out !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .12), 0 2px 32px rgba(0, 0, 0, .5) !important;
    background-color: #e4fdd4;
}

.main_buttom_title {
    right: 20px;
    bottom: 20px;
    position: fixed;
    cursor: pointer;
    z-index: 999999;
    background-color: white;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .12), 0 2px 32px rgba(0, 0, 0, .3) !important;
    padding: 0 3px;
    font-size: 12px;
}

.raychat_main_container_header_agent {
    width: 60px;
    height: 60px;
    margin-right: 10px;
    background-image: url('../Images/supportg60.png');
    background-repeat: no-repeat;
    background-position: center center;
    float: right;
}

.raychat_main_container_header_agent_name {
    color: white;
    font-weight: bold;
    float: right;
    padding-top: 10px;
    margin-right: 20px;
}

.raychat_main_container_header_agents_count {
    color: white;
    float: right;
    margin-right: 20px;
}

#raychatFrame {
    user-select: none;
    position: fixed;
    right: 0;
    bottom: 0;
    width: 370px;
    max-height: 600px;
    overflow: hidden;
    z-index: 99999999;
    height: 90%;
    margin: 20px;
    box-shadow: 0 5px 40px rgba(0, 0, 0, .16) !important;
    display: none;
    border-radius: 7px;
}

.raychat_main_button.active {
    background-image: url("/Images/widget-close.svg") !important;
    background-size: 26px;
    background-position: center;
}

.raychat_main_button.loading {
    background-image: url("/Images/widget-loader.gif");
    background-size: 30px;
    background-position: center;
}

.raychat_main_button:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .09), 0 4px 40px rgba(0, 0, 0, .24) !important;
    transition: all 0.2s !important;
}
/*animation*/

.raychat_main_button.raychat_animated {
    animation-duration: 0.2s;
    animation-fill-mode: both;
}

.raychat_floating_app_widget {
    position: relative;
    z-index: 999999999999;
    direction: rtl;
}

.raychat_main_container {
    display: block;
    right: 0 !important;
    bottom: 0 !important;
    animation-duration: .3s !important;
    animation-fill-mode: both;
    animation-name: fadeIn;
    background: #fff;
    height: 100%;
    width: 100%;
    position: fixed;
}

.agent_main_container {
    background: #fff;
    height: 85vh;
    width: 100%;
    position: relative;
    border: 1px solid #009688;
    border-radius: 5px;
    display: grid;
}

.raychat_main_container_header {
    height: 60px !important;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999999999;
    background-color: #009688;
}

.agent_main_container_header {
    height: 60px;
    width: 100%;
    background-color: #009688;
}

.raychat_main_container_header_agents_close_btn {
    width: 30px;
    direction: ltr;
    height: 30px;
    border-radius: 50%;
    margin: 11px 9px;
    background-image: url("/Images/widget-close.svg");
    text-align: left;
    position: absolute;
    left: 0;
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all .2s ease;
}

.raychat_main_container_body {
    margin-top: 60px;
    overflow: hidden;
    overflow-y: auto;
    background-color: white;
    position: relative;
    z-index: 999999999999;
    padding: 5px 0 20px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.agent_main_container_body {
    overflow: hidden;
    overflow-y: auto;
    background-color: white;
    position: relative;
    padding: 5px 0 20px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.raychat_main_container_body_chat {
    padding: 0 20px 0 18px;
    font-family: 'Vazir', 'yekan', Tahoma, sans-serif;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

.raychat_main_container_footer {
    background: #ffffff;
    height: 62px;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 99999999999999;
    transition: all .3s ease;
}

.agent_main_container_footer {
    background: #ffffff;
    height: 72px;
    width: 100%;
    border-top: 1px solid Gray;
    bottom: 0;
    position: absolute;
}

.raychat_main_container_footer_input_div {
    height: 100%;
    display: inline-block;
    width: calc(100% - 100px);
    float: right;
    position: relative;
}

    .raychat_main_container_footer_input_div textarea {
        position: absolute;
        top: 0;
        bottom: 0;
        text-align: right;
        right: 0;
        padding: 5px;
        color: #626262;
        resize: none;
        border: none;
        transition: background-color .2s ease, box-shadow .2s ease;
        outline: none;
        width: 100%;
        background: none;
        font-family: 'Vazir', 'yekan', Tahoma, sans-serif;
        font-size: 13px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        height: 71px;
        overflow-y: auto;
        box-sizing: border-box;
        line-height: 21px;
    }

.raychat_main_container_footer_details_div.raychat_animated {
    animation-duration: .3s !important;
    animation-fill-mode: both;
}

.raychat_main_container_footer_details_div {
    height: 100%;
    display: inline-block;
    width: 100px;
    float: right;
}

.raychat_noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.raychat_main_container_footer_details_div_emoji {
    /*background-image: url("/Images/smile.svg");
    background-repeat: no-repeat;
    display: inline-block;
    height: 61px;
    width: 32%;
    background-position: center left;
    cursor: pointer;
    position: relative;
    background-size: 20px;
    transition: all 0.2s;*/
    background-image: url("/images/smile.svg");
    background-position: center center;
    background-repeat: no-repeat;
    display: inline-block;
    position: relative;
    cursor: pointer;
    height: 61px;
    width: 30px;
    background-size: 25px;
    transition: all 0.2s;
}

    .raychat_main_container_footer_details_div_emoji:hover {
        background-image: url("/images/smile-blue.svg");
    }

.raychat_main_container_footer_details_div_emoji_div {
    height: 199px;
    width: 350px;
    position: absolute;
    bottom: 61px;
    left: -180%;
    background: white;
    overflow: hidden;
    overflow-y: scroll;
    cursor: default;
    display: none;
    /* text-align: right; */
    padding: 10px 0;
    text-align: center;
}

    .raychat_main_container_footer_details_div_emoji_div span {
        padding: 6px;
        width: 30px;
        line-height: 30px;
        display: inline-table;
        text-align: center;
        cursor: pointer;
        vertical-align: middle;
        font-size: 28px;
        -webkit-transition: all .2s ease !important;
        -moz-transition: all .2s ease !important;
        -ms-transition: all .2s ease !important;
        -o-transition: all .2s ease !important;
        transition: all .2s ease !important;
    }

        .raychat_main_container_footer_details_div_emoji_div span.raychat_animated {
            animation-duration: .3s !important;
            animation-fill-mode: both;
        }

        .raychat_main_container_footer_details_div_emoji_div span:hover {
            transition-delay: 0ms;
            -webkit-transform: scale(1.4);
            -ms-transform: scale(1.4);
            transform: scale(1.4);
        }

    .raychat_main_container_footer_details_div_emoji_div.raychat_animated {
        animation-duration: .3s !important;
        animation-fill-mode: both;
    }

    .raychat_main_container_footer_details_div_emoji_div.active {
        display: block;
    }

.raychat_main_container_footer_details_div_close_type {
    height: 61px;
    background-image: url("/Images/round-close-24px.svg");
    background-repeat: no-repeat;
    width: 32%;
    background-position: center left;
    cursor: pointer;
    position: relative;
    background-size: 30px;
    display: none;
}

.raychat_main_container_footer_details_div_send {
    /*height: 100px;
    width: 20%;*/
    display: inline-block;
    cursor: pointer;
    vertical-align: top;
}

    .raychat_main_container_footer_details_div_send.active {
        background-image: url("/images/send-btn-widget.svg");
        background-position: center center;
        background-repeat: no-repeat;
        height: 61px;
        width: 30px;
        background-size: 25px;
    }

        .raychat_main_container_footer_details_div_send.active:hover {
            background-image: url("/images/send-btn-blue.svg");
        }

.raychat_main_container_footer_attach {
    background-image: url("/images/paperclip.svg");
    background-position: center center;
    background-repeat: no-repeat;
    height: 61px;
    width: 30px;
    background-size: 25px;
    display: inline-block;
    cursor: pointer;
    vertical-align: top;
}

    .raychat_main_container_footer_attach:hover {
        background-image: url("/images/paperclip-blue.svg");
    }


.row {
    margin-right: 0;
    margin-left: 0;
}

/*.col-sm-4, .col-sm-8, .col-12 {
    padding: 0 5px;
}*/

.btn-group-vertical > .btn {
    padding: 0.7rem;
    margin-top: 1px !important;
}

.badge {
    font-size: 100%;
}

.Eng {
    direction: ltr;
    font-family: Arial;
}

.card-header {
    padding: .2rem 1rem;
}

.dialog-incom {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 15px;
}

.dialog-outgo {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 0px;
}