body {
  background: #f6f6f6;
  padding: 100 px;
  height: 100%;
  font-family:Helvetica, sans-serif;
}

@keyframes loader-rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader02 {
  width: 176px;
  height: 176px;
  border: 8px solid rgba(245, 245, 245, 1);
  border-top-color: #ed7000;
  border-radius: 50%;
  position: relative;
  animation: loader-rotate 2s linear infinite;
  top: 50%;
}

.pos-timer {
  position: relative;
  margin-top: 41px;
  margin-left: calc(73% - 176px);
}

.pos-minute {
  position: absolute;
  top: 37px;
  left: 61px;
}

.no-minute {
  font-size: 84px;
  color: #ed7000;
  text-align: center;
  line-height: 75px;

}

.minute {
  font-size: 18px;
  text-align: center;
  color: #ed7000;
  opacity: 0.4;
}

.wait-message-counter {

  font-size: 15px;
  text-align: center;
  padding-top: calc(26% + 60px);
  padding-left: 10px;
  padding-right: 10px;

}

.bottom-link {
  color: #000;
  position: absolute;
  bottom: 41px;
  left: 41%;
}

.chat-container {
  max-width: 330px;

  min-height: 560px;
  background: #fff;
  -webkit-box-shadow: 0px 33px 126px -1px rgba(227, 227, 227, 0.50);
  -moz-box-shadow: 0px 33px 126px -1px rgba(227, 227, 227, 0.50);
  /* box-shadow: 0px 33px 126px -1px rgba(227, 227, 227, 0.50); */
  box-shadow: 0px 0px 19px 1px rgba(227, 227, 227, 0.7);
  display: block;
  z-index: 2;
  position: relative;

}

.chat-header-green {
  background: #000000;
  height: 70px;
  position: relative;
  display: flex;
}

.chat-header-green p,
.chat-header-green .title {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  padding-top: 28px;
  flex: 0.9;
}

.chat-container-survey {
  width: 630px;
  min-height: 560px;
  background: #fff;
  display: block;
  z-index: 2;
  position: relative;
  border-right: 1px solid rgba(8, 8, 8, 0.04);
  z-index: 999999;

}

.chat-header-green-survey {
  background: #000000;
  height: 70px;
  position: relative;
}

.chat-header-green-survey p {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  padding-top: 28px;
}

.chat-operator-bot {
  color: #fff;
  font-size: 14px;
  position: absolute;
  top: 17px;
  left: 57px;
}

.chat-operator-status-bot {
font-size: 11px;
  opacity: 0.7;
  color: #fff;
  position: absolute;
  top: 36px;
  left: 58px;
}

a.interactive-btn {
  display: block;
  background: #ffffff;
  border: 1px solid #ff7900;
  padding: 12px 10px;
  margin: 5px 10px;
  text-align: center;
  color: #ff7900;
  text-decoration: none;
  font-family: Helvetica, sans-serif;
}

a.interactive-btn:hover {
  text-decoration: none;
  cursor: pointer;
  background: #ff7900;
  color: #ffffff;
  transition: 0.4s;
}

a.interactive-btn:hover .text-muted{
  color: black;
}

a.interactive-btn:visited {
  text-decoration: none;
}



a.omni-btn {
  display: block;
  padding: 10px;
  color: #ffffff;
  font-weight: bold;
  background-color: #ff7900;
  text-align: center;
  cursor: pointer;
  /* border: 2px solid #000; */
  width: 70%;
  left: 0;
  right: 0;
  margin: 1px auto;
  font-family: Helvetica, sans-serif;
  &.bigger-width {
    width: 100%;
  }
}

a.omni-btn-light {
  display: block;
  padding: 10px;
  color: #000;
  font-weight: bold;
  background-color: #ffffff;
  border: 2px solid #000;
  text-align: center;
  cursor: pointer;
  width: 70%;
  left: 0;
  right: 0;
  margin: 1px auto;
  font-family: Helvetica, sans-serif;
}

a.omni-btn:disabled,
a.omni-btn.disabled {
  background: #cccccc;
  border-color: #cccccc;
  cursor: default;
  &:hover{
    text-decoration: none !important;
  }
}

.footer-buttons {
  position: absolute;
  bottom: 0px;
  height: 115px;
}

