@charset "UTF-8";

#serviceEnContactApp {
  /* Font Variabelen */
  /* http://meyerweb.com/eric/tools/css/reset/
     v2.0 | 20110126
     License: none (public domain)
  */
  /* HTML5 display-role reset for older browsers */
  /*!
   * Bootstrap v3.3.7 (http://getbootstrap.com)
   * Copyright 2011-2016 Twitter, Inc.
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
   */
  /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
  /* TODO: add explanation & example html

  Note: because this is a global component all styles are important so the're context independent
  */
  /* base classes animated button */
  /* Include this file in your html if you are using the CSP mode. */
  /* LAYOUT WITH COLUMNS OF 100% HEIGHT: row with all 100% height columns to achieve vertical align middle

    Example
    =============
    2 columns: 1 with content, the second with an icon; when the content of column 1 grows, the icon should remain properly vertically aligned.
    Note: in this example the .clean-grid class is also used, to remove default margins & paddings (see below for the .clean-grid class).

   <div class="container clean-grid">
      <div class="row full-height-columns">
          <div class="col-xs-11">
              This is the CONTENT VOOR COLUMN 1.
              Putting in a lot of text so you can see the content of the column next to this one is centered.
              Putting in a lot of text so you can see the content of the column next to this one is centered.
              Putting in a lot of text so you can see the content of the column next to this one is centered.
              Putting in a lot of text so you can see the content of the column next to this one is centered.
              Putting in a lot of text so you can see the content of the column next to this one is centered.
              Putting in a lot of text so you can see the content of the column next to this one is centered.
          </div>
          <div class="col-xs-1 align-col-vertical-center">
              <i class="ohgs-icon-angle-right"></i>
          </div>
      </div>
   </div>
  */
  /* CLEAN GRID: removing margins and paddings from grid container, rows and columns */
  /* Example:
  <div class="container clean-grid">
      <div class="row">
          <div class="col-xs-11">
              This is the CONTENT for COLUMN 1.
          </div>
          <div class="col-xs-1">
              This is the CONTENT for COLUMN 2.
          </div>
      </div>
   </div>
   */
  /* Centering a single column inside a row*/
  /*
  Example:
  <div class="container">  <!--Note: class="container-fluid" not tested, but should also work-->
      <div class="row">
          <div class="col-xs-6 col-centered">
              column content goes here
          </div>
      </div>
  </div>

  Note: when trying to center multiple columns in the same row, these will then be stacked on top of each other (regardless of their width)
  */
  /* Clear fix 'hack' .(Toe te passen op container div die 'float'ende elementen bevat, zodat de hoogte correct in de DOM wordt doorgevoerd). */
  /*
  Allow angular.js to be loaded in body, hiding cloaked elements until
  templates compile.  The !important is important given that there may be
  other selectors that are more specific or come later and might alter display.
  */
  font-size: 15px;
  line-height: 26px;
  font-family: "zona-regular", sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#serviceEnContactApp html,#serviceEnContactApp body,#serviceEnContactApp div,#serviceEnContactApp span,#serviceEnContactApp object,#serviceEnContactApp h1,#serviceEnContactApp h2,#serviceEnContactApp h3,#serviceEnContactApp h4,#serviceEnContactApp h5,#serviceEnContactApp h6,#serviceEnContactApp p,#serviceEnContactApp a,#serviceEnContactApp q,#serviceEnContactApp s,#serviceEnContactApp var,#serviceEnContactApp b,#serviceEnContactApp u,#serviceEnContactApp i,#serviceEnContactApp dd,#serviceEnContactApp ul,#serviceEnContactApp li,#serviceEnContactApp form,#serviceEnContactApp label,#serviceEnContactApp th,#serviceEnContactApp header,#serviceEnContactApp output,#serviceEnContactApp time {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

#serviceEnContactApp header {
  display: block;
}

#serviceEnContactApp body {
  line-height: 1;
}

#serviceEnContactApp ul {
  list-style: none;
}

#serviceEnContactApp q {
  quotes: none;
}

#serviceEnContactApp q:before,#serviceEnContactApp q:after {
  content: "";
  content: none;
}

