.chat, .chat input, .chat select, .chat textarea, .chat label, .chat button { font-family: "Fira Sans",Arial,Helvetica,sans-serif; font-size: 12px; color: #000; } .chat button { background: #fd7e14; -webkit-box-shadow: 0px 1px 2px rgb(15 23 42 / 8%); box-shadow: 0px 1px 2px rgb(15 23 42 / 8%); border-radius: 4px; color: #fff; cursor: pointer; } .chat { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff; } .chat select[name="groups"] { pointer-events: none; opacity: 0.7; } .chat a { text-decoration: none; color: #217095; } .chat iframe { border-style: none; position: absolute; left: -100px; top: -100px; width: 1px; height: 1px; } .chat button { height: 29px; border: none; cursor: pointer; } .chat button:active { background-position: 0 -38px; } .chat .head { display: none; } .chat .background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; background-color: #000; opacity: .37; filter: alpha(opacity=30); } .chat .window { border: 3px solid #5B6E7F; background: #fff; position: absolute; z-index: 1000; left: 2%; top: 50%; max-width: 96%; margin-left:0!important; } .chat .window .header { background: #5B6E7F; color: #fff; text-align: center; font-size: 16px; padding: 8px 0; font-weight: bolder; } .chat .window .content { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #fff; text-align: center; } .chat .window .content button:nth-child(2) { background: #fd7e14; } .chat .window .content button:nth-child(3) { width: 80px; background: #fd7e14; -webkit-box-shadow: 0px 1px 2px rgb(15 23 42 / 8%); box-shadow: 0px 1px 2px rgb(15 23 42 / 8%); border-radius: 4px; color: #fff; cursor: pointer; } .chat .window .score { display: inline-block; width: 190px; height: 36px; background: url("./i/stars.png") repeat-x transparent 0 0; text-align: left; cursor: pointer; } .chat .window .score span { display: inline-block; height: 36px; background: url("./i/stars.png") repeat-x transparent 0 -72px; } .chat .window .score span.select { background-position: 0 -36px; } .chat .message { position: absolute; height: auto; width: 100%; top: 50%; text-align: center; white-space: normal; } .chat .message.loading img { width: 16px; height: 16px; margin-right: 5px; margin-bottom: -3px; margin: 0 auto; } .chat .message button { margin-top: 10px; } .chat .message.net-error span { display: inline-block; width: 16px; height: 16px; background: url("./i/chat.png") no-repeat transparent 0 -68px; margin: 0 5px -3px 0; } .chat .login { width: auto; height: auto; text-align: left; margin: 0px !important; } .login { margin: 0px !important; } .login div { display: flex; flex-direction: column; margin: 10px 0px; } .login div:nth-child(4) { display: none; } .login div img { width: 100%; max-width: 30px; } .chat .login button { width: 120px; height: 40px; margin: 0; background: #fd7e14; box-shadow: 0px 1px 2px rgba(15, 23, 42, 0.0784314); border-radius: 4px; color: #fff; cursor: pointer; border: transparent; transition: all .2s ease; font-size: 16px; } .chat .login button:disabled { background-color: #f0f0f0; color:#383838; cursor: default; } .chat .login button:hover { background-color: rgba(253, 126, 20,0.67); color:#fff; } .chat .login img { display: none; width: 16px; height: 16px; position: absolute; right: -24px; top: calc(50% - 8px); } .chat .login div { margin-top:0; margin-bottom: 1rem; } .chat .login div:last-child { margin-top:1.5rem; display: inline-flex; position: relative; margin-bottom: 0; } .chat .login div.loading img { display: inline; } .chat .login div.error { background: url("./i/chat.png") no-repeat transparent 434px -64px; } .chat .login div.error:last-child { background: url("./i/chat.png") no-repeat transparent 208px -64px; } .chat .login input { font-size: 16px!important; padding: 0.75rem 1rem!important; width: 100%; display: inline-block; margin:0; border: 1px solid #AAA; outline: none; vertical-align: middle; border: 1px solid #e2e8f0; border-radius: 0.125rem; color: #475569; } .chat .login input[name=group] { opacity: 0; appearance: none; width: 0px; } .chat .login input:focus { border-color: #9FC0E6; } .chat .login input.invalid { border-color: #EA7676; } .chat .login div select { display:inline-block; width: 100%; margin-left:0; border: 1px solid #e2e8f0; min-height: auto; border-radius: 0.125rem; color: #475569; height: auto; outline: none; vertical-align: middle; padding:0.75rem 1rem; font-size: 16px; } .chat .login label { display: inline-block; white-space: nowrap; text-align: left; font-size: 16px; margin-bottom: 0; } .chat .login .title { font-weight: bold; font-size: 20px; margin-bottom: 24px; max-width: 80%; } .is_ie .login input { padding-left: 3px; height: 16px; padding-top: 2px; } .is_ie .login input:focus, .is_ie .login input.invalid { height: 15px; padding-top: 1px; width: 300px; } .is_ie .login input:focus { border-color: #9FC0E6; } .is_ie .login input.invalid { border-color: #EA7676; } .is_ie .login div select { width: 306px; margin-left: 5px; border: 1px solid #AAA; height: auto; outline: none; vertical-align: top; } .chat .dialog textarea { width: auto !important; margin: 0; padding: 0.75rem; height: 75px; border: 1px solid #AAA; border-radius: 0.125rem; resize: none; outline: none; } .chat .dialog textarea:disabled { background: #f0f0f0; } .chat .dialog textarea:focus { border-color: #9FC0E6; border-width: 2px; padding:0.75rem; height: 74px; } .chat .dialog button { bottom: 0; margin: 0; background-color: #fd7e14; -webkit-box-shadow: 0px 1px 2px rgb(15 23 42 / 8%); box-shadow: 0px 1px 2px rgb(15 23 42 / 8%); border-radius: 4px; color: #fff; cursor: pointer; } .chat .dialog button.send { -webkit-box-shadow: 0px 1px 2px rgb(15 23 42 / 8%); box-shadow: 0px 1px 2px rgb(15 23 42 / 8%); border-radius: 4px; color: #fff; cursor: pointer; width: 120px; height: 40px; } .chat .dialog button.send:not([disabled]):hover { background-color: rgba(253, 126, 20,0.67); color:#fff; } .chat .dialog button.send:disabled { background-color: #efefef; border-color:#efefef; color:#383838; cursor: default; } .chat .dialog button.copy { left: 0; } .chat .dialog form { color: #666; } .chat .dialog form .but { color: #217095; text-decoration: none; cursor: pointer; } .chat .dialog form .but span { display: inline-block; width: 10px; height: 10px; margin-right: 3px; margin-left: 2px; background: url("./i/chat.png") no-repeat transparent 0 -87px; } .chat .dialog form img { display: inline-block; margin-bottom: -3px; margin-right: 4px; } .chat .commands { text-align: right; padding-right:1.5rem; color: #6F6F6F; vertical-align: top; z-index: 99; } .chat .commands .network-messsage { display: none; float: left; font-size: 11px; padding-left: 20px; height: 14px; background: url("./i/chat.png") no-repeat transparent 0 -68px; } .chat .commands span, .chat .commands a { display: inline-block; height: 14px; } .chat .commands .score { height: 14px; width: 70px; background: url('./i/small-stars.png') repeat-x transparent 0 0; cursor: pointer; text-align: left; } .chat .commands .score span { display: inline-block; height: 14px; width: 14px; background: url('./i/small-stars.png') repeat-x transparent 0 -14px; } .chat .commands .closed { color: #B02C2C; background: url('./i/chat.png') no-repeat transparent -30px 2px; padding-left: 16px; } .chat .commands .timer { margin: 0 5px; } .chat .list { overflow-y: auto; overflow-x: hidden; border: 1px solid #B2B9BC; border-radius: 0.125rem; padding: 0.75rem; min-height: 250px; max-height: 300px; } .chat .list div { padding-left: 20px; text-align: left; white-space: pre-line; padding-right: 20px; } .chat .list .icon { display: inline-block; margin-right: 6px; width: 7px; height: 8px; background: url('./i/chat.png') no-repeat 0 0 transparent; } .chat .list .time { font-size: 10px; color: #3C3C3C; font-weight: normal; margin-right: 6px; } .chat .list .title { font-size: 11px; font-weight: bold; padding: 10px 0 0 6px; } .chat .list .system .icon { width: 8px; background-position: -22px 0; } .chat .list .my .icon { background-position: -15px 0; } .chat .list .they-1 .icon, .chat .list .they-2 .icon, .chat .list .they-3 .icon, .chat .list .they-4 .icon { background-position: -8px 0; } .chat .list .welcome .icon { width: 8px; height: 5px; background-position: 0 0; margin-bottom: 2px; } .chat .list .autoreply .icon { width: 9px; height: 9px; background-position: -30px -88px; } .chat .list .they-1 { color: #900; } .chat .list .they-2 { color: #23a77d; } .chat .list .they-3 { color: #fa6e50; } .chat .list .they-4 { color: #8c4d9b; } .chat .list .system { color: #2e2e2e; } .chat .list .welcome { color: #000; font-size: 12px; font-weight: normal; } .chat .list .autoreply { color: #000; font-size: 12px; font-weight: normal; } .chat .list .my { color: #217095; } .chat .list .typing { font-size: 11px; color: #666; margin: 6px 0 0 0; } .chat .list div:last-child { margin-bottom: 6px; } .chat .list .attachment { display: block; margin: 3px 0; white-space: nowrap; overflow: hidden; } .chat .list .attachment .icon { width: 12px; height: 16px; background: url('./i/chat.png') transparent no-repeat -14px -86px; margin-right: 4px; } .chat .list .attachment .size { color: #666; } .chat .disabled .commands .network-messsage { display: inline-block; } .chat .closed .list { bottom: 36px; } .chat .closed button.send { display: none; } .chat .closed textarea { display: none; } .chat .closed form { display: none; } .chat .login .info { text-align: left; padding-top: 10px; padding-left: 125px; color: #333; font-size: 11px; } @media (min-width: 640px) { .chat .login label { font-size: 15px; margin-right: 30px; } .chat .login input { font-size: 16px; min-height: 40px; height: auto; padding: 5px; } .chat .login div select { font-size: 16px; min-height: 40px; max-height: 40px; height: auto; padding: 5px; } } .chat-icon { width: 100%; } .callback-button-widget { display: flex; align-items: flex-end; position: fixed; bottom:10rem; right:2.5rem; z-index: 1002; } .callback-button-widget__button-open { position: relative; z-index: 99; width: 60px; height: 60px; border-radius: 999px; background: #fd7e14; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all .3s ease; border: none; } .callback-button-widget__button-open:hover { background: rgba(253, 126, 20,0.67); } @media(max-width: 400px) { .callback-button-widget__button-open { width: 70px; height: 70px; } } .callback-button-widget__menu-wrapper { position: absolute; bottom: 65px; right: -30px; bottom: 100%; background: #fff; border: 1px solid #fd7e14; width: 250px; display: flex; flex-direction: column; align-items: left; border-radius: 5px 5px 0px 5px; opacity: 0; pointer-events: none; transition: all .2s ease; z-index: 99; } .callback-button-widget__menu-wrapper-active { opacity: 1; pointer-events: all; } @media(min-width: 350px) { .callback-button-widget__menu-wrapper { width: 300px; } } .callback-button-widget__menu-wrapper__menu-link { text-align: left; padding: 10px 10px; border-bottom: 1px solid #fd7e14; color: #383838; transition: all .3s ease; background: transparent; text-decoration: none; cursor: pointer; font-weight: 500; font-family: "Fira Sans",Arial,Helvetica,sans-serif; font-size: 16px; } .callback-button-widget__menu-wrapper__menu-link:hover { background: #fd7e14; color: #fff; } .callback-button-widget__menu-wrapper__menu-link:last-child { border-bottom: none; border: none; } @media(max-width: 400px) { .callback-button-widget__menu-wrapper__menu-link{ padding: 20px 10px; } } .team-wox-chat { position: absolute; background: #fff; border: 1px solid #fd7e14; border-radius: 5px; width: 370px; padding: 1.5rem; top: auto; bottom:calc(100vh - calc(100vh + 120px)); opacity: 0; pointer-events: none; transition: all .2s ease; z-index: 99; right:calc(100vw - calc(100vw + 25px))!important; left: auto !important; } .team-wox-chat-opened { opacity: 1; pointer-events: all; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%); } @media(min-width: 390px) { .team-wox-chat { width: 340px; } } .team-wox-chat__close-icon { background: transparent !important; padding: 5px; } .callback-button-widget__animation { background: #fd7e14; width: 85px; position: absolute; top: -13px; right: -12px; height: 85px; border-radius: 100%; border: 2px solid transparent; -webkit-animation: circle-fill-anim 2.3s infinite ease-in-out; -moz-animation: circle-fill-anim 2.3s infinite ease-in-out; -ms-animation: circle-fill-anim 2.3s infinite ease-in-out; -o-animation: circle-fill-anim 2.3s infinite ease-in-out; animation: circle-fill-anim 2.3s infinite ease-in-out; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all 0.5s; } @-moz-keyframes circle-fill-anim { 0% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;} 50% {-moz-transform: rotate(0deg) -moz-scale(0.9) skew(1deg);opacity: .2;} 100% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;} } @-webkit-keyframes circle-fill-anim { 0% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2; } 50% {-webkit-transform: rotate(0deg) scale(0.9) skew(1deg);opacity: .2; } 100% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;} } @media(max-width: 400px) { .callback-button-widget__animation { width: 95px; height: 95px; } } @media(min-width:576px) { .callback-button-widget__menu-wrapper { right: 12%; } .team-wox-chat { right: -2% !important; } } @media(min-width:768px) { .callback-button-widget { right:5rem; } .team-wox-chat-opened .commands { display: flex!important; flex-wrap: wrap; } .team-wox--container-close button { padding-top:0.75rem!important; } } @media (min-width:1850px) { .callback-button-widget__button-open { width: 80px; height: 80px; padding:1.25rem!important; } .callback-button-widget__animation { width: 116px; height: 116px; top: -18px; right: -18px; } } @media (min-width:3740px) { .callback-button-widget__button-open { width: 100px; height: 100px; padding:1.5rem!important; } .callback-button-widget__animation { width: 136px; height: 136px; top: -18px; right: -18px; } } .team-wox--container-close { width: 100%; display: flex; justify-content: flex-end; } .team-wox--container-close button { position: absolute; top: 0; right: 0; box-shadow: none; padding: 1.5rem 0.75rem 0.75rem 0.75rem; height: auto; width: auto; } .team-wox-chat__close-icon { position: absolute; width: 2rem; height: 2rem; } .team-wox-chat-opened .body { display: flex; flex-direction: column; height: 100%; } .team-wox-chat-opened .dialog { display: flex; flex-direction: column; height: 100%; } .team-wox-chat-opened .commands { margin-bottom: 1.5rem; } .team-wox-chat-opened form { margin: 0.75rem 0; } .team-wox-chat-opened textarea { margin-bottom: 1.5rem!important; } .chat .dialog form .but:hover { text-decoration: underline!important; color:red!important } .dialog a:hover { text-decoration: underline!important; color:red!important }