@import url('https://fonts.googleapis.com/css?family=Montserrat:500,900&display=swap');



.icon-thewave.icon-minimize:hover {
  background-position  : 0 0 !important;
  background-position-y: 0 !important;
  background-position-x: 0 !important;
  width                : 11px;
  height               : 11px;
}

.icon-thewave.icon-close:hover {
  background-position  : 0 0 !important;
  background-position-y: 0 !important;
  background-position-x: 0 !important;
  width                : 11px;
  height               : 11px;
}

span.icon-thewave.icon-close {
  background-position: 0 0 !important;
}

span.icon-thewave.icon-minimize {
  background-position: 0 0 !important;

}


.vocalcom-nav {
  background: none !important;

}

.vocalcom-nav .nav-actions .btn-nav-action {
  width        : 40px;
  height       : 40px;
  padding      : 10px 10px;
  font-size    : 16px;
  line-height  : 1.33;
  border-radius: 50px;
  margin       : 0 4px;
}

.vocalcom-nav .nav-actions .btn-primary {
  background-color: #337ab7;
  border-color    : #2e6da4;
}

.vocalcom-nav .nav-actions .btn-warning {
  background-color: #f0ad4e;
  border-color    : #eea236;
}

.vocalcom-nav .nav-actions .btn-default {
  background-color: #fff;
  border-color    : #ccc;
}

.vocalcom-nav .nav-actions .btn-danger {
  background-color: #d9534f;
  border-color    : #d43f3a;
}

.vocalcom-nav .nav-actions .btn-success {
  background-color: #5cb85c;
  border-color    : #4cae4c;
}

/* @media (max-width: 767px),
(min-width: 768px) and (max-width: 991px) {
  .vocalcom-nav .nav-actions .btn-nav-action {
    width        : 50px;
    height       : 50px;
    padding      : 13px 14px;
    font-size    : 20px;
    border-radius: 50px;
  }
} */

.vocalcom-nav .vocalcom-panel.chat-panel .panel-footer .chat-input-container .btn {
  background-color: #383F50 !important;
  color           : #383F50 !important;
}

.vocalcom-nav .vocalcom-panel.chat-panel .panel-footer .chat-close-container .btn {
  background-color: #f0ad4e;
  border-color    : #eea236;
}

.vocalcom-nav .vocalcom-panel.call-panel .panel-footer .btn#vocalcom-call-me {
  background-color: #5cb85c;
  border-color    : #4cae4c;
}

.vocalcom-nav .vocalcom-panel.call-panel .panel-footer .btn#vocalcom-free-call {
  background-color: #5cb85c;
  border-color    : #4cae4c;
}

.vocalcom-nav .vocalcom-panel.information-request-panel .panel-footer .btn {
  background-color: #5cb85c;
  border-color    : #4cae4c;
}

.vocalcom-nav .vocalcom-panel.videoconf-panel .panel-footer .btn {
  background-color: #383F50 !important;
  color           : #383F50 !important;
}

.vocalcom-nav .panel-default .panel-heading {
  height          : 100px !important;
  background-color: #383F50 !important;
  border-color    : #383F50 !important;
}


.vocalcom-nav .panel-default .panel-body {
  background-color: inherit;
}

.vocalcom-nav .panel-default .panel-footer {
  background-color: #f5f5f5;
  border-color    : #ddd;
}