#serviceEnContactApp html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

#serviceEnContactApp body {
  margin: 0;
}

#serviceEnContactApp header,#serviceEnContactApp main {
  display: block;
}

#serviceEnContactApp [hidden],#serviceEnContactApp template {
  display: none;
}

#serviceEnContactApp a {
  background-color: transparent;
}

#serviceEnContactApp a:active,#serviceEnContactApp a:hover {
  outline: 0;
}

#serviceEnContactApp b {
  font-weight: bold;
}

#serviceEnContactApp h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

#serviceEnContactApp svg:not(:root) {
  overflow: hidden;
}

#serviceEnContactApp hr {
  box-sizing: content-box;
  height: 0;
}

#serviceEnContactApp button,#serviceEnContactApp input,#serviceEnContactApp select {
  color: inherit;
  font: inherit;
  margin: 0;
}

#serviceEnContactApp button {
  overflow: visible;
}

#serviceEnContactApp button,#serviceEnContactApp select {
  text-transform: none;
}

#serviceEnContactApp button,#serviceEnContactApp html input[type=button],#serviceEnContactApp input[type=reset],#serviceEnContactApp input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

#serviceEnContactApp button[disabled],#serviceEnContactApp html input[disabled] {
  cursor: default;
}

#serviceEnContactApp button::-moz-focus-inner,#serviceEnContactApp input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

#serviceEnContactApp input {
  line-height: normal;
}

#serviceEnContactApp input[type=checkbox],#serviceEnContactApp input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

#serviceEnContactApp input[type=number]::-webkit-inner-spin-button,#serviceEnContactApp input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

#serviceEnContactApp input[type=search] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}

#serviceEnContactApp input[type=search]::-webkit-search-cancel-button,#serviceEnContactApp input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

#serviceEnContactApp th {
  padding: 0;
}

#serviceEnContactApp * {
  box-sizing: border-box;
}

#serviceEnContactApp *:before,#serviceEnContactApp *:after {
  box-sizing: border-box;
}

#serviceEnContactApp html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#serviceEnContactApp body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #fff;
}

#serviceEnContactApp input,#serviceEnContactApp button,#serviceEnContactApp select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

#serviceEnContactApp a {
  color: #337ab7;
  text-decoration: none;
}

#serviceEnContactApp a:hover,#serviceEnContactApp a:focus {
  color: #23527c;
  text-decoration: underline;
}

#serviceEnContactApp a:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

#serviceEnContactApp hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eeeeee;
}

#serviceEnContactApp [role=button] {
  cursor: pointer;
}

#serviceEnContactApp h1,#serviceEnContactApp h2,#serviceEnContactApp h3,#serviceEnContactApp h4,#serviceEnContactApp h5,#serviceEnContactApp h6,#serviceEnContactApp .h1,#serviceEnContactApp .h2,#serviceEnContactApp .h3,#serviceEnContactApp .h4,#serviceEnContactApp .h5,#serviceEnContactApp .h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}

#serviceEnContactApp h1,#serviceEnContactApp .h1,#serviceEnContactApp h2,#serviceEnContactApp .h2,#serviceEnContactApp h3,#serviceEnContactApp .h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

#serviceEnContactApp h4,#serviceEnContactApp .h4,#serviceEnContactApp h5,#serviceEnContactApp .h5,#serviceEnContactApp h6,#serviceEnContactApp .h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}

#serviceEnContactApp h1,#serviceEnContactApp .h1 {
  font-size: 36px;
}

#serviceEnContactApp h2,#serviceEnContactApp .h2 {
  font-size: 30px;
}

#serviceEnContactApp h3,#serviceEnContactApp .h3 {
  font-size: 24px;
}

#serviceEnContactApp h4,#serviceEnContactApp .h4 {
  font-size: 18px;
}

#serviceEnContactApp h5,#serviceEnContactApp .h5 {
  font-size: 14px;
}

#serviceEnContactApp h6,#serviceEnContactApp .h6 {
  font-size: 12px;
}

#serviceEnContactApp p {
  margin: 0 0 10px;
}

#serviceEnContactApp .text-left {
  text-align: left;
}

