Your IP : 216.73.216.79
<!-- CONTENT_ID 52-->
<style>
#expandbutton{
cursor:pointer;
width:30px;
height:30px;
background:white;
border-radius:50%;
color:black;
text-align:center;
padding:0px;
position:absolute;
top:-25px;
right:45px;
border:1px solid #000;
padding-top:3px;
font-weight:bold;
font-size:14px;
}
#closebutton{
cursor:pointer;
width:30px;
height:30px;
background:white;
border-radius:50%;
color:black;
text-align:center;
padding:0px;
position:absolute;
top:-25px;
right:10px;
border:1px solid #000;
padding-top:3px;
font-weight:bold;
font-size:14px;
}
.label-chatbot {
background-color: #0600a322 !important;
border-radius: 15px;
color: #0600a3;
margin-right: 0.5em;
padding: 3px;
padding-left: 5px;
border: 1px solid #0600a3;
padding-right: 5px;
margin-bottom:5px;
margin-top:5px;
line-height: 2.1;
}
.label-chatbot:hover{
color : #0600a3;
}
.label-chatbot:active{
color : #0600a3;
}
ul li{
list-style: none;
}
.highlighttext {
color : #2d2c97;
}
.fabs {
bottom: 0;
position: fixed;
margin: 3px;
right: 0;
z-index: 998;
}
.fab {
display: block;
width: 50px;
height: 50px;
text-align: center;
color: #f0f0f0;
margin: 25px auto 0;
cursor: pointer;
-webkit-transition: all .1s ease-out;
transition: all .1s ease-out;
position: relative;
z-index: 998;
overflow: hidden;
background: #2d2c97;
}
.fab > i {
font-size: 2em;
line-height: 55px;
-webkit-transition: all .2s ease-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.fab:not(:last-child) {
width: 0;
height: 0;
margin: 20px auto 0;
opacity: 0;
visibility: hidden;
line-height: 40px;
}
.fab:not(:last-child) > i {
font-size: 1.4em;
line-height: 40px;
}
.fab:not(:last-child).is-visible {
width: 40px;
height: 40px;
margin: 15px auto 10;
opacity: 1;
visibility: visible;
}
.fab:nth-last-child(1) {
-webkit-transition-delay: 25ms;
transition-delay: 25ms;
}
.fab:not(:last-child):nth-last-child(2) {
-webkit-transition-delay: 20ms;
transition-delay: 20ms;
}
.fab:not(:last-child):nth-last-child(3) {
-webkit-transition-delay: 40ms;
transition-delay: 40ms;
}
.fab:not(:last-child):nth-last-child(4) {
-webkit-transition-delay: 60ms;
transition-delay: 60ms;
}
.fab:not(:last-child):nth-last-child(5) {
-webkit-transition-delay: 80ms;
transition-delay: 80ms;
}
.fab(:last-child):active,
.fab(:last-child):focus,
.fab(:last-child):hover {
box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
}
/*Chatbox*/
.chat {
height: 550px;
display:none;
position: fixed;
background: #fff;
right: 85px;
bottom: 20px;
width: 400px;
font-size: 12px;
line-height: 22px;
font-family: inherit;
font-weight: 500;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
opacity: 0;
box-shadow: 1px 1px 30px 2px rgba(0, 0, 0, 0.32);
border-radius: 10px;
-webkit-transition: all .2s ease-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.chatheight {
height:360px;
}
.chat_fullscreen {
position: fixed;
right: 0px;
bottom: 0px;
top: 0px;
}
.chat_header {
font-size: 13px;
font-family: inherit;
font-weight: 500;
color: #f3f3f3;
height: 55px;
background: #38c6f4;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding-top: 8px;
}
.chat_header2 {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.chat_header .span {
float:right;
}
.chat_fullscreen_loader {
display: none;
float: right;
cursor: pointer;
font-size: 20px;
opacity: 0.5;
margin: -10px 10px;
}
.chat.is-visible {
display: block !important;
opacity: 1;
-webkit-animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
}
.is-hide{
display: none;
opacity: 0
}
.chat_option {
float: left;
font-size: 1.2em;
list-style: none;
position: relative;
height: 100%;
width: 100%;
text-align: relative;
margin-right: 10px;
letter-spacing: 0.5px;
font-weight: 400
}
.chat_option img {
width: 55px;
float: left;
margin: -30px 20px 10px 20px;
}
.change_img img{
width: 35px;
margin: 0px 20px 0px 20px;
}
.chat_option .agent {
font-size: 0.7em;
font-weight: 300;
}
.chat_option .online{
opacity: 0.4;
font-size: 11px;
font-weight: 300;
}
.chat_color {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 10px;
float: left;
}
.chat_body {
background: #fff;
width: 100%;
height: 80%;
display: inline-block;
text-align: center;
overflow-y: auto;
}
#chat_body{
height: 100%;
}
.chat_login p,.chat_body li, p, a{
-webkit-animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1);
animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1);
}
.chat_body p {
padding: 20px;
color: #888
}
.chat_body a {
width: 10%;
text-align: center;
border: none;
box-shadow: none;
line-height: 40px;
font-size: 15px;
}
.chat_field {
position: relative;
margin: 5px 0 5px 0;
width: 50%;
font-family: inherit;
font-size: 12px;
line-height: 30px;
font-weight: 500;
color: #4b4b4b;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
border: none;
outline: none;
display: inline-block;
}
.chat_field.chat_message {
height: 30px;
resize: none;
font-size: 13px;
font-weight: 400;
}
.chat_category{
text-align: left;
}
.chat_category{
margin: 20px;
background: rgba(0, 0, 0, 0.03);
padding: 10px;
}
.chat_category ul li{
width: 80%;
height: 30px;
background: #fff;
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
border-radius: 3px;
border: 1px solid #e0e0e0;
font-size: 13px;
cursor: pointer;
line-height: 30px;
color: #888;
text-align: center;
}
.chat_category li:hover{
background: #83c76d;
color: #fff;
}
.chat_category li.active{
background: #83c76d;
color: #fff;
}
.tags{
margin: 20px;
bottom: 0px;
display: block;
width: 120%
}
.tags li{
padding: 5px 10px;
border-radius: 40px;
border: 1px solid rgb(3, 117, 208);
margin: 5px;
display: inline-block;
color: rgb(3, 117, 208);
cursor: pointer;
}
.fab_field {
width: 100%;
display: inline-block;
text-align: center;
background: #fff;
border-top: 1px solid #eee;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.fab_field2 {
bottom: 0px;
position: absolute;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
z-index: 999;
}
.fab_field a {
display: inline-block;
text-align: center;
}
#fab_camera{
float: left;
background: rgba(0, 0, 0, 0);
}
#fab_camera_chat {
float: right;
background: rgba(0, 0, 0, 0);
}
#fab_camera_chat_live {
float: right;
background: rgba(0, 0, 0, 0);
}
#fab_send {
float: right;
background: rgba(0, 0, 0, 0);
}
#fab_send_user_details {
float: right;
background: rgba(0, 0, 0, 0);
}
#fab_send_chat_live {
float: right;
background: rgba(0, 0, 0, 0);
}
#fab_send_chat {
float: right;
background: rgba(0, 0, 0, 0);
}
.fab_field .fab {
width: 35px;
height: 35px;
box-shadow: none;
margin: 5px;
}
.fab_field .fab>i {
font-size: 1.6em;
line-height: 35px;
color: #bbb;
}
.fab_field .fab>i:hover {
color: #42a5f5;
}
.chat_converse {
position: relative;
background: #fff;
margin:0;
height: 89%; /* to 80% to support footer textfield*/
min-height: 0%;
font-size: 12px;
line-height: 18px;
overflow-x:hidden;
overflow-y: auto;
width: 100%;
float: right;
}
.chat_converse2{
height: 100%;
max-height: 800px
}
.chat_list {
opacity: 0;
visibility: hidden;
height: 0;
}
.chat_list .chat_list_item {
opacity: 0;
visibility: hidden;
}
.chat .chat_converse .chat_msg_item {
position: relative;
margin: 8px 0 15px 0;
padding: 8px 10px;
max-width: 80%;
display: block;
word-wrap: break-word;
border-radius: 3px;
-webkit-animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1);
animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1);
clear: both;
z-index: 999;
}
.chat .chat_converse .chat_msg_item_full {
position: relative;
margin: 8px 0 15px 0;
padding: 8px 10px;
max-width: 100%;
display: block;
word-wrap: break-word;
border-radius: 3px;
-webkit-animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1);
animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1);
clear: both;
z-index: 999;
}
.status {
margin: 45px -50px 0 0;
float: right;
font-size: 11px;
opacity: 0.3;
}
.status2 {
margin: -10px 20px 0 0;
float: right;
display: block;
font-size: 11px;
opacity: 0.3;
}
.chat .chat_converse .chat_msg_item .chat_avatar {
position: absolute;
top: 0;
}
.chat .chat_converse .chat_msg_item.chat_msg_item_admin .chat_avatar {
left: -52px;
}
.chat .chat_converse .chat_msg_item.chat_msg_item_user .chat_avatar {
right: -52px;
}
.chat .chat_converse .chat_msg_item .chat_avatar, .chat_avatar img{
width: 40px;
height: 40px;
text-align: center;
border-radius: 50%;
}
.chat .chat_converse .chat_msg_item.chat_msg_item_admin {
margin-left: 60px;
float: left;
background: rgba(0, 0, 0, 0.03);
color: #666;
}
.chat .chat_converse .chat_msg_item.chat_msg_item_admin_full {
margin-left: 0px;
padding:left:10px;
padding-right:10px;
float: left;
background: transparent;
color: #666;
}
.chat .chat_converse .chat_msg_item.chat_msg_item_user {
margin-right: 60px;
float: right;
background: #c14c4a;
color: #eceff1;
}
.chat .chat_converse .chat_msg_item.chat_msg_item_admin:before {
content: "";
position: absolute;
top: 15px;
left: -12px;
z-index: 998;
border: 6px solid transparent;
border-right-color: rgba(255, 255, 255, .4);
}
.chat_form .get-notified label{
color: #077ad6;
font-weight: 600;
font-size: 11px;
}
.input_chat {
position: relative;
width: 90%;
font-family: inherit;
font-size: 12px;
line-height: 20px;
font-weight: 500;
color: #4b4b4b;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
outline: none;
background: #fff;
display: inline-block;
resize: none;
padding: 5px;
border-radius: 3px;
}
.chat_form .get-notified .input_chat {
margin: 2px 0 0 0;
border: 1px solid #83c76d;
}
.chat_form .get-notified i {
background: #83c76d;
width: 30px;
height: 32px;
font-size: 18px;
color: #fff;
line-height: 30px;
font-weight: 600;
text-align: center;
margin: 2px 0 0 -30px;
position: absolute;
border-radius: 3px;
}
.chat_form .message_form {
margin: 10px 0 0 0;
}
.chat_form .message_form .input_chat{
margin: 5px 0 5px 0;
border: 1px solid #e0e0e0;
}
.chat_form .message_form textarea{
margin: 5px 0 5px 0;
border: 1px solid #e0e0e0;
position: relative;
width: 90%;
font-family: inherit;
font-size: 12px;
line-height: 20px;
font-weight: 500;
color: #4b4b4b;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
outline: none;
background: #fff;
display: inline-block;
resize: none;
padding: 5px;
border-radius: 3px;
}
.chat_form .message_form button{
margin: 5px 0 5px 0;
border: 1px solid #e0e0e0;
position: relative;
width: 95%;
font-family: inherit;
font-size: 12px;
line-height: 20px;
font-weight: 500;
color: #fff;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
outline: none;
background: #fff;
display: inline-block;
resize: none;
padding: 5px;
border-radius: 3px;
background: #83c76d;
cursor: pointer;
}
strong.chat_time {
padding: 0 1px 1px 0;
font-weight: 500;
font-size: 8px;
display: block;
}
/*Chatbox scrollbar*/
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
border-radius: 0;
}
::-webkit-scrollbar-thumb {
margin: 2px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.2);
}
/*Element state*/
.is-active {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
/*.is-float {
box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
}*/
.is-loading {
display: block;
-webkit-animation: load 1s cubic-bezier(0, .99, 1, 0.6) infinite;
animation: load 1s cubic-bezier(0, .99, 1, 0.6) infinite;
}
/*Animation*/
@-webkit-keyframes zoomIn {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0.0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes zoomIn {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0.0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes load {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0.0;
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@keyframes load {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0.0;
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
/* SMARTPHONES PORTRAIT */
@media only screen and (min-width: 300px) {
.chat {
width: 290px;
}
#expandbutton {
display:none;
}
}
/* SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 480px) {
.chat {
width: 300px;
}
.chat_field {
width: 65%;
}
#expandbutton {
display:none;
}
}
/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) {
.chat {
width: 300px;
}
.chat_field {
width: 65%;
}
#expandbutton {
display:block;
}
}
/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) {
.chat {
width: 300px;
}
.chat_field {
width: 65%;
}
#expandbutton {
display:block;
}
}
/*Color Options*/
.blue .fab {
background: #2d2c97;
color: #fff;
}
.blue .chat {
background: #2d2c97;
color: #999;
}
#footerstart {
position:absolute;
bottom:0;
z-index: 1000;
}
#footerchat{
position:absolute;
bottom:0;
z-index: 1000;
display:none !important; /*remove to reveal test field*/
}
/* Ripple */
.ink {
display: block;
position: absolute;
background: rgba(38, 50, 56, 0.4);
border-radius: 100%;
-moz-transform: scale(0);
-ms-transform: scale(0);
webkit-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
}
/*animation effect*/
.ink.animate {
-webkit-animation: ripple 0.5s ease-in-out;
animation: ripple 0.5s ease-in-out;
}
@-webkit-keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(5);
-ms-transform: scale(5);
webkit-transform: scale(5);
-webkit-transform: scale(5);
transform: scale(5);
}
}
@keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(5);
-ms-transform: scale(5);
webkit-transform: scale(5);
-webkit-transform: scale(5);
transform: scale(5);
}
}
::-webkit-input-placeholder { /* Chrome */
color: #bbb;
}
:-ms-input-placeholder { /* IE 10+ */
color: #bbb;
}
::-moz-placeholder { /* Firefox 19+ */
color: #bbb;
}
:-moz-placeholder { /* Firefox 4 - 18 */
color: #bbb;
}
.pic-ctn {
width: 100vw;
height: 200px;
}
@keyframes display {
0% {
transform: translateX(200px);
opacity: 0;
}
10% {
transform: translateX(0);
opacity: 1;
}
20% {
transform: translateX(0);
opacity: 1;
}
30% {
transform: translateX(-200px);
opacity: 0;
}
100% {
transform: translateX(-200px);
opacity: 0;
}
}
.chat-carousel {
position: relative;
width: 100%;
overflow:hidden;
margin-top: 0;
}
.chat-carousel > .pic {
position: absolute;
top: 0;
left: calc(50% - 100px);
opacity: 0;
animation: display 25s infinite;
}
.pic:nth-child(2) {
animation-delay: 5s;
}
.pic:nth-child(3) {
animation-delay: 10s;
}
.pic:nth-child(4) {
animation-delay: 15s;
}
.pic:nth-child(5) {
animation-delay: 20s;
}
.owl-carousel {
overflow: hidden;
}
.chat_first_screen{
background-color:transparent !important;
border-radius:0 !important;
box-shadow:none !important;
background-size: 100% 100% !important;
background-repeat:no-repeat !important;
width:100px !important;
height:100px !important;
}
.chat_first_screen2{
background-color:transparent !important;
border-radius: 50% !important;
border: 1px solid #2d2c97 !important;
box-shadow: 0px 1px 13px 0px rgba(0,0,0,0.36) !important;
background-size: 100% 100% !important;
width:100px !important;
height:100px !important;
background-repeat:no-repeat !important;
}
#prime{
z-index:-100 !important;
background-size: 100% auto !important;
width:50px !important;
height:50px !important;
background-position : center center !important;
}
.label-block {
display : block;
width : 100%;
margin-bottom : 0.5em;
}
.owl-carousel1.owl-carousel .owl-nav .owl-prev{left:0px}
.owl-carousel1.owl-carousel .owl-nav .owl-next{right:0px}
.owl-carousel1 .owl-dots{margin-top:0;}
.owl-carousel1.owl-carousel .owl-nav i {
background: #ffffff;
border: 1px solid #013e6d;
color: #013e6d;
border-radius:50%;
}
.owl-carousel1.owl-carousel .owl-nav i:hover {
background: #013e6d;
border: 1px solid #013e6d;
color: #fff;
}
.owl-carousel1.owl-carousel .owl-nav .owl-prev {
top: 97%;
}
.owl-carousel1.owl-carousel .owl-nav .owl-next {
top: 97%;
}
.chat_msg_item ul li{
list-style: inherit;
margin-left : 1.5em;
margin-top : 0.4em;
}
.chat_msg_item ul li li{
list-style: inherit;
margin-left : 2.5em;
}
.menu-utama-footer{
margin : 1em 0;
}
.btn-chat-start {
background: #38c6f4;
border-color:#38c6f4;
color:#fff !important;
cursor:pointer;
}
.btn-chat-start:hover {
background: #2aa78d;
border-color:#2aa78d;
color:#fff !important;
}
</style>
<!-- END_CONTENT -->