#wrapper{padding-left:380px;transition:all .4s ease 0}
body {font-family: 'Roboto', sans-serif !important;font-size: 14px;line-height: 1.42857143;
    color: #333;}
.navbar-inverse {background: #fff;}
#sidebar-wrapper{margin-left:-380px;top:60px;left:380px;width:380px;background:#000;position:fixed;height:100%;overflow-y:auto;z-index:1000;transition:all .4s ease 0}
#wrapper.active{padding-left:0}
#wrapper.active #sidebar-wrapper{left:0}
#page-content-wrapper{width:100%;padding-top:70px;transition:all .4s ease 0}
.sidebar-nav{top:0;width:380px;list-style:none;margin:0;padding:0}/*position:absolute;*/
.sidebar-nav li{width: 44%;display:inline-block;line-height:40px;margin: 8px 8px 8px 10px;}
.sidebar-nav li a{display: block; background: #26272a; color: #fff; text-decoration: none; padding: 8px;border:1px solid #26272a;}
.sidebar-nav li a.temp-active {border:1px solid red;}
.sidebar-nav li img {width: 100%; max-width: 100%;}
.sidebar-nav > .sidebar-brand{height:65px;line-height:60px;font-size:18px}
.sidebar-nav > .sidebar-brand a{color:#999}
.sidebar-nav > .sidebar-brand a:hover{color:#fff;background:none}
#menu-toggle{text-decoration:none;float:left;color:#000;padding-right:15px; margin: 18px 0 0 25px;}
.navbar-brand {padding: 0;}
.navbar {min-height: 60px;}
.white{color: #fff;padding: 0 0 5px;margin: 0;}


.chat-details-wrap .arrow {border: solid #fff;border-width: 0 2px 2px 0;display: inline-block;padding: 3px;float: right;}
.chat-details-wrap .right {transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}
.chat-details-wrap .left {transform: rotate(135deg);-webkit-transform: rotate(135deg);}
.chat-details-wrap .up {transform: rotate(-135deg);-webkit-transform: rotate(-135deg);}
.chat-details-wrap .down {transform: rotate(45deg);-webkit-transform: rotate(45deg);}


/*General Template*/
#floating-wpp {position: fixed; bottom: 10px; right: 15px;}
#floating-wpp .floating-message-wrp{max-width: 360px;box-shadow: rgba(0, 0, 0, 0.1) 0px 12px 24px 0px;display: flex; flex-direction: column; width: 100%; background-color: rgb(255, 255, 255); transform: translate3d(0px, 0px, 0px);
    opacity: 1; pointer-events: all;visibility: visible;touch-action: auto;margin-bottom: 96px; position: fixed;bottom: 0px;right: 0px; left: auto; margin-right: 20px; border-radius: 10px;overflow: hidden;transition: opacity 0.3s ease 0s, margin 0.3s ease 0s, visibility 0.3s ease 0s;}

#floating-wpp .floating-wpp-button {font-size:0;cursor:pointer;width: 62px;height: 62px;background: #fff;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;position: relative;text-align: center;}
#floating-wpp .floating-wpp-button::after {position: absolute;content:"\f232";font-family:'FontAwesome';font-size: 45px; left: 12px;color: #4fce5d;}
#floating-wpp .floating-head {color: rgb(17, 17, 17);display: flex; -webkit-box-align: center; align-items: center; background: rgb(9, 94, 84);padding: 24px 20px;}
#floating-wpp .floating-wpp-button span {display: none;}
#floating-wpp .floating-head .profile_pic {background: #fff; width: 50px;height: 50px;padding: 0;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;overflow: hidden;}
#floating-wpp .floating-head .profile_pic img {width: 100%;max-width: 100%;}
#floating-wpp .floating-head .profile_content .profile_name {color: #fff;font-size: 16px; font-weight: 700; line-height: 20px;}
#floating-wpp .floating-head .profile_content .profile_line {color: #fff;font-size: 14px; font-weight: 400; line-height: 18px;}
.chat_screen {background: url(../image/whatsapp_chatbg.png) repeat;position: relative; max-height: 382px;padding: 20px 20px 20px 10px;overflow: auto;}
.chat_screen .chat_textwrp {background: #fff; display: inline-block;padding: 6px 8px;border-radius: 0px 8px 8px; margin-left: 18px;position: relative; }
.chat_screen .chat_text span {font-size: 13px;font-weight: 700;line-height: 18px;color: rgba(0, 0, 0, 0.4);}
.chat_screen .chat_text .chat{font-size: 14px;line-height: 19px;margin-top: 4px;color: rgb(17, 17, 17);}
.chat_screen .chat_text::after {width: 0;height: 0;border-top: 0px solid transparent;border-right: 15px solid #fff;border-bottom: 10px solid transparent;
left: -10px;top:0;position: absolute;content: "";}

#floating-wpp .floating_footer {background: #fff; padding:30px 20px;}
#floating-wpp .floating_footer .start-chat {background: #4fce5d; display: block;color: #fff;font-size: 16px; font-weight: 500;line-height: 20px; cursor: pointer;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;text-align: center;padding: 10px;}
#floating-wpp .floating_footer .btn.start-chat i {margin-right: 5px;font-size: 18px;}
.floating-close {position: absolute;right: 10px;top: 10px;color: #cccccc;cursor: pointer;font-weight: normal;}

/*White Template*/
#floating-wpp.white-temp .floating-head {background: #fff;}
#floating-wpp.white-temp .floating-head .profile_content .profile_name, #floating-wpp.white-temp .floating-head .profile_content .profile_line {color: #000;}
#floating-wpp.white-temp .floating-wpp-button {font-size:15px;color:#fff;cursor:pointer;width: auto;height:auto;background: #3d414a;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;position: relative;text-align: center;padding: 10px 30px;}
#floating-wpp.white-temp .floating-wpp-button::after {position: absolute;content:"\f29c";font-family:'FontAwesome';font-size: 22px; left: 32px;top:5px;color: #fff;}
#floating-wpp.white-temp .floating-wpp-button span {padding-left: 25px;}
#floating-wpp.white-temp .floating-wpp-button span {display: block;}
/*Grey Template*/
#floating-wpp.grey-temp .floating-head {background: #3b424a;}
#floating-wpp.grey-temp .floating-head .profile_content .profile_name, #floating-wpp.grey-temp .floating-head .profile_content .profile_line {color: #fff;}
#floating-wpp.grey-temp .floating-wpp-button {font-size:0;cursor:pointer;width: 62px;height: 62px;background: #333;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;position: relative;text-align: center;}
#floating-wpp.grey-temp .floating-wpp-button::after {position: absolute;content:"\f0e0";font-family:'FontAwesome';font-size: 30px;color: #fff; top: 8px; left: 15px;}
#floating-wpp.grey-temp .floating-wpp-button span {display: none;}
#floating-wpp.grey-temp .floating_footer .start-chat{background: #fc4732}
/*Blue Template*/
#floating-wpp.blue-temp .floating-head {background: #013485;}
#floating-wpp.blue-temp .floating-head .profile_content .profile_name, #floating-wpp.blue-temp .floating-head .profile_content .profile_line {color: #fff;}
#floating-wpp.blue-temp .floating-wpp-button {font-size:15px;color:#fff;cursor:pointer;width:auto;min-width: auto;height:auto;background: #013485;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;position: relative;text-align: center;padding: 10px 30px;}
#floating-wpp.blue-temp .floating-wpp-button::after {position: absolute;content:"\f073";font-family:'FontAwesome';font-size: 18px; left: 32px;top:8px;color: #fff;}
#floating-wpp.blue-temp .floating-wpp-button span {padding-left: 25px;}
#floating-wpp.blue-temp .floating-wpp-button span {display: block;}
#floating-wpp.blue-temp .floating_footer .start-chat{background: #0085fe}

.chat-details-wrap {padding-top: 20px;}
.chat-details-wrap select.country-code, .chat-details-wrap input[type=tel], .chat-details-wrap input[type=file], .chat-details-wrap input[type=text], .chat-details-wrap textarea {background: transparent;border-color: #eaeaea;margin-bottom: 15px;color: #fff;}
.chat-details-wrap input.btn.btn-primary.download-class {width: 100%;}
.chat-details-wrap select.country-code option {color:#000;}
/*Responsive CSS*/
@media (max-width:767px) {
#wrapper{padding-left:0}
#sidebar-wrapper{left:0}
#wrapper.active{position:relative;left:380px}
#wrapper.active #sidebar-wrapper{left:380px;width:380px;transition:all .4s ease 0}
#menu-toggle{display:inline-block}
}