#serviceEnContactApp .text-right {
  text-align: right;
}

#serviceEnContactApp .text-success {
  color: #3c763d;
}

#serviceEnContactApp a.text-success:hover,#serviceEnContactApp a.text-success:focus {
  color: #2b542c;
}

#serviceEnContactApp .text-info {
  color: #31708f;
}

#serviceEnContactApp a.text-info:hover,#serviceEnContactApp a.text-info:focus {
  color: #245269;
}

#serviceEnContactApp .page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eeeeee;
}

#serviceEnContactApp ul {
  margin-top: 0;
  margin-bottom: 10px;
}

#serviceEnContactApp ul ul {
  margin-bottom: 0;
}

#serviceEnContactApp .list-inline {
  padding-left: 0;
  list-style: none;
  margin-left: -5px;
}

#serviceEnContactApp .list-inline > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}

#serviceEnContactApp dd {
  line-height: 1.428571429;
}

#serviceEnContactApp dd {
  margin-left: 0;
}

#serviceEnContactApp .container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

#serviceEnContactApp .container:before,#serviceEnContactApp .container:after {
  content: " ";
  display: table;
}

#serviceEnContactApp .container:after {
  clear: both;
}

@media (min-width: 768px) {
  #serviceEnContactApp .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  #serviceEnContactApp .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  #serviceEnContactApp .container {
    width: 1170px;
  }
}

#serviceEnContactApp a.button-white,#serviceEnContactApp button.button-white {
  padding: 6px 16px !important;
  text-align: center !important;
  min-width: 180px !important;
  background-image: none !important;
  border: 1px solid rgba(0, 0, 0, 0) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  display: inline-block !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  line-height: 26px;
  font-size: 15px;
  font-family: "zona-semibold", sans-serif !important;
}

#serviceEnContactApp a.button-white,#serviceEnContactApp a.button-white:visited,#serviceEnContactApp a.button-white:active,#serviceEnContactApp a.button-white:hover,#serviceEnContactApp button.button-white,#serviceEnContactApp button.button-white:visited,#serviceEnContactApp button.button-white:active,#serviceEnContactApp button.button-white:hover {
  background-color: white !important;
  color: #025FAA !important;
  text-decoration: none !important;
}

#serviceEnContactApp a.button-disabled,#serviceEnContactApp button.button-disabled {
  background-color: #eee !important;
  color: #bbb;
  cursor: default;
}

#serviceEnContactApp a,#serviceEnContactApp button {
  /* green animated button */
  /* white animated button */
  /* blue animated button */
}

#serviceEnContactApp a[class*=buttonanimated-],#serviceEnContactApp button[class*=buttonanimated-] {
  text-decoration: none;
  display: inline-block;
  border-radius: 5px;
  border: none;
  font-family: "zona-semibold", sans-serif;
  font-size: 15px;
  overflow: hidden;
  position: relative;
  padding: 8px 16px;
  text-align: center;
  cursor: pointer;
  line-height: 26px;
  -o-transition: color 500ms ease;
  transition: color 500ms ease;
}

#serviceEnContactApp a[class*=buttonanimated-] span,#serviceEnContactApp button[class*=buttonanimated-] span {
  position: relative;
  z-index: 2;
}

@media (max-width: 767px) {
  #serviceEnContactApp a[class*=buttonanimated-],  #serviceEnContactApp button[class*=buttonanimated-] {
    width: 100%;
  }
}

#serviceEnContactApp a[class*=buttonanimated-]:hover:after,#serviceEnContactApp button[class*=buttonanimated-]:hover:after {
  -webkit-transform: skew(-45deg) translateX(0%);
  -o-transform: skew(-45deg) translateX(0%);
  transform: skew(-45deg) translateX(0%);
}

#serviceEnContactApp a[class*=buttonanimated-]:after,#serviceEnContactApp button[class*=buttonanimated-]:after {
  position: absolute;
  top: 0;
  left: -40px;
  right: -40px;
  bottom: 0;
  content: "";
  -webkit-transform: skew(-45deg) translateX(-100%);
  -o-transform: skew(-45deg) translateX(-100%);
  transform: skew(-45deg) translateX(-100%);
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  z-index: 1;
}