/*a.ico_minimize {
  width: 20px;
  height: 15px;
  background: url(../img/ico_min.svg) no-repeat bottom center;
  display: block;
  position: absolute;
  top: 28px;
  right: 32px;
}

a.ico_close {
  width: 20px;
  height: 15px;
  background: url(../img/ico_close.svg) no-repeat bottom center;
  display: block;
  position: absolute;
  top: 28px;
  right: 10px;
  cursor: pointer;
}*/

.login-link-area {
  padding-top: 40px;
}

.or-div-area {
  color: #9b9b9b;
  padding-top: 20px;
}

.content a {
  color: #000;
}

.content a:hover {
  color: #000;
  text-decoration: underline;
}

.text-fields-area {
  padding: 25px 25px;
}

.text-fields-area .form-control {
  border-radius: 0px;
  box-shadow: none;
  border-color: #000;
}

.form-style .form-control {
  border-radius: 0px;
  box-shadow: none;
  border-color: #ccc;
  margin-left: 22px;
}

.error-field {
  border-color: red !important;
  color: red;
}

.checkbox label, .radio label {

  line-height: 20px;
}

.form-group {
  margin-bottom: 0px;
}

.error-message {
  color: red;
  font-size: 12px;
  padding: 1px 10px;
  min-height: 20px;
}

.not-visible {
  visibility: hidden;
}

.info-text-form {
  color: #b9b9b9;
  font-size: 11px;
  font-style: italic;

}

.w100 {
  width: 100% !important;
}

.question {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  padding: 0 9px;
  padding-top: 45%;
  padding-bottom: 20px;
}

.wait-message {
  font-size: 15px;
  text-align: center;
  padding-top: calc(50% + 60px);
  padding-left: 10px;
  padding-right: 10px;
}
.wait-message.helpdesk {
  padding-top: calc(30% + 60px);
}

.wait-message-long {
  font-size: 15px;
  text-align: center;
  padding-top: 45%;
  padding-left: 10px;
  padding-right: 10px;
}

.text-small-btn {
  color: #515151;
  font-size: 10px;
  font-weight: 200;
}

.text-small-btn.subtitle{
  display: block !important;
  padding-top: 5px;
  font-size: 12px;
}

.description-section{
  margin-top: 15%;
}

.text-btns-page {
  font-size: 15px;
  text-align: center;
  padding-top: 30px;
  padding-left: 10px;
  padding-right: 10px;
  p{
    white-space: break-spaces;
    padding-left: 10px;
  }
}

.full-height-div {
  height: 100%;
}

.question-close-session {
  margin-top: 57%;
  text-align: center;
  padding-bottom: 20px;
}

.gdpr-text {
  text-align: center;
  margin: 100px 20px 20px 20px;
}

.err-text{
  text-align: center;
  margin: 100px 30px 30px 20px;
}

.button-start-chat {
  width: 212px;
  height: 44px;
  background: url(../img/ico-chat-orange.svg) no-repeat center top;
  display: block;
  position: absolute;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
  z-index: 1;
}

.button-chat-opened {
  width: 68px;
  height: 68px;
  background: url(../img/ico-chat-open.png) no-repeat center top;
  display: block;
  position: absolute;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
  z-index: 1;
}

.transcript-send {
  position: absolute;
  bottom: 26px;
  font-size: 12px;
}

.bg-grey {
  background: #f3f3f3;
}

.relative {
  position: relative;
}

.auth-area {
  height: 40px;
  width: 100%;
  -webkit-box-shadow: 0px 2px 6px -2px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 2px 6px -2px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 2px 6px -2px rgba(0, 0, 0, 0.15);
  background: #fff;
  position: absolute;
  top: 70px;
  z-index: 9999999;
  text-align: center;
}

.chat-type-area {
  position: absolute;
  bottom: 0px;
  height: 65px;
  background: #fff;
  width: 100%;

}

.pr-pl-none {
  padding-right: 0px;
  padding-left: 0px;
}

.mr-ml-none {
  margin-right: 0px;
  margin-left: 0px;
}

.chat-conversation-area {
  background: #f6f6f6;
  width: 100%;
  height: calc(100% - 175px);
  overflow-y: auto;
  position: absolute;
  top: 110px;

}
.top-auto {
  top: auto
}

textarea:hover,
input:hover,
textarea:active,
input:active,
textarea:focus,
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active {
  outline: 0px !important;
  -webkit-appearance: none;
}

