#dk-ctc-widget{
--ctc-size: 39px;
--ctc-color: #134166;
--ctc-text-color: #ffffff;
--ctc-name-size: 20px;
--ctc-caption-size: 11px;
--ctc-text-size: 14px;
--ctc-phone-size: 20px;
}
#dk-ctc-widget, #dk-ctc-widget *{
box-sizing: border-box;
}
#dk-ctc-widget{
position: fixed;
left: 20px;
bottom: 20px;
z-index: 2147483000;
font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
transition: opacity .20s ease, visibility .20s ease, transform .20s ease;
}
#dk-ctc-widget.dk-widget-delayed, #dk-ctc-widget.dk-widget-hidden{
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.dk-ctc-button{
position: relative;
border: 0;
outline: 0;
border-radius: 500px;
background-color: var(--ctc-color);
color: var(--ctc-text-color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
text-decoration: none;
font-family: inherit;
font-size: calc( var(--ctc-size) / 2.5 );
font-weight: 700;
line-height: 1.25;
padding: calc( var(--ctc-size) / 3 ) calc( var(--ctc-size) / 1.68 );
box-shadow: 0 5px 10px rgba(0,0,0,.20);
transition: all .3s ease;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.dk-ctc-button:hover{
background-color: #0f3655;
}
.dk-ctc-button::before, .dk-ctc-button::after{
content: "";
position: absolute;
left: -2px;
right: -2px;
top: -2px;
bottom: -2px;
border: 1px solid var(--ctc-color);
border-radius: 500px;
opacity: 0;
pointer-events: none;
}
.dk-ctc-button-icon-container{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: calc( var(--ctc-size) / 2.5 );
height: calc( var(--ctc-size) / 2.5 );
flex: 0 0 auto;
}
.dk-ctc-main-phone-icon, .dk-ctc-main-close-icon{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
fill: #ffffff;
transition: all .3s ease;
}
.dk-ctc-main-phone-icon{
opacity: 1;
}
.dk-ctc-main-close-icon{
opacity: 0;
transform: scale(.65);
}
.dk-ctc-button-text{
margin-left: 12px;
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
white-space: nowrap;
transition: all .3s ease;
}
#dk-ctc-widget.is-open .dk-ctc-button{
padding: calc( var(--ctc-size) / 3 );
}
#dk-ctc-widget.is-open .dk-ctc-button-text{
width: 0;
height: 0;
margin: 0;
opacity: 0;
}
#dk-ctc-widget.is-open .dk-ctc-main-phone-icon{
opacity: 0;
transform: scale(.65);
}
#dk-ctc-widget.is-open .dk-ctc-main-close-icon{
opacity: 1;
transform: scale(1);
}
.dk-ctc-window{
position: absolute;
left: 0;
top: 0;
min-width: 260px;
width: 300px;
padding: 20px 24px 32px;
background-color: #ffffff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 12px 24px rgba(0,0,0,.10);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY( -100% );
transform-origin: left bottom;
transition: all .3s ease;
}
#dk-ctc-widget.is-open .dk-ctc-window{
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY( calc( -100% - 16px ) );
}
.dk-ctc-header{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.dk-ctc-header-image{
width: 56px;
height: 56px;
border-radius: 50%;

background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.dk-ctc-header-image::after{
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid rgba(0,0,0,.10);
}
.dk-ctc-header-title{
margin-top: 12px;
font-size: var(--ctc-name-size);
line-height: 1.2;
font-weight: 700;
color: #111111;
text-align: center;
}
.dk-ctc-header-caption{
margin-top: 4px;
font-size: var(--ctc-caption-size);
line-height: 1.2;
font-weight: 400;
text-transform: uppercase;
color: rgba( 17, 17, 17, .70 );
text-align: center;
}
.dk-ctc-window-content{
margin-top: 14px;
font-size: var(--ctc-text-size);
line-height: 1.357142;
color: #262626;
text-align: center;
}
.dk-ctc-window-text{
margin-bottom: 18px;
}
.dk-ctc-window-phone{
display: inline-flex;
align-items: center;
justify-content: center;
padding: calc( var(--ctc-phone-size) * .1 ) var(--ctc-phone-size);
border-radius: 200px;
background-color: #f3f5f7;
color: var(--ctc-color);
text-decoration: none;
transition: all .3s ease;
}
.dk-ctc-window-phone:hover{
background-color: #e8edf1;
text-decoration: none;
}
.dk-ctc-window-phone-icon{
width: calc( var(--ctc-phone-size) * .7 );
height: calc( var(--ctc-phone-size) * .7 );
flex: 0 0 auto;
fill: currentColor;
}
.dk-ctc-window-phone-text{
margin-left: calc( var(--ctc-phone-size) * .4 );
font-size: var(--ctc-phone-size);
line-height: 1.4;
font-weight: 700;
color: currentColor;
white-space: nowrap;
}
#dk-ctc-widget:not(.is-open):not(.dk-widget-delayed):not(.dk-widget-hidden) .dk-ctc-button.dk-ctc-animate::before, #dk-ctc-widget:not(.is-open):not(.dk-widget-delayed):not(.dk-widget-hidden) .dk-ctc-button.dk-ctc-animate::after{
animation: dkCtcPulse 1.5s linear infinite;
}
#dk-ctc-widget:not(.is-open):not(.dk-widget-delayed):not(.dk-widget-hidden) .dk-ctc-button.dk-ctc-animate::after{
animation-delay: .5s;
}
@keyframes dkCtcPulse{
0%{
transform: scale(.6);
opacity: 0;
}
50%{
opacity: 1;
}
100%{
transform: scale(1.2);
opacity: 0;
}
}
#dk-ctc-widget:not(.is-open):not(.dk-widget-delayed):not(.dk-widget-hidden) .dk-ctc-button.dk-ctc-animate .dk-ctc-main-phone-icon{
animation: dkCtcPhoneShake 700ms ease-in-out infinite;
}
@keyframes dkCtcPhoneShake{
0%, 100%{
transform: rotate(0deg);
}
20%{
transform: rotate(7deg);
}
40%{
transform: rotate(-7deg);
}
60%{
transform: rotate(7deg);
}
80%{
transform: rotate(-7deg);
}
}
#dk-ctc-widget.is-open{
z-index: 2147483010;
}
@media (max-width: 600px){
#dk-ctc-widget{
left: 20px;
bottom: 20px;
}
.dk-ctc-window{
width: 300px;
max-width: calc( 100vw - 40px );
}
.dk-ctc-window-phone{
max-width: 100%;
}
.dk-ctc-window-phone-text{
font-size: 18px;
}
.dk-ctc-button{
width: 48px;
height: 48px;
min-width: 48px;
padding: 0 !important;
border-radius: 50%;
}
.dk-ctc-button-icon-container{
width: 18px;
height: 18px;
}
.dk-ctc-button-text{
display: none;
}
}
@media (max-width: 340px){
#dk-ctc-widget{
left: 12px;
}
.dk-ctc-window{
min-width: calc( 100vw - 24px );
width: calc( 100vw - 24px );
}
}
#dk-wa-widget{
--wa-green: #03C751;
--wa-header: #075E54;
--wa-online: #4AD504;
}
#dk-wa-widget, #dk-wa-widget *{
box-sizing: border-box;
}
.dk-wa-widget{
position: fixed;
left: 20px;
bottom: 75px;
z-index: 2147483001;
font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
transition: opacity .20s ease, visibility .20s ease, transform .20s ease;
}
#dk-wa-widget.dk-widget-delayed, #dk-wa-widget.dk-widget-hidden{
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.dk-wa-button{
position: relative;
border: 0;
outline: 0;
border-radius: 100px;
background: var(--wa-green);
color: #ffffff;
padding: 10px 25px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: inherit;
font-size: 16px;
line-height: 22px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 3px 12px rgba(0,0,0,.15);
transition: opacity .1s ease-in, transform .1s ease-in, background-color .1s ease-in;
-webkit-tap-highlight-color: transparent;
}
.dk-wa-button:hover{
background: #02b849;
transform: translateY(-1px);
}
.dk-wa-button-icon{
width: 22px;
height: 22px;
fill: #ffffff;
flex: 0 0 auto;
margin-right: 8px;
margin-left: -4px;
}
.dk-wa-button-text{
white-space: nowrap;
}
.dk-wa-widget:not(.is-open):not(.dk-widget-delayed):not(.dk-widget-hidden) .dk-wa-button{
animation: dkWaButtonPulse 5s ease infinite;
}
@keyframes dkWaButtonPulse{
0%, 88%, 100%{
transform: scale(1);
}
92%{
transform: scale(1.035);
}
96%{
transform: scale(1);
}
}
.dk-wa-window{
position: absolute;
left: 0;
bottom: 56px;
width: 390px;
max-width: calc(100vw - 40px);
background: #ffffff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 8px 28px rgba(0,0,0,.16);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(10px) scale(.985);
transform-origin: left bottom;
transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.dk-wa-widget.is-open .dk-wa-window{
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.dk-wa-widget.is-open{
z-index: 2147483010;
}
.dk-wa-header{
display: flex;
align-items: center;
padding: 20px;
background: var(--wa-header);
border-bottom: 1px solid rgba(255,255,255,.10);
}
.dk-wa-avatar-wrap{
position: relative;
width: 52px;
height: 52px;
flex: 0 0 52px;
}
.dk-wa-avatar{
display: block;
width: 52px;
height: 52px;
object-fit: cover;
border-radius: 50%;
background: #ffffff;
}
.dk-wa-online-dot{
position: absolute;
right: -1px;
bottom: -1px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--wa-online);
border: 2px solid var(--wa-header);
}
.dk-wa-header-info{
margin-left: 16px;
margin-right: 16px;
width: 100%;
overflow: hidden;
}
.dk-wa-header-name{
font-size: 16px;
font-weight: 700;
line-height: 20px;
color: #ffffff;
}
.dk-wa-header-answer{
margin-top: 4px;
font-size: 13px;
line-height: 18px;
color: #ffffff;
}
.dk-wa-close{
position: absolute;
top: 8px;
right: 8px;
width: 20px;
height: 20px;
padding: 0;
border: 0;
outline: 0;
background: transparent;
cursor: pointer;
z-index: 10;
opacity: .65;
}
.dk-wa-close:hover{
opacity: 1;
}
.dk-wa-close span{
position: absolute;
left: 50%;
top: 50%;
width: 15px;
height: 1.5px;
background: #ffffff;
border-radius: 2px;
}
.dk-wa-close span:first-child{
transform: translate(-50%,-50%) rotate(45deg);
}
.dk-wa-close span:last-child{
transform: translate(-50%,-50%) rotate(-45deg);
}
.dk-wa-chat{
position: relative;
min-height: 143px;
padding: 35px 20px 15px;
overflow: hidden;
background-color: #efeae2;
}
.dk-wa-chat::before{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .18;
background-image: radial-gradient( circle at 8px 8px, rgba(90,80,70,.22) 1px, transparent 1.4px ), radial-gradient( circle at 30px 24px, rgba(90,80,70,.14) 1px, transparent 1.4px );
background-size: 38px 38px, 48px 48px;
}
.dk-wa-chat-time{
position: absolute;
top: 12px;
left: 0;
right: 0;
z-index: 2;
text-align: center;
font-size: 10px;
line-height: 12px;
color: rgba(80,80,80,.32);
}
.dk-wa-typing{
position: relative;
z-index: 3;
width: 53px;
height: 32px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
opacity: .5;
}
.dk-wa-typing-inner{
display: flex;
}
.dk-wa-typing span{
width: 5px;
height: 5px;
margin: 0 2px;
display: inline-block;
border-radius: 50%;
background: #6f6f6f;
animation: dkWaTypingDot 1.2s linear infinite;
}
.dk-wa-typing span:nth-child(2){
animation-delay: .1s;
}
.dk-wa-typing span:nth-child(3){
animation-delay: .2s;
}
@keyframes dkWaTypingDot{
0%, 100%{
opacity: .4;
}
50%{
opacity: .75;
}
}
.dk-wa-message{
position: relative;
z-index: 3;
display: none;
width: fit-content;
max-width: 250px;
padding: 11px 14px;
background: #ffffff;
color: #262626;
border-radius: 0 12px 12px 12px;
box-shadow: 0 1px 2px rgba(0,0,0,.08);
font-size: 15px;
line-height: 20px;
}
.dk-wa-message-tail{
position: absolute;
top: 0;
left: -9px;
color: #ffffff;
}
.dk-wa-message-field{
display: flex;
padding: 12px 2px 12px 20px;
overflow: hidden;
position: relative;
background: #ffffff;
}
.dk-wa-message-text-container{
overflow: hidden;
flex: 1;
display: flex;
align-items: center;
}
.dk-wa-input{
display: block;
width: 100%;
min-height: 20px;
max-height: 60px;
height: 20px;
padding: 0;
margin: 0;
border: 0;
outline: 0;
resize: none;
overflow: hidden;
background: transparent;
font-family: inherit;
font-size: 15px;
line-height: 20px;
font-weight: 400;
color: #111111;
}
.dk-wa-input::placeholder{
color: rgba(17,17,17,.30);
opacity: 1;
}
.dk-wa-send-container{
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0 10px;
}
.dk-wa-send{
width: 28px;
height: 28px;
flex: 0 0 28px;
padding: 6px;
border: 0;
border-radius: 14px;
background: var(--wa-green);
color: #ffffff;
cursor: pointer;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.dk-wa-send:hover{
background: #02b849;
}
.dk-wa-send svg{
width: 28px;
height: 28px;
fill: currentColor;
transform: scale(1.8);
}
@media (max-width: 600px){
.dk-wa-widget{
left: 20px;
bottom: 75px;
}
.dk-wa-window{
width: min( 390px, calc(100vw - 40px) );
bottom: 56px;
}
.dk-wa-button{
width: 52px;
height: 52px;
padding: 0;
border-radius: 50%;
}
.dk-wa-button-icon{
width: 28px;
height: 28px;
margin: 0;
}
.dk-wa-button-text{
display: none;
}
}
@media (max-width: 360px){
.dk-wa-widget{
left: 12px;
}
.dk-wa-window{
width: calc(100vw - 24px);
}
}