@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed');
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.pcd{
  margin: 0; padding: 0;
	font-family: 'Roboto', sans-serif;
	position:fixed;
box-sizing: border-box;
	bottom: -1px; right: 30px; 
	padding: 0px 10px 0px 10px;
	width: 320px; 
	height: 0px;
	background-color:white;
	color:black;
	/*border:1px solid #fff;*/
	box-shadow: 3px 5px 8px rgba(0,0,0,0.4);
  z-index: 999999999999;
  font-size:13px !important;
  overflow: hidden;
  border-radius: 16px;
  background-image: url(../img/conn.jpg);
  background-position: bottom;
  background-size: cover
}

.pcd.open{bottom: 40px;
box-shadow: 2px 3px 4px rgba(0,0,0,.2);
height: 460px !important;

}
.radius{border-radius:16px;}
 .pcd-title{
  box-sizing: border-box;
 	position:relative;
 	border:1px solid transparent;
 	border-bottom:none;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
 margin:0;
	margin-top:0px; /* -30px */
	margin-left:-11px !important;
	/*max-width:calc(100% + 22px);*/
  min-width:calc(100% + 22px);
	padding: 8px 10px 8px 10px !important;
  
}
.pcd-title a{
	display: block;
	text-decoration: none;
/*	color:white;*/
}
h5.text-success.text-center{ margin:0; padding: 10px; font-size:15px !important;}

ul.off_menu{
  margin: 0; padding: 0; list-style: none; list-style-type: none; display: none; position: fixed; z-index: 999;
  min-width: 260px;
  padding:0px 0px 4px 0px; 
  bottom: 30px; right: 120px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0px 3px 4px rgba(0,0,0,.3);
  border-top: 4px solid #dadce2;
}
@media (max-width:375px ){ /*iphone 6/7*/
  ul.off_menu{right:70px; z-index: 999999999999}
  /*ul.off_menu .arrow-right {display: none;}*/
}
@media (max-width:360px ){ /*galaxy*/
  ul.off_menu{right:50px; z-index: 999999999999}
  ul.off_menu .arrow-right {display: none;}
}