#intercom-container .intercom-composer-emoji-button, #intercom-container .intercom-composer-gif-button, #intercom-container .intercom-composer-send-button, #intercom-container .intercom-composer-upload-button {
  position: relative;
  float: left;
  display: inline-block;
  cursor: pointer;
  opacity: .7;
  height: 55px;
}

textarea {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #565867;
  background-color: #fff;
  resize: none;
  border: none;
  transition: background-color .2s ease, box-shadow .2s ease;

  box-sizing: border-box;
  padding: 18px;
  padding-right: 60px;
  padding-left: 21px;
  width: 100%;
  height: 100%;
  font-family: "intercom-font", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.33;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
  padding-top: 24px;

}

.send-message {
  width: 61px;
  height: 38px;
  position: absolute;
  bottom: 13px;
  right: 2px;
  background: url(../img/send-msg.svg) no-repeat center;
  border: 0px;
}

@-webkit-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading {
  display:block;
  margin:20px auto;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  border: 0.25rem solid rgba(255, 255, 255, 0.2);
  border-top-color: black;
  animation: spin 1s infinite linear;
}
.loading--double {
  border-style: double;
  border-width: .5rem;
}

.loading-send-message {
  float: right;
  margin-right: 20px;
  border-top-color: rgba(0, 0, 0, 0.4);
}

/* button.send-message {
  width: 21px;
  height: 18px;
  position: absolute;
  bottom: 23px;
  right: 20px;
  background: url(../img/send-msg.svg) no-repeat center;
  border: 0px;
} */

.send-message:hover:not(.disabled) {
  opacity: 0.7;
}

a.auth-link {
  color: #000;
  font-size: 12px;
  text-align: center;
  margin-top: 12px;
  display: block;
}

.btn-grey {
  background: #f4f4f4;
  padding: 10px;
  height: 60px;
  margin: 19px;
  padding-top: 12px;
  border-radius: 5px;
}

.btn-text {
  font-size: 22px;
  font-weight: bold;
  line-height: 14px;
  margin-top: 6px;
}

a.auth-link:hover {
  color: #000;
}

.notif-message {
  border-radius: 14px;
  background: #f4e9da;
  padding: 12px;
  color: #000000;
  font-style: italic;
  margin: 12px;
  padding-left: 17px;
  padding-right: 20px;
  font-size: 11px;
}

.bonus-message {
  border-radius: 14px;
  background: #f4e9da;
  color: #837c72;
  font-style: italic;
  margin-top: 135px;
  padding: 10px 17px;
  font-size: 11px;
}

.auth-ok {

  padding-left: 15px;
  font-size: 12px;
  color: #000;
  display: block;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gDTwhLS0gR2VuZXJhdGVkIGJ5IExheWVyaGVybyBTVkcgRXhwb3J0ZXI6IGh0dHA6Ly93d3cubGF5ZXJoZXJvLmNvbS9waG90b3Nob3Atc3ZnLWV4cG9ydGVyIC0tPg08IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg08c3ZnIHZlcnNpb249IjEuMSIgYmFzZVByb2ZpbGU9ImZ1bGwiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOmV2PSJodHRwOi8vd3d3LnczLm9yZy8yMDAxL3htbC1ldmVudHMiIHdpZHRoPSIxMSIgaGVpZ2h0PSIxMSIgdmlld0JveD0iMCAwIDExIDExIj4NPGcgdHJhbnNmb3JtPSJzY2FsZShOYU4pIiA+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiAgZmlsbD0icmdiKCAyMzcsIDExMiwgMCApIg0gZD0iTTUuNTAwLC0wLjAwMCBDOC41MzgsLTAuMDAwIDExLjAwMCwyLjQ2MiAxMS4wMDAsNS41MDAgQzExLjAwMCw4LjUzOCA4LjUzOCwxMS4wMDAgNS41MDAsMTEuMDAwIEMyLjQ2MiwxMS4wMDAgLTAuMDAwLDguNTM4IC0wLjAwMCw1LjUwMCBDLTAuMDAwLDIuNDYyIDIuNDYyLC0wLjAwMCA1LjUwMCwtMC4wMDAgWiIvPg08cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiICBmaWxsPSJyZ2IoIDI1NSwgMjU1LCAyNTUgKSINIGQ9Ik0zLjk4NSw1LjEyNiBMNC43NDYsNS45NDEgQzQuNzQ2LDUuOTQxIDUuMDQ0LDYuMzI5IDUuMzQyLDUuOTQxIEw2Ljk3Miw0LjA4MCBDNi45NzIsNC4wODAgNy4xNDksMy44OTAgNy4zNzEsNC4xMDAgTDcuOTIzLDQuNjkxIEM3LjkyMyw0LjY5MSA4LjEzMiw0Ljg2OCA3Ljg3Miw1LjExOSBMNS4zMTAsNy44NjQgQzUuMzEwLDcuODY0IDUuMDQ0LDguMTcwIDQuODA5LDcuODc4IEwzLjEzNCw2LjA4NCBDMy4xMzQsNi4wODQgMi44ODcsNS44NTMgMy4wNTksNS42MjkgTDMuNjE3LDUuMDMxIEMzLjYxNyw1LjAzMSAzLjc4Miw0Ljg4MSAzLjk4NSw1LjEyNiBaIi8+DTwvZz48L3N2Zz4N') no-repeat left;
  display: inline-block;
  margin: 11px auto;
  padding-top: 2px;
}