@media (min-width: 768px) {
  #serviceEnContactApp a[class*=buttonanimated-]:first-of-type,  #serviceEnContactApp button[class*=buttonanimated-]:first-of-type {
    margin-right: 16px;
  }
}

#serviceEnContactApp .clearfix::after {
  content: "";
  clear: both;
  display: table;
}

#serviceEnContactApp app .chat {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000000000;
  background-color: rgba(255, 255, 255, 0.5);
}

#serviceEnContactApp app .chat .avatar-image {
  background-image: url("../img/avatar-krokodil.svg");
  background-size: contain;
}

#serviceEnContactApp app .chat.page-blocking {
  /* page blocker*/
}

#serviceEnContactApp app .chat #chat-content {
  position: fixed;
  bottom: 0;
  right: 30px;
  width: 520px;
  background-color: rgba(255, 255, 255, 0);
  color: #004078;
  -webkit-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
  z-index: 999;
  transition: -webkit-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s, -o-transform 0.5s;
}

@media (max-width: 767px) {
  #serviceEnContactApp app .chat #chat-content {
    width: calc(100% + 30px);
    right: -15px;
  }
}

#serviceEnContactApp app .chat #chat-content.window-closed {
  -webkit-transform: translateY(110%);
  -o-transform: translateY(110%);
  transform: translateY(110%);
}

#serviceEnContactApp app .chat #chat-content.window-minimized {
  -webkit-transform: translateY(calc(100% - 66px ));
  -o-transform: translateY(calc(100% - 66px ));
  transform: translateY(calc(100% - 66px ));
}

#serviceEnContactApp app .chat #chat-content.window-minimized .header .avatar-image {
  opacity: 1;
}

#serviceEnContactApp app .chat #chat-content.window-maximized {
  -webkit-transform: translateY(0%);
  -o-transform: translateY(0%);
  transform: translateY(0%);
}

#serviceEnContactApp app .chat #chat-content.window-maximized .header .avatar-image {
  opacity: 0;
}

#serviceEnContactApp app .chat #chat-content .header .avatar-image {
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

#serviceEnContactApp app .chat #chat-content .outer-border {
  border-radius: 35px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 20px 20px 0px 20px;
  max-height: calc(100vh - 80px);
}

#serviceEnContactApp app .chat #chat-content .outer-border .content-blok {
  background: #fff;
  border-radius: 25px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 0 0 20px 0;
  box-shadow: 0px -3px 20px 3px rgba(0, 64, 120, 0.5);
}

#serviceEnContactApp app .chat #chat-content .header {
  position: relative;
  height: 48px;
  right: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 1;
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-left: 8px;
  padding-right: 13px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

#serviceEnContactApp app .chat #chat-content .header .avatar-image {
  height: 30px;
  width: 35px;
  background-size: cover;
}

#serviceEnContactApp app .chat #chat-content .header a {
  cursor: pointer;
  vertical-align: middle;
  color: #004078;
  font-family: "zona-semibold", sans-serif;
}

#serviceEnContactApp app .chat #chat-content .header a:hover,#serviceEnContactApp app .chat #chat-content .header a:focus {
  text-decoration: none;
  background-color: #eff6fb;
  border-radius: 50%;
}

#serviceEnContactApp app .chat #chat-content .header a.min-max {
  padding: 5px 8px 5px 11px;
}

#serviceEnContactApp app .chat #chat-content .header a.min-max:hover,#serviceEnContactApp app .chat #chat-content .header a.min-max:focus {
  border-radius: 18px;
}

#serviceEnContactApp app .chat #chat-content .header a span.ohgs-icon-angle-down,#serviceEnContactApp app .chat #chat-content .header a span.ohgs-icon-times,#serviceEnContactApp app .chat #chat-content .header a span.ohgs-icon-angle-up {
  vertical-align: middle;
  margin-left: 5px;
}

#serviceEnContactApp app .chat #chat-content .header a span.ohgs-icon-angle-down,#serviceEnContactApp app .chat #chat-content .header a span.ohgs-icon-angle-up {
  /* fixed placeholder voor icoon om te zorgen dat tekst&icoon niet opnieuw uitlijnen wanneer het icoon geladen is */
  width: 24px;
  display: inline-block;
  /* end fixed placeholder */
  font-size: 24px;
}