.vocalcom-nav label {
  color: inherit;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message .the-wave-message-body {
  background-color: #f5f5f5;
  border          : 1px solid #dddddd;
  min-height: initial !important;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message .the-wave-message-body .the-wave-message-body-container {
  font-size: 12px;
  color    : #777777;
  ;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message.agent .the-wave-message-body .the-wave-message-body-container {
  font-size: 12px !important;
  color    : #EFEFEF !important;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message.agent .the-wave-message-body {
  background-color: #383F50 !important;

}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message.agent .the-wave-message-body .the-wave-message-body-chev {
  background-color: #383F50 !important;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message.agent .the-wave-message-body .the-wave-message-body-chev div {
  border-left: 1px solid #bce8f1;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message.agent .the-wave-message-info img.the-wave-message-avatar {
  border: 5px solid #d9edf7;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message.supervisor .the-wave-message-body {
  background-color: #f9f2f6;
  border          : 1px solid #f7e6ef;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message.supervisor .the-wave-message-body .the-wave-message-body-chev {
  background-color: #f9f2f6;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message.supervisor .the-wave-message-body .the-wave-message-body-chev div {
  border-left: 1px solid #f7e6ef;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message.supervisor .the-wave-message-info img.the-wave-message-avatar {
  border: 5px solid #f9f2f6;
}









.vocalcom-nav .panel-default .panel-heading {
  border-radius: 0 20px 0 0 !important;
}

.vocalcom-nav .vocalcom-panel {
  border-radius: 0 20px 0 0 !important;
  min-width    : 380px !important;
  width        : 380px !important;
  max-width    : 380px !important;

}

.vocalcom-nav .vocalcom-panel .panel-heading .actions-container {
  float         : left !important;
  padding-bottom: 0 !important;
  border-bottom : 1px solid white !important;
  width         : 100% !important;
}

.vocalcom-nav .vocalcom-panel .panel-heading .panel-icon {
  display: none !important;
}

.icon-thewave.icon-collapse-up {
  display: none !important;
}

.icon-thewave.icon-collapse-down {
  /* margin-left       : 19.5rem !important;
    display            : inline-block;
    background-image   : url(https://chat-na01.concentrix.com/hermes_net_v5/WAH/minus.png) !important;
    background-position: unset !important;
    background-repeat  : no-repeat !important;
    background-position: center;
    width              : 20px !important;
    height             : 20px !important; */
  display              : none !important;
}






.vocalcom-nav .nav-actions .btn-primary {
  background-color: #383F50 !important;



}

.vocalcom-nav {
  background: none !important;
}

.vocalcom-nav img.nav-agent {
  display: none !important;
}

.vocalcom-nav .nav-actions .btn-nav-action {
  position: fixed !important;
  bottom  : 10% !important;
  right   : 3% !important;
  padding : 12px !important;
  width   : 65px !important;
  height  : 65px !important;
}

.powered-by-vocalcom {
  display: none !important;
}

.vocalcom-nav .vocalcom-nav-element-container {
  width: auto !important;
}

/* .vocalcom-nav .vocalcom-panel.chat-panel .panel-footer .btn-container .btn {
      display         : block !important;
      background-color: #f5f5f5 !important;
      width           : 100% !important;
      height          : 100% !important;
      max-height      : 100% !important;
      border-radius   : 0 !important;
      font-size       : 26px !important;
      border          : 1px solid #ddd !important;
      box-shadow      : inset 0 0 10px 4px #ddd !important;
      padding         : 15px 12px !important;
  
    } 

    .vocalcom-nav .vocalcom-panel.chat-panel .panel-footer .chat-input-container .icon-thewave {
      position   : absolute !important;
      top        : 50% !important;
      margin-top : -13px !important;
      left       : 50% !important;
      margin-left: -13px !important;
    }

    .icon-thewave.icon-send {
      background-position: -30px -69px !important;
      width              : 26px !important;
      height             : 26px !important;
    }

    .vocalcom-nav .vocalcom-panel.chat-panel .panel-footer .chat-input-container textarea.the-wave-message-input {

      min-height   : 100%  !important;
      height       : 100% !important; 
      max-height   : 100%  !important;
      overflow-y   : scroll  !important;
      border       : none  !important;
      border-radius: 0  !important;

    }

    .vocalcom-nav .vocalcom-panel.chat-panel .panel-footer .chat-close-container, .vocalcom-nav .vocalcom-panel.chat-panel .panel-footer .chat-input-container {
      min-height: 100% !important;
    height      : 100% !important;
    max-height  : 100% !important;
    } */

	.vocalcom-nav .vocalcom-panel.chat-panel .panel-footer .chat-input-container textarea.the-wave-message-input {

      font-weight: normal !important;

    }
	
.vocalcom-nav .panel-footer {
  padding   : 0 !important;
  border-top: 0 !important;
}

.vocalcom-nav .vocalcom-panel.chat-panel .panel-footer .chat-input-container {

  margin-top: 0 !important;
}


.vocalcom-nav .vocalcom-panel.chat-panel .panel-footer .chat-input-container .icon-thewave {
  position   : absolute !important;
  top        : 50% !important;
  margin-top : -13px !important;
  left       : 50% !important;
  margin-left: -13px !important;

}

.vocalcom-nav .vocalcom-panel.chat-panel .panel-footer .chat-input-container textarea.the-wave-message-input {
  overflow-y: hidden !important;
  max-width: 85% !important;
  width: 85% !important;
}

.vocalcom-nav .form-control {
  border: none !important;

}



i.icon-thewave.icon-comment-white {
  display            : inline-block;
  background-image   : url(https://chat-na01.concentrix.com/hermes_net_v5/WAH/speech-bubble-with-dots.png) !important;
  background-position: center;
  background-repeat  : no-repeat !important;
}

span.icon-thewave.icon-minimize {
  display            : inline-block;
  background-image   : url(https://chat-na01.concentrix.com/hermes_net_v5/WAH/minus.png) !important;
  background-position: unset !important;
  background-repeat  : no-repeat !important;
  background-position: center;
  width              : 20px !important;
  height             : 20px !important;
  position: relative;
  left: 280px !important;
}

span.icon-thewave.icon-close::after {
  font-family: 'BasicSans-Bold', sans-serif !important;
  content    : "Chat with us!" !important;
  color      : white;
  font-size  : 15px !important;
  padding    : 0  !important;
  position: relative !important;
  left: 285px !important;
  bottom: 3px !important;
  left: 107px !important;
  
}

span.icon-thewave.icon-close {
  display            : inline-block;
  background-image   : url(https://chat-na01.concentrix.com/hermes_net_v5/WAH/x.png) !important;
  background-position: unset !important;
  background-repeat  : no-repeat !important;
  background-position: center;
  width              : 20px !important;
  height             : 20px !important;
}





.vocalcom-nav .vocalcom-panel.chat-panel .panel-footer .chat-input-container .btn::after {
  /* display            : table-cell !important; */
  visibility         : visible !important;
  content            : url(https://chat-na01.concentrix.com/hermes_net_v5/WAH/filled-sent.png) !important;
  background-position: center;
  background-position: center;
  width              : 100% !important;
  position: relative !important;
  top: 10px !important;

}

.vocalcom-nav .vocalcom-panel.chat-panel .panel-footer .chat-input-container .btn::before {
  /* visibility: hidden !important;
      position : relative !important; */
  display      : none;
}



.vocalcom-nav .vocalcom-panel.chat-panel .panel-footer .chat-input-container .btn {

  color: #383F50 !important;
}

.vocalcom-nav .vocalcom-panel .panel-heading .actions-container .btn-group-xs>.btn {
  padding: 5px 5px 5px 15px !important;
  margin : 0 !important;
  float  : right !important;
}

.icon-thewave.icon-comment-white {
  background-position: unset !important;
  width              : 40px !important;
  height             : 40px !important;
}

.vocalcom-nav .vocalcom-panel.chat-panel .panel-footer .chat-input-container .btn-container {
  background-color: #383F50 !important;
  -webkit-box-shadow      : initial !important;
  box-shadow      : initial !important;
  max-width: 15% !important;
  width: 15% !important;
  min-height: 50px !important;

}

div.panel-body.the-wave-messages.hidden-scroll-bar {


  min-height: 40vh !important;
  height    : 40vh !important;
  max-height: 40vh !important;

}


@media (max-width: 500px),
(max-width: 990px) and (min-width: 400px) {

  .vocalcom-nav .nav-actions .btn-nav-action {
    width        : 50px;
    height       : 50px;
    padding      : 13px 14px;
    font-size    : 20px;
    border-radius: 50px;
  }

  .vocalcom-nav .panel-default .panel-heading {
    border-radius: 0 20px 0 0 !important;
  }

  .vocalcom-nav .vocalcom-panel {
    border-radius: 0 20px 0 0 !important;
  }

  .vocalcom-nav .vocalcom-panel.chat-panel .panel-footer .btn-container .btn {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
  }

  .vocalcom-nav .vocalcom-panel.panel-expanded .panel-body {
    top: 12vh !important;
    min-height: 80% !important;

  }

  .vocalcom-nav .vocalcom-panel.chat-panel.panel-expanded .panel-footer .chat-close-container {
    padding: 0 !important;
  }

 

  .vocalcom-nav .vocalcom-panel {
    border-radius: 0 20px 0 0 !important;
    min-width    : 450px !important;
    width        : 450px !important;
    max-width    : 450px !important;

  }

  span.icon-thewave.icon-minimize {
    display            : inline-block;
    background-image   : url(https://chat-na01.concentrix.com/hermes_net_v5/WAH/minus.png) !important;
    background-position: unset !important;
    background-repeat  : no-repeat !important;
    background-position: center;
    width              : 20px !important;
    height             : 20px !important;
    position: relative !important;
    left: 280px !important;
  }



  span.icon-thewave.icon-close::after {
    font-family: 'BasicSans-Bold'  sans-serif !important;
    content    : "Chat with us!" !important;
    color      : #EFEFEF;
    font-size  : 15px;
    position: relative !important;
    bottom: 9px !important;
    left: 107px !important;
  }

  .vocalcom-nav .vocalcom-panel.chat-panel .panel-footer .chat-input-container .btn::after {

    content: none !important;

  }

  /* .vocalcom-nav .vocalcom-panel.chat-panel .panel-footer .chat-input-container .btn::after {
    background-image   : url(https://chat-na01.concentrix.com/hermes_net_v5/WAH/filled-sent.png) !important;
    background-position: center !important;
    background-repeat  : no-repeat !important;
  } */

  span.icon-thewave.icon-send {
    background-image   : url(https://chat-na01.concentrix.com/hermes_net_v5/WAH/filled-sent.png) !important;
    background-position: center !important;
    background-repeat  : no-repeat !important;

  }

  /* .vocalcom-nav .vocalcom-panel {
        
        min-width: 600px !important;
  width          : 600px !important;
  max-width      : 600px !important;
      } */





/* end of media */
}

textarea.form-control.the-wave-message-input.hidden-scroll-bar.dynamicText {
  /* min-height: 60px !important; */
}

.vocalcom-nav .vocalcom-panel .panel-footer {
  background-color: #ffffff !important;
  -webkit-box-shadow      : unset !important;
  box-shadow      : unset !important;
}

.vocalcom-nav .vocalcom-panel.chat-panel .panel-footer .chat-close-container .btn {
  background-color: #383F50 !important;
  border-color    : #383F50 !important;
}

button.btn.cancel-btn {
  margin-left: 15% !important;
}


div.col-md-2.hidden-sm.hidden-xs.the-wave-message-info>img {
  display: none;
}

div.col-md-2.hidden-sm.hidden-xs.the-wave-message-info::before {
  /*content: url(https://chat-na01.concentrix.com/hermes_net_v5/WAH/avatar-agent-lgp-60px.png) !important;*/
  content: url(https://chat-na01.concentrix.com/hermes_net_v5/WAH/concentrix-logo4.png) !important;
  width  : 20px !important;
  position: relative !important;
    bottom: 10px !important;
}

img.img-circle.the-wave-message-avatar::before {


  /*content: url(https://chat-na01.concentrix.com/hermes_net_v5/WAH/avatar-agent-lgp-60px.png) !important;*/
  content: url(https://chat-na01.concentrix.com/hermes_net_v5/WAH/concentrix-logo4.png) !important;


}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message .the-wave-message-info {
  padding: 7px !important;
  width  : 15px !important;

}

button.btn.btn-warning.close-chat-panel-btn.cancel-btn.dynamicText {
  margin-left: 10px !important;
}



div.panel-heading.clearfix {
  padding: 5px 0 !important;
  /*background-image : url(https://chat-na01.concentrix.com/hermes_net_v5/WAH/avatar-agent-lgp.png) !important;*/
  background-image : url(https://chat-na01.concentrix.com/hermes_net_v5/WAH/CNX_logo_Color.png) !important;
  background-repeat: no-repeat !important;
    background-position: bottom !important;
    background-position-x: 2% !important;
    background-position-y: 85% !important;
  color    : #EFEFEF !important;
  
    position: relative;
}

.vocalcom-nav .panel-default .panel-heading::after {

  position: absolute;
  display: inline-block !important;
  font-family: 'BasicSans-Bold', sans-serif !important;
  content    :  attr(data-value) !important;
  color      : #EFEFEF !important;
  padding    : 0 15px !important;
  line-height: 4.7 !important;
  white-space: pre;
  word-wrap  : break-word;
  position: absolute;
  top: 33px;
    left: 132px;
    font-weight: 600 !important;

}
.vocalcom-nav .panel-default .panel-heading::before {

  font-family: 'BasicSans-Regular', sans-serif !important;
  content    : attr(data-job) !important;
  color      : #EFEFEF !important;
  padding    : 0 15px !important;
  line-height: 4.7 !important;
  white-space: pre;
  word-wrap  : break-word;
  position: absolute;
  top: 52px;
    left: 135px;
    letter-spacing: 0.5px !important;

}

/* 
    div.the-wave-message-body-chev {
      background-color: #383F50 !important;
      color           : #EFEFEF !important;
    }
    div.the-wave-message-body {
      background-color: #383F50 !important;
      color           : #EFEFEF !important;
    }

    div.the-wave-message-body-container {
      
      color: #EFEFEF !important;
    }

    div.the-wave-message-body-container strong {
      
      color: #EFEFEF !important;
    } */

div.the-wave-message-body-container strong {

  color: #EFEFEF !important;
}

.vocalcom-nav .btn {
  padding: 0 0 10px 0 !important;
}

.vocalcom-nav .vocalcom-nav-element-container {
  position   : fixed !important;
  bottom     : 10% !important;
  right      : 3% !important;
  margin-left: 0 !important;
  left       : auto !important;
  z-index    : 100 !important;

}

button.btn.close-chat-panel-btn.btn-warning.dynamicText {
  padding: 6px 20px !important;
  margin : 5px 0 !important;
}




.vocalcom-nav * {
  font-family: 'Montserrat', sans-serif !important;
}

#vocalcom-navbar * {
  font-family: 'Montserrat', sans-serif !important;
}

/* 
    div[style="display: none;"].vocalcom-panel
    {
        background-color: pink;
        display         : block !important;
    }

    div.vocalcom-panel::before
 {
    width           :200px;
    height          :200px;
    background-color: pink;
    content         :"Hello World";
 }

  div[style="display: none;"].vocalcom-panel::before
 {
    width           :200px;
    height          :200px;
    background-color: pink;
    content         :"Hello World";
} */

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message.agent .the-wave-message-body .the-wave-message-body-chev {
  display: none !important;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message .the-wave-message-body .the-wave-message-body-chev {
  display: none !important;
}

.icon-thewave.icon-calendar {
  display: none !important;
}



.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message .edit-info span.edit-info-value:nth-child(4) {
  display: none !important;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message .edit-info span.edit-info-value .dynamicDateFormat {
  visibility: visible !important;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message.agent .the-wave-message-body {
  border-radius: 10px 0 0 0 !important;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message .the-wave-message-body {
  border-radius: 0 10px 0 0 !important;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message .the-wave-message-body span.the-wave-message-checked {
  display: none !important;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message .edit-info .icon-thewave.icon-user {
  display: none !important;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message.agent .the-wave-message-body {
  width: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  float: right !important;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message .the-wave-message-body {
  width: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  float: left !important;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message.agent .edit-info,
.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message.supervisor .edit-info {
  text-align: right !important;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message .edit-info {
  text-align: left !important;
  margin-top: 1rem !important;
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message .the-wave-message-body .the-wave-message-body-container p {
  margin: 0 !important;
}


@media (max-width: 767px), (max-width: 991px) and (min-width: 768px)
{
  .vocalcom-nav .vocalcom-panel.panel-expanded {
    min-width: 380px !important;
    width: 380px !important;
   max-width: 380px !important;
    bottom: 60px !important;
    position: fixed !important;
    bottom: 10% !important;
    right: 3% !important;
    margin-left: 0 !important;
    left: auto !important;
    z-index: 100 !important;
    height: 60vh !important;
    top: inherit !important;
  }
}

.vocalcom-nav .vocalcom-panel .panel-body .the-wave-message .the-wave-message-info {
  display: inline !important;
}

@media (min-width: 768px){
.vocalcom-nav .col-sm-12 {
    width: 80% !important;
}
}

.vocalcom-nav .col-xs-12 {
  width: 80% !important;
}

@media only screen and (max-device-width: 450px) {



/* @media (max-width: 450px){ */
  .vocalcom-nav .vocalcom-panel.panel-expanded .panel-body {
    top: 25vw !important;
    min-height: 80% !important;
  }

  .vocalcom-nav .vocalcom-panel.panel-expanded {
    min-width: 100%!important;
    width: 100%!important;
    max-width: 98px !important;
    position: fixed !important;
    bottom: 10%!important;
    right: 100px !important;
    left: 10px !important;
    z-index: 100!important;
    height: 90%!important;
    min-height: 90%!important;
    max-height: 90%!important;
    top: 0!important;
  }
  .vocalcom-nav .vocalcom-panel .panel-collapsed .vocalcom-visible {
    min-width: 94%!important;
    width: 98%!important;
    max-width: 98px !important;
    position: fixed !important;
    bottom: 10%!important;
    right: 100px !important;
    left: 10px !important;
    z-index: 100!important;
    height: 90%!important;
    min-height: 90%!important;
    max-height: 90%!important;
    top: 0!important;
  }
  .vocalcom-nav .panel-default .panel-heading {
    border-radius: 0 0 0 0 !important;
  }
  span.icon-thewave.icon-minimize {
    left: 255px !important;
  }
  span.icon-thewave.icon-close::after {
    left: 115px !important;
  }

  }