.clear {
  clear: both;
}

.name-operator {
  color: #000000;
  font-size: 13px;
  font-weight: bold;
  margin-left: 22px;
  display: inline-block;
  margin-top: 10px;
}

.title-operator {
  font-size: 11px;
  color: #adadad;
  font-style: italic;
}

.message-operator {
  border-radius: 14px;
  color: #000000;
  font-size: 13px;
  padding: 13px;
  background: #ffffff;
  display: inline-block;
  margin: 5px 10px;
  margin-top: 2px;
  max-width: 80%;
}

.hour {
  font-size: 11px;
  color: #adadad;
  margin-left: 22px;
}

.name-customer {
  color: #000;
  font-size: 13px;
  margin-right: 22px;
  float: right;
  font-weight: bold;
  padding-left: 14px;

}

.message-customer {
  border-radius: 14px;
  color: #ffffff;
  font-size: 13px;
  padding: 13px;
  background:#ff7900;
  display: inline-block;
  margin: 5px 10px;
  margin-top: 2px;
  max-width: 80%;
  float: right;
}

.hour-customer {
  font-size: 11px;
  color: #adadad;
  margin-right: 22px;
  float: right;
}

.logged-in {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gDTwhLS0gR2VuZXJhdGVkIGJ5IExheWVyaGVybyBTVkcgRXhwb3J0ZXI6IGh0dHA6Ly93d3cubGF5ZXJoZXJvLmNvbS9waG90b3Nob3Atc3ZnLWV4cG9ydGVyIC0tPg08IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg08c3ZnIHZlcnNpb249IjEuMSIgYmFzZVByb2ZpbGU9ImZ1bGwiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOmV2PSJodHRwOi8vd3d3LnczLm9yZy8yMDAxL3htbC1ldmVudHMiIHdpZHRoPSIxMSIgaGVpZ2h0PSIxMSIgdmlld0JveD0iMCAwIDExIDExIj4NPGcgdHJhbnNmb3JtPSJzY2FsZShOYU4pIiA+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiAgZmlsbD0icmdiKCAyMzcsIDExMiwgMCApIg0gZD0iTTUuNTAwLC0wLjAwMCBDOC41MzgsLTAuMDAwIDExLjAwMCwyLjQ2MiAxMS4wMDAsNS41MDAgQzExLjAwMCw4LjUzOCA4LjUzOCwxMS4wMDAgNS41MDAsMTEuMDAwIEMyLjQ2MiwxMS4wMDAgLTAuMDAwLDguNTM4IC0wLjAwMCw1LjUwMCBDLTAuMDAwLDIuNDYyIDIuNDYyLC0wLjAwMCA1LjUwMCwtMC4wMDAgWiIvPg08cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiICBmaWxsPSJyZ2IoIDI1NSwgMjU1LCAyNTUgKSINIGQ9Ik0zLjk4NSw1LjEyNiBMNC43NDYsNS45NDEgQzQuNzQ2LDUuOTQxIDUuMDQ0LDYuMzI5IDUuMzQyLDUuOTQxIEw2Ljk3Miw0LjA4MCBDNi45NzIsNC4wODAgNy4xNDksMy44OTAgNy4zNzEsNC4xMDAgTDcuOTIzLDQuNjkxIEM3LjkyMyw0LjY5MSA4LjEzMiw0Ljg2OCA3Ljg3Miw1LjExOSBMNS4zMTAsNy44NjQgQzUuMzEwLDcuODY0IDUuMDQ0LDguMTcwIDQuODA5LDcuODc4IEwzLjEzNCw2LjA4NCBDMy4xMzQsNi4wODQgMi44ODcsNS44NTMgMy4wNTksNS42MjkgTDMuNjE3LDUuMDMxIEMzLjYxNyw1LjAzMSAzLjc4Miw0Ljg4MSAzLjk4NSw1LjEyNiBaIi8+DTwvZz48L3N2Zz4N') no-repeat left;
  background-position: 0px 3px;
}