#serviceEnContactApp app .chat #chat-content .header a span.ohgs-icon-times {
  /* fixed placeholder voor icoon om te zorgen dat tekst&icoon niet opnieuw uitlijnen wanneer het icoon geladen is */
  width: 22px;
  display: inline-block;
  /* end fixed placeholder */
  font-size: 22px;
  margin: 3px 5px 3px 5px;
}

#serviceEnContactApp chat-historie {
  display: block;
  overflow-y: auto;
  max-height: calc(100vh - 243px);
  min-height: 60px;
  padding: 20px 25px 0 25px;
  box-shadow: inset 0 0 10px #fff;
  position: relative;
}

#serviceEnContactApp chat-historie .avatar-image {
  background-image: url("../img/avatar-krokodil.svg");
  background-size: contain;
}

#serviceEnContactApp chat-historie .avatar-image.unhappy {
  background-image: url("../img/avatar-krokodil-uitgepraat.svg");
}

#serviceEnContactApp chat-historie .reserveMinHeight {
  min-height: 260px;
}

@media (max-width: 767px) {
  #serviceEnContactApp chat-historie {
    padding: 20px 15px 0 15px;
  }
}

#serviceEnContactApp chat-historie .message {
  border-radius: 15px;
  padding: 14px;
  position: relative;
  width: auto;
  max-width: 85%;
  word-wrap: break-word;
}

#serviceEnContactApp chat-historie .message p {
  margin: 0;
}

#serviceEnContactApp chat-historie .message a {
  font: 15px "zona-semibold", sans-serif;
}

#serviceEnContactApp chat-historie .message a.ohgs-link,#serviceEnContactApp chat-historie .message a.ohgs-link:visited {
  text-decoration: underline;
  cursor: pointer;
  -o-transition: all 350ms;
  transition: all 350ms;
  color: #004078;
}

#serviceEnContactApp chat-historie .message a.ohgs-link:hover,#serviceEnContactApp chat-historie .message a.ohgs-link:focus,#serviceEnContactApp chat-historie .message a.ohgs-link:visited:hover,#serviceEnContactApp chat-historie .message a.ohgs-link:visited:focus {
  color: #0075ba;
}

#serviceEnContactApp chat-historie .message ul {
  list-style: disc;
  padding-left: 20px;
}

#serviceEnContactApp chat-historie [class*=-message-container] {
  margin-top: 15px;
}

#serviceEnContactApp chat-historie .bot-message-container,#serviceEnContactApp chat-historie .error-message-container,#serviceEnContactApp chat-historie .opening-message-container {
  width: 100%;
  display: inline-block;
}

#serviceEnContactApp chat-historie .bot-message-container .message,#serviceEnContactApp chat-historie .error-message-container .message,#serviceEnContactApp chat-historie .opening-message-container .message {
  background: #E0EEF7;
  float: left;
  clear: both;
}

#serviceEnContactApp chat-historie .error-message-container {
  color: red;
}

#serviceEnContactApp chat-historie .feedback-start-message-container {
  margin-top: 5px;
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message {
  text-align: right;
  background: none;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  margin-top: 0;
  max-width: 100%;
}