@media (max-width:320px ){/*iphone5*/
  ul.off_menu{right:30px; z-index: 999999999999}
  ul.off_menu .arrow-right {display: none;}
}
ul.off_menu li {
  display: block;
  float:left; width:100%;
 border-bottom: 1px solid #dadce2; height:auto;}
 

ul.off_menu li a{
  padding: 10px 20px 10px 10px ;
  background-color: #f8f8f8;
  font-size: 1.1em !important;
  font-weight: 600;
  text-decoration: none;
  display: block;
}
ul.off_menu li a i{font-size:1.3em !important; margin-right: 15px; margin-left: 5px;}
ul.off_menu li a:hover{
  background-color: #f5f5f5/*c6fc03*/;
  color:#000;
  box-shadow:inset 0px 13px 14px rgba(0,0,0,.1);
}


ul.off_menu .arrow-right {
  position: absolute;bottom: 8px; right: -15px;
  font-size:40px !important; color:white; text-shadow:2px 3px 4px rgba(0,0,0,.3); 
}
ul.off_menu li div.pcalendar a.close-btn{position: absolute; top:8px; right: -35px; width:35px;   border:1px solid #ccc; color:red; padding: 3px; border-bottom-right-radius: 8px; border-top-right-radius: 8px;}
ul.off_menu li div.pcalendar a.close-btn i{margin-right: 5px; margin-left: 5px;}

div.pcalendar{display: none; padding: 20px; text-align: right;}
div.pcalendar input, div.pcalendar select,div.pcalendar button{ margin-bottom: 3px; }


ul.workinghourslist{list-style: none; list-style-type: none; display: block;  margin: 0; padding: 0 30px; border-top:1px solid #ccc  }
ul.workinghourslist a{position: absolute; font-size: 38px !important; width:20px;}
ul.workinghourslist a.left{left:0px;}ul.workinghourslist a.right{right:0px;}
ul.workinghourslist li{display:none; float: left; width:calc( 100% - 15px); padding:0 5px; text-align: center; border-bottom-color:transparent;  font-size:14px;}
ul.workinghourslist li.active{display:inline-block;  }
ul.workinghourslist li.today{color: green;}

div.workinghours{float: left;width: 100%; height: auto ; border-bottom: 1px solid #ccc; margin-bottom: 10px;}
a.ourworkinghours.o{float: left; height: auto;  width:calc( 100% - 30px); }


#pcd-move{float: left; margin:3px 5px 0 0; font-size:.775em !important; color:#333; text-shadow: 0px 1px 1px #fff;}
.pcd-title.on,.btn-success{
  background-color:#00ae7b !important;
  color:white;
  background-image: url(../img/title-bar.gif);
  background-repeat: repeat-x;
  background-position: center -1px;
}
.pcd-title.on:hover,.btn-success:hover{
  background-color:#027a57 !important;

}
.pcd-title a{color:white;}
.pcd-title a.onofftext{ font-size:15px; text-shadow: 1px 2px 3px rgba(0,0,0,0.2);}
.pcd-title.off{
  background-color: #f07f7c/*e59997*/;
 }
 .pcd-title.off:hover{
  background-color:#cd5a57;
}
a.pcd-support{
	position:fixed; bottom: 20px; right: 20px;z-index: 1453; width: 90px; height: 82px;
  background-image: url(https://portajans.com/pcd/assets/img/pcd-support.png);
 
}
a.pcd-support img{width:90px; height: 82px}
#submit_chat{ box-shadow: inset 0px 1px 3px rgba(255,255,255,.7), 1px 2px 3px rgba(0,0,0,0.3) !important;  float: right;  }
.pcd form .fgr{padding-right: 10px;  margin-bottom: 10px}
.pcd form label.lbl{
  
padding: 0px;
  background-color: #fff;margin-right: 0px; padding-right: 0px; padding-left:5px; 
 box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
 text-shadow: 0px -1px 1px #fff;
  border-top-left-radius: 16px;border-bottom-left-radius: 16px;
min-height: 35px;
max-height: 35px;
line-height: 35px;
font-weight: 600;
color:#444;
text-align: center
    }
.text-success.text-center{color:green; text-align:center; font-weight: normal; line-height: 1em }
.pcd form .formel{margin-left: 0px; padding-left: 0px; margin-bottom:10px; box-sizing: border-box; }
.pcalendar input,.pcd form .formel input,
.pcalendar select, .pcd form .formel select,
.pcd form .formel textarea{ padding: 5px; min-width:100%; max-width: 100%; min-height: 35px; border-radius: 30px; text-indent: 10px;
  box-shadow:inset 0px 2px 3px rgba(0,0,0,0.2); resize:none;  border:1px solid #ccc; }
  .pcd form .formel textarea{border-radius: 16px; max-width: 100%; height: 55px !important; font-family: Arial, sans-serif}
  .pcd form .formel select{padding: 10px 0px; min-width: 100%;}
.pcd form .formel input:focus,
.pcd form .formel select:focus,
.pcd form .formel textarea:focus{
   box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
   border-color:#dadce2;
   outline: none;

}
.pcalendar .btn,.pcd form .btn{float: right; min-width: 35px; min-height: 35px; margin-right: 5px}
.pcalendar .btn{border-radius: 16px}

p.err_msg{position:absolute; top:-10px;color:red; font-size:13px !important; width:0; height: 0;  background-color: #fff; cursor: pointer; text-align: center; 
  display: flex;justify-content: center; align-items: center;
  border-top-right-radius: 16px;border-radius: 16px; box-shadow: 1px 2px 3px rgba(0,0,0,0.2); }
p.err_msg.tx{border-bottom-left-radius: 16px;}
#form_on .formel{position: relative;}
p.err_msg.s{width:92%; height: 100%; padding-top: 5px}
#pcd_chats{position: absolute;/*background-color: #dadce2;*/ height: 60%; width: 96%; overflow-x: hidden; overflow-y: auto;}
#pcd_chats::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1);
  background-color: #000
}
#pcd_chats::-webkit-scrollbar-track:hover{
  background-color: #538280;  
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1);
}

#pcd_chats::-webkit-scrollbar
{
  width: 8px;
  height: 5px;

}

#pcd_chats::-webkit-scrollbar-thumb{
  background-color: #538280;
}
#pcd_chats::-webkit-scrollbar-thumb:hover{
  background-color: #86c2bf;
}

.pcd_chat,.writing{
	float: left;
	width:95%;
	padding: 10px;
	font-size:.975em !important;
	/*background-color: #dadce2;*/
	/*border-bottom: 1px solid #dadce2;*/
}
.pcd_from{
	color:white;
	text-align:right;
}
.pcd_from .msg{	background-color: #3d98ff;	border-radius:14px;float: right;}
.pcd_from .msg a{background-color: #333; color:#fff; border-radius: 16px; padding: 1px 4px; text-decoration: none}
.pcd_from .msg a:hover{background-color: #fff; color:#000;}
a.switch_enter{color:#fff !important; background-color: green; padding: 3px 5px; border-radius: 16px; text-decoration: none; text-shadow: 0px -1px 1px rgba(0,0,0,0.5); font-weight: 600;float:right;margin:5px;}
.pcd_from_name,.pcd_to_name,.writing_to_name{font-style: italic; color: #999; margin-top: -15px}
.pcd_from_name::after,.pcd_to_name::after{content: ''}
.pcd_to,.writing_to{
	color:blue;
}
.pcd_pending,.pcd_to .msg,.writing_to .msg{background-color: #d4ff9c;border-radius: 14px;float: left;}
.pcd_pending{padding:3px 7px; margin-bottom:5px; }
.writing_to .msg{width:60px;height:30px; background-image:url(https://portajans.com/pcd/assets/img/typing-loader.gif); background-position:  -23px center; background-size: cover; border-radius: 16px; }
.pcd_from .msg,.pcd_to .msg,.writing_to .msg{padding:3px 7px; max-width: 80%; }
span.pcd_time{font-size:.675em !important;}
.pcd_process{position: relative; margin-top: 283px; }
#close_chat{max-height:25px;position:absolute;right:2px; top:5px; border-radius:16px; }
#pcd_voice{max-height:25px;position:absolute;right:30px; top:5px; border-radius:16px;}

#close_chat,#pcd_voice,
#close_chat:focus,#pcd_voice:focus{outline:none!important; box-shadow: none !important}
.attachment{float:left}
fieldset.rating label,.attachment label{ display: block !important }
.attachment > input {
  visibility:hidden;
  width:0;
  height:0
}
textarea.pcd_msg{max-height: 55px; float: left; 
  width: 100%; margin:10px 0 5px 0; background-color: #adf1dd; box-shadow: inset 0px 2px 2px rgba(0,0,0,0.3); resize:none; }
textarea.pcd_msg:focus,
.emoji-wysiwyg-editor,p.err_msg.txs{background-color: #adf1dd; 
  margin:10px 0 10px 0 !important;
  box-shadow: inset 0px 2px 2px rgba(0,0,0,0.3) !important; 
  border-radius: 8px !important}
.emoji-wysiwyg-editor:focus{background-color: #c1f4e5;}
p.err_msg.txs{margin:0px 0 0px 0 !important; border-bottom-left-radius: 8px !important; width:100% !important; background-color: #fff; z-index: 9998}

#progress-wrp {
	font-size:.875em !important;
  border: 1px solid #0099CC;
  padding: 1px;
  position: absolute;
  height: 25px;
  width:180px;
  border-radius: 3px;
  margin-top: 3px;
display: none;
  text-align: left;
  background: #fff;
  box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}

#progress-wrp .progress-bar {
  height: 100%;
  border-radius: 3px;
  background-color: #f39ac7;
  width: 0;
  box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}

#progress-wrp .status {
  top: 3px;
  left: 50%;
  position: absolute;
  display: inline-block;
  color: #000000;
}

span.viewed{color:darkgray;}
span.viewed.on{color:white;}
span.viewed::before{content:'✓';}




.pcd form .btn{padding:3px 7px;}
.off_menu .btn.btn-sm.btn-success, .pcd .btn.btn-sm.btn-success{border:1px solid  #00ae7b !important; outline: none !important;   }
.pcd .btn.btn-sm.btn-success:focus{}

form.pcd_ratings,.pcd_ratings h1,fieldset, label { margin: 0; padding: 0; }
.pcd input{max-height:30px;}
@media (max-width: 768px ){
  p.err_msg{border-radius: 16px;  }
  p.err_msg.s{width:95%;}
  .pcd label{display: none;}
  .pcd form .formel input,
.pcd form .formel select,
.pcd form .formel textarea{border-radius: 16px; width:100%; }
}
h1 { font-size: 1.5em !important;  }

/****** Style Star Rating Widget *****/

.rating { 
  margin: 0; padding: 0; 
  border: none;
  float: left;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em !important;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 


a.pcd_settings{position:absolute; right:13px; bottom:0px; font-size:1.3em !important;}
ul.pcd_theme{display: none; font-size:.775em !important; margin: 0; padding: 0; height: auto; float: left;}
ul.pcd_theme li{display: inline; float: left; margin:1.5px}
ul.pcd_theme li a img{border-radius: 4px}
ul.pcd_lang{display:none; list-style:none;margin:0; padding:10px; margin-left:-10px; margin-top:-12px; max-width:90%;}
ul.pcd_lang li{margin:0; padding:0;}
ul.pcd_lang li a{font-size:.675em !important; padding:3px 5px; border-radius: 16px;  }
.pcd-title.on ul.pcd_lang li a:hover{background-color:#21751b;}
.pcd-title.off ul.pcd_lang li a:hover{background-color:#a83232;}

ul.pcd_lang li.lng{display: inline;}
ul.pcd_lang li.lng,ul.pcd_lang li.lng a{float:left; width: 30px; height: 30px;background-size: 24px 24px; background-position: center; background-repeat: no-repeat; }
ul.pcd_lang li.lng a.tr{ background-image: url(../img/flags/tr.svg); }
ul.pcd_lang li.lng a.en{ background-image: url(../img/flags/en.svg); }
ul.pcd_lang li.lng a.de{ background-image: url(../img/flags/de.svg); }
ul.pcd_lang li.lng a.sa{ background-image: url(../img/flags/sa.svg); }
ul.pcd_lang li.lng a.ru{ background-image: url(../img/flags/ru.svg); }

ul.pcd_lang div.about{font-size:13px !important; margin-top: 5px; margin-left:21px;}
ul.pcd_lang div.about a{ padding: 3px 5px; width:auto; display:inline; border-radius: 16px}
ul.pcd_lang div.about a:hover{background-color: #a83232;}





ul.cln{margin: 0; padding: 0; list-style: none; list-style-type: none;}
ul.cln li.lng:first-child{margin-left: 55px;}
ul.cln li.lng{display: inline;}
ul.cln li.lng,
ul.cln li.lng a{float:left; width: 30px; height: 30px;background-size: 24px 24px; background-position: center; background-repeat: no-repeat; }
ul.cln li.lng a.tr{ background-image: url(../img/flags/tr.svg); }
ul.cln li.lng a.en{ background-image: url(../img/flags/en.svg); }
ul.cln li.lng a.de{ background-image: url(../img/flags/de.svg); }
ul.cln li.lng a.sa{ background-image: url(../img/flags/sa.svg); }
ul.cln li.lng a.ru{ background-image: url(../img/flags/ru.svg); }

ul.cln div.about{font-size:13px !important; margin-top: 5px; margin-left: 0; padding-left:55px; }
/*ul.cln div.about a{ padding: 3px 5px; width:auto; display:inline; border-radius: 16px}
ul.cln div.about a:hover{background-color: #a83232;}*/
.pcdsocialmedia{width:100%; float: left;height:auto;}
.pcdsocialmedia ul{  margin:0 0 0 5px; padding:0; list-style:none; }
.pcdsocialmedia ul li{ max-width:50px; display: inline;   }
.pcdsocialmedia ul li a{ max-width:50px;  float: left; }

.report_msg{z-index: 9999999999999999999999999;}



.emoji-wysiwyg-editor:focus{/*background-color: #fc0 !important;*/}
.emoji-picker-icon.emoji-picker.fa.fa-smile-o{font-size:15px !important; margin-top: 5px; margin-right: 5px;}