.chat-operator {
  color: #fff;
  font-size: 14px;
  margin: 18px 0px 0 14px;
}

.chat-operator-status {
  font-size: 11px;
  opacity: 0.7;
  color: #fff;
  margin-left: 14px;
}

.bg-none {
  background: none;
}

.typing-loader {
  display: block;
  width: 100%;

}

#circleG {
  /* width: 146px; */
  margin-left: 13px;
  /* margin: auto; */
  margin-top: 17px;
  padding-bottom: 23px;
}

.circleG {
  background-color: transparent;
  float: left;
  height: 7px;
  margin-left: 2px;
  width: 7px;
  animation-name: bounce_circleG;
  -o-animation-name: bounce_circleG;
  -ms-animation-name: bounce_circleG;
  -webkit-animation-name: bounce_circleG;
  -moz-animation-name: bounce_circleG;
  animation-duration: 2.24s;
  -o-animation-duration: 2.24s;
  -ms-animation-duration: 2.24s;
  -webkit-animation-duration: 2.24s;
  -moz-animation-duration: 2.24s;
  animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-direction: normal;
  -o-animation-direction: normal;
  -ms-animation-direction: normal;
  -webkit-animation-direction: normal;
  -moz-animation-direction: normal;
  border-radius: 20px;
  -o-border-radius: 20px;
  -ms-border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
}

#circleG_1 {
  animation-delay: 0.45s;
  -o-animation-delay: 0.45s;
  -ms-animation-delay: 0.45s;
  -webkit-animation-delay: 0.45s;
  -moz-animation-delay: 0.45s;
}

#circleG_2 {
  animation-delay: 1.05s;
  -o-animation-delay: 1.05s;
  -ms-animation-delay: 1.05s;
  -webkit-animation-delay: 1.05s;
  -moz-animation-delay: 1.05s;
}

#circleG_3 {
  animation-delay: 1.35s;
  -o-animation-delay: 1.35s;
  -ms-animation-delay: 1.35s;
  -webkit-animation-delay: 1.35s;
  -moz-animation-delay: 1.35s;
}

@keyframes bounce_circleG {
  0% {
  }

  50% {
    background-color: rgb(0, 0, 0);
    opacity: 0.2;
  }

  100% {
  }
}

@-o-keyframes bounce_circleG {
  0% {
  }

  50% {
    background-color: rgb(0, 0, 0);
    opacity: 0.2;
  }

  100% {
  }
}

@-ms-keyframes bounce_circleG {
  0% {
  }

  50% {
    background-color: rgb(0, 0, 0);
    opacity: 0.2;
  }

  100% {
  }
}

@-webkit-keyframes bounce_circleG {
  0% {
  }

  50% {
    background-color: rgb(0, 0, 0);
    opacity: 0.2;
  }

  100% {
  }
}

@-moz-keyframes bounce_circleG {
  0% {
  }

  50% {
    background-color: rgb(0, 0, 0);
    opacity: 0.2;
  }

  100% {
  }
}

.survey-btn a {
  color: #fff;
}

.link-grey {
  color: #666666 !important;
  text-decoration: none !important;
  transition: all 0.5s ease;
  &:hover {
    text-decoration: none !important;
    cursor: default;
  }
}
.link-grey:hover {
  text-decoration: none;
    cursor: default;
}

a {
  &.with-underline {
    cursor: pointer;
    text-decoration: underline;
  }
  &.text-grey {
    color: black;
  }
}

/* Portrait phones and smaller */
@media (max-width: 480px) {

  .fix-kb {
    margin-top: 20px !important;
  }

  .chat-container {
    max-width: none;
    min-height: 100vh;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

  }

  .footer-buttons {
    position: relative;
    bottom: 0px;
    height: 115px;
    margin: 0px auto;
  }

  .chat-container-survey {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

  }
  .text-dark {
    color: #000;
    font-size: 12px;
  }

}