@media (max-width: 767px) {
  #serviceEnContactApp chat-historie .feedback-start-message-container .message {
    width: 100%;
  }
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .text {
  width: 46%;
  text-align: right;
  display: inline-block;
  line-height: 18px;
  vertical-align: middle;
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog {
  display: inline-block;
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul {
  margin: 5px 0 0 0;
  list-style: none;
  padding-left: 0;
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li {
  display: inline-block;
  height: 46px;
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li .dialog-option {
  text-align: left;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  border: none;
  margin: 0 0 0 12px;
  padding: 0 0 0 9px;
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li .dialog-option .feedback-icon {
  vertical-align: middle;
  display: inline-block;
  font-size: 28px;
  padding-bottom: 3px;
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li .dialog-option.positive {
  background-color: #159933;
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li .dialog-option.positive .feedback-icon {
  color: white;
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li .dialog-option.positive:hover {
  box-shadow: 0 4px 8px rgba(21, 153, 51, 0.3);
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li .dialog-option.positive.selected {
  cursor: default;
  box-shadow: none;
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li .dialog-option.positive.selected:hover {
  box-shadow: none;
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li .dialog-option.positive.unselected {
  cursor: default;
  background-color: #e0eef7;
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li .dialog-option.positive.unselected .feedback-icon {
  color: #0075ba;
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li .dialog-option.positive.unselected:hover {
  box-shadow: none;
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li .dialog-option.negative {
  background-color: #d01a00;
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li .dialog-option.negative .feedback-icon {
  color: white;
  -webkit-transform: scale(-1);
  -o-transform: scale(-1);
  transform: scale(-1);
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li .dialog-option.negative:hover {
  box-shadow: 0 4px 8px rgba(208, 26, 0, 0.3);
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li .dialog-option.negative.selected {
  cursor: default;
  box-shadow: none;
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li .dialog-option.negative.selected:hover {
  box-shadow: none;
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li .dialog-option.negative.unselected {
  cursor: default;
  background-color: #e0eef7;
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li .dialog-option.negative.unselected .feedback-icon {
  color: #0075ba;
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li .dialog-option.negative.unselected:hover {
  box-shadow: none;
}

#serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li .dialog-option:focus {
  outline: 0;
}

@media (max-width: 767px) {
  #serviceEnContactApp chat-historie .feedback-start-message-container .message .dialog ul li .dialog-option {
    margin: 0 0 0 8px;
  }
}

#serviceEnContactApp chat-historie .bot-message-container .avatar-header {
  color: #004078;
  margin-bottom: 10px;
}

#serviceEnContactApp chat-historie .bot-message-container .avatar-header .avatar-image {
  float: left;
  height: 53px;
  width: 60px;
}

#serviceEnContactApp chat-historie .bot-message-container .avatar-header .avatar-name {
  float: left;
  margin: 16px 0 0 7px;
  font-size: 17px;
  font-family: "zona-extrabold", sans-serif;
}

#serviceEnContactApp chat-historie .bot-message-container .message {
  margin-top: 10px;
}

#serviceEnContactApp chat-historie .bot-message-container .message .dialog ul {
  margin: 5px 0 0 0;
  list-style: none;
  padding-left: 0;
}

#serviceEnContactApp chat-historie .bot-message-container .message .dialog ul .dialog-option {
  border-radius: 5px;
  border: 1px solid #97bfd9;
  background-color: white;
  margin-top: 5px;
  width: 100%;
  padding: 9px 12px;
  text-align: left;
  font-family: "zona-semibold", sans-serif;
  display: inline-block;
}

#serviceEnContactApp chat-historie .bot-message-container .message .dialog ul .dialog-option.selected {
  box-shadow: 0 1px 4px #999;
  border: none;
  padding: 10px 12px;
}

#serviceEnContactApp chat-historie .bot-message-container .message .dialog ul .dialog-option.unselected {
  background-color: #eff6fb;
  font-family: "zona-regular", sans-serif;
}

#serviceEnContactApp chat-historie .bot-message-container .message .dialog ul .dialog-option:focus {
  outline: 0;
}

#serviceEnContactApp chat-historie .bot-message-container .message.first {
  margin-top: 15px;
}

#serviceEnContactApp chat-historie .bot-message-container .message.first:before {
  width: 25px;
  height: 25px;
  position: absolute;
  content: url("../img/chat-bubble-arrow-bot.svg");
  display: inline-block;
  top: -17px;
  left: 16px;
}

#serviceEnContactApp chat-historie .bot-message-container.opening .avatar-header {
  text-align: center;
  margin: 0 0 10px 0;
}

#serviceEnContactApp chat-historie .bot-message-container.opening .avatar-header .title {
  font-size: 30px;
  font-family: "zona-extrabold", sans-serif;
}

#serviceEnContactApp chat-historie .bot-message-container.opening .avatar-header .avatar-image {
  margin: 24px auto 10px;
  height: 88px;
  width: 100px;
  float: none;
}

#serviceEnContactApp chat-historie .bot-message-container.opening .avatar-header .avatar-name {
  font-size: 17px;
  font-family: "zona-extrabold", sans-serif;
  float: none;
  margin: 0 0 0 7px;
}

#serviceEnContactApp chat-historie .bot-message-container.opening .message.first {
  margin: 15px auto 0 auto;
  float: none;
  max-width: 80%;
}

#serviceEnContactApp chat-historie .bot-message-container.opening .message.first:before {
  width: 25px;
  height: 25px;
  position: absolute;
  content: url("../img/chat-bubble-arrow-bot.svg");
  display: inline-block;
  top: -17px;
  left: 40%;
}

#serviceEnContactApp chat-historie .bot-message-container.escalation .avatar-header .avatar-image {
  background-image: url("../img/avatar-krokodil-uitgepraat.svg");
}

#serviceEnContactApp chat-historie .user-message-container .message {
  background: #004D99;
  background: -o-linear-gradient(left, #0075ba, #004D99);
  background: linear-gradient(to right, #0075ba, #004D99);
  color: white;
  float: right;
  margin-right: 15px;
  font-family: "zona-semibold", sans-serif;
}

#serviceEnContactApp chat-historie .user-message-container .message:before {
  width: 25px;
  height: 25px;
  position: absolute;
  content: url("../img/chat-bubble-arrow-customer.svg");
  display: inline-block;
  top: 18px;
  left: 100%;
}

#serviceEnContactApp chat-input {
  display: block;
  position: relative;
  height: 75px;
  padding: 20px 25px 0px 25px;
}

@media (max-width: 767px) {
  #serviceEnContactApp chat-input {
    padding: 20px 15px 0px 15px;
  }
}

#serviceEnContactApp chat-input input {
  background: #FFF;
  color: #004078;
  border-radius: 15px;
  border: 1px solid #BDD8EA;
  padding: 15px 45px 15px 15px;
  display: inline-block;
  width: 100%;
  outline: none;
  height: 55px;
  font-family: "zona-semibold", sans-serif;
  font-size: 17px;
}

#serviceEnContactApp chat-input input:focus {
  background: #FFFCD9;
  box-shadow: inset 0 1px 4px #999;
  border: 1px solid #fff;
}

#serviceEnContactApp chat-input input::-webkit-input-placeholder {
  color: #004078;
  opacity: 0.5;
  /* Firefox */
  font-size: 16px;
  font-family: "zona-semibold", sans-serif;
}

#serviceEnContactApp chat-input input::-moz-placeholder {
  color: #004078;
  opacity: 0.5;
  /* Firefox */
  font-size: 16px;
  font-family: "zona-semibold", sans-serif;
}

#serviceEnContactApp chat-input input::-ms-input-placeholder {
  color: #004078;
  opacity: 0.5;
  /* Firefox */
  font-size: 16px;
  font-family: "zona-semibold", sans-serif;
}

#serviceEnContactApp chat-input input::placeholder {
  color: #004078;
  opacity: 0.5;
  /* Firefox */
  font-size: 16px;
  font-family: "zona-semibold", sans-serif;
}

#serviceEnContactApp chat-input input:disabled {
  background: #eee;
}

#serviceEnContactApp chat-input .send-button {
  display: block;
  position: absolute;
  right: 40px;
  top: calc(20px + 15px);
  border: none;
  background: none;
  height: 30px;
  padding: 0;
  outline: none;
}

@media (max-width: 767px) {
  #serviceEnContactApp chat-input .send-button {
    right: 30px;
  }
}

#serviceEnContactApp chat-input .send-button:hover {
  text-decoration: none;
  cursor: pointer;
}

#serviceEnContactApp chat-input .send-button [class^=ohgs-icon-],#serviceEnContactApp chat-input .send-button [class*=" ohgs-icon-"] {
  font-size: 30px;
  font-weight: bold;
}

#serviceEnContactApp [ng\:cloak],#serviceEnContactApp [ng-cloak],#serviceEnContactApp .ng-cloak {
  display: none !important;
}