/************************************************************************/

/**************************    ALLS    **************************/

/************************************************************************/

*:focus {
  outline: none !important;
}

:root {
  --polichat-color: #16bac5;
  --polichat-color-25: #16bac540;
  --polichat-color-75: #16bac5bf;
  --polichat-color-dark: #018fbb;
  --topNav-color: #fff;
  --danger-color: #dc3545;
}

a.link-control {
  background: transparent !important;
  color: transparent !important;
}

a.link-control:hover {
  background: transparent !important;
  color: transparent !important;
}

a.link-control:before {
  background: transparent !important;
  color: transparent !important;
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
}

html,
body {
  min-height: 100% !important;
  height: 100%;
}

body {
  background-color: #f5f6f7;
  min-height: 100% !important;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;

  /* MENU FECHADO */

  --displayMenu: none;
  --justifyContentMenu: center;
  --widthMenu: 4rem;
  --menuFloat: right;
  --visibilityMenuItem: hidden;
  --widthMenuRetratil: 17rem;
}

.menuRetratil {
  /* MENU ABERTO */
  --displayMenu: inline-block;
  --justifyContentMenu: start;
  --widthMenu: 17rem;
  --menuFloat: none;
  --visibilityMenuItem: visible;
  --widthMenuRetratil: 15rem;
}

.fullheight,
#app {
  /* min-height: 100%; */
  min-height: calc(100vh - 168px);
}

.text_primary {
  color: var(--polichat-color) !important;
}

.border_primary {
  border-color: var(--polichat-color) !important;
}

.bg_primary {
  background-image: linear-gradient(
    225deg,
    #4fcad2 0%,
    var(--polichat-color) 100%
  ) !important;
}

/*#004622*/

.bg_success_light {
  background-color: #dbeed7 !important;
}

/*#004622*/

.bg_whatsapp {
  background-image: linear-gradient(
    135deg,
    #63f972 0%,
    #2bce35 100%
  ) !important;
}

/* #004622 */
.bg_facebook {
  background-image: linear-gradient(180deg, #00afff 0%, #006dff 100%);
}

.bg_webchat {
  background-image: linear-gradient(
    135deg,
    #ffcf5c 0%,
    #fdd87f 100%
  ) !important;
  border-radius: 5px;
}

/* #004622 */
.bg_email {
  background-image: linear-gradient(
    180deg,
    #f98960 0%,
    #f35d4d 100%
  ) !important;
}

.bg_instagram {
  background-image: radial-gradient(
    99.11% 99.11% at 26.56% 107.7%,
    #ffdd55 0%,
    #ffdd55 10%,
    #ff543e 50%,
    #c837ab 100%
  ) !important;
}

/*#004622*/

/*.bg_linear{background: #009947 url(_img/bg_linear.jpg) repeat-x top; background-size: contain;}*/

/* #004622 */
/* .bg_linear{background: #009947 url(_img/bg_linear.jpg) repeat-x top; background-size: contain;} */
.border_circle {
  border-radius: 1rem;
}

.fa-text {
  margin-right: 0.5rem;
}

.no_padding {
  padding: 0 !important;
}

.no_padding_x {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.no_padding_y {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.no_padding_t {
  padding-top: 0 !important;
}

.no_padding_b {
  padding-bottom: 0 !important;
}

.no_margin {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.clear {
  clear: both;
}

.modal .channels-type {
  max-width: 90%;
  width: 795px;
}

.modal .channels-type a {
  position: unset;
}

.modal .channels-type h4 {
  font-size: 1em;
  text-align: center;
  margin: auto;
}

.modal .channels-type .modal-header {
  font-family: Helvetica;
  line-height: 28px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 22px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  background-color: #f3f5f6;
  box-sizing: border-box;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding: 20px;
  border-bottom: 1px solid rgb(221, 226, 230);
}

.modal .channels-type .modal-content {
  background: #ffffff;
  box-shadow: 0 7px 64px 0 rgba(0, 0, 0, 0.07);
  border-radius: 8px;
  padding: 0px !important;
}

.modal .channels-type .modal-content .card {
  text-align: center;
  color: #666;
  width: 90%;
}

.head_card {
  height: 20px;
  padding: 4px;
}

.card_report_contacts {
  min-height: 170px !important;
  border-radius: 5px !important;
  min-width: 150px !important;
  margin: 0.65rem;
  margin-right: 0;
  margin-bottom: 15px;
  border-radius: 5px;
  background: #ffffff;
  padding: 15px;
  box-shadow: -1px 1px 6px rgba(0, 0, 0, 0.1);
}

.card_report:hover {
  background: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 4px !important;
}

.modal .channels-type .modal-footer {
  padding: 5px;
}

.card.button-add {
  text-align: center;
  padding: 85px 0;
  height: 250px;
  background: #f9f9f9;
  border: 1px solid #06948e;
  border-radius: 10px;
  margin-top: 10px;
  font-family: Helvetica, sans-serif;
}

.card.button-add button {
  background: none;
  color: #06948e;
  border: 0;
  font-size: 1em;
  font-weight: bold;
  outline: none;
  outline: none !important;
  box-shadow: none !important;
}

.card.button-add:hover button:hover {
  background: none;
  color: #45afab;
  border: 0;
  font-size: 1em;
  outline: none;
  outline: none !important;
  box-shadow: none !important;
}

.card.button-add:focus button:focus {
  outline: none !important;
  box-shadow: none !important;
}

.card.button-add button i {
  font-size: 5.5em;
  width: 100%;
  display: block;
  text-align: center;
  margin: 0 0 10px;
}

/* .fa-plus:before {
  background: #909191;
  color: #fff;
  width: 65px;
  height: 65px;
  padding: 13px 5px;
  border-radius: 35px;
  display: block;
  margin: 0 0 0 -34px;
} */
.page_create_facebook {
  overflow: hidden;
}

.page_create_facebook .cancel {
  clear: both;
}

.card_facebook_polichat {
  width: 20rem;
  float: left;
  margin: 0 10px 0 0;
}

.card_facebook_polichat.sended,
.card_facebook_polichat.invalided {
  opacity: 0.5;
}

.card_facebook_polichat.response .card-text {
  font-size: 0.9em;
}

.card_facebook_polichat .perms li {
  padding: 0;
  margin: 3px 0 3px 13px;
}

.card_facebook_polichat .perms,
.card_facebook_polichat .pages {
  background: #f4f4f4;
  border: solid 1px #ccc;
  padding: 5px;
  font-size: 0.75em;
}

.card_facebook_polichat .pages {
  list-style: none;
  max-height: 100px;
  overflow-y: auto;
}

.card_facebook_polichat .pages .page label {
  padding: 5px;
  font-size: 1.2em;
  border-bottom: solid 1px #ecebeb;
  display: block;
  cursor: pointer;
}

.card_facebook_polichat .pages .page label:hover {
  background: #ccc;
}

.card_facebook_polichat .perms span {
  display: block;
}

.card_facebook_polichat .card-head {
  background: #138b86;
  padding: 20px 0;
  border-bottom: solid 2px #3b5998;
}

.card_facebook_polichat .card-head div {
  float: left;
  overflow: hidden;
  color: #fff;
}

.card_facebook_polichat .card-head .icon_polichat {
  width: 80px;
  text-align: center;
  padding: 0 0 0 30px;
}

.card_facebook_polichat .card-head .icon_polichat img {
  max-width: 100%;
}

.card_facebook_polichat .card-head .icon_link {
  width: 20%;
  text-align: center;
  padding: 15px 0 0;
}

.card_facebook_polichat .card-head .icon_link i {
  font-size: 0.9em;
  color: #ccc;
}

.card_facebook_polichat .card-head .icon_facebook {
  width: 25%;
  padding: 5px 0 0 0;
}

.card_facebook_polichat .card-head .icon_facebook i {
  font-size: 2.1em;
  color: #fff;
}

.card_facebook_polichat .btn-primary {
  background: #3b5998;
  border: solid 1px #142c5d;
}

/**/
.card_whatsapp_polichat {
  width: 100%;
  padding: 0;
  margin: 10px 0 0 0;
}

.card_whatsapp_polichat .card-head {
  background: #128c7e;
  padding: 20px 0;
  color: #fff;
  text-align: center;
}

.card_whatsapp_polichat .card-head .poli-icon,
.card_whatsapp_polichat .card-head .pi-whatsapp-fill {
  color: #fff;
  font-size: 3em;
}

.card_whatsapp_polichat .card-head .fa-link {
  margin: 0 1.2em;
  font-size: 0.9em;
  color: #ccc;
}

.card_whatsapp_polichat .btn-primary {
  background: #16b5c3;
  border: solid 1px #07535a;
}

/**/

.card_instagram_polichat {
  width: 20rem;
  float: left;
  margin: 0 10px 0 0;
}

.card_instagram_polichat .card-head {
  background: radial-gradient(
    99.11% 99.11% at 26.56% 107.7%,
    #ffdd55 0%,
    #ffdd55 10%,
    #ff543e 50%,
    #c837ab 100%
  );
  padding: 20px 0;
}

.card_instagram_polichat .card-head div {
  float: left;
  overflow: hidden;
  color: #fff;
}

.card_instagram_polichat .card-head .icon_polichat {
  width: 80px;
  text-align: center;
  padding: 0 0 0 30px;
}

.card_instagram_polichat .card-head .icon_polichat i {
  color: #fff;
  font-size: 45px;
}

.card_instagram_polichat .card-head .icon_link {
  width: 20%;
  text-align: center;
  padding: 15px 0 0;
}

.card_instagram_polichat .card-head .icon_link i {
  font-size: 0.9em;
  color: #ccc;
}

.card_instagram_polichat .card-head .icon_instagram {
  width: 40%;
  padding: 5px 0 0 0;
}

.card_instagram_polichat .card-head .icon_instagram i {
  font-size: 2.1em;
  color: #fff;
}

.card_instagram_polichat .btn-primary {
  background: #16b5c3;
  border: solid 1px #07535a;
}

/************************************************************************/

/*************************    LOGIN    **************************/

/************************************************************************/

/* ********************************************************************** */
/* ************************    LOGIN    ************************* */
/* ********************************************************************** */
.login-block {
  background: #00acbd;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #00acbd, #0083ba);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #00acbd, #0083ba);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  float: left;
  width: 100%;
  padding: 40px 0;
  overflow: hidden !important;
}

.svg-login-logo {
  width: 70%;
  margin: auto;
}

.label-login {
  font-family: Helvetica !important;
  font-size: 18px;
  color: #666666 !important;
  text-align: left;
  font-weight: normal !important;
  padding: 0px -2px 5px 10px !important;
}

.banner-sec {
  background: #00acbd;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #00acbd, #0083ba);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #00acbd, #0083ba);
  background-size: cover;
  min-height: 500px;
  border-radius: 0 10px 10px 0;
  padding: 0;
  float: right !important;
}

.eye-control {
  font-size: 28px;
  color: var(--polichat-color);
  position: relative;
  top: -48px;
  left: 110px;
}

.eye-control-downgrade {
  font-size: 28px;
  color: var(--polichat-color);
  position: relative;
  top: -48px;
  left: 350px;
}

@media all and (min-width: 1010px) and (max-width: 1224px) {
  .eye-control {
    font-size: 28px;
    color: var(--polichat-color);
    position: relative;
    top: -48px;
    left: 50px;
  }
}

@media all and (min-width: 801px) and (max-width: 1009px) {
  .eye-control {
    font-size: 28px;
    color: var(--polichat-color);
    position: relative;
    top: -48px;
    left: 99px;
  }
}

@media all and (min-width: 769px) and (max-width: 900px) {
  .eye-control {
    font-size: 28px;
    color: var(--polichat-color);
    position: relative;
    top: -48px;
    left: 120px;
  }
}

@media all and (min-width: 569px) and (max-width: 768px) {
  .eye-control {
    font-size: 28px;
    color: var(--polichat-color);
    position: relative;
    top: -48px;
    left: 270px;
  }
}

@media all and (min-width: 481px) and (max-width: 568px) {
  .eye-control {
    font-size: 28px;
    color: var(--polichat-color);
    position: relative;
    top: -48px;
    left: 230px;
  }
}

@media all and (min-width: 321px) and (max-width: 480px) {
  .eye-control {
    font-size: 28px;
    color: var(--polichat-color);
    position: relative;
    top: -48px;
    left: 105px;
  }
}

@media all and (min-width: 0px) and (max-width: 320px) {
  .eye-control {
    font-size: 28px;
    color: var(--polichat-color);
    position: relative;
    top: -48px;
    left: 30px;
  }
}

.icon-green {
  font-size: 36px;
  color: var(--polichat-color);
  position: relative;
  top: 10px;
}

.login-sec {
  padding: 50px 30px;
  position: relative;
  float: left !important;
  margin: auto;
}

.login-h2 {
  font-family: Helvetica;
  font-size: 26px;
  color: #000000;
  text-align: center;
  padding: 15px 0px 10px 0px;
}

.text-banner {
  width: 90%;
  height: 70%;
  margin: auto;
  color: #fff;
  text-align: center;
}

.icons_logins {
  font-size: 52px;
  animation: fade-down-in 0.7s ease-out forwards;
}

.icons_logins > i.pi-whatsapp-fill,
.icons_logins > i.pi-messenger-fill,
.icons_logins > i.pi-webchat-fill {
  -webkit-animation: fadein 6s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 6s;
  /* Firefox < 16 */
  -ms-animation: fadein 6s;
  /* Internet Explorer */
  -o-animation: fadein 6s;
  /* Opera < 12.1 */
  animation: fadein 6s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.link_login-green {
  padding: 15px;
  background: linear-gradient(360deg, #f5bc00 -13.64%, #fad56a 50%);
  box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.2), 0px 2px 0px #ac9c61,
    inset 0px 2px 2px rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
}

.link_login-green:hover {
  padding: 15px;
  background: linear-gradient(180deg, #f5bc00 -13.64%, #fad56a 50%);
  box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.2), 0px 2px 0px #ac9c61,
    inset 0px -2px -2px rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
}

#animacao_login {
  background: transparent;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  margin: auto;
}

@media (min-width: 100px) and (max-width: 880px) {
  #animacao_login {
    width: 350px;
    height: 350px;
    margin-top: 10px;
  }
}

@media (min-width: 890px) and (max-width: 1199px) {
  #animacao_login {
    width: 450px;
    height: 450px;
    margin-top: 10px;
  }
}

@media (min-width: 1200px) and (max-width: 1920px) {
  #animacao_login {
    width: 550px;
    height: 550px;
    margin-top: 10px;
  }
}

@media (min-width: 50px) and (max-width: 480px) {
  .text-banner > h5 {
    display: none !important;
  }
}

.svg-banner {
  padding-top: 50px;
  width: 70%;
  margin: auto;
}

.container-login {
  background: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

#showPass {
  float: right;
  margin-top: -1.7rem;
  margin-right: 10px;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

#showPass:hover {
  color: rgba(0, 0, 0, 0.7);
}

.login_bg {
  background-image: linear-gradient(225deg, #48b4bc 0%, #0d9da7 100%);
}

.login_box {
  min-height: 320px;
  padding: 0;
}

.login_box .logo {
  margin: 1rem 0;
  display: block;
  width: 100%;
}

.login_box .logo img {
  width: 80%;
  margin: 0 auto;
  position: relative;
  top: 5px;
}

.login_box h1 {
  margin-bottom: 1rem;
}

.login_box input {
  background: rgba(249, 249, 249, 0.3);
  border: 1px solid #dbdcdc;
  border-radius: 5px;
}

.login_box input:focus {
  border: 1px solid #18bac5;
  box-shadow: 0 0 0 2px rgba(22, 186, 197, 0.22);
}

.login_box input[type='submit'] {
  margin: 1rem 0 2rem 0;
}

.login_box .small label {
  margin-left: 0.4em;
}

.login_reg {
  padding: 0.8em 0;
  color: #637582;
}

.login_box .form-control::-webkit-input-placeholder {
  color: #fff;
  opacity: 1;
}

.login_box .form-control::-moz-placeholder {
  color: #fff;
  opacity: 1;
}

.login_box .form-control:-ms-input-placeholder {
  color: #fff;
  opacity: 1;
}

.login_box .form-control::-ms-input-placeholder {
  color: #fff;
  opacity: 1;
}

.login_box .form-control::placeholder {
  color: #fff;
  opacity: 1;
}

.login_box .checkbox {
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  box-shadow: none;
  padding: 8px;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  border: 1px solid #dbdcdc;
}

.margin-top {
  margin-top: 10px !important;
}

.margin-bottom {
  margin-bottom: 10px !important;
}

.channelContainerMaster {
  display: flex;
  justify-content: flex-start;
  flex: 1;
  flex-wrap: wrap;
}

.ChannelColUm {
  display: inline;
}

.channelItems {
  display: flex;
  justify-content: center;
  width: 33% !important;
  margin: 10px 0;
  padding-right: 15px;
  padding-left: 15px;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.channelItem {
  width: 100% !important;
}

.report_box .checkbox {
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  box-shadow: none;
  padding: 8px;
  border-radius: 3px;
  display: inline-block;
  top: 3px;
  position: relative;
  border: 1px solid #dbdcdc;
}

.report_box .checkbox:checked:after {
  font-family: polifont;
  content: '\e9db';
  font-size: 14px;
  position: absolute;
  top: -2px;
  left: 1px;
  color: #18bac5;
}

.card-info.quantity-tutorials.info1 > i {
  position: relative;
  font-size: 18px;
  top: 3px;
}

label.reports-abertos-label {
  padding: 14px 0px 0px 5px !important;
}

.login_box .checkbox:checked:after {
  font-family: polifont;
  content: '\e9db';
  font-size: 14px;
  position: absolute;
  top: 1px;
  left: 1px;
  color: #18bac5;
}

input[type='checkbox']:focus {
  border: 1px solid #18bac5;
  box-shadow: 0 0 0 2px rgba(22, 186, 197, 0.22);
  outline: none;
  outline-offset: none;
}

.form-control:focus {
  border: 1px solid #18bac5;
  box-shadow: 0 0 0 2px rgba(22, 186, 197, 0.22);
  outline: none;
  outline-offset: none;
}

.forgot-pass {
  font-family: Helvetica;
  font-size: 14px;
  color: #999999;
  text-align: left;
}

.forgot-pass:hover {
  text-decoration: none;
  color: #666666;
}

.forgot-icon {
  font-size: 20px;
  color: #999999;
  position: relative;
  top: 0px;
  left: -5px;
  float: left;
}

.danger-alertation {
  background: #fbe4e8;
  border: 1px solid #ff647c;
  border-radius: 2px;
  font-family: Helvetica;
  font-size: 9px;
  color: #ff647c !important;
  text-align: left;
}

input[type='submit'].button-primary {
  background: linear-gradient(195.59deg, #00acbd 34.03%, #0083ba 92.75%);
  border-radius: 5px;
  border: none;
  color: white;
  min-height: 50px;
  width: 100%;
  text-decoration: none;
  margin: auto;
  cursor: pointer;
}

input[type='submit'].button-primary:hover {
  background: linear-gradient(195.59deg, #0083ba 34.03%, #00acbd 92.75%);
}

input[type='submit'].button-primary::before {
  border: 1px solid #18bac5 !important;
  box-shadow: 0 0 0 2px rgba(22, 186, 197, 0.22) !important;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}

span.learn {
  font-family: Helvetica;
  font-size: 14px;
  color: #858585;
  text-align: left;
}

.sidebar_menu_down li{
  float: var(--menuFloat);
}

a.learn {
  font-family: Helvetica;
  font-size: 14px;
  color: #18bac5;
  text-align: left;
  font-weight: bold;
}

i.learn {
  position: relative;
  font-size: 22px;
  color: #18bac5;
  top: 4px;
  left: -3px;
}

button.button-primary-line {
  border: 2px solid var(--polichat-color);
  border-radius: 5px;
  color: var(--polichat-color);
  width: 93%;
  min-height: 50px;
  text-decoration: none;
  cursor: pointer;
  margin: 10px;
  background: #fff;
}

input[type='submit'].button-primary:focus {
  border: 1px solid #18bac5 !important;
  box-shadow: 0 0 0 2px rgba(22, 186, 197, 0.22) !important;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}

.text-login {
  padding: 2px 0px 0px 5px;
  font-family: Helvetica;
  font-size: 16px;
  color: #666666;
  text-align: left;
  font-weight: normal !important;
}

.login_box .help-block {
  display: block;
  width: 100%;
  font-size: 0.8rem;
  background-color: rgba(255, 255, 255, 0.5);
  margin-top: -0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.4rem;
  color: #a84747;
}

.login_box #login-form {
  position: relative;
  bottom: 0;
}

/* ********************************************************************** */
/* *******************    DASHBOARD - MENU    ******************* */
/* ********************************************************************** */
#app {
  transition: all 0.4s ease 0s;
}

.menusair {
  padding: 10px;
  position: relative;
  z-index: 12000;
}

#sidebar_wrapper {
  margin-left: calc(-17rem + 63px);
  width: var(--widthMenuRetratil);
  flex-shrink: 0;
  overflow: hidden;
  z-index: 10000;
  transition: all 0.4s ease 0s;
}

.active #sidebar_wrapper {
  margin-left: 0;
  left: 0px;
}

.sidebar_nav {
  display: block;
  width: var(--widthMenuRetratil);
  height: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  position: fixed;
  top: 0;
  background-color: #ffffff;
  border-right: 1px solid #e0e4e7;
  transition: background-color 0.4s ease 0s;
}

.sidebar_menu_scroll {
  border-top: 1px solid #e0e4e7;
  display: block;
  overflow-y: auto !important;
  overflow-x: hidden;
  height: calc(100% - 15.56rem);
  box-sizing: content-box;
  float: var(--menuFloat);
  margin: 0;
  padding: 0;
  position: relative;
  @media (max-width: 600px) {
    height: calc(100% - 23.4rem);
  }
}

.sidebar_menu_down_top {
  border-top: 1px solid #e0e4e7;
}

.sidebar_menu_down_item {
  display: block;
  box-sizing: content-box;
  float: var(--menuFloat);
  margin: 0;
  padding: 0;
  position: relative;
}

.sidebarMenuItem {
  display: flex;
  justify-content: var(--justifyContentMenu);
}

.sidebarMenuItem span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.9rem;
  content-visibility: var(--visibilityMenuItem);
  height: 60px;
}

.pictureProfile span {
  display: inline-block;
  font-weight: 600;
  color: #909191;
  flex-direction: column;
  justify-content: center;
  max-width: 150px;
  font-size: 0.9rem;
  line-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  content-visibility: var(--visibilityMenuItem);
  height: 60px;
}

.sidebar_menu_scroll li a {
  height: 3.75rem;
  box-sizing: inherit;
  text-align: left;
}

.sidebar_menu_down_item li a {
  height: 3.75rem;
  box-sizing: inherit;
  text-align: left;
}

.sidebar_menu_scroll::-webkit-scrollbar {
  width: 0.5rem;
}

.sidebar_menu_down_item::-webkit-scrollbar {
  width: 0.5rem;
}

.sidebar_menu_scroll::-webkit-scrollbar-thumb {
  border: 0.1rem solid transparent !important;
}

.sidebar_menu_down_item::-webkit-scrollbar-thumb {
  border: 0.1rem solid transparent !important;
}

.sidebar_nav li {
  overflow: hidden;
  clear: both;
}

.sidebar_nav li.search_menu {
  background-color: inherit;
  transition: width 1s linear 0.1s;
  width: auto;
  box-shadow: 0 0 0 0;
  border: 0 none;
  outline: 0;
}

#removeHover:hover,
#menu_toggle:hover {
  color: none !important;
  background: none !important;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  cursor: pointer;
}

.sidebar_nav li.search_menu.open {
  width: 450px;
  padding: 0 40px 0 210px;
}

.sidebar_nav li.search_menu.open input {
  width: 100%;
}

.sidebar_nav li.search_menu i {
  float: right;
  margin-top: -43px;
  margin-right: 0px;
  color: #909191;
  padding: 15px;
  width: 70px;
  text-align: center;
}

.sidebar_nav li.search_menu.open i {
  margin-right: -40px !important;
  padding: 15px;
  margin-top: -45px !important;
  cursor: pointer;
}

input.form-control::placeholder {
  color: #aaa;
}

#sidebar_menu li a,
.sidebar_nav li a {
  color: #909191;
  display: block;
  float: left;
  text-decoration: none;
  width: 100%;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -o-transition: background 0.5s;
  -ms-transition: background 0.5s;
  transition: background 0.5s;
}

.footer-modal {
  text-align: center;
}

.escrito-footer-modal {
  color: grey;
}

.gray-75 {
  color: #909191;
}

.drop-arrow:after {
  display: inline-block;
  font-family: 'polifont' !important;
  width: 0;
  height: 0;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: '\e9ec';
  padding: 0px 10px 10px 0px;
  position: relative;
  top: 5;
  left: 43px;
}

button.drop-arrow > i {
  color: var(--polichat-color) !important;
  font-size: 36px;
  position: relative;
  top: -7px;
}

button.drop-arrow-report > i {
  font-size: 24px;
  position: relative;
  top: 4px;
  left: -20;
}

.dropdown-menu {
  z-index: 500000;
}

.dropdown-status-user > button {
  background: none !important;
  border: none !important;
  padding-top: 7px !important;
  padding-right: 3px !important;
  outline: 0px;
  font-family: Helvetica, Arial, sans-serif;
  color: #909191 !important;
  display: flex;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dropdown-polichat > button {
  background: none !important;
  border: none !important;
  padding-top: 7px !important;
  padding-right: 65px !important;
  float: right;
  outline: 0px;
  font-family: Helvetica, Arial, sans-serif;
  color: #909191 !important;
  display: flex;
  white-space: nowrap;
  text-overflow: ellipsis;
}

select#department {
  background: #fff;
  color: #495057;
  -webkit-appearance: none !important;
}

span.text-company {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}

.dropdown-polichat > button:hover {
  color: var(--polichat-color) !important;
}

.dropdown-status-user > button:hover {
  color: var(--polichat-color) !important;
}

.sidebar_nav li a {
  text-indent: 1.5rem;
  color: #909191 !important;
  display: block;
  text-decoration: none;
  width: 100%;
}

.sidebar_nav li a:hover {
  background: #bfe8eb !important;
  color: #6a6a6a !important;
  -webkit-box-shadow: inset 0.25rem 0rem 0rem 0rem rgba(22, 186, 197, 1);
  -moz-box-shadow: inset 0.25rem 0rem 0rem 0rem rgba(22, 186, 197, 1);
  box-shadow: inset 0.25rem 0rem 0rem 0rem rgba(22, 186, 197, 1);
}

.sidebar_nav li a.active {
  background: #bfe8eb !important;
  color: #0d9da7 !important;
  -webkit-box-shadow: inset 0.25rem 0rem 0rem 0rem rgba(22, 186, 197, 1);
  -moz-box-shadow: inset 0.25rem 0rem 0rem 0rem rgba(22, 186, 197, 1);
  box-shadow: inset 0.25rem 0rem 0rem 0rem rgba(22, 186, 197, 1);
}

.iconmenu {
  font-size: 25px;
  position: relative;
  display: flex;
  padding: 0px 25px 0px 0px;
  top: 18px;
  justify-content: center;
}

.iconToggleMenu {
  font-size: 16px;
  color: #b3b3b3;
  position: relative;
  display: flex;
  padding: 0px 31px 0px 0px;
  top: 5px;
  justify-content: center;
}

.iconmenu_close {
  font-size: 25px;
  position: relative;
  top: 0px;
}

.polichat-logo-line {
  display: flex;
  margin-top: 0;
  height: 3.5rem;
  margin-bottom: 0;
  align-items: center;
  /*background: url(../img/polichat-logo-one.svg) no-repeat center center;*/
  background-size: contain;
  background: url(../img/polichat-logo-one.svg) no-repeat top center;
  padding: 50px 0 0 0;
}

.logo_horizontal {
  background-image: url(../img/brand/logo-green.png);
  width: 100% !important;
  height: 50px;
  margin: 4px auto 0px auto !important;
  background-size: 135px 50px;
  padding-bottom: 11px !important;
}

.sidebar_brand {
  display: block;
  line-height: 3.5rem;
  font-size: 1.4rem;
  color: #909191 !important;
  text-align: center;
}

.sidebar_nav li a.sidebar_brand:hover {
  background: transparent !important;
}

.sidebar_brand img {
  /* width: 60%; */
  width: auto;
  height: 50px;
}

#main_icon {
  float: right;
  width: 70px;
  line-height: 4rem;
}

#main_icon.pi-polichat-logo-line {
  font-size: 55px;
  color: #0d9da7;
  left: -15px;
}

.po_icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
  border: none;
}

.po_icon.po_icon-distribuicao {
  background-image: url(../img/icons/svg/distribuicao.svg);
}

.po_icon.po_icon-distribuicaored {
  background-image: url(../img/icons/svg/distribuicaored.svg);
}

.po_icon.po_icon-distribuicaobody {
  background-image: url(../img/icons/svg/ilustracao_distribuicao.svg);
}

.modal-body .po_icon {
  width: 150px;
  height: 150px;
  text-align: center;
  align-items: center;
  margin-bottom: 25px;
}

.ilustracao2 .po_icon {
  width: 250px;
  height: 450px;
  text-align: center;
  align-items: center;
  margin-top: 25px;
}

.po_icon.po_icon-distribuicaowhite,
.text-white.po_icon.po_icon-distribuicao {
  background-image: url(../img/icons/svg/distribuicaowhite.svg);
}

.po_icon.po_icon-distribuicaoall {
  background-image: url(../img/icons/svg/distribuicaoall.svg);
}

h1 .po_icon {
  width: 20px;
  height: 20px;
}

.sub_icon {
  width: 62px;
}

.settings_poli_icon {
  width: 80px !important;
}

.sidebar_user {
  position: relative;
  height: 4rem;
}

.user_img {
  float: right;
  padding-right: 15px;
  width: 55px;
  height: 60px;
  position: absolute;
  top: 0;
  right: 0;
}

.user_img > img {
  width: 100%;
  height: 60%;
  border-radius: 2rem;
}

/* ********************************************************************** */
/* *****************    DASHBOARD - CONTENT    ****************** */
/* ********************************************************************** */
#content_wrapper {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  transition: all 0.4s ease 0s;
  background: #f5f6f7;
}

.header_tittle {
  width: 100vw !important;
  display: flex;
  background-color: var(--topNav-color);
  position: fixed;
  z-index: 3;
  margin: 0;
  height: auto;
  padding: 8px 0 5px 71px;
  flex-direction: row;
}

.topNav {
  width: 100%;
}

#dash_title > h1 {
  font-family: Helvetica;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  text-transform: capitalize;
  margin: 0;
}

.text_title > i {
  color: var(--polichat-color);
}

.titlePage {
  display: flex;
  align-items: center;
  padding: 10px 0px 10px 0px;
  color: #606161;
}

.titlePage i {
  font-size: 30px;
  color: var(--polichat-color);
  margin: 0px 10px 0px 13px;
}

.btn-outline-primary {
  background-color: transparent;
  border: solid 1px var(--polichat-color);
  color: var(--polichat-color);
}

.btn-outline-primary:hover {
  background-color: transparent;
  border: solid 1px var(--polichat-color);
  color: var(--polichat-color);
}

.btn-outline-primary:active {
  background-color: transparent !important;
  border: solid 1px var(--polichat-color) !important;
  color: var(--polichat-color) !important;
}

.btn-primary-polichat {
  background: var(--polichat-color) !important;
  color: #fff;
}

.btn-primary-polichat:hover {
  background-color: var(--polichat-color-75) !important;
  color: #fff !important;
}

.btn .btn-danger-delete {
  background-color: #ff647c;
  color: #fff;
}

.btn-primary-polichat-line {
  color: var(--polichat-color) !important;
  border: solid 1px var(--polichat-color) !important;
}

.btn-primary-polichat-line:hover {
  background: var(--polichat-color) !important;
  border: solid 1px var(--polichat-color) !important;
  color: #fff !important;
}

.text_title {
  color: #1a051d;
}

.input-group > .custom-select:not(:last-child):focus,
.input-group > .form-control:not(:last-child):focus {
  border: 1px solid #18bac5;
  box-shadow: 0 0 0 2px rgba(22, 186, 197, 0.22);
}

.btn.focus,
.btn:focus {
  border: 1px solid #18bac5 !important;
  box-shadow: 0 0 0 2px rgba(22, 186, 197, 0.22) !important;
}

.btn-search > i {
  font-size: 22px;
  position: relative;
  top: 4px;
}

.btn-search {
  background: var(--polichat-color);
  border-radius: 0;
  color: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: var(--polichat-color);
  border-radius: 0px 5px 5px 0px;
  position: relative;
  font-size: 16px;
  padding-top: 2px;
}

.color-primary {
  color: var(--polichat-color);
}

.btn-search:link,
.btn-search:visited {
  color: #fff;
}

.btn-search:active,
.btn-search:hover {
  background: var(--polichat-color);
  color: #fff;
}

#dash_title > span {
  font-family: Helvetica;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 7px;
}

#dash_title > span > i {
  font-size: 1.1em;
  font-weight: bold;
  position: relative;
  top: 2px;
}

.dash_section {
  width: calc(100% - 1.4rem);
  margin: 0;
  border-radius: 10px;
}

.dash_section .section_title {
  font-size: 18px;
  padding: 10px 0 10px;
  font-family: Helvetica, Arial, sans-serif;
}

.section_title > i {
  color: var(--polichat-color);
  font-size: 20px;
  position: relative;
  top: 3px;
}

.dash_section .section_subtitle {
  font-size: 14px;
  font-family: Helvetica, Arial, sans-serif;
  color: #666;
}

.section_subtitle > i {
  color: var(--polichat-color);
  font-size: 20px;
  position: relative;
  top: 3px;
}

.dash_section .section_title .info_distribution {
  position: relative;
  bottom: 5px;
  top: 0px;
  left: 5px;
}

.general-config,
.chat-config,
.attendance-config,
.wallet-config,
.distribution-config
{
  border-bottom: solid 1px #f1f1f1;
  padding: 0 0 15px 0;
  margin: 0 0 15px 0;
}

.general-config-timezone label,
.chat-config label,
.attendance-config label,
.wallet-config label {
  font-size: 0.8em;
  color: #666;
}

.general-config-timezone > .form-control {
  border: none;
  height: 55px;
  margin: 0;
  padding: 0;
}

.chat-config .max-chats .input-group {
  width: 30%;
}

.chat-config h3,
.attendance-config h3,
.wallet-config h3 {
  font-size: 1.2em;
  color: #666;
  border-bottom: 5px solid #ccc;
}

.dash_section > .btn {
  margin: 0.5rem 1rem;
}

.dash_section .card {
  margin-bottom: 1rem;
}

.dash_div {
  width: 70%;
  height: 1px;
  background-color: #d7e0ef;
  margin: 0 15% 1rem 15%;
}

.dash_section .dash_div {
  width: 99%;
  height: 1px;
  background-color: #b6c0b4;
  margin: 0 0.5% 0.3rem;
}

.dash_section .section_scroll {
  max-height: 26rem;
  overflow-y: auto;
  margin-bottom: 0.5rem;
}

.dash_section .alert {
  margin-bottom: 0;
}

.form-whatsapp .side-right {
  border-left: solid 1px #ccc;
}

.form-whatsapp .option-optimize input {
  float: left;
  width: 5%;
  margin: 5px 0;
}

.form-whatsapp .option-optimize label {
  float: left;
  width: 94%;
}

.form-whatsapp .time-for-optimize label input {
  display: inline;
  width: 60px;
  line-height: normal;
  padding: 2px 10px;
  text-align: center;
}

.form-whatsapp .time-for-optimize {
  display: block;
  clear: both;
  background: #f4f4f4;
  padding: 15px;
  width: 90%;
  font-size: 0.8em;
  margin: 0 0 0 5%;
}

.form-whatsapp .alert {
  clear: both;
}

/* ********************************************************************** */
/* *******************    DASHBOARD - HOME    ******************* */
/* ********************************************************************** */
.dash_button {
  width: 8rem;
  min-height: 8rem;
  margin: 1rem;
  margin-right: 0;
}

@media (max-width: 480px) {
  .dash_button {
    width: 7rem;
    min-height: 8rem;
  }
}

.dash_button.no_text {
  height: 7rem;
  margin-bottom: 2rem;
}

.dash_button .button_icon {
  width: 8rem;
  height: 8rem;
  border-radius: 10px;
  line-height: 7rem;
  font-size: 4rem;
  margin-bottom: 0.8rem;
  padding: 15px;
}

.dash_button .button_icon.po_icon {
  background-size: 66%;
}

.dash_button > a {
  display: block;
  width: 100%;
  text-decoration: none;
}

.dash_button > a:hover {
  opacity: 1;
}

.dash_card {
  width: 14.4rem;
  margin: 0.65rem;
  margin-right: 0;
  margin-bottom: 15px;
  border-radius: 5px;
  min-height: 350px;
}

.dash_card .card_icon {
  width: 90%;
  height: 8rem;
  font-size: 7rem;
  line-height: 8rem;
  text-align: center;
  margin: auto;
  border-radius: 5px;
  margin-top: 10px;
  padding-top: 8px;
}

.text-card-channels {
  font-family: Helvetica;
  font-size: 12px;
  color: #909191;
  letter-spacing: -0.24px;
  text-align: center;
  line-height: 12px;
}

.dash_card .card_text {
  padding: 10px;
  font-family: Helvetica;
  font-size: 22px;
  color: #000000;
  letter-spacing: 0.35px;
  text-align: center;
  line-height: 28px;
}

.dash_list {
  margin: 1rem;
  padding: 0;
  border-bottom: 1px solid #bfc3bf;
  line-height: 1rem;
  min-width: 250px !important;
}

.dash_list:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.dash_list.col-12 {
  margin: 1rem 0;
  padding: 0 1rem;
}

.dash_list .info {
  min-width: 300px;
}

.dash_list p {
  width: 100%;
  /* margin-left: .4rem; */
  margin-bottom: 0.4rem;
}

.dash_list p:first-child {
  margin-left: 0;
}

.dash_list p:last-of-type {
  margin-bottom: 0.8rem;
}

.dash_list a.btn {
  margin-bottom: 1rem;
}

.row.dual_col {
  margin: 0 !important;
  padding: 0 !important;
}

.dual_col_container {
  padding-right: 0.7rem !important;
}

@media (min-width: 576px) {
  .no_label {
    margin-top: 2em;
  }
}

@media (min-width: 768px) {
  .dash_section.dual_col {
    margin-left: 0.7rem !important;
  }

  .row.dual_col {
    padding-right: 0.7rem !important;
  }
}

@media (min-width: 992px) {
  .dash_list.col-lg-4 {
    border-bottom: 1px solid #bfc3bf;
  }

  .list_actions {
    text-align: right;
  }
}

/* .dash_links{
  margin-bottom: 1rem;
}
.dash_links > a{
  text-decoration: none;
  padding: 0.1rem 1rem;
  margin:1rem 0;
  background: rgba(4, 54, 52, .8);
}
.dash_links > a:hover{
  background: rgba(4, 54, 52, 1)
} */
/* ********************************************************************** */
/* *****************    DASHBOARD - PAYMENT    ****************** */
/* ********************************************************************** */
.dash_box {
  margin: 1rem 0;
  padding: 1rem;
}

.dash_box h1 {
  font-size: 1.2rem;
  border-bottom: 1px solid #085746;
}

.dash_box h2 {
  font-size: 1.2rem;
}

.dash_box h5 {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.dash_box h6 {
  font-size: 0.7rem;
  margin-bottom: 1rem;
}

.dash_box span {
  display: block;
  width: 100%;
  font-size: 0.8rem;
}

.dash_box a.btn {
  margin-bottom: 1rem;
}

.dash_box .dash_div {
  margin-top: 1rem;
}

.dash_payment a.btn {
  padding: 0 1rem;
  margin-top: 1rem;
}

.dash_payment a.btn > span {
  display: block;
  width: 100%;
}

.dash_payment a.btn > i {
  display: block;
  width: 100%;
  font-size: 6rem;
  margin: 1rem 0;
}

.dash_payment .form-group {
  margin-top: 0;
}

.dash_payment .form-group label {
  font-size: 0.8rem;
  margin: 0;
  line-height: 2.2rem;
}

.dash_payment .form-group .mult_line {
  line-height: 1.2rem;
}

@media (min-width: 576px) {
  .dash_payment a.btn:first-of-type {
    margin-right: 1rem;
  }
}

.btn_custom {
  width: 100%;
  margin: 0;
  padding: 12px;
  text-transform: uppercase;
  border-radius: 30px;
  font-size: 1.3em;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 500;
  cursor: pointer;
}

.btn_custom[disabled] {
  cursor: initial;
}

.btn_custom:hover,
.btn_custom:focus,
.btn_custom:active,
.btn_custom:visited {
  color: #085746;
  outline: none;
}

/* ********************************************************************** */
/* ***********************    SIGNUP    ************************* */
/* ********************************************************************** */
#receive_page {
  margin-top: 70px;
  margin-bottom: 20px;
  padding-top: 20px;
}

#receive_form {
  padding: 15px !important;
  border: 1px solid #ddd;
}

#receive_form .help-block {
  font-size: 0.8em;
  text-align: right;
  margin-bottom: -1em;
  line-height: 0.8em;
}

.div {
  border-bottom: 1px solid #ccc;
}

/* ********************************************************************** */
/* ************************    MODAL    ************************* */
/* ********************************************************************** */
#modal_box {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 600px;
  display: none;
  z-index: 99997;
}

#modal_back {
  position: absolute;
  width: 100%;
  height: 100%;
  min-height: 600px;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 99998;
}

#modal_content {
  position: relative;
  width: 90%;
  height: 90%;
  max-height: 90%;
  min-height: 500px;
  left: 5%;
  top: 5%;
  background-color: #ccc;
  z-index: 99999;
  overflow-x: hidden;
  overflow-y: auto;
}

#modal_close {
  position: absolute;
  top: 5px;
  right: -140px;
  font-size: 1.5rem;
  color: #151515;
  font-weight: bold;
  cursor: pointer;
}

/* ********************************************************************** */
/* ***********************    REPORTS    ************************ */
/* ********************************************************************** */
#loadedContent {
  margin-top: 1.5rem;
}

.stats_on {
  color: var(--polichat-color);
}

.stats_off {
  color: #555;
}

.stats_pause {
  color: #ff4444;
}

.my_progress {
  margin-top: 15px;
  height: 2rem;
  display: flex;
  flex-wrap: nowrap;
  line-height: 51px;
}

.my_progress .my_legend {
  width: 10%;
  /* float: left; */
  text-align: end;
  padding-right: 5px;
  font-size: 0.8rem;
  line-height: 1.8rem;
}

.my_progress .my_legend-dois {
  width: 18%;
  /* float: left; */
  text-align: end;
  padding-right: 5px;
  font-size: 15px;
  line-height: 51px;
  margin-left: 5px;
}

.my_progress .my_legend-dois > span {
  float: left;
  color: #666;
}

@media only screen and (max-width: 800px) {
  .my_progress .my_legend-dois > span {
    display: none;
  }

  .my_progress .my_legend {
    margin-right: 20px;
  }
}

.my_progress .my_legend i {
  font-size: 2.5rem;
  line-height: 50px;
  margin-top: -0.5rem;
}

.my_progress .my_bar {
  width: 80%;
  /* float: left; */
  margin-top: 10px;
  height: 30px;
  margin-bottom: 0 !important;
  background: #e9eaed !important;
  border-radius: 50px !important;
}

.my_progress .my_info {
  width: 10%;
  /* float:left; */
  padding-left: 5px;
}

.star_no {
  width: 100%;
  text-align: center;
  color: #555;
}

.rate_agent.progress-bar.bg-success {
  background: #fff;
}

.bg {
  background: #fff;
}

.form-check-input {
  margin-left: 0 !important;
  position: relative !important;
}

/* ************ loading ************** */
.escapingBallG {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.escapingBallG div {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #007bff;
  animation: escapingBallG 1s ease-in-out infinite;
}

.escapingBallG div:before,
.escapingBallG div:after {
  content: '';
  display: block;
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #007bff;
  animation: escapingBallG-shadow 1s ease-in-out infinite;
}

.escapingBallG div:before {
  left: -40px;
}

.escapingBallG div:after {
  left: 40px;
}

@keyframes escapingBallG {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-20px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes escapingBallG-shadow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }

  50% {
    transform: scale(0.2);
    opacity: 0.2;
  }
}

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
  display: none;
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  -webkit-animation-timing-function: ease-out !important;
  animation-timing-function: ease-out !important;
  -webkit-animation-duration: 0.3s !important;
  animation-duration: 0.3s !important;
  -webkit-animation-name: modal !important;
  animation-name: modal !important;
  transition: opacity 0.3s ease-out !important;
}

#channels-types.modal {
  background: rgba(0, 0, 0, 0.3);
}

.card_add {
  min-height: 100px;
  border: none;
  margin-left: 45px;
}

@media all and (min-width: 0px) and (max-width: 480px) {
  .card_add {
    border: none;
    margin-left: 10px;
  }

  .btn-light-polichat {
    min-width: 200px !important;
  }
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
  overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
  display: block;
}

/* **********************************
HOME
********************************** */
#tools {
  text-align: center;
}

#tools a {
  margin: 0 10px;
}

.channel {
  position: relative;
  margin-bottom: 15px;
}

span.channel-name {
  height: 32px;
  /* overflow: hidden; */
  white-space: nowrap;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
}

.channel-info {
  position: absolute;
  top: 100px;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10px;
}

.channel-info a,
.channel-info a:hover,
.channel-info a:visited,
.channel-info a:active {
  color: #fff;
}

#qr_code {
  width: 210px;
  height: auto;
  position: absolute;
  top: 0px;
  margin: 0px 10px;
  z-index: 100000;
  background: #fff;
  padding: 5px 8px 5px 8px;
  z-index: 100000;
}

#qr_code img {
  max-width: 100%;
}

#wpp_logo svg {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 9999;
  margin: -22.9px;
}

.box-channels {
  min-height: 145px;
}

/* .bg-dark {
  background-color: rgba(0, 0, 0, 0.8) !important;
} */
.bg-dark-2 {
  background-color: #212121;
}

.bg-green-polichat {
  background-color: #008a86;
}

.box-channels .loading {
  background: url(../img/loadings/bg-loading-channels.png) no-repeat;
  height: 145px;
  margin: 7px 0 0 13px;
}

.atendimentos .loading {
  background: url(../img/loadings/bg-loading-chats.png) no-repeat;
  height: 395px;
  padding: 0;
  margin: -5px 0 0 -8px;
}

.agentes .loading {
  background: url(../img/loadings/bg-loading-atendentes.png) no-repeat;
  height: 395px;
  padding: 0;
  margin: -5px 0 0 -8px;
}

.chat-history .loading {
  background: url(../img/loadings/bg-loading-history.png) no-repeat;
  height: 405px;
  padding: 0;
  margin: -8px 0;
}

.attendance-time .loading,
.avaliacoes .loading,
.cadastrar-metas .loading,
.report-tags .loading {
  background: url(../img/loadings/bg-loading-box.png) no-repeat;
  height: 405px;
  padding: 0;
  margin: -8px 0;
}

.contatos-ddd .loading {
  background: url(../img/loadings/bg-loading-ddd.png) no-repeat;
  height: 405px;
  padding: 0;
  margin: -8px 0;
}

.chat-history,
.contatos-ddd {
  min-height: 520px;
}

.attendance-time,
.avaliacoes {
  min-height: 200px;
}

.reports-page .loading {
  text-align: center;
  box-sizing: border-box;
  -webkit-animation: slide 1s linear infinite;
  width: 100%;
  position: absolute;
  z-index: 1;
}

.reports-page .box {
  display: none;
  border-radius: 3px !important;
}

@-webkit-keyframes slide {
  0% {
    opacity: 0.8;
    filter: alpha(opacity=80);
  }

  50% {
    opacity: 0.5;
    filter: alpha(opacity=50);
  }

  100% {
    opacity: 0.8;
    filter: alpha(opacity=80);
  }
}

.legend-charts ul li {
  float: left;
  margin: 3px 5px;
  cursor: pointer;
}

.legend-charts .box {
  height: 15px;
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 5px;
  float: left;
  margin: 4px 5px 0 0;
}

.legend-charts .label {
  font-size: 14px;
  color: #666;
  font-family: Helvetica, Arial, sans-serif;
}

.legend-charts ul li:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.legend-charts ul li.hide {
  text-decoration: line-through;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.filter-dashboard {
  /* overflow: hidden; */
  padding-right: 15px;
  padding-left: 15px;
}

.filter-div {
  padding: 0px !important;
}

.card-body-report {
  padding: 10px;
}

.filter-dashboard h1 {
  font-size: 15px;
  padding: 0.3rem 0rem;
}

h1.title-canais-report {
  font-size: 15px;
  padding: 0.3rem 0rem;
}

h1.title-filter > i,
h1.title-canais-report > i {
  color: var(--polichat-color);
  position: relative;
  top: 4px;
  font-size: 20px;
}

.reports-label > i {
  color: var(--polichat-color);
  position: relative;
  top: 4px;
  font-size: 20px;
  margin-bottom: 5px;
}

.center {
  margin: auto;
}

a.btn-simples {
  position: relative;
  top: 5px;
  color: var(--polichat-color);
}

.filter-dashboard.fixed {
  position: fixed;
  background: #fff;
  top: 0;
  width: auto;
  left: auto;
  z-index: 100;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
  padding-right: 15px;
  padding-left: 15px;
  border-radius: 0px 0px 5px 5px !important;
  margin: auto;
}

@media only screen and (max-width: 600px) {
  .filter-dashboard.fixed {
    position: unset;
  }
}

.filter-dashboard.fixed h1 {
  display: none;
}

.filter-dashboard label {
  font-size: 0.8em;
  margin: 0;
  color: #666;
  cursor: pointer;
}

.filter-dashboard .form-group input {
  float: left;
  font-size: 0.8em;
  padding-top: 8px;
  padding-bottom: 8px;
}

.checkbox-protocol-option {
  margin: 0px 0px 0px 10px;
  display: block;
}

.protocol-option {
  display: flex;
  margin: 10px 0px 0px 0px;
}

.protocol-option .fa {
  margin: 10px 0px 0px 10px;
}

.protocol-option submit {
  margin-left: 10px;
}

.filter-dashboard .date-filter {
  overflow: hidden;
}

.filter-dashboard .date-filter input.day {
  width: 60%;
}

.filter-dashboard .date-filter input.hour {
  width: 40%;
}

.date-reports {
  padding-right: 15px;
  padding-left: 15px;
  margin-top: 15px;
}

.date-filter {
  float: left;
  width: 20%;
  padding-right: 15px;
  padding-left: 15px;
}

.filter-dashboard.fixed .date-filter {
  width: 17%;
}

.department-filter {
  float: left;
  width: 25%;
}

.with-opened-filter {
  float: left;
  width: 10%;
  text-align: center;
  font-size: 0.85em;
  padding: 0px 5px 0 5px;
  display: block;
}

.bottons-filter {
  float: left;
  padding: 20px 0 0 15px;
  width: 23%;
}

.export-filter {
  float: left;
  margin: 0 10px 0 10px;
  border-left: solid 1px #ccc;
  border-right: solid 1px #ccc;
  padding: 0 10px;
}

.btn-filter {
  float: left;
}

.export-filter a {
  cursor: pointer;
}

.itens-added {
  clear: both;
  width: 100%;
  padding: 10px;
  overflow: hidden;
}

.item-agent {
  float: left;
  background: #ccc;
  padding: 5px;
  font-size: 0.8em;
  border-radius: 5px;
  margin: 0 5px 0 0;
}

.reports-abertos {
  padding-top: 10px;
  font-size: 18px;
}

.card-actives-title {
  background: #fbe4e8;
  width: 0px;
  height: 70px;
  border-radius: 50px;
  padding-top: 24px;
  margin: auto;
  text-align: center;
  color: #ff647c;
}

.card-totals-title {
  background: #d5f2ea;
  width: 70px;
  height: 70px;
  border-radius: 50px;
  padding-top: 24px;
  margin: auto;
  text-align: center;
  color: #00c48c;
}

h5.card-subtitle-contacts {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  position: relative;
}

.card-report-title {
  margin-bottom: 0;
  background: #f5f6f7;
  width: 70px;
  height: 70px;
  border-radius: 100%;
  line-height: 70px;
  text-align: center;
  margin: auto;
  color: #999;
}

.card-icon {
  height: 3rem;
  font-size: 3rem;
  line-height: 4rem;
  text-align: center;
  margin: auto;
  border-radius: 5px 5px 0px 0px;
  margin: auto;
  padding: 0;
  border-bottom: 1px solid #ccc;
  width: 90%;
}

.card-whatsapp {
  color: #2bce35 !important;
}

.card-facebook {
  color: #006dff;
}

.card-webchat {
  color: #ffcf5c !important;
}

.card-instagram {
  color: radial-gradient(
    99.11% 99.11% at 26.56% 107.7%,
    #ffdd55 0%,
    #ffdd55 10%,
    #ff543e 50%,
    #c837ab 100%
  ) !important;
}

.item-close {
  float: right;
  color: #ff647c;
  margin: -2px 0 0;
  cursor: pointer;
  font-size: 22;
}

a.tooltip-report {
  position: relative;
  top: 5px;
  font-size: 24px;
  color: #c7caca;
}

a.tooltip-report:hover {
  position: relative;
  top: 5px;
  font-size: 24px;
  color: #909191;
  text-decoration: none;
  background: transparent;
}

.item-close:hover {
  float: right;
  color: #fdafbb;
  margin: -3px 0 0;
  cursor: pointer;
  font-size: 22;
}

.item-body {
  float: left;
  margin: 0 5px 0;
}

.item-agent.channel {
  background: #bfe8eb;
}

.dash_card .card-title {
  text-align: center;
  font-size: 2em;
}

.card-subtitle {
  text-align: center;
  margin-top: 15px;
  color: #999;
  font-weight: bold;
}

.dash_card {
  text-align: center;
}

.dash_card .interacoes {
  background: #d4e6ea !important;
}

.card-channel {
  height: 112px;
  background: #fff;
}

.card-channel .card-body {
  padding-top: 0;
  width: 100%;
}

.card-channel img {
  position: absolute;
  z-index: 0;
  opacity: 0.5;
  width: 70px;
  margin: 3px;
}

.card-channel .head_card label {
  font-size: 0.9em;
}

.card-channel .head_card label small {
  font-size: 0.7em;
}

.dash_card.contatos .head_card {
  margin: -19px 0 0 -10px;
  font-size: 0.8em;
  color: #9c9c9c;
}

.dash_card .part {
  float: left;
  width: 50%;
}

.dash_card.contatos h5 {
  font-size: 1.5em;
}

.dash_card.contatos h6 {
  font-size: 0.7em;
}

.dash_card.contatos .card-text {
  padding: 15px 0 0;
  clear: both;
  display: block;
  margin: 0 0 -8px;
  color: #666;
}

.agentes table {
  font-size: 0.8em;
  text-align: center;
}

.modal_body {
  width: 100%;
  overflow-y: auto;
  margin: 0;
  height: 100%;
}

.chats-agent table,
.logs-agent table {
  font-size: 0.9em;
  width: 100%;
}

.chats-agent .contact_name {
  width: 25%;
  min-width: 250px;
}

.chats-agent .date,
.logs-agent .date {
  width: 100px;
}

.chats-agent .contact_type,
.logs-agent .contact_type {
  width: 80px;
}

.chats-agent #modal_content,
.logs-agent #modal_content {
  overflow-y: none !important;
  padding: 50px 0 0;
}

td.status_before.Online > i {
  color: #00c48c;
  position: relative;
  top: 2px;
}

td.status_before.Offline > i {
  color: #ff647c;
  position: relative;
  top: 2px;
}

td.status.Online > i {
  color: #00c48c;
  position: relative;
  top: 2px;
}

td.status.Offline > i {
  color: #ff647c;
  position: relative;
  top: 2px;
}

button.close-modal {
  background: #ff647c;
  opacity: inherit;
  box-shadow: none;
  text-shadow: none;
  font-size: 18px;
  color: #fff;
  border: none;
  padding: 15px;
  border-radius: 6px;
  font-weight: normal;
  font-style: normal;
}

.chats-agent .section_title,
.logs-agent .section_title {
  position: absolute;
  height: 35px;
  width: 100%;
  z-index: 10;
  margin: -45px 0 0 18px;
  color: #606161;
}

.pag-report {
  margin: auto;
  text-align: center;
}

.chats-agent .loading,
.logs-agent .loading {
  background: url(../img/bg-loading-chats-agents.png) no-repeat;
  height: 145px;
  margin: 7px 0 0 13px;
}

.modal_body.box {
  border: 1px solid #dee2e6;
  border-radius: 6px;
  height: auto !important;
}

.tabela-reports {
  padding-top: 15px;
  padding-bottom: 15px;
}

.logs-agent .status0 td {
  background: #f5f6f7;
}

tr.status0:hover {
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

tr.status1:hover {
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.logs-agent .status1 td {
  background: #fff;
}

.logs-agent .status2 td {
  background: #f9dc75;
}

.pagination li {
  display: block;
  float: left;
  padding: 5px 10px;
  margin: 2px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  color: #16bac5;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
  border-radius: 5px;
  color: #16bac5;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
  background-color: #f5f6f7;
  color: #16bac5;
}

.pagination > li > a,
.pagination > li > span {
  border-radius: 5px;
  color: #16bac5;
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
  border-radius: 5px;
  background: #16bac5;
  border: 1px solid #16bac5;
}

.pagination li.current {
  background: #16bac5;
  color: #fff;
}

.pagination li.ignore {
  border: none;
  cursor: none;
}

#modal_close {
  z-index: 100;
}

.report-chats-agent,
.report-logs-agent,
.agentes .name a {
  color: #007bff !important;
  text-decoration: underline !important;
  cursor: pointer;
}

.agentes .name a {
  color: #666 !important;
  text-decoration: none !important;
  padding: 6px 10px;
}

.agentes .name a:hover {
  background: #e9eaed;
  border-radius: 3px;
}

.waiting_total {
  background: #ccc;
}

.avaliacoes .box {
  min-height: 200px;
}

.avaliacoes .box label,
.report-tags .box label {
  float: left;
  display: block;
  padding: 10px;
  margin: 10px;
  color: #606161 !important;
  text-decoration: none !important;
  border-radius: 3px;
  background: linear-gradient(
    259.71deg,
    #e4e8eb 3.6%,
    #e0e4e7 96.23%
  ) !important;
  box-shadow: 1px 1px 5px #e0e4e7, inset 0px 4px 6px #e0e4e7 !important;
  border-radius: 3px;
  transition-duration: 0s;
  transition-delay: 0s;
  white-space: nowrap;
  cursor: pointer;
}

.avaliacoes .box label,
.report-tags .box label:hover {
  padding: 10px;
  margin: 10px !important;
  background: linear-gradient(
    259.71deg,
    #e0e4e7 3.6%,
    #e4e8eb 96.23%
  ) !important;
  box-shadow: -1px -1px 5px #e0e4e7, inset 0px -4px 6px #e0e4e7 !important;
  border-radius: 3px;
  transition-duration: 0s;
  transition-delay: 0s;
  line-height: 33px;
  color: #606161 !important;
}

button.btn.btn-group-polichat.open:hover,
button.btn.btn-group-polichat.open:active,
button.btn.btn-group-polichat.open {
  background: linear-gradient(
    259.71deg,
    #e0e4e7 3.6%,
    #e4e8eb 96.23%
  ) !important;
  box-shadow: inset 0px -4px 6px #e0e4e7 !important;
  transition-duration: 0s;
  transition-delay: 0s;
  color: #606161 !important;
}

.avaliacoes .box .rate_progress,
.report-tags .box .content_tags {
  clear: both;
  padding: 15px;
}

.avaliacoes label:hover,
.report-tags .box label:hover {
  padding: 10px;
  margin: 10px !important;
  margin: auto;
  background: #f3f3f3;
  color: #000;
}

button.btn.btn-group-polichat {
  background: linear-gradient(
    189.15deg,
    #0d9da7 -21.22%,
    var(--polichat-color) 74.1%
  ) !important;
  box-shadow: inset 0px 4px 6px var(--polichat-color) !important;
  border: none !important;
  border: 1px solid #f5f6f7 !important;
  transition-duration: 0s;
  transition-delay: 0s;
  color: #fff !important;
}

.avaliacoes label.open,
.report-tags .box label.open {
  float: left;
  display: block;
  padding: 10px;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 3px;
  background: linear-gradient(
    189.15deg,
    #0d9da7 -21.22%,
    var(--polichat-color) 74.1%
  ) !important;
  box-shadow: 1px 1px 5px rgba(13, 157, 167, 0.3),
    inset 0px 4px 6px var(--polichat-color) !important;
  border-radius: 3px;
  transition-duration: 0s;
  transition-delay: 0s;
  white-space: nowrap;
  cursor: pointer;
  margin: 10px;
  line-height: 2;
}

.avaliacoes label.open,
.report-tags .box label.open:hover {
  padding: 10px;
  margin: 10px;
  background: linear-gradient(
    259.71deg,
    var(--polichat-color) 3.6%,
    #0da3a7 96.23%
  ) !important;
  box-shadow: -1px -1px 5px rgba(13, 157, 167, 0.3),
    inset 0px -4px 6px var(--polichat-color) !important;
  border-radius: 3px;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  color: #ffffff !important;
}

.avaliacoes .avg {
  width: 180px;
  margin: 15px auto 0 auto;
  border: solid 1px #ccc;
  text-align: center;
  padding: 10px 0;
  border-radius: 5px;
}

.avaliacoes .avg .value {
  display: block;
  font-size: 1.5em;
}

.avaliacoes .avg .legend {
  font-size: 0.8em;
}

.avaliacoes .avg .my_bar {
  height: 6px;
  margin: -13px 5px 0 5px;
  border-radius: 00;
  border: solid 1px #ccc;
}

.avaliacoes .avg2 {
  width: 180px;
  /* margin: 15px auto 0 auto; */
  border: solid 1px #ccc;
  text-align: center;
  padding: 10px 0;
  border-radius: 5px;
}

.rate_agent.rate_progress {
  text-align: center;
}

.avaliacoes .avg2 .value {
  display: block;
  font-size: 1.5em;
}

.avaliacoes .avg2 .legend {
  font-size: 0.8em;
}

.avaliacoes .avg2 .my_bar {
  height: 6px;
  margin: -13px 5px 0 5px;
  border-radius: 00;
  border: solid 1px #ccc;
}

.item-text {
  font-family: inherit;
  font-size: 16px;
}

.report-tags .item-tag .name,
.report-tags .item-tag .total {
  width: 122px;
}

.text-muted {
  color: red !important;
  font-weight: bold !important;
}

.report-tags .item-tag > span {
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  background: #fff;
  font-size: 0.7em;
  height: 19px;
  padding: 0 2px;
  white-space: nowrap;
  text-align: center;
  border: solid 1px #ccc;
  position: relative;
}

.report-tags .carddetags .details {
  display: none;
  font-size: 0.9em;
  top: 0;
  right: 0;
  padding: 6px 10px;
  height: auto;
  border-radius: 5px;
  position: absolute;
  background: linear-gradient(
    189.15deg,
    #0d9da7 -21.22%,
    var(--polichat-color) 74.1%
  ) !important;
  box-shadow: inset 0px 4px 6px var(--polichat-color) !important;
  color: #fff;
  width: 100%;
  height: 35px;
}

.report-tags .content_tags {
  overflow-y: auto;
  height: 250px;
  border-radius: 3px;
}

.report-tags .carddetags span span {
  margin: 0 5px;
}

.report-tags .carddetags .direct,
.report-tags .carddetags .chat {
  margin: 0 5px;
}

.report-tags .carddetags:hover .details {
  display: block;
  margin: auto;
  text-align: center;
}

.report-tags .clear {
  clear: both;
  height: 26px;
  padding: 13px 0 0 0;
  margin: 0;
}

.report-tags .clear hr {
  margin: 0;
  padding: 0;
}

.listaHistory {
  float: right;
  height: 34px;
  width: 10px;
  margin: -33px -10px 0 0;
  background: #f1f1f1;
}

.listaHistory .icon-open {
  margin: 10px 0 0;
  color: #666;
}

.listaHistory h3 {
  display: none;
  background: #f5f4f4;
  width: 300px;
  padding: 5px;
  margin: -21px 0 0;
  z-index: 100;
  position: absolute;
  font-size: 0.8em;
  border: solid 1px #ccc;
  text-align: center;
  border-radius: 3px 3px 0px 0px;
}

.listaHistory ul {
  display: none;
  position: absolute;
  background: #fff;
  overflow-x: auto;
  min-height: 180px;
  border: solid #ccc 1px;
  padding: 10px;
  width: 300px;
  z-index: 10;
  height: auto;
  border-radius: 0px 0px 3px 3px;
}

.listaHistory:hover h3 {
  display: block;
}

.listaHistory:hover ul.list {
  display: block;
}

.listaHistory ul a {
  font-size: 0.8em;
  color: #666 !important;
}

.listaHistory ul ul {
  display: none;
  height: auto;
  width: auto;
  background: #4a4949;
  position: absolute;
  right: 0;
  margin: -15px 10px 0 0;
  min-height: auto;
  color: #fff;
}

.listaHistory ul ul label {
  color: #fff;
}

.listaHistory ul li:hover ul {
  display: block;
}

.listaHistory ul ul ul {
  position: unset;
  border: none;
  font-size: 0.8em;
  padding: 13px 0 0 15px;
}

.logs-filter .listaHistory > ul,
.logs-filter .listaHistory h3 {
  margin-left: -21px;
  font-family: Helvetica, Arial, sans-serif !important;
}

.logs-filter .listaHistory {
  background: none;
  height: 15px;
  margin: 0;
  padding: 0.375rem 0.75rem;
  width: 100%;
  font-family: Helvetica, Arial, sans-serif !important;
}

.logs-filter {
  font-family: Helvetica, Arial, sans-serif !important;
}

.logs-filter .icon-open {
  margin: 0 0 0 5px;
  cursor: pointer;
}

/* MODAL NOVO PLANO */
#modalAtivar .modal-lg {
  max-width: 1250px;
  left: 40px;
  max-height: 1000px;
}

.subtitulo {
  margin-top: 0;
  font-size: 0.8em;
  text-align: right;
}

#modalAtivar .modal-content {
  height: 1000px;
}

.btn-ouro {
  background-color: #a907a9;
  border-color: #a907a9;
}

.btn-ouro:hover {
  background-color: purple;
  border-color: purple;
}

.btn-diamante {
  background-color: blue;
  border-color: blue;
}

.btn-diamante:hover {
  background-color: #0000b9;
  border-color: #0000b9;
}

.btn-personalizado {
  background-color: red;
  border-color: red;
}

.btn-personalizado:hover {
  background-color: #a90000;
  border-color: #a90000;
}

.riscado {
  color: red;
}

.aligned {
  text-align: center;
}

.setup {
  font-size: 1.5em;
  font-weight: bold;
  color: red;
}

.setup-riscado {
  font-weight: 800;
  margin-bottom: 0;
}

.card-planos {
  margin: 0;
  padding: 0;
  width: 18.5rem;
  border-radius: 25px;
  height: 756px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.imgTitulo {
  float: left;
  margin-left: 60px;
}

.imgTitulo2 {
  float: left;
  margin-left: 10px;
}

.card-title-planos {
  text-align: center;
  font-size: 23px;
  float: left;
}

.list-group-item h5 {
  font-size: 17px;
}

.choosePlain {
  margin: auto;
}

.img-checked {
  float: left;
  width: 15%;
  max-height: 30px;
}

.feature-card {
  float: left;
  width: 85%;
  font-size: 15px;
}

.suporte-personalizado {
  font-size: 20px;
}

.check-green {
  color: green;
  font-size: 1.8rem;
}

.check-text {
  float: left;
  margin-left: 10px;
}

.left {
  float: left;
}

.close-red {
  color: red;
  font-size: 1.8rem;
}

.mais-vendido-text {
  font-weight: bold;
  color: #04ca04;
  float: right;
  font-size: 18px;
}

.mais-vendido-div {
  position: relative;
}

h5.card-title.card-title-planos {
  padding: 15px;
}

.card-body-titulo {
  padding: 0;
  padding-top: 25px;
}

.settings {
  padding-top: 0;
  height: 600px;
  margin-top: 50px;
  flex: 0;
}

.card-body.card-body-titulo {
  height: 10px;
  max-height: 50px;
}

.btn-adquirir {
  padding: 1.25em;
}

/*.bg-dark {
  background-color: rgba(0, 0, 0, 0.8) !important;
}*/
.bg-dark-2 {
  background-color: #212121;
}

.try_again_scan_qrcode {
  position: absolute;
  z-index: 10000;
  background: #ffffffdb;
  width: 264px;
  height: 265px;
  padding: 110px 0;
  border: solid 2px #155a18;
  text-align: center;
  top: 0;
  margin: 0 -14px;
  z-index: 100000;
}

.try_again_scan_qrcode button {
  background: var(--polichat-color);
  color: #fff;
  border: solid 2px var(--polichat-color);
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

@media only screen and (max-width: 768px) {
  /* #sidebar_wrapper {
    display: none;
  } */
}

.try_again_scan_qrcode {
  position: absolute;
  z-index: 10000;
  background: #ffffffdb;
  width: 264px;
  height: 265px;
  padding: 110px 0;
  border: solid 2px #155a18;
  text-align: center;
  top: 0;
  margin: 0 -14px;
  z-index: 100000;
}

.try_again_scan_qrcode button {
  background: var(--polichat-color);
  color: #fff;
  border: solid 2px var(--polichat-color);
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.radios {
  text-align: center;
}

.try_again_scan_qrcode button:hover {
  border: solid 2px var(--polichat-color);
  background: #ff9800;
  color: var(--polichat-color);
}

#qr_code_loading {
  height: 265px;
  border: solid 1px #ccc;
  width: 265px;
  text-align: center;
  padding: 111px 0 0;
  background: #f4f4f4;
  color: #666;
  font-weight: bold;
  position: absolute;
  top: 0;
  margin: 0 -14px;
}

span.st1 {
  font-family: Helvetica, Arial, sans-serif !important;
}

label.label-channels {
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: 16px !important;
  white-space: nowrap;
  overflow: hidden;
  display: inline;
  text-overflow: ellipsis;
  min-height: 50px;
  color: #000;
}

.btn-sucess-polichat {
  background: var(--polichat-color);
  border: solid 1px var(--polichat-color);
  width: 100%;
  color: #fff;
}

.btn-sucess-polichat:hover,
.btn-pesquisa-polichat:hover {
  background: #0d9da7;
  border: solid 1px #0d9da7;
  color: #fff;
}

.btn-sucess-polichat:active,
.btn-pesquisa-polichat:active {
  background: #0d9da7 !important;
  border: solid 1px #0d9da7 !important;
}

input.btn.btn-sucess-polichat:active {
  background: #0d9da7;
  border: solid 1px #0d9da7;
}

.btn-pesquisa-polichat {
  background: #2cb9b0;
  border: solid 1px #2cb9b0;
  width: 100%;
  color: #fff;
}

a.btn.btn-neutral-polichat {
  background: #fff;
  border: none !important;
  width: 100%;
  color: #5a677e !important;
  padding-bottom: 10px;
}

a.btn.btn-neutral-polichat:hover {
  background: #f5f6f7 !important;
  border: none !important;
  width: 100%;
  color: #5a677e !important;
}

a.exportxls.btn.btn-secondary-polichat {
  background: #fff !important;
  border: none !important;
  width: 100% !important;
  color: #2cb9b0 !important;
  padding-bottom: 10px;
}

a.exportxls.btn.btn-secondary-polichat:hover {
  border: none !important;
  background: #f5f6f7 !important;
  color: #0d9da7 !important;
}

.btn-terceriary-polichat {
  background: transparent;
  border: solid 1px #16bac5;
  color: #16bac5 !important;
  padding-bottom: 7px;
  width: 100%;
}

.btn-terceriary-polichat:hover {
  border: solid 1px #16bac5;
  background: transparent;
  color: #16bac5 !important;
}

a.btn.btn-terceriary-polichat > i,
a.btn.btn-cancel-polichat > i {
  position: relative;
  top: 3px;
  font-size: 18px;
}

.btn-cancel-polichat:hover {
  border: solid 1px #ff647c;
  background: transparent;
  color: #ff647c !important;
}

.btn-cancel-polichat:focus {
  border: solid 1px #ff647c !important;
  box-shadow: 0 0 0 2px #ff647c38 !important;
}

.btn-cancel-polichat {
  border: solid 1px #ff647c;
  background: transparent;
  width: 100%;
  color: #ff647c !important;
}

.btn-cancelar {
  margin-right: 10px;
}

a.btn-secondary-polichat > i,
a.btn-neutral-polichat > i {
  position: relative;
  top: 5px;
  font-size: 24px;
}

.st1,
.badge-success-polichat {
  padding: 10px;
  background: #d5f2ea;
  color: #2cb9b0;
  min-height: 30px;
  padding: 8px !important;
  font-weight: normal !important;
  border-radius: 5px;
  font-family: Helvetica, Arial, sans-serif !important;
}

.badge-secondary-polichat-api {
  padding: 10px !important;
  background: #d5e9fa !important;
  color: #0084f4 !important;
  min-height: 30px !important;
  font-weight: normal !important;
  border-radius: 5px !important;
  font-family: Helvetica, Arial, sans-serif !important;
}

.badge-secondary-polichat {
  padding: 10px !important;
  background: #b6b6c7 !important;
  color: #fff !important;
  min-height: 30px !important;
  font-weight: normal !important;
  border-radius: 5px !important;
  font-family: Helvetica, Arial, sans-serif !important;
}

.badge-warning-polichat-wait {
  padding: 10px;
  color: #606161;
  background: #ffcf5c;
  min-height: 30px;
  padding: 8px !important;
  font-weight: normal !important;
  border-radius: 5px;
  font-family: Helvetica, Arial, sans-serif !important;
  margin-bottom: 5px;
}

.badge-warning-polichat {
  padding: 10px;
  color: #606161;
  background: #ffcf5c;
  min-height: 30px;
  padding: 8px !important;
  font-weight: normal !important;
  border-radius: 5px;
  font-family: Helvetica, Arial, sans-serif !important;
  margin-bottom: 5px;
}

.badge-danger-polichat {
  padding: 10px;
  color: #ff647c;
  background: #fbe4e8;
  min-height: 30px;
  padding: 8px !important;
  font-weight: normal !important;
  border-radius: 5px;
  font-family: Helvetica, Arial, sans-serif !important;
  margin-bottom: 5px;
}

.fa-comment-alt,
.fa-facebook {
  font-size: 90%;
}

.st4 {
  padding: 10px;
  background: #fcfbfe;
  color: #b6b6c7;
  min-height: 30px;
  padding: 8px !important;
  border-radius: 5px;
}

.card-footer {
  background: transparent !important;
}

.list-channels a {
  position: absolute;
  font-size: 17px;
  color: #fff;
  letter-spacing: 0;
  text-align: center;
  line-height: 22px;
  right: 0;
  width: 187px;
  height: 30px;
  font-family: Helvetica, Arial, sans-serif;
  height: 30px;
  background: #06948e;
  border-radius: 5px;
  top: 265px;
  font-size: 17px;
  padding: 5px;
  left: 20px;
  text-align: center;
}

.list-channels a.activate {
  width: 187px;
  height: 30px;
  font-size: 16px;
  color: #909191;
  letter-spacing: 0;
  text-align: center;
  line-height: 21px;
  font-family: Helvetica, Arial, sans-serif;
  background: #e4e8eb;
  padding: 5px;
  border-radius: 5px;
  top: 300px;
  left: 20px;
}

.list-channels a.connect {
  width: 187px;
  height: 30px;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0;
  text-align: center;
  line-height: 21px;
  font-family: Helvetica, Arial, sans-serif;
  background: #06948e;
  padding: 5px;
  border-radius: 5px;
  top: 300px;
  left: 20px;
}

.list-channels a.disconnect {
  width: 187px;
  height: 30px;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0;
  text-align: center;
  line-height: 21px;
  font-family: Helvetica, Arial, sans-serif;
  background: #ffa600;
  padding: 5px;
  border-radius: 5px;
  top: 300px;
  left: 20px;
}

.list-channels a:hover {
  background: #45afab;
  text-decoration: none;
}

.list-channels a.activate:hover {
  background: #e9eaed;
  text-decoration: none;
}

.card-links {
  background: #000 !important;
}

.list-channels .deactivated a.activate {
  color: #fff;
  background: var(--polichat-color) !important;
}

.list-channels .deactivated a.activate:hover {
  color: #fff;
  background: #4fcad2 !important;
}

.list-channels .deactivated {
  background: rgba(234, 239, 247, 0.8);
  min-height: 350px;
  border-radius: 5px;
}

.upgrade-plain-channels {
  float: left;
}

#link-channels {
  color: blue;
}

.list-channels .card_text small {
  display: block;
  color: #666;
}

.list-channels .card_text {
  text-align: center;
  min-height: 65px;
}

.list-channels .status span {
  display: block;
  padding: 0 5px;
  text-align: center;
  font-size: 0.7em;
}

.list-channels .status {
  min-height: 60px;
}

.show-qr_code {
  font-size: 0.7em;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  margin: -13px 0 0 0;
  text-align: center;
  cursor: pointer;
  color: #9595a4;
}

.show-qr_code:hover {
  color: #b6b6c7;
}

.list-channels a.refresh_data {
  color: rgb(0, 123, 255);
  text-decoration: underline;
  font-size: 0.9em;
  margin: -13px 5px 0 0;
}

.list-channels .loading,
.edit-channel .loading {
  text-align: center;
  width: 100%;
  height: 300px;
  padding: 97px 0 0;
  font-size: 2em;
  color: #ccc;
}

.pictureContainer {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  width: 100%;
}

.pictureProfile {
  display: flex;
  padding: 0px 0px 0px 8px;
  float: var(--menuFloat);
  justify-content: var(--justifyContentMenu);
}

.pictureContainer .pictureProfile {
  align-items: center;
  /* background: #eee;
  border-radius: 50%; */
  display: flex;
  height: 120px;
  justify-content: center;
  width: 120px;
  position: relative;
}

.pictureContainer .pictureProfile img {
  width: 100%;
}

.pictureContainer .pictureProfile i {
  color: #333;
  font-size: 50px;
  padding: 0;
  text-align: center;
}

.pictureContainer .pictureProfile label.edit {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: pointer;
}

.pictureContainer .pictureProfile label.edit i {
  font-size: 1em;
}

.pictureProfile label.delete {
  overflow: hidden;
  width: 20px;
  height: 20px;
  font-weight: bold;
  color: #f00;
  position: absolute;
  right: 0;
  top: 0;
  border: solid 1px;
  text-align: center;
  border-radius: 10px;
  font-size: 0.9em;
  cursor: pointer;
}

.pictureProfile .img {
  overflow: hidden;
  height: 120px;
  width: 120px;
  background: #eee;
  border-radius: 50%;
  border: solid 2px #ccc;
  box-shadow: 0px 0px 5px #ccc;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.li-picture {
  width: 150px;
  height: 50px;
  overflow: hidden;
  word-break: break-all;
  position: absolute;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.type-company > i {
  color: var(--polichat-color);
  font-size: 80px;
}

.type-company {
  font-family: Helvetica, Arial, sans-serif !important;
  text-align: center !important;
  color: #606161 !important;
  margin: auto !important;
  padding: 10px;
}

.dropdown-menu > button {
  cursor: pointer;
}

.dropdown-menu > a {
  font-family: Helvetica, Arial, sans-serif !important;
  text-align: left !important;
  color: #606161 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.perfil > i,
.out-menu > i {
  font-size: 28px !important;
  position: relative;
  top: 9px;
}

a.dropdown-item.perfil {
  color: var(--polichat-color) !important;
  padding-bottom: 15px;
  border: var(--polichat-color) 1px solid;
  border-radius: 5px;
  line-height: 0rem;
  text-indent: 0rem;
  margin-bottom: 5px;
}

a.dropdown-item.perfil:hover {
  color: #fff !important;
  background: var(--polichat-color) !important;
  box-shadow: none !important;
}

a.a-picture {
  height: 80px;
}

a.dropdown-item:active {
  background: var(--polichat-color) !important;
  color: #fff !important;
}

button.button-primary-polichat:focus {
  box-shadow: none !important;
}

button.button-primary-polichat {
  color: var(--polichat-color) !important;
  border: none;
  background: transparent;
  min-width: 250px;
}

button.button-primary-polichat:hover {
  color: #bfe8eb !important;
}

button.button-primary-polichat > i:hover {
  color: #bfe8eb !important;
}

button.button-primary-polichat > i {
  font-size: 30px;
  position: relative;
  top: 6px;
}

h1.blue {
  color: #007aff;
}

h1.yellow {
  color: #ffa600;
}

h1.red {
  color: #ff4344;
}

a.dropdown-item.out-menu {
  color: #ff647c !important;
  padding-bottom: 15px;
  border: #ff647c 1px solid;
  border-radius: 5px;
  line-height: 0rem;
  text-indent: 0rem;
}

i.sub_icon.pi-bell-line.iconmenu.icon-notification {
  left: 0px;
}

i.sub_icon.pi-message-line.iconmenu {
  left: 1px;
}

i.sub_icon.pi-admin-polichat-line.iconmenu {
  left: 1px;
}

a.dropdown-item.out-menu:hover {
  color: #fff !important;
  padding-bottom: 15px;
  border: #ff647c 1px solid;
  border-radius: 5px;
  line-height: 0rem;
  text-indent: 0rem;
  background: #ff647c !important;
  box-shadow: none !important;
}

#li-picture.pictureProfile img {
  display: flex;
  width: 30px;
  height: 30px;
  font-size: 12px;
  border-radius: 15px;
  align-items: center;
  margin: 10px 19px 15px 5px;
  object-fit: cover
}

.priority-actions .fa-plus:before {
  background: none;
  color: #fff;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  display: unset;
  margin: 0;
}

.priority-actions .input-action {
  width: 25%;
}

.priority-actions .input-action label {
  padding: 0;
  margin: 0;
  font-size: 0.9em;
  color: #666;
}

.priority-actions .input-submit {
  width: 150px;
  padding: 23px 0 0;
}

.priority-actions .input-submit,
.priority-actions .input-action {
  float: left;
}

.list-priority-actions .card {
  float: left;
  margin: 5px 1%;
  height: 280px;
}

.list-priority-actions .card-title small {
  font-size: 0.4em;
  margin: -15px;
  color: #b7b7b7;
  position: absolute;
  right: 25px;
  top: 17px;
}

.list-priority-actions .card-title {
  text-align: center;
  border-bottom: solid 1px #e0e0e0;
  font-size: 1.5em;
  color: #666;
}

.list-priority-actions .card-text strong {
  font-weight: normal;
  font-size: 0.8em;
}

.list-priority-actions .card-text strong span {
  font-weight: bold;
  font-size: 1.2em;
  text-decoration: underline;
}

img.img-channel {
  margin-top: 38px;
}

.card-customers {
  background-color: #cce9cc;
}

.span-customer-name {
  font-size: 10px;
  text-align: center;
  width: 100%;
  max-width: 127px;
  background-color: #9e9e9e;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: ltr;
}

ul.channels {
  list-style-type: none;
}

li.list-channels {
  font-size: 10px;
  cursor: pointer;
  margin-left: 5px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 117px;
  text-overflow: ellipsis;
}

li.list-channels.Conectado {
  background-color: #1eb496;
}

li.list-channels.Desconectado {
  background-color: #ff2e63;
}

.modal-history {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.8) url(../img/loadings/loading.gif) 50% 50%
    no-repeat;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  outline: 0;
  overflow: auto;
}

div.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 100%;
}

div.modal-content-delete {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 100%;
}

.modal-delete-title {
  display: flex !important;
  width: 100%;
}

.modal-delete-title i {
  color: #ff5e77;
  position: absolute;
  margin: 14px 0px 0px 30px;
}

.modal-delete-title h2 {
  color: #616262;
  margin: auto 0px auto 0px;
}

.modal-delete-title :before {
  font-size: 30px;
}

.modal-delete-circle {
  background-color: #f5f6f7;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin: 0px 15px;
}

.btn-danger-delete {
  background-color: #c8566c;
  color: #fff;
  width: 180px;
}

.button-delete-modal {
  display: flex;
  justify-content: center;
  margin: 15px 0px 0px 0px;
}

.alert-danger {
  color: #ff647c;
  background-color: #fbe4e8;
  border-color: #ff647c !important;
}

.modal-close-delete {
  color: #ff647c;
  font-size: 30px;
  margin-top: -12px;
  display: flex;
  cursor: pointer;
  justify-content: flex-end;
}

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin: 1rem 0rem 1rem 0rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.close-modal {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
  margin-right: 154px;
  cursor: pointer;
}

.row {
  justify-content: flex-end;
}

ul.logs {
  list-style-type: none;
}

li.list-logs {
  font-size: 12px;
}

.dash_button.card-customers {
  width: 8rem;
  min-height: 4rem;
  margin: 10px;
  margin-right: 0;
}

span.center {
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
  font-size: 20px;
}

.row.channels {
  display: -webkit-box;
  margin-right: 0px;
  margin-left: 0px;
}

.card-body.channels {
  min-height: 60px;
  padding: 0 !important;
}

.body-facebook {
  display: flex;
}

.channels-checkbox {
  margin-bottom: 5px;
}

.observation {
  margin: 20px;
}

/* TUTORIALS */
.tutorials .add_category .fa-plus:before,
.tutorials .add_tutorial .fa-plus:before {
  background: none;
  color: unset;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  border: none;
  display: inline;
}

.label-channels {
  margin-left: 3px;
}

.tutorials .has-error {
  color: #f00;
}

.tutorials .has-error input,
.tutorials .has-error select,
.tutorials .has-error textarea,
.tutorials .has-error .tox-tinymce {
  border: #f00 solid 1px;
  background: #fee;
}

.tutorials .not_exists_categories {
  padding: 20px 0;
  text-align: center;
  font-size: 1.5em;
  color: #666;
}

.imageCategory,
.imageTutorial {
  position: relative;
}

.imageTutorial {
  width: 100%;
}

.imageCategory .img,
.imageTutorial .img {
  background: #ccc;
  height: 145px;
  width: 360px;
  position: relative;
  border: solid 1px #666;
}

.imageTutorial .img {
  width: 100%;
}

.imageCategory .img img,
.imageTutorial .img img {
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  display: block;
}

.imageCategory label.edit,
.imageTutorial label.edit {
  position: absolute;
  padding: 0 3px;
  width: 21px;
  height: 23px;
  cursor: pointer;
  z-index: 100;
  background: #fff;
  opacity: 0.6;
}

.imageCategory .img label,
.imageTutorial .img label {
  font-weight: bold;
  position: absolute;
  right: 0px;
  top: 0px;
  background: #fff;
  opacity: 0.6;
  padding: 0 5px;
  overflow: hidden;
  height: 22px;
  width: 20px;
  cursor: pointer;
}

.imageCategory .sub_icon,
.imageTutorial .sub_icon {
  font-size: 9em;
  float: none;
  margin: 0 auto;
  display: block;
  clear: both;
  color: #666;
  padding: 45px 0 0 0;
}

.imageCategory .fa-image:before,
.imageTutorial .fa-image:before {
  margin: 0 0 0 -44px;
}

.tutorials .boxSlides,
.tutorials .boxVideo {
  border: solid 1px #ccc;
  background: #495057;
  color: #fff;
  height: 380px;
  width: 480px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.tutorials .boxSlides label .fa-plus:before,
.tutorials .boxVideo label .fa-plus:before,
.tutorials .fa-plus:before {
  background: none;
  color: #fff;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: unset;
  display: unset;
  margin: 0;
}

.tutorials .boxSlides label,
.tutorials .boxVideo label,
.tutorials .boxVideo input {
  margin: 167px auto 0 auto;
  text-align: center;
  display: block;
  background: #7d7d7d;
  width: 295px;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.tutorials .boxVideo input {
  background: #e4e4e4;
  width: 400px;
  cursor: unset;
}

.tutorials .boxVideo label,
.tutorials .boxVideo input {
  margin: 170px auto 0 auto;
}

.tutorials .boxVideo {
  width: 720px;
  height: 405px;
  margin: 0 auto;
}

.tutorials .boxSlides label:hover {
  background: #969696;
}

.tutorials .has-error .boxVideo {
  border: solid 1px #f00;
  background: #a28d8d;
}

.tutorials .has-error .boxVideo .form-text {
  text-align: center;
}

.tutorials .tutorial-error-alert {
  width: 100%;
  text-align: center;
  margin: 0 0 2% 0;
}

.tutorials .slides {
  text-align: center;
  display: table;
  height: 100%;
}

.tutorials .slides .slide {
  display: none;
}

.tutorials .slides .current {
  display: block;
  margin: 0 auto;
  border: solid 1px #ccc;
  display: table-cell;
  vertical-align: middle;
  width: 480px;
}

.tutorials .slides img {
  max-height: 320px;
  max-width: 100%;
}

.tutorials .controls .nav-before,
.tutorials .controls .nav-after {
  position: absolute;
  background: #000;
  color: #fff;
  opacity: 0.2;
  border: solid 1px #000;
  padding: 20px 5px;
  overflow: hidden;
  width: 45px;
  height: 380px;
  cursor: pointer;
}

.tutorials .controls .nav-before:hover,
.tutorials .controls .nav-after:hover {
  opacity: 0.8;
}

.tutorials .controls .nav-after {
  right: 0;
}

.tutorials .controls .nav-before {
  left: 0;
}

.tutorials .controls .nav-before span,
.tutorials .controls .nav-after span {
  display: none;
}

.tutorials .controls .add-before,
.tutorials .controls .add-after,
.tutorials .controls .remove-this,
.tutorials .boxVideo .remove-this {
  position: absolute;
  bottom: 0;
  font-size: 0.8em;
  height: 34px;
  background: #000;
  color: #fff;
  border: none;
  padding: 5px 10px;
  opacity: 0.7;
  cursor: pointer;
}

.tutorials .controls .remove-this {
  width: 120px;
  margin: 0 0 0 -60px;
  background: #b94400;
  left: 50%;
}

.tutorials .boxVideo .remove-this {
  background: #b94400;
  bottom: 0;
  right: 0;
}

.tutorials .controls .add-before:hover,
.tutorials .controls .add-after:hover,
.tutorials .controls .remove-this:hover {
  opacity: 0.8;
}

.tutorials .controls .fa-plus:before {
  background: none;
  color: #fff;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: unset;
  display: unset;
  margin: 0;
}

.tutorials .controls .add-before {
  left: 5%;
}

.tutorials .controls .add-after {
  right: 5%;
}

.tutorials .boxFiles .loading {
  color: #ccc;
  font-weight: bold;
  font-size: 0.8em;
}

.tutorials .boxFiles .files {
  clear: both;
  overflow: hidden;
}

.tutorials .boxFiles .file {
  float: left;
  border: solid 1px #ccc;
  padding: 5px;
  border-radius: 5px;
  margin: 3px;
  background: #ececec;
  font-size: 0.9em;
}

.tutorials .boxFiles .file a {
  text-decoration: underline;
}

.tutorials .boxFiles .file a i {
  font-size: 0.6em;
  display: block;
  float: right;
}

.tutorials .boxFiles {
  border: solid 1px #ccc;
}

.tutorials .boxFiles #add_file {
  font-size: 0.9em;
  padding: 10px;
  border-radius: 5px;
  color: #007bff;
  margin: 5px;
  cursor: pointer;
  text-decoration: underline;
}

.tutorials .file_icon {
  float: left;
  height: 25px;
}

.tutorials .boxFiles .replace-this,
.tutorials .boxFiles .remove-this {
  float: right;
  background: #666;
  color: #fff;
  padding: 5px;
  border: solid 1px #ccc;
  overflow: hidden;
  width: 25px;
  height: 25px;
  border-radius: 5px;
  font-size: 0.8em;
  cursor: pointer;
}

.tutorials .boxFiles .remove-this {
  background: #b94400;
}

.tutorials .boxFiles .file span {
  padding: 2px 15px 2px 5px;
  display: block;
  float: left;
}

.tutorials .add_category,
.tutorials .add_tutorial,
.tutorials .link_panel,
.tutorials .edit_category,
.tutorials .edit_tutorial {
  float: right;
  margin: 1%;
  font-size: 0.8em;
}

/* LISTA DE CATEGORIAS */
.list-categories {
  overflow: hidden;
}

.list-categories .card {
  position: relative;
  overflow: hidden;
  margin: 1%;
  height: 450px;
  float: left;
  border-radius: 10px;
  border: 1px solid #e1e0e0;
}

.list-categories .card:hover {
  background: #ffffff;
  box-shadow: rgba(22, 186, 197, 0.3) 0px 0px 0px 4px !important;
  border: 1px solid var(--polichat-color);
}

.list-categories .unpublicated {
  background: #666;
  opacity: 0.5;
}

.list-categories .card img {
  border-radius: 10px;
  padding: 5px;
  box-shadow: -1px 1px 6px rgba(22, 186, 197, 0.3);
  margin: auto;
  width: 90%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin-top: 10px;
}

.list-categories .card-body {
  position: absolute;
  top: 45%;
  left: 0;
  z-index: 1;
}

.signup-title {
  text-align: center;
  color: #008a86;
  font-size: 20px;
  margin-bottom: 15px;
}

.list-categories .card-title {
  font-size: 16px;
  color: #636366;
  font-weight: bold;
}

.list-categories .card-text {
  color: #636366;
  margin: 3% 1% 0 1%;
}

.list-categories .edit,
.list-tutorials .edit {
  position: absolute;
  z-index: 1;
  background: #fff;
  padding: 5px;
  opacity: 0.85;
  right: 0;
  border-radius: 0 0 0 5px;
}

.list-categories .private,
.list-tutorials .private {
  position: absolute;
  z-index: 1;
  color: #ffc107;
}

.list-categories .card-info {
  text-align: center;
  position: absolute;
  z-index: 1;
  background: #e9eaed;
  color: var(--polichat-color);
  padding: 5px 20px;
  border-radius: 5px;
  top: -26px;
  left: 58%;
  font-size: 0.8em;
}

.list-categories .card-link {
  position: absolute;
  bottom: 0;
  right: 5px;
  color: #fff;
  text-decoration: underline;
  font-size: 0.8em;
}

.list-categories .card-link::before {
  content: ' ';
  background: #000000a1;
  width: 152px;
  display: block;
  position: absolute;
  height: 20px;
  opacity: 0.3;
  border-radius: 20px;
  padding: 10px;
  margin: 0;
  box-shadow: -14px -7px 16px #000;
  bottom: -15px;
}

.list-categories .card-info.info2 {
  top: -10%;
}

.list-categories .card-info.quantity-categories {
  width: 190px;
}

.list-categories,
.list-tutorials,
.list-categories-blocks {
  clear: both;
}

.list-categories h1 {
  font-size: 1.5rem;
  line-height: 1.8rem;
  margin: 1rem 15px;
  text-transform: capitalize;
  color: var(--polichat-color) !important;
  border-bottom: solid;
}

.tutorials .content-category {
  clear: both;
}

.tutorials .content-category .description-category {
  padding: 10px;
  font-size: 0.9em;
}

.list-categories-blocks .content-category {
  float: left;
  width: 48%;
}

.list-categories-blocks .content-category .description-category {
  min-height: 200px;
  padding: 10px;
  margin: 1%;
}

.tutorials .content-category .name-category {
  font-size: 2em;
}

.tutorials .content-category .name-category a {
  overflow: hidden;
  border: solid 1px #ccc;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  margin: 5px;
  color: #666;
  font-size: 0.7em;
  padding: 2px 7px;
}

.list-categories-blocks .category-categories {
  float: left;
  border-left: solid 1px #ccc;
  width: 50%;
}

.list-categories-blocks .category-categories .menu-blocks {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
  background: #f8f8f8;
  overflow: hidden;
}

.list-categories-blocks .category-categories .menu-blocks li {
  float: left;
  display: block;
  margin: 0;
  padding: 5px;
  border: none;
  text-align: center;
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  border-top: solid 1px #ccc;
  border-radius: 0;
  color: #666;
  cursor: pointer;
}

.list-categories-blocks .category-categories .menu-blocks li.current {
  width: 50%;
  background: #f8f8f8;
  font-weight: bold;
  text-decoration: underline;
  border-bottom: none;
}

.list-categories-blocks .category-categories .menu-blocks .unpublicated {
  opacity: 0.5;
}

.list-categories-blocks .category-categories .menu-blocks li a {
  float: right;
  font-size: 0.8em;
}

.list-categories-blocks .content-blocks .current {
  display: block;
  height: 217px;
  background: #f8f8f8;
  padding: 10px;
  border-radius: 0;
  border-top: none;
  border-left: none;
  margin: 0;
}

.list-categories-blocks .category-categories h2 {
  font-size: 1em;
  padding: 0 0 0 5px;
  color: #666;
  margin: 0 10px 5px 5px;
}

.list-categories-blocks .content-blocks .card {
  position: relative;
}

.list-categories-blocks .content-blocks .card .content-link {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 0.8em;
  text-decoration: underline;
}

/* LISTA DE TUTORIAIS */
.list-tutorials {
  padding: 10px;
  border-top: solid 1px #ccc;
  overflow: hidden;
}

.list-tutorials h1 {
  font-size: 1em;
  font-weight: bold;
}

.list-tutorials .card {
  float: left;
  margin: 1%;
  background: var(--polichat-color);
}

.list-tutorials .unpublicated {
  background: #9c9c9c;
  opacity: 0.7;
}

.list-tutorials .card a.link-tutorial {
  display: table;
  height: 125px;
  text-align: center;
}

.list-tutorials .card a.link-tutorial .card-body {
  display: table-cell;
  vertical-align: middle;
  color: #fff;
  font-size: 2em;
}

.list-tutorials .card a.link-tutorial:hover {
  text-decoration: none;
  box-shadow: 0px 0px 11px #068808;
}

/* TUTORIAL */
.tutorials .detail-tutorial {
  clear: both;
}

.tutorial .description-tutorial {
  padding: 10px;
  font-size: 0.9em;
  color: #666;
  overflow: hidden;
  border-bottom: solid 1px #ccc;
  display: none;
}

.tutorial .description-tutorial > div {
  float: left;
  width: 80%;
  padding: 20px 0;
}

.tutorial .description-tutorial .image-tutorial {
  float: right;
  max-width: 250px;
  max-height: 250px;
}

.tutorial .description-tutorial .image-tutorial img {
  max-width: 100%;
  max-height: 250px;
}

.tutorial .content-tutorial {
  padding: 10px;
}

.tutorial .video-tutorial {
  width: 854px;
  height: 480px;
  background: #000;
  margin: 15px auto;
}

.tutorial .slides-tutorial.tutorial-col-1 {
  float: left;
  width: 50%;
  margin: 1%;
}

.tutorial .files-tutorial.tutorial-col-2 {
  float: right;
  width: 46%;
  margin: 1%;
}

.slides-frame iframe {
  margin: 0 auto;
  display: block;
}

.tutorial .slides-tutorial.tutorial-col-1 iframe {
  display: inline;
}

.tutorial {
  overflow: hidden;
}

.tutorial .slides-tutorial h2,
.tutorial .files-tutorial h2 {
  font-size: 1.5em;
}

.tutorial .btn-history {
  clear: both;
}

.tutorial .files-tutorial .file-tutorial {
  background: #f4f4f4;
  border: solid 1px #ccc;
  border-radius: 5px;
  padding: 10px;
  overflow: hidden;
  margin: 1% 0;
}

.tutorial .files-tutorial .file-tutorial .icon img {
  max-width: 25px;
  max-height: 25px;
}

.tutorial .files-tutorial .file-tutorial .icon {
  float: left;
  width: 25px;
}

.tutorial .files-tutorial .file-tutorial span {
  float: left;
  padding: 0 5px;
  width: 80%;
}

.tutorial .files-tutorial .file-tutorial a {
  float: right;
  width: 70px;
  text-align: center;
}

/* avaliation */
.avaliation-tutorial {
  clear: both;
  margin: 15px auto;
  text-align: center;
  border: solid 1px #ccc;
  background: #f4f4f4;
  width: 90%;
}

.avaliation-tutorial h2 {
  font-size: 1em;
  padding: 5px;
}

/*.options-avaliation-tutorial {}*/

.options-avaliation-tutorial > div {
  width: 35px;
  height: 30px;
  display: inline-block;
  position: relative;
}

.options-avaliation-tutorial > div input {
  display: block;
  clear: both;
  margin: -35px;
}

.options-avaliation-tutorial > div i {
  display: block;
  width: 100%;
  height: 100%;
  clear: both;
  color: #ccc;
}

.options-avaliation-tutorial > div label {
  display: block;
  width: 1.5em;
  height: 1.5em;
  overflow: hidden;
  font-size: 1.5em;
  color: #f4f4f4;
  cursor: pointer;
}

.options-avaliation-tutorial > div small {
  display: none;
  position: absolute;
  color: #ccc !important;
  background: #000;
  padding: 5px 10px;
  width: 155px;
  border-radius: 5px;
  font-weight: normal !important;
  opacity: 0.7;
  top: -25px;
  left: -66px;
  text-align: center;
  z-index: 1;
}

.options-avaliation-tutorial > div:hover small {
  display: block;
}

.options-avaliation-tutorial.hover1 .box-option1-avaliation-tutorial label i,
.options-avaliation-tutorial.hover2 .box-option1-avaliation-tutorial label i,
.options-avaliation-tutorial.hover2 .box-option2-avaliation-tutorial label i,
.options-avaliation-tutorial.hover3 .box-option1-avaliation-tutorial label i,
.options-avaliation-tutorial.hover3 .box-option2-avaliation-tutorial label i,
.options-avaliation-tutorial.hover3 .box-option3-avaliation-tutorial label i,
.options-avaliation-tutorial.hover4 .box-option1-avaliation-tutorial label i,
.options-avaliation-tutorial.hover4 .box-option2-avaliation-tutorial label i,
.options-avaliation-tutorial.hover4 .box-option3-avaliation-tutorial label i,
.options-avaliation-tutorial.hover4 .box-option4-avaliation-tutorial label i,
.options-avaliation-tutorial.hover5 .box-option1-avaliation-tutorial label i,
.options-avaliation-tutorial.hover5 .box-option2-avaliation-tutorial label i,
.options-avaliation-tutorial.hover5 .box-option3-avaliation-tutorial label i,
.options-avaliation-tutorial.hover5 .box-option4-avaliation-tutorial label i,
.options-avaliation-tutorial.hover5 .box-option5-avaliation-tutorial label i,
/* checked */

.options-avaliation-tutorial.checked1 .box-option1-avaliation-tutorial label i,
.options-avaliation-tutorial.checked2 .box-option1-avaliation-tutorial label i,
.options-avaliation-tutorial.checked2 .box-option2-avaliation-tutorial label i,
.options-avaliation-tutorial.checked3 .box-option1-avaliation-tutorial label i,
.options-avaliation-tutorial.checked3 .box-option2-avaliation-tutorial label i,
.options-avaliation-tutorial.checked3 .box-option3-avaliation-tutorial label i,
.options-avaliation-tutorial.checked4 .box-option1-avaliation-tutorial label i,
.options-avaliation-tutorial.checked4 .box-option2-avaliation-tutorial label i,
.options-avaliation-tutorial.checked4 .box-option3-avaliation-tutorial label i,
.options-avaliation-tutorial.checked4 .box-option4-avaliation-tutorial label i,
.options-avaliation-tutorial.checked5 .box-option1-avaliation-tutorial label i,
.options-avaliation-tutorial.checked5 .box-option2-avaliation-tutorial label i,
.options-avaliation-tutorial.checked5 .box-option3-avaliation-tutorial label i,
.options-avaliation-tutorial.checked5 .box-option4-avaliation-tutorial label i,
.options-avaliation-tutorial.checked5 .box-option5-avaliation-tutorial label i {
  color: #ffc107;
}

/* Painel tutorial */
.tutorials.panel {
  overflow: hidden;
}

.tutorials.panel .fa-plus:before {
  color: unset;
}

.tutorials.panel h2 {
  font-size: 1em;
  color: #000;
  padding: 10px;
}

.panel-administrators {
  float: left;
  width: 48%;
  background: #f4f4f4;
  margin: 1%;
  border: solid 1px #ccc;
  padding: 10px;
  min-height: 262px;
}

.panel-administrators-list {
  background: #fff;
  margin: 1%;
  padding: 5px;
}

.panel-administrators-list .panel-administrator {
  border-bottom: solid 1px #ccc;
  padding: 5px 0;
  overflow: hidden;
}

.panel-administrators-list .panel-administrator div {
  float: left;
  width: 70%;
}

.panel-administrators-list .panel-administrator a {
  display: block;
  float: right;
  color: #f00;
  font-size: 0.6em;
}

.tutorials .panel-dashboard {
  float: right;
  width: 48%;
  background: #f4f4f4;
  margin: 1%;
  border: solid 1px #ccc;
  padding: 10px;
}

.tutorials .panel-dashboard .card {
  width: 31%;
  float: left;
  margin: 1%;
  min-height: 227px;
}

.tutorials .panel-dashboard .card-title {
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
}

.tutorials .panel-dashboard .tutorials-published span {
  font-size: 2em;
  display: block;
  text-align: center;
  padding: 0;
  line-height: normal;
}

.tutorials .panel-dashboard .tutorials-published span i {
  font-size: 0.4em;
  font-style: normal;
  display: block;
  color: #b3b3b3;
}

.tutorials .panel-dashboard .tutorials-published .tutorial-private {
  margin: 10px 0;
}

.tutorials .panel-dashboard .tutorials-published .tutorial-unpublished {
  font-size: 1em;
  text-align: right;
}

.tutorials .panel-dashboard .tutorials-published .tutorial-unpublished i {
  display: inline;
  font-size: 0.8em;
}

.tutorials .panel-dashboard .tutorials-published .tutorial-publics {
  font-size: 2.53em;
}

.tutorials-statistics span {
  display: block;
  position: relative;
  text-align: center;
  margin: 1px 0;
  background: #f4f4f4;
  padding: 0;
}

.tutorials-statistics span i {
  font-size: 0.6em;
  color: #666;
  font-style: normal;
  text-align: center;
  display: block;
}

.tutorial-rate-general span {
  font-size: 5em;
  text-align: center;
  display: block;
}

.tutorial-rate-general span > i {
  font-size: 0.2em;
  display: block;
  color: #ffc107;
  padding: 0 0 12px 0;
}

.tutorial-rate-general span.empty,
.tutorial-rate-general span.empty > i {
  font-size: 1em;
}

.tutorial-rate-general span.empty {
  margin: 3em 0 2em;
}

/* TELA DE PLANOS */
.text-plain-free-trial,
.plains-forms {
  width: 100%;
  text-align: center;
}

.plains-forms {
  margin: 1% 0;
}

.plains-cards {
  display: table;
  text-align: center;
  width: 500px;
  margin: 0 auto;
}

.plains-cards > div {
  height: 140px;
  display: table-cell;
  vertical-align: middle;
  border: solid 1px #ccc;
  padding-top: 5px;
  cursor: pointer;
  width: 50%;
}

.plains-cards > div.current {
  padding-top: 0;
  border: var(--polichat-color) solid 1px;
  border-top: solid 5px var(--polichat-color);
}

.plains-cards > div:hover {
  color: #666;
  opacity: 0.8;
}

.plain-card-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0px;
  color: rgb(66, 77, 87);
  text-transform: uppercase;
}

.plains-cards .plan-separator {
  border: none;
  width: 5%;
}

.plains-cards .plan {
  background: #fff;
  box-shadow: 0px 0px 10px #6c757d;
  width: 44%;
}

.plain-card-price {
  font-size: 36px;
  line-height: 1.3em;
  margin-bottom: 0px;
  position: relative;
}

.plain-card-period {
  font-size: 15px;
  line-height: 1.5em;
}

.plain-box,
.dados_empresa form {
  overflow: hidden;
  margin: 0 auto;
  text-align: left;
  padding: 10px;
}

.plain-box ul {
  list-style: none;
}

.plain-box li {
  flex-direction: row;
  -webkit-box-align: center;
  align-items: center;
  line-height: 1.8;
  font-size: 15px;
  position: relative;
  color: #fff;
  padding: 5px 5px;
}

.plain-box li > i {
  color: #fff !important;
  font-size: 22px;
  position: relative;
  top: 5px;
}

.plain-box h3 {
  font-weight: normal;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 8px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding-top: 3px;
  padding-bottom: 3px;
}

.text-input-number {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 36px;
}

.text-input-number button i {
  padding: 0;
  display: block;
}

.text-input-number button.up,
.text-input-number button.down {
  position: absolute;
  top: 1px;
  right: 1px;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  height: 50%;
  width: 23px;
  border-left: 1px solid #bcc6d0;
  cursor: pointer;
}

.text-input-number button.down {
  top: auto;
  bottom: 1px;
  border-top: 1px solid #bcc6d0;
}

.text-input-number input[type='text'] {
  line-height: 36px;
  height: 100%;
  border-radius: 4px;
  border: 1px solid #bcc6d0;
  padding: 0 28px 0 4px;
  color: rgba(66, 77, 89, 0.7);
  text-align: right;
  width: 100%;
  box-sizing: border-box;
  -moz-appearance: textfield;
}

.plain-form {
  padding: 0 0 0 5px;
}

.plain-features-basic,
.plain-features-pro {
  width: 80%;
  background: #000;
  padding: 10px;
  margin: auto;
  background: linear-gradient(195.59deg, #00acbd 34.03%, #0083ba 92.75%);
  box-shadow: 10px 10px 25px rgba(1, 131, 186, 0.25);
  border-radius: 15px;
  margin-top: 5px;
}

.plain-form .card-channel {
  float: left;
  text-align: center;
  background: none;
  height: auto;
  font-size: 0.8em;
  color: #666;
}

.plain-form .card-channel.disabled {
  color: #aaa;
}

.plain-form .card-channel a {
  color: #007bff;
  font-size: 0.8em;
  text-decoration: underline;
  cursor: pointer;
  display: block;
  text-align: center;
}

.plain-form .card-channel a:hover {
  color: #4ca0fb;
  text-decoration: underline;
}

.plain-form .card-channel span {
  display: table;
  margin: 0 auto;
  padding: 0px 10px;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #bcc6d0;
  padding: 5px 27px;
  font-size: 16px;
  color: #424d59b3;
}

.plain-form .price-total {
  float: right;
}

.plain-form .price-total small {
  font-size: 0.8em;
  display: block;
  text-align: right;
}

.plain-form .price-total small i {
  position: absolute;
  background: #0000009e;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  width: 120px;
  text-align: center;
  z-index: 10;
  font-size: 0.8em;
  margin: -10px 0 0 -45px;
  display: none;
  font-style: normal;
}

.plain-form .price-total small:hover i {
  display: block;
}

.plain-form .agents,
.plain-form .chat-bot,
.plain-form .channels,
.plain-form .price,
.plain-form .discount {
  clear: both;
  border-top: solid 1px #ccc;
  padding: 10px;
  overflow: hidden;
}

.plain-form .price,
.plain-form .discount {
  font-size: 0.8em;
  color: #666;
}

.plain-form .channels {
  border: none;
}

.plain-form .agents .text-input-number,
.plain-form .chat-bot input,
.plain-form .channels .text-input-number {
  float: right;
}

.plain-form .agents label,
.plain-form .chat-bot label,
.plain-form .channels label,
.plain-form .price label,
.plain-form .discount label {
  display: block;
  float: left;
  margin: 0;
}

.plain-form .card-channel label {
  display: unset;
  float: unset;
}

.plain-form .agents small,
.plain-form .chat-bot small,
.plain-form .channels small {
  display: block;
  float: left;
  width: 80%;
  margin: 0 0 7px 0;
  color: #666;
  font-size: 0.7em;
}

.plain-form .chat-bot input {
  margin: 15px 20px 0 0;
}

.plain-form .total {
  border-top: solid 1px #ccc;
  padding: 25px;
  font-size: 1.5em;
  position: relative;
  overflow: hidden;
}

.plain-form .price,
.plain-form .discount,
.plain-form .total {
  display: none !important;
}

.plain-form .total div {
  float: right;
}

.plain-form .total label {
  display: block;
  float: left;
  font-size: 0.8em;
  color: #666;
}

.signup-title {
  text-align: center;
  color: #008a86;
  font-size: 20px;
  margin-bottom: 15px;
}

.plain-form .btns button,
.plain-form .btns .button,
.modal-submit button,
.dados_empresa form .sendData {
  display: table;
  cursor: pointer;
  margin: auto;
  opacity: unset;
  text-align: center;
  width: 350px;
}

.plain-form .btns .back-link {
  position: absolute;
  bottom: 35px;
  left: 10px;
  opacity: 0.6;
}

.plain-form .btns .cancel-plan {
  font-size: 0.9em;
  display: block;
  float: left;
  margin: 15px 0;
  color: #c30000;
  text-decoration: underline;
}

.cancel-span-error-message {
  display: none;
  float: right;
  margin: 5px, 0, 5px, 0;
  color: red;
}

#cancel-textarea {
  width: 100%;
  height: 200px;
  padding: 7px;
}

/* .modal-cancel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s 0.5s ease-in-out;
  transition: all 0.5s 0.5s ease-in-out;
}

.modal-cancel-content {
  padding: 10px;
  max-width: 600px;
  min-width: 360px;
  max-height: 85%;
  overflow: auto;
  position: absolute;
  top: 5%;
  left: 50%;
  z-index: 10000;
  opacity: 0;
  border-radius: 3px;
  background: #fff;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.modal-cancel-close {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
} */
/* .modal-close:after {
  content: 'X';
  float: right;
  margin: 5px 5px 0 0;
  width: 30px;
  height: 30px;
  position: relative;
  z-index: 300000;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  box-shadow: 0 0 3px #000;
}

input[id*="modal-cancel-checkbox"] {
  position: fixed;
  left: -9999px;
  top: 50%;
  opacity: 0;
  }

  input[id*="modal-cancel-checkbox"]:checked + div.modal-cancel {
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0s;
  -ms-transition-delay: 0s;
  transition-delay: 0s;
  }

  input[id*="modal-cancel-checkbox"]:checked + div.modal-cancel .modal-cancel-content {
  opacity: 1;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -webkit-transition-delay: 0.5s;
  -ms-transition-delay: 0.5s;
  transition-delay: 0.5s;
} */
.plain-box .not-acquired li {
  color: #ba2f00;
}

a.text_primary.text-center.text-uppercase.font-weight-bold.disabled {
  opacity: 0.3;
}

/* signup-plains */
.signup-plains {
  padding: 90px 0 100px 0;
}

.signup-plains-4 {
  padding: 0 0 100px 0;
}

.signup-plains h1 {
  text-align: center;
  font-size: 2em;
  font-weight: normal;
  line-height: 2em;
  color: #666;
}

.signup-plains .plains-cards .plan {
  vertical-align: top;
  cursor: unset;
}

.signup-plains .plains-cards .plain-card-price {
  padding: 30px 0 30px;
  min-height: 130px;
}

.signup-plains .plains-cards .default .plain-card-price {
  padding: 10px 0 3px;
  min-height: 100px;
}

.signup-plains .plains-cards .feature-card {
  padding: 15px 0 0 0;
  margin: 10px 0;
  width: 100%;
  float: none;
}

.plain-card-btn {
  background: #30aabc;
  border-color: #3096a5;
}

.plain-card-btn:hover {
  background-color: #1b7886;
  border-color: #1b7886;
}

.signup-plains .plains-cards ul {
  list-style: none;
  text-align: left;
  padding: 0 10px;
  font-size: 0.9em;
  line-height: 2em;
}

.signup-plains .plains-cards h3 {
  font-size: 1em;
  background: #75bfbd;
  line-height: 2em;
  color: #fff;
}

.signup-plains .plains-cards .plan.default {
  width: 55%;
  background: #99ccd0;
  border: solid 1px #008a86;
}

.signup-plains .plains-cards .plan h4 {
  font-size: 1em;
  margin: 10px 0 0 0;
  background: #f4f4f4;
  padding: 10px 0;
  color: #008a86;
}

.signup-plains .steps-register {
  overflow: hidden;
}

.signup-plains .steps-register ul {
  list-style: none;
  padding: 0;
  margin: -5px 0 0 0;
  position: absolute;
  z-index: 1;
  width: 100%;
}

.signup-plains .steps-register ul li {
  float: left;
  width: 25%;
  text-align: center;
  line-height: 2em;
}

.signup-plains .steps-register .progress {
  position: relative;
  overflow: unset;
  background-color: #ccc;
  height: 5px;
  margin: 15px 0 35px 0;
}

.signup-plains .steps-register .progress-bar {
  top: 0;
  left: 0;
  z-index: 0;
  height: 5px;
  position: absolute;
  background: #008a86;
  border-radius: 7px;
}

.signup-plains .steps-register.step-2 .progress-bar {
  width: 37.5%;
}

.signup-plains .steps-register.step-3 .progress-bar {
  width: 62.5%;
}

.signup-plains .steps-register.step-4 .progress-bar {
  width: 87.5%;
}

.signup-plains .steps-register ul li span {
  background: #fff;
  display: block;
  text-align: center;
  height: 27px;
  width: 27px;
  border-radius: 13px;
  padding: 0;
  font-weight: bold;
  margin: -5px auto;
  border: solid 2px #ccc;
  color: #ccc;
}

.signup-plains .steps-register ul li a {
  color: #008a86;
}

.signup-plains .steps-register ul li a:hover {
  text-decoration: unset;
}

.signup-plains .steps-register ul li i {
  display: block;
  margin: -30px 0 18px 18px;
}

.signup-plains .steps-register ul li i:before {
  border: solid 1px;
  border-radius: 10px;
  background: #fff;
  padding: 2px;
  font-size: 0.7em;
}

.signup-plains .step-2 .step-1-mark span,
.signup-plains .step-2 .step-2-mark span,
.signup-plains .step-3 .step-1-mark span,
.signup-plains .step-3 .step-2-mark span,
.signup-plains .step-3 .step-2-mark span,
.signup-plains .step-3 .step-3-mark span,
.signup-plains .step-4 .step-1-mark span,
.signup-plains .step-4 .step-2-mark span,
.signup-plains .step-4 .step-2-mark span,
.signup-plains .step-4 .step-3-mark span,
.signup-plains .step-4 .step-4-mark span {
  border: solid 2px #008a86;
  color: #008a86;
}

.signup-plains .step-2 .step-1-mark span,
.signup-plains .step-3 .step-1-mark span,
.signup-plains .step-3 .step-2-mark span,
.signup-plains .step-4 .step-1-mark span,
.signup-plains .step-4 .step-2-mark span,
.signup-plains .step-4 .step-3-mark span {
  background: #a9d2d7;
}

.signup-plains .step-2 .step-2-mark span,
.signup-plains .step-3 .step-3-mark span,
.signup-plains .step-4 .step-4-mark span {
  width: 35px;
  height: 35px;
  border-radius: 20px;
  padding: 3px 0 0;
  font-size: 1.5em;
  margin: -10px auto 0 auto;
}

.register-form {
  background: #fbfcff;
  margin: 15px auto;
  padding: 20px 50px;
  border: solid 1px #ccc;
  width: 70%;
  border-radius: 5px;
  box-shadow: 0 0 10px #ccc;
}

.register-form label {
  font-size: 0.8em;
  margin: 0;
  color: #666;
}

.register-form input {
  font-size: 0.9em;
}

.register-form button {
  float: right;
  padding: 5px 25px;
}

.register-form .btns {
  margin: 15px 0;
}

.register-form .btns a {
  font-size: 0.7em;
  color: #666;
  text-decoration: underline;
}

.register-form .has-error label,
.register-form .has-error input {
  color: #dc3545;
  border-color: #dc3545;
}

.finder-data.empty {
  width: 300px;
  max-width: 100%;
  flex: unset;
  margin: 0 auto;
}

.finder-data input {
  float: left;
  width: 180px;
}

.finder-data a {
  float: left;
  width: 90px;
  background: #ccc;
  border: solid 1px #666;
  border-radius: 0 5px 5px 0;
  margin: 0 0 0 -5px;
  height: 35px;
  font-size: 0.9em;
  padding: 7px 3px;
}

.finder-data a:hover {
  background: #666;
  border: solid 1px #666;
}

.finder-data .invalid-feedback {
  text-align: left;
  clear: both;
}

.finder-data .valid-feedback {
  display: block;
  clear: both;
  text-align: center;
  font-size: 1em;
  padding: 5px 0;
}

.register-form.config .text-input-number {
  float: right;
}

.register-form.config small {
  display: block;
  font-size: 0.7em;
}

.register-form.config .agents {
  margin: 5px 0 20px 0;
}

.register-form.config .chat-bot input {
  float: left;
  margin: 6px 5px 15px 0;
}

.register-form.config .chat-bot label {
  cursor: pointer;
}

.register-form.config .side-right {
  border-left: solid 1px #ccc;
}

.register-form.config .side-right .price,
.register-form.config .side-right .discount,
.register-form.config .side-right .total {
  margin: 15px 0;
}

.register-form.config .side-right .total label,
.register-form.config .side-right .price label,
.register-form.config .side-right .discount label {
  display: block;
  text-align: right;
}

.register-form.config .side-right .price-total {
  display: block;
  text-align: right;
}

.register-form.config .side-right .total {
  background: #f4f4f4;
  padding: 5px 10px 5px 0;
}

.register-form.config .side-right .total .price-total {
  font-size: 1.5em;
}

.register-form.config .side-right .price,
.register-form.config .side-right .discount {
  display: none;
}

.register-form.config ul {
  list-style: none;
  color: #666;
}

.register-form.config h3 {
  font-size: 1.3em;
  color: #666;
}

.plain-card-basic.selectable.basic.disabled {
  cursor: not-allowed;
  color: #666;
}

.reg .modal-submit {
  margin: 0 0 -60px 0;
}

.modal-submit .modal-background {
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  width: 100%;
  height: 3000px;
}

/* downgrade-form */
.downgrade-form {
  width: 100%;
  margin: 0 auto;
  padding: 10px;
}

.downgrade-form iframe {
  width: 100%;
  height: 350px;
  padding: 1px;
  font-family: Arial, Helvetica, sans-serif;
  border: none;
  border-radius: 8px;
  padding: 15px;
  background-color: #f5f6f7;
}

.cancel-plan {
  background: #e0e0e0;
  border: solid 1px #ccc;
  font-size: 0.8em;
}

#form-cancel .send {
  color: #fff;
}

#form-cancel .modal-submit {
  width: 400px;
}

.tabs {
  border-bottom: solid 1px #ccc;
  margin: 15px 0 10px 0;
  padding: 0 5px;
  height: 43px;
}

.tabs .tab-item {
  float: left;
  border: solid 1px #ccc;
  margin: 0 0 -1px -1px;
  border-radius: 5px 5px 0 0;
  height: 43px;
  background: #fff;
}

.tabs .tab-item a {
  display: block;
  padding: 10px;
  color: #666;
  font-size: 0.9em;
}

.tabs .tab-item.current {
  margin-bottom: -2px;
  height: 45px;
  border-bottom: none;
  font-size: 1.1em;
  text-decoration: underline;
}

.alert_registration .alert {
  text-align: center;
  margin: 40px 5px;
  padding: 50px 0;
}

.edit-channel .delete_channel {
  color: #dc3545;
  background: none;
  border: none;
  float: right;
  font-size: 0.8em;
  cursor: pointer;
}

.edit-channel .delete_channel:hover,
.edit-channel .migrate_to_broker:hover {
  opacity: 0.6;
}

.edit-channel .migrate_to_broker {
  color: #ccc;
  margin: 0 37px 0 0;
  background: none;
  border: none;
  float: right;
  font-size: 0.8em;
  cursor: pointer;
}

.edit-channel .swal-content span small {
  background: #f4f4f4;
  display: block;
  text-align: left;
  padding: 10px;
  font-size: 0.7em;
}

.danger-zone {
  display: block;
  text-align: right;
  color: red;
}

.danger-zone-span {
  display: block;
  font-weight: bold;
}

.danger-zone-tip {
  display: block;
}

.div-number-channels {
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 25px;
  /* border: 1px solid black; */
  border-radius: 25px;
  background-color: white;
  margin-right: 3px;
  margin-top: 3px;
}

.number-channels {
  font-size: 16px;
  /* position: absolute; */
  color: #06948e;
  font-weight: bold;
  display: block;
  height: 25px;
  line-height: normal;
  text-align: center;
  padding: 3px;
}

.card_icon.disabled {
  opacity: 20%;
}

.card_icon.disabled a {
  cursor: auto;
}

.channels-limit {
  position: absolute;
  width: 100%;
  bottom: 0;
  border-radius: 3px;
  background-color: #fff !important;
  height: 35px;
  top: 140px;
  padding: 14px;
}

.channels-limit-span {
  text-align: center;
  vertical-align: middle;
}

.channels-limit-link {
  cursor: pointer !important;
  background: #06948e !important;
  border-radius: 6px !important;
  font-family: Helvetica !important;
  font-size: 13px !important;
  color: #fbfbfb !important;
  line-height: 18px !important;
  width: 80px !important;
  height: 30px !important;
  padding: 10px;
  top: 50px !important;
  text-decoration: none;
}

.channels-limit-link:hover {
  background: #45afab !important;
  text-decoration: none;
}

.needup {
  position: relative;
  bottom: -7px;
  font-size: 12px;
  /* margin-bottom: 12px; */
}

.needuplink {
  color: #06948e !important;
}

.alert-modal {
  margin: auto;
  background: #f5f6f7;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
}

.btn-modal {
  margin: auto;
}

.btn-light-polichat {
  background: #e4e8eb;
  border-radius: 6px;
  font-family: Helvetica;
  font-size: 17px;
  color: #979999;
  letter-spacing: 0;
  line-height: 22px;
  margin: auto;
  text-align: center;
  min-width: 300px;
  min-height: 50px;
}

.btn-light-polichat:hover {
  background: #d0d7dd;
}

.list-services-channels .item-service {
  display: block !important;
}

.channel_customer_whatsapp {
  border: solid 1px #ccc;
  padding: 5px;
  border-radius: 3px;
  margin: 0 0 5px 0;
}

.channel_customer_whatsapp h2 {
  border-bottom: solid 2px #28a745;
  font-size: 1.2em;
  margin: 0;
}

.channel_customer_whatsapp h2 {
  width: 100%;
}

.channel_customer_whatsapp h2 a {
  color: #000;
}

.channel_customer_whatsapp h2 a i {
  font-size: 0.6em;
  position: absolute;
}

.channel_customer_whatsapp h2 span {
  float: right;
  font-size: 0.5em;
}

.channel_customer_whatsapp ul {
  list-style: none;
  font-size: 0.8em;
  background: #f2f2f2;
  padding: 5px;
  border: solid 1px #28a745;
  overflow: hidden;
  clear: both;
}

.channel_customer_whatsapp ul li {
  float: left;
  display: block;
  background: #fff;
  margin: 1px;
  padding: 2px 5px;
  border: solid 1px #f4f4f4;
  border-radius: 3px;
  font-size: 0.8em;
}

.channel_customer_whatsapp ul li span {
  display: block;
  font-size: 1.2em;
}

.channel_customer_whatsapp > span {
  display: block;
  font-size: 0.8em;
}

.channel_customer_whatsapp > small {
  font-size: 0.7em;
  display: block;
  text-align: right;
}

.item-customer > td > label {
  font-weight: bold;
  width: 100%;
  margin: 0;
  font-size: 0.9em;
  font-family: Arial, Helvetica, sans-serif;
}

.item-customer > td > label a {
  color: #000;
}

.item-customer > td > label a i {
  font-size: 0.9em;
  margin: 0;
  position: absolute;
  margin-left: 5px;
  margin-top: 2px;
}

.item-customer .customer_name li a {
  display: block;
  width: 100%;
  float: none;
  position: unset;
  max-width: 100%;
  min-width: 100%;
}

.customer_name li,
.customer_plan li {
  display: block !important;
}

.customer_name li small,
.customer_plan li small {
  display: block;
}

.item-customer .customer_name li small a {
  display: inline;
}

.item-customer .toggle-handle {
  background: #fff;
}

.customer_plan li small label {
  display: block;
  padding: 0;
  margin: 0 0 0 -5px;
  font-size: 0.8em;
}

.customer_services > ul > li {
  font-size: 0.9em;
}

.search_customer select.form-control {
  min-width: unset;
}

.links-client {
  font-size: 0.8em;
}

.links-client a {
  margin: 5px;
}

.center-button {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
}

.css-1hwfws3 {
  flex: none;
  overflow: auto;
  width: 80%;
  height: 36px;
  margin: 0;
  padding: 0;
}

.css-1wy0on6 {
  width: 20%;
}

.css-tlfecz-indicatorContainer {
  margin: 0;
  padding: 0;
}

.col-xs-12.col.text-center {
  text-align: left !important;
}

.sb-avatar.sb-avatar--text {
  display: inline-block !important;
}

.col-xs-12.col.boxusers a,
.col-xs-12.col.text-center a {
  display: inline-flex;
}

.title-users {
  margin-left: 10px;
  width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-table {
  height: 45px;
}

.dashboard-icon {
  width: 100%;
  height: 99px;
  background: #fff;
  border-radius: 8px;
  padding: 10px 16px;
  margin: auto;
  margin-bottom: 10px;
  margin-top: 15px;
  font-size: 44px;
  line-height: 35px;
  color: var(--polichat-color);
  text-align: center !important;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
}

.dashboard-icon > i {
  left: 30px;
  position: absolute;
  top: 37px;
}

.icon-specific-support > i {
  left: 24px;
}

.icon-specific-shooting > i {
  left: 24px;
}

span.text-support {
  margin-left: 20px;
  margin-right: 30px;
}

span.dashboard-icont-text {
  font-size: 21px;
  width: 100%;
  /* color: #333; */
  position: absolute;
  top: 45px;
  left: 0px;
}

@media only screen and (max-width: 768px) {
  span.dashboard-icont-text {
    left: 15px;
    font-size: 19px;
  }

  .dashboard-icon > i {
    left: 25px;
  }
}

.dashboard-icon:hover {
  background: var(--polichat-color);
  color: #fff;
}

a.dashboard-text.text-center:hover {
  color: var(--polichat-color);
  text-decoration: none;
}

.dashboard-text {
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  color: #606161;
  text-decoration: none;
}

.dashboard-button {
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
}

.card-number {
  font-family: Helvetica;
  font-style: normal;
  font-weight: bold;
  font-size: 44px;
  line-height: 26px;
  text-align: center;
  color: #0fa3ad;
}

img.card-img {
  width: 30%;
  margin: auto;
  margin-top: 15px;
  text-align: center;
  align-items: center;
}

.operacao-title {
  margin-top: 4px;
  margin-left: 2%;
}

p.card-operacao {
  margin: 0px auto !important;
}

.card-control {
  padding-top: 0px 15px !important;
  margin: auto;
  width: 80%;
}

p.card-operacao > i {
  color: #0fa3ad;
  position: relative;
  font-size: 22px;
  top: 3px;
}

p.card-operacao > span {
  color: #0fa3ad;
}

.card.dashboard {
  min-height: 250px !important;
  min-width: 250px;
  background: #ffffff;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

img#img_partners_home {
  width: 100%;
  padding-top: 0rem;
  padding-bottom: 0px;
  vertical-align: bottom;
}

@media (max-width: 599px) {
  img#img_partners_home {
    width: 100%;
  }
}

.logo-footer {
  width: 120px;
  height: 50px;
  margin: auto;
  background-size: 120px 50px;
  background-image: url(../img/brand/logo-green.png);
}

.logo_horizontal {
  width: 77px;
  height: 50px;
  margin: auto;
}

footer {
  transition: all 0.4s ease 0s;
  background: #f5f6f7 !important;
}

.switchToggle input[type='checkbox'] {
  height: 0;
  width: 0;
  visibility: hidden;
  position: absolute;
}

.switchToggle label {
  cursor: pointer;
  text-indent: -9999px;
  width: 70px;
  max-width: 70px;
  height: 30px;
  background: var(--polichat-color);
  display: block;
  border-radius: 100px;
  position: relative;
  top: 5px;
}

.switchToggle label:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  background: #fff;
  border-radius: 90px;
  transition: 0.3s;
}

.switchToggle input:checked + label,
.switchToggle input:checked + input + label {
  background: var(--polichat-color);
}

.switchToggle input + label:before,
.switchToggle input + input + label:before {
  font-family: 'polifont' !important;
  content: '\e9ff';
  position: absolute;
  top: 3px;
  left: 35px;
  width: 26px;
  height: 26px;
  border-radius: 90px;
  transition: 0.3s;
  text-indent: 0;
  color: #fff;
}

.switchToggle input:checked + label:before,
.switchToggle input:checked + input + label:before {
  font-family: 'polifont' !important;
  content: '\e9fe';
  position: absolute;
  top: 3px;
  left: 10px;
  width: 26px;
  height: 26px;
  border-radius: 90px;
  transition: 0.3s;
  text-indent: 0;
  color: #fff;
}

.switchToggle input:checked + label:after,
.switchToggle input:checked + input + label:after {
  left: calc(100% - 2px);
  transform: translateX(-100%);
}

.switchToggle label:active:after {
  width: 60px;
}

.toggle-switchArea {
  margin: 10px 0 10px 0;
}

a.card-link {
  color: #909191;
  text-decoration: none;
  padding: 6px;
  font-size: 18px;
  display: inline;
}

a.card-link-blue {
  text-decoration: none;
}

a.card-link-yellow {
  text-decoration: none;
}

span.nomefirma {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.old-version {
  color: var(--polichat-color) !important;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.old-version > span {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  position: relative;
  top: 5px;
}

.breve {
  position: relative;
  left: 100px;
  top: -22px;
  font-style: italic;
  font-size: 12px;
  background: #ffcf5c;
  padding: 5px 15px;
  color: #fff;
  border-radius: 25px;
}

.novo {
  position: relative;
  left: 100px;
  top: -22px;
  font-style: italic;
  font-size: 12px;
  background: #ff647c;
  padding: 5px 15px;
  color: #fff;
  border-radius: 25px;
}

@media (min-width: 600px) and (max-width: 800px) {
  .breve {
    position: relative;
    left: 50px;
    top: -22px;
    font-style: italic;
    font-size: 12px;
    background: #ffcf5c;
    padding: 5px 15px;
    color: #fff;
    border-radius: 25px;
  }

  .novo {
    position: relative;
    left: 50px;
    top: -22px;
    font-style: italic;
    font-size: 12px;
    background: #ff647c;
    padding: 5px 15px;
    color: #fff;
    border-radius: 25px;
  }
}

a.card-link > i {
  color: var(--polichat-color);
  text-decoration: none;
}

a.card-link:hover {
  background: #f5f6f7;
  text-decoration: none;
  padding: 6px;
  border-radius: 5px;
  color: var(--polichat-color);
}

a.test-link {
  color: #16b5c3;
  text-decoration: none;
}

a.test-link:hover {
  text-decoration: none;
  color: #16b9c3;
}

.modal-content.anuncio {
  width: 100%;
  min-height: 360px;
}

.modal-body > i {
  font-size: 30px;
  position: relative;
  top: 5px;
}

.blue {
  color: #007aff;
}

.green {
  color: #00c48c;
}

.yellow {
  color: #ffa600;
}

.red {
  color: #ff647c;
}

.border-red {
  background: #f4f4f4;
  border: solid 1px #ff647c;
  border-radius: 5px;
  padding: 15px;
}

.orange {
  color: #ffa26b;
}

.brevetext {
  font-size: 18px;
}

.modal-footer-breve {
  margin: auto;
  text-align: center;
}

.btn-close-polichat {
  background: #ff647c;
  color: #fff;
}

.btn-close-polichat:hover {
  background: #fdafbb;
  color: #fff;
}

.transparent {
  background: transparent !important;
}

.settings-box .radio {
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  box-shadow: none;
  padding: 8px;
  border-radius: 10px;
  display: inline-block;
  top: 3px;
  position: relative;
  border: 1px solid #dbdcdc;
}

.settings-box .radio:checked:after {
  font-family: polifont;
  content: '\e9b2';
  font-size: 14px;
  position: absolute;
  top: -2px;
  left: 1px;
  color: #18bac5;
}

@media (min-width: 480px) and (max-width: 1024px) {
  .old-version > a {
    display: none !important;
  }
}

.table thead th {
  border-bottom: none !important;
  background-color: #fff !important;
  border-radius: 8px 8px 0px 0px !important;
  font-size: 16px;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
  color: #606161;
}

.table th {
  border: none;
  border-radius: 8px !important;
}

.table {
  background-color: #fff !important;
  border-radius: 8px !important;
  font-size: 14px;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
  color: #606161;
}

.table tr:hover {
  background-color: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.round {
  border-radius: 50%;
}

.roundedd {
  border-radius: 100%;
  margin-left: 3px;
}

.box {
  border-radius: 8%;
}

a.em_andamento > i {
  color: var(--polichat-color);
  font-size: 25px;
}

a.finalizado > i {
  color: #ff647c;
  font-size: 25px;
}

.distribution-div {
  position: fixed;
  bottom: 80px;
  right: 30px;
  height: 50px;
  width: 50px;
}

.feather {
  display: inline-block;
  position: relative;
  top: -0.1rem;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

.dropdown-item {
  margin-right: 0.25rem;
}

.button__line::before {
  top: -8px;
}

.button__line::after {
  top: 8px;
}

.center-distr {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes button-blink-anim {
  0% {
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.body-box {
  position: fixed;
  right: 60px;
  bottom: 80px;
  width: 312px;
  height: 290px;
  background: #ffffff;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  color: #606161;
  background: #fff;
  padding: 10px;
  z-index: 10;
}

.text-red-g {
  font-size: 26px;
  color: #ff647c;
}

.number-box {
  width: 246px;
  height: 65px;
  margin: auto;
  background: rgba(228, 232, 235, 0.3);
  border-radius: 5px;
  padding: 10px 0px;
}

input.form-distribuition {
  width: 66px;
  height: 39px;
  background: #ffffff;
  border: 1px solid #e4e8eb;
  box-sizing: border-box;
  border-radius: 5px;
  text-align: center !important;
}

input#form-distribution:focus {
  border: 1px solid #18bac5;
  box-shadow: 0 0 0 2px rgba(22, 186, 197, 0.22);
  color: #18bac5;
}

.for-box {
  width: 246px;
  height: 65px;
  margin: auto;
  padding: 10px 0px;
}

.button__line::before {
  top: -8px;
}

.button__line::after {
  top: 8px;
}

@keyframes button-blink-anim {
  0% {
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.body-box {
  width: 312px;
  height: 290px;
  background: #ffffff;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  color: #606161;
  background: #fff;
  padding: 10px;
}

.text-red-g {
  font-size: 26px;
  color: #ff647c;
}

.number-box {
  width: 246px;
  height: 65px;
  margin: auto;
  background: rgba(228, 232, 235, 0.3);
  border-radius: 5px;
  padding: 10px 0px;
}

input.form-distribuition {
  width: 66px;
  height: 39px;
  background: #ffffff;
  border: 1px solid #e4e8eb;
  box-sizing: border-box;
  border-radius: 5px;
}

.for-box {
  width: 246px;
  height: 65px;
  margin: auto;
  padding: 10px 0px;
}

.dropdown-menu .btn-link {
  color: var(--polichat-color) !important;
}

.btn-link:hover {
  color: #0d9da7 !important;
}

.dropdown-menu .btn-editar {
  color: #0084f4 !important;
}

.btn-editar:hover {
  color: #0376d8 !important;
}

.dropdown-menu .btn-excel {
  color: #00c48c !important;
}

.btn-excel:hover {
  color: #02b783 !important;
}

.dropdown-menu .btn-delete,
a.btn-delete {
  text-decoration: none;
  color: #ff647c !important;
  width: 100%;
}

.btn-delete:hover {
  color: #fc2849 !important;
  text-decoration: none;
}

.btn-gray {
  background: #e9eaed;
  color: #606161;
}

.btn-gray-report {
  background: #e9eaed;
  border: solid 1px #e9eaed;
  width: 100%;
  color: #606161;
  padding: 0px 5px 6px 5px;
  line-height: 1.5;
}

.btn-gray-dois-report {
  background: #0d9da7;
  border: solid 1px #0d9da7;
  color: #fff;
  padding: 5px 5px 6px 5px;
}

.btn-gray-dois-report:hover {
  background: #0d9da7;
  border: solid 1px #0d9da7;
  color: #fff;
  padding: 5px 5px 6px 5px;
}

.btn-gray:hover {
  background: #dbdcde;
  color: #666;
}

.btn-gray > i {
  font-size: 20px;
}

.button-redistribute {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  position: relative;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ff647c;
  transition: 0.3s ease-in;
  padding: 3px;
  transform: translate(-50%, -50%) scale(1.1);
  -webkit-appearance: none !important;
}

.button-redistribute:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background-color: #ff4a66;
  -webkit-appearance: none !important;
}

.button-redistribute::after {
  content: '';
  position: absolute;
  /* top:50%;
  left:50%;
  transform:translate(-50%,-50%); */
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 5px solid #fbe4e8;
  border-radius: 50%;
  animation: button-blink-anim 1.7s infinite ease-in-out;
  -webkit-appearance: none !important;
}

.button__line > i {
  color: #fff;
  font-size: 36px;
}

.btn-delete-new,
a.btn-delete-new {
  text-decoration: none;
  background: #ff647c;
  width: 100%;
  color: #fff !important;
}

.btn-delete-new:hover {
  background: #fc2849 !important;
  text-decoration: none;
  color: #fff;
}

.general-config-timezone label,
.chat-config label,
.attendance-config label,
.wallet-config label {
  color: #333 !important;
}

.icon-cards.card-contacts-receptivos {
  background-image: url(../img/icons/svg/icone_chats_receptivos.svg);
}

.icon-cards.card-contacts-ativos {
  background-image: url(../img/icons/svg/icone_chats_ativos.svg);
}

.start-row {
  justify-content: flex-start !important;
}

.icon-cards.card-contacts-total {
  background-image: url(../img/icons/svg/icone_chats_todos.svg);
}

.icon-cards {
  float: left;
  width: 100px;
  height: 140px;
  display: block;
  background-size: 100% 100%;
  margin-left: 20px;
  background-repeat: no-repeat;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0.8);
    opacity: 0.5;
  }

  50% {
    -webkit-transform: scale(1);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(0.8);
    opacity: 0.5;
  }
}

.circle-receptivos {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  border: 6px solid #0084f4;
  position: absolute;
  z-index: 10;
  opacity: 0.5;
  background: #d5e9fa;
  -webkit-transform: scale(0.8);
  -webkit-animation: pulse 5s ease-in-out infinite;
  animation: pulse 5s ease-in-out infinite;
  margin: auto;
  text-align: center;
  position: relative;
}

.circle-ativos {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  border: 6px solid #ff647c;
  position: absolute;
  z-index: 10;
  opacity: 0.5;
  background: #fbe4e8;
  -webkit-transform: scale(0.8);
  -webkit-animation: pulse 5s ease-in-out infinite;
  animation: pulse 5s ease-in-out infinite;
  margin: auto;
  text-align: center;
  position: relative;
}

.circle-total {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  border: 6px solid #ffcf5c;
  position: absolute;
  z-index: 10;
  opacity: 0.5;
  background: #fff8e7;
  -webkit-transform: scale(0.8);
  -webkit-animation: pulse 5s ease-in-out infinite;
  animation: pulse 5s ease-in-out infinite;
  margin: auto;
  text-align: center;
  position: relative;
}

.report-number-news-contacts-total,
.report-number-news-contacts-ativos,
.report-number-news-contacts-receptivos {
  position: relative;
  top: 23px;
}

.card_report_contacts-onright {
  width: 60%;
  float: right;
}

@media screen and (min-width: 100px) and (max-width: 480px) {
  .icon-cards.card-contacts-receptivos {
    display: none;
  }

  .icon-cards.card-contacts-ativos {
    display: none;
  }

  .icon-cards.card-contacts-total {
    display: none;
  }

  .icon-cards {
    display: none;
  }

  .card_report_contacts-onright {
    width: 100%;
  }
}

@media screen and (min-width: 485px) and (max-width: 767px) {
  .card_report_contacts {
    min-height: 315px !important;
  }

  .card_report_contacts-onright {
    width: 100%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .card_report_contacts {
    min-height: 315px !important;
  }

  .card_report_contacts-onright {
    width: 100%;
  }

  .icon-cards {
    width: 100%;
    height: 140px;
    display: block;
    background-size: 100% 100%;
    margin: auto;
    background-repeat: no-repeat;
  }
}

.card_report {
  max-width: 100%;
  min-height: 265px !important;
  background: #fff;
  box-shadow: -1px 1px 6px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  border: 1px solid #fff;
}

.card_report_whatsapp:hover {
  box-shadow: rgba(0, 196, 140, 0.25) 0px 0px 0px 4px !important;
  border: 1px solid rgba(0, 196, 140);
}

.card-report-webchat {
  background: #ffcf5c;
}

.card_report_webchat:hover {
  box-shadow: rgba(255, 207, 92, 0.35) 0px 0px 0px 4px !important;
  border: 1px solid #ffcf5c;
}

.card-report-facebook {
  background: #0084f4;
}

.card_report_facebook:hover {
  box-shadow: rgba(0, 132, 244, 0.35) 0px 0px 0px 4px !important;
  border: 1px solid #0084f4;
}

.card-report-whatsapp {
  background: #00c48c;
}

.card-report-icon {
  width: 90%;
  color: #fff;
  margin: 5% auto;
  border-radius: 6px;
  box-shadow: -1px 1px 6px rgba(0, 0, 0, 0.1);
  line-height: 97px;
  align-items: center;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
}

.card-report-webchat.card-report-icon > i {
  font-size: 64px;
  position: relative;
  top: 20px;
  margin-right: 5px;
  text-shadow: -1px 2px 6px rgb(255, 180, 0);
}

.card-report-facebook.card-report-icon > i {
  font-size: 64px;
  position: relative;
  top: 20px;
  margin-right: 5px;
  text-shadow: -1px 2px 6px rgb(1, 92, 171);
}

.card-report-whatsapp.card-report-icon > i {
  font-size: 64px;
  position: relative;
  top: 20px;
  margin-right: 5px;
  text-shadow: -1px 2px 6px rgb(1, 154, 110);
}

.head_card_report {
  min-width: 270px !important;
  text-align: center;
  margin: auto;
  font-family: Helvetica, Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 17px !important;
  line-height: 20px !important;
  color: #828282 !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.body_card_report {
  width: 90%;
  text-align: center;
  background: #f2f2f2;
  margin: auto;
  border-radius: 6px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-family: Helvetica, Arial, sans-serif;
  font-style: normal;
  font-size: 24px;
  line-height: 20px;
  text-align: center;
  color: #828282;
  margin-top: 20px;
}

.chats-total {
  font-size: 27px;
}

.chats-pie-total {
  position: relative;
  left: 84;
  top: -142;
  width: 80px !important;
  z-index: 0 !important;
}

.users-chart > iframe {
  position: relative !important;
  float: left !important;
  height: 0px !important;
}

.legend-charts ul {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.users-chart .legend-charts ul {
  width: 200px !important;
  float: right !important;
  position: relative !important;
  top: -300px;
}

.users-chart .legend-charts .label {
  font-size: 14px;
  color: #666;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 33px;
}

.users-chart {
  max-height: 303px;
}

.atendimentos {
  min-height: 303px;
}

.card-timer {
  background: #ffffff;
  box-shadow: -1px 1px 6px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  width: 46%;
  margin: 10px;
  padding: 10px 15px;
  text-align: center;
}

/* On mouse-over, add a deeper shadow */
.card-timer:hover {
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
}

/* Add some padding inside the card container */
.container-timer {
  padding: 2px 16px;
}

.cards-time-row {
  margin: -7px !important;
}

.container-timer > i {
  font-size: 80px;
  margin-bottom: 10px;
}

.timer-text {
  font-size: 14px;
}

a.report-logs-agent {
  padding: 5px;
  top: 3px;
}

#myBtnConheca:hover {
  background: linear-gradient(
    259.71deg,
    var(--polichat-color) 3.6%,
    #0da3a7 96.23%
  ) !important;
  box-shadow: -1px -1px 5px rgba(13, 157, 167, 0.3),
    inset 0px -4px 6px var(--polichat-color) !important;
  border-radius: 3px;
  transition-duration: 4s !important;
  transition-delay: 2s !important;
  color: #ffffff !important;
  text-shadow: 1px -1px 4px rgba(0, 0, 0, 0.3);
  border: none !important;
}

#myBtnConheca {
  color: #ffffff !important;
  text-shadow: -1px 1px 4px rgba(0, 0, 0, 0.3);
  text-decoration: none !important;
  border-radius: 3px;
  background: linear-gradient(
    189.15deg,
    #0d9da7 -21.22%,
    var(--polichat-color) 74.1%
  ) !important;
  box-shadow: 1px 1px 5px rgba(13, 157, 167, 0.3),
    inset 0px 4px 6px var(--polichat-color) !important;
  border-radius: 3px;
  transition-duration: 4s;
  transition-delay: 2s;
  white-space: nowrap;
  border: none !important;
  padding-top: 8px !important;
}

#myBtnConheca > i {
  font-size: 24px;
  top: 4px;
  position: relative;
}

a.btn-tutorials {
  padding: 10px;
  text-decoration: none;
  color: #ffffff !important;
  text-shadow: -1px 1px 4px rgba(0, 0, 0, 0.3);
  text-decoration: none !important;
  border-radius: 3px;
  background: linear-gradient(
    189.15deg,
    #0d9da7 -21.22%,
    var(--polichat-color) 74.1%
  ) !important;
  box-shadow: 1px 1px 5px rgba(13, 157, 167, 0.3),
    inset 0px 4px 6px var(--polichat-color) !important;
  border-radius: 3px;
  transition-duration: 4s;
  transition-delay: 2s;
  white-space: nowrap;
}

a.report-logs-agent > i {
  font-size: 18px;
  position: relative;
  top: 3px;
}

a.report-logs-agent:hover {
  border: none !important;
}

a.report-logs-agent {
  padding: 10px;
  text-decoration: none;
  color: #ffffff !important;
  text-shadow: -1px 1px 4px rgba(0, 0, 0, 0.3);
  text-decoration: none !important;
  border-radius: 3px;
  background: linear-gradient(
    189.15deg,
    #0d9da7 -21.22%,
    var(--polichat-color) 74.1%
  ) !important;
  box-shadow: 1px 1px 5px rgba(13, 157, 167, 0.3),
    inset 0px 4px 6px var(--polichat-color) !important;
  border-radius: 3px;
  transition-duration: 4s;
  transition-delay: 2s;
  white-space: nowrap;
}

a.btn-tutorials:hover {
  padding: 10px;
  text-decoration: none;
  background: linear-gradient(
    259.71deg,
    var(--polichat-color) 3.6%,
    #0da3a7 96.23%
  ) !important;
  box-shadow: -1px -1px 5px rgba(13, 157, 167, 0.3),
    inset 0px -4px 6px var(--polichat-color) !important;
  border-radius: 3px;
  transition-duration: 4s !important;
  transition-delay: 2s !important;
  color: #ffffff !important;
  text-shadow: 1px -1px 4px rgba(0, 0, 0, 0.3);
}

a.report-chats-agent {
  padding: 6px 10px;
  color: var(--polichat-color) !important;
  text-decoration: none !important;
}

a.report-chats-agent:hover {
  background: #e9eaed;
  border-radius: 3px;
}

/* custom scrollbar */
::-webkit-scrollbar {
  width: 20px;
  background-color: transparent !important;
}

::-webkit-scrollbar-track {
  background-color: transparent !important;
}

::-webkit-scrollbar-thumb {
  background-color: #d6dee1 !important;
  border-radius: 20px !important;
  border: 6px solid transparent !important;
  background-clip: content-box !important;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #929c9e !important;
}

.custom-scrollbar {
  overflow: auto !important;
  height: 475px !important;
}

@media screen and (min-width: 100px) and (max-width: 480px) {
  .users-chart .legend-charts ul {
    width: 100% !important;
    float: right !important;
    position: relative !important;
    top: 0;
  }

  .users-chart {
    max-height: 100%;
  }

  .users-chart > canvas {
    margin: auto;
  }

  .chats-pie-total {
    position: relative;
    left: 40%;
  }
}

@media screen and (min-width: 100px) and (max-width: 600px) {
  .card-timer {
    width: 100% !important;
  }

  .channelItems {
    width: 100% !important;
  }
}

.btn-group-polichat > i {
  position: relative;
  top: 3px;
  font-size: 20px;
}

@media screen and (min-width: 100px) and (max-width: 800px) {
  .carddetags {
    background: #fff;
    border-radius: 2px;
    display: inline-block;
    height: 35px;
    margin: 5px;
    position: relative;
    width: 100% !important;
    border-radius: 6px;
    text-align: center;
  }
}

.carddetags {
  background: #fff;
  border-radius: 2px;
  display: inline-block;
  height: 35px;
  margin: 5px;
  position: relative;
  width: 24%;
  border-radius: 6px;
  text-align: center;
}

.item-tag {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin: 5px;
  float: left;
}

.item-tag-cat {
  width: 25px;
  height: 25px;
  border-radius: 3px;
  margin: 5px;
  float: left;
}

.text-tags {
  text-align: left;
  color: #666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  padding: 6px 10px;
  width: 130px;
  float: left;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.text-tags-number {
  text-align: center;
  color: #0084f4;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  float: right;
  padding: 2px 7px;
}

.card-tags {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card-tags:hover {
  box-shadow: -1px 1px 6px rgba(0, 0, 0, 0.1);
}

td.name {
  text-align: left !important;
}

.contatos-ddd .legend-charts .label,
.chat-history .legend-charts .label {
  line-height: 33px;
}

.sortable td,
.sortable th {
  vertical-align: middle !important;
}

.info-card {
  display: none;
  background-color: #000;
  color: #fff;
  border: 1px solid #c8c8c8;
  border-radius: 5px;
  width: 110px;
  text-align: center;
  z-index: 2;
  justify-content: center;
  align-items: content;
}

.info-card .arrow {
  border-style: solid;
  position: absolute;
  border-color: #c8c8c8 transparent transparent transparent;
  border-width: 8px 8px 0px 8px;
  bottom: -8px;
  left: 45px;
}

.bar-graph-container {
  width: 75% !important;
  height: 160px !important;
  display: inline-block !important;
  min-width: 340px !important;
  margin-left: 3% !important;
  position: relative !important;
  top: -30px !important;
}

.x-axis-label {
  position: relative !important;
  bottom: -3px !important;
  font-size: 12px !important;
}

.y-axis-labels {
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  width: 20px !important;
  float: left !important;
  margin-right: 3% !important;
  margin-left: 2% !important;
  text-align: right !important;
  font-size: 12px !important;
  line-height: 16px !important;
}

.vertical .progress-bar {
  float: left !important;
  height: 100% !important;
  width: 4% !important;
  margin-right: 15%;
  text-align: center !important;
  border-radius: 50px 50px 0px 0px !important;
  background: transparent !important;
  color: #000 !important;
}

.last-progress {
  margin-right: 0px !important;
}

.progress-border {
  border-left: 1px solid #ccc !important;
  border-bottom: 1px solid #ccc !important;
  position: relative !important;
  height: 100% !important;
  width: 100% !important;
}

span.x-axis-icone {
  float: right;
  clear: both;
  padding: 5px;
  font-size: 20px;
}

.green-poli {
  color: #15bac5;
}

.vertical .progress-track {
  position: relative !important;
  height: 100% !important;
  background: #e9eaed !important;
  border-radius: 150px 150px 0px 0px !important;
}

.vertical .progress-fill {
  position: absolute;
  width: 100%;
  height: 100%;
  color: #fff;
  overflow: hidden;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  border-radius: 150px 150px 0px 0px;
  bottom: 0;
  left: 0;
}

.progress-track:hover .result-fill {
  display: block;
}

.progress-fill:hover {
  opacity: 0.8;
}

.progress-track .result-fill {
  padding: 10px;
  color: #fff;
  display: none;
  position: absolute;
  left: 115%;
  border-radius: 3px;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  z-index: 15000;
}

.result-fill.bg-green::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #15bac5 transparent transparent;
}

.result-fill.bg-blue::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #0084f4 transparent transparent;
}

.bg-green {
  background: #15bac5;
}

.bg-green-dois {
  background: #00c48c;
}

.bg-red {
  background: #ff647c;
}

.bg-yellow {
  background: #ffcf5c;
}

.circle-agente {
  width: 120px;
  height: 120px;
  border-radius: 80px;
  border: 6px solid #15bac5;
  position: absolute;
  z-index: 10;
  opacity: 0.5;
  background: #bfe8eb;
  -webkit-transform: scale(0.8);
  -webkit-animation: pulse 5s ease-in-out infinite;
  animation: pulse 5s ease-in-out infinite;
  margin: auto;
  text-align: center;
  position: relative;
}

.circle-time {
  width: 120px;
  height: 120px;
  border-radius: 80px;
  border: 6px solid #0084f4;
  position: absolute;
  z-index: 10;
  opacity: 0.5;
  background: #d5e9fa;
  -webkit-transform: scale(0.8);
  -webkit-animation: pulse 5s ease-in-out infinite;
  animation: pulse 5s ease-in-out infinite;
  margin: auto;
  text-align: center;
  position: relative;
}

.circle-nps {
  width: 120px;
  height: 120px;
  border-radius: 80px;
  position: absolute;
  z-index: 10;
  opacity: 0.5;
  background: rgba(255, 255, 255, 0.85);
  -webkit-transform: scale(0.8);
  -webkit-animation: pulse 5s ease-in-out infinite;
  animation: pulse 5s ease-in-out infinite;
  margin: auto;
  text-align: center;
  position: relative;
}

.bg-blue {
  background: #0084f4;
}

.circle-agente > span {
  color: #15bac5;
  position: relative;
  top: 28px;
  font-size: 27px;
}

.circle-time > span {
  color: #0084f4;
  position: relative;
  top: 28px;
  font-size: 27px;
}

.circle-nps > span {
  position: relative;
  top: 28px;
  font-size: 27px;
}

.circle-agente > span.legend,
.circle-time > span.legend,
.circle-nps > span.legend {
  position: relative;
  font-size: 15px;
  top: 20;
}

span.x-axis-icone-top {
  /* float: right; */
  /* clear: both; */
  padding: 5px;
  font-size: 20px;
  color: #15bac5;
  position: relative;
  left: -31px;
}

#chart_div {
  width: 60%;
  float: left;
}

#table {
  width: 40%;
  float: right;
  height: auto;
  margin-top: 25px;
}

#mundo {
  width: 20%;
  color: #0084f4;
  float: right;
  text-align: center;
  font-size: 18px;
  margin-top: 25px;
}

#brasiltds {
  width: 20%;
  color: var(--polichat-color);
  float: right;
  text-align: center;
  font-size: 18px;
  border-left: 1px solid #ccc;
  margin-top: 25px;
}

#brasiltds > i {
  font-size: 24px;
}

.brasiltds > i {
  font-size: 44px;
  position: relative;
  top: 12px;
}

.mubrasiltds {
  font-size: 24px;
}

.mundo > i {
  font-size: 44px;
  position: relative;
  top: 12px;
}

.mundo {
  font-size: 24px;
}

@media screen and (min-width: 100px) and (max-width: 800px) {
  #chart_div {
    width: 100%;
    height: 100%;
    display: block;
  }

  #table {
    width: 100%;
    height: 100%;
    display: block;
    margin-top: 5px;
  }

  #mundo {
    width: 100%;
    margin-top: 5px;
  }

  #brasiltds {
    width: 100%;
    border: none;
    margin-top: 5px;
  }
}

h6 {
  font-size: 12px;
  color: #666;
}

th.google-visualization-table-th.gradient.unsorted {
  background: #e4e8eb;
  padding: 10px;
}

.google-visualization-table-table td {
  border: solid #495263;
  border-width: 0 1px 1px 0;
  padding: 19px 0.35em !important;
  text-align: center;
}

table.google-visualization-table-table {
  border-radius: 5px !important;
  border: none !important;
}

a.btn-tutorials > i {
  position: relative;
  top: 2px;
}

.table-auto {
  width: 100% !important;
}

.btn-desactivate-auto {
  background: #ff647c;
  border: none;
  width: 100%;
}

.btn-desactivate-auto:hover {
  background: #fdafbb;
  border: none;
  width: 100%;
}

.btn-active-polichat {
  background: var(--polichat-color);
  border: none;
  width: 100%;
}

.btn-active-polichat:hover {
  background: #4fcad2;
  border: none;
  width: 100%;
}

a.btn.btn-primary.botao-editar {
  color: #fff;
  text-decoration: none;
  width: 40px;
  background: #0084f4;
  border: none;
}

a.btn.btn-primary.botao-editar:hover {
  color: #fff;
  text-decoration: none;
  width: 40px;
  background: #66b5f8;
  border: none;
}

button.btn.btn-danger.botao-excluir-ura {
  color: #fff;
  text-decoration: none;
  width: 40px;
  background: #ff647c;
  border: none;
}

button.btn.btn-danger.botao-excluir-ura {
  color: #fff;
  text-decoration: none;
  width: 40px;
  background: #fdafbb;
  border: none;
}

.input-ura {
  background: #fff !important;
}

.botao-excluir-ura > i {
  font-size: 23px;
  position: relative;
  top: 4px;
  right: 5px;
  padding: 0px;
  height: 0px;
  line-height: 0px;
}

.botao-editar > i {
  font-size: 23px;
  position: relative;
  top: 4px;
  right: 5px;
  padding: 0px;
  height: 0px;
  line-height: 0px;
}

.btn-google {
  width: 100%;
  line-height: 40px;
  color: #666;
  text-align: center;
  background: #fff;
  border: 1px solid #666;
  margin-top: 10px;
}

.btn-google > i {
  height: 30px;
  margin-top: 5px;
}

.icon-login.icon-google {
  background-image: url(../img/icons/svg/google.svg);
}

.icon-login {
  float: left;
  width: 59px;
  height: 35px;
  display: block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.icon2.icon-event {
  background-image: url(../img/icons/svg/datadareuniao.svg);
}

.icon2.icon-horadareuniao {
  background-image: url(../img/icons/svg/horadareuniao.svg);
}

.icon2 {
  float: left;
  width: 59px;
  height: 35px;
  display: block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

a.add-quick-text > i {
  font-size: 26px;
  position: relative;
  top: 6px;
}

.add-quick-text {
  padding-bottom: 10px;
  padding-top: 1px;
  float: right;
  margin: 10px 0px;
}

#mensagensrapidas {
  min-height: 200px;
  /* max-height: 450px; */
  margin: auto;
  width: 25%;
}

.variablequick {
  font-style: oblique;
  color: #666;
}

.icon-control > i {
  font-size: 28px;
  color: var(--polichat-color);
  position: relative;
  top: 6px;
}

a.links-tables {
  padding: 6px 10px;
  color: var(--polichat-color) !important;
  text-decoration: none !important;
  width: 50px !important;
}

a.links-tables:hover {
  background: #e9eaed;
  border-radius: 3px;
}

.botoeslado {
  margin: auto;
  width: 50%;
}

td.customer_name {
  align-content: center;
  vertical-align: middle;
}

td.customer_status {
  vertical-align: middle;
  align-items: left;
  text-align: left;
}

td.customer_plan {
  align-content: center !important;
  vertical-align: middle !important;
}

td.customer_plan.list-group-item:last-child {
  height: 100% !important;
  align-content: center !important;
  vertical-align: middle !important;
}

li.tamanhogrande {
  min-height: 150px !important;
  font-size: 16px;
  align-content: center !important;
  vertical-align: middle !important;
  border-top: none !important;
  border-bottom: none !important;
  border-right: none !important;
  border-radius: 0px !important;
}

label.btn.btn-ligado.toggle-on {
  border: 1px solid #0d9da7;
  border-color: #16bac5 !important;
  color: #fff;
  background: linear-gradient(268.22deg, #16bac5 3.6%, #0da3a7 96.23%);
  box-shadow: -1px -1px 5px rgba(13, 157, 167, 0.3), inset 0px -4px 6px #16bac5;
}

label.btn.btn-ligado.toggle-on:hover {
  border: 1px solid #0d9da7;
  border-color: #16bac5 !important;
  color: #fff;
  background: linear-gradient(268.22deg, #0da3a7 3.6%, #16bac5 87.54%);
  box-shadow: 1px 1px 5px rgba(13, 157, 167, 0.3), inset 0px 4px 6px #16bac5;
}

label.btn.btn-desligado.active.toggle-off {
  border: 1px solid #ff647c !important;
  border-color: #ff647c !important;
  background: linear-gradient(268.22deg, #ff647c 3.6%, #f74661 96.23%);
  box-shadow: -1px -1px 5px rgba(255, 100, 124, 0.3), inset 0px -4px 6px #d63c53;
  color: #fff;
}

label.btn.btn-desligado.active.toggle-off:hover {
  border: 1px solid transparent !important;
  border-color: #ff647c !important;
  box-shadow: -1px -1px 5px rgba(255, 100, 124, 0.3), inset 0px -4px 6px #d63c53;
  color: #fff;
  background: linear-gradient(268.22deg, #f74661 3.6%, #fd4461 90.92%);
  box-shadow: -1px -1px 5px rgba(255, 100, 124, 0.3), inset 0px -4px 6px #d63c53;
}

span.toggle-handle.btn.btn-default {
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5) !important;
}

.btn-search2 {
  background: var(--polichat-color);
  border-radius: 0;
  color: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: var(--polichat-color);
  border-radius: 5px 0px 0px 5px;
  position: relative;
  font-size: 16px;
  padding-top: 5px;
}

.new-clients {
  padding: 10px;
  border: 1px solid #0d9da7;
  border-color: #16bac5 !important;
  border-radius: 5px;
  margin-top: 5px;
  color: #16b5c3;
  text-decoration: none;
}

.add-client {
  padding: 10px;
  border: 1px solid #0d9da7;
  border-color: #16bac5 !important;
  border-radius: 5px;
  margin-top: 5px;
  color: #16b5c3;
  text-decoration: none;
}

.new-clients > i,
.add-client > i {
  font-size: 22px;
  position: relative;
  top: 5px;
}

.new-clients > i,
.add-client > i:hover {
  font-size: 22px;
  position: relative;
  top: 5px;
  text-decoration: none;
}

.new-clients:hover {
  padding: 10px;
  border: 1px solid #0d9da7;
  border-color: #16bac5 !important;
  border-radius: 5px;
  margin-top: 5px;
  color: #16b5c3;
  text-decoration: none;
}

.add-client:hover {
  padding: 10px;
  border: 1px solid #0d9da7;
  border-color: #16bac5 !important;
  border-radius: 5px;
  margin-top: 5px;
  color: #16b5c3;
  text-decoration: none;
}

.badge-polichat {
  width: 20px;
  height: 20px;
  padding-top: 5px !important;
}

a.linkPolichat {
  color: #16b5c3 !important;
  text-decoration: none;
}

a.linkPolichat:hover {
  color: #0d9da7 !important;
  text-decoration: none;
}

.popover-quick-message {
  color: #16b5c3;
}

.popover-quick-message:hover {
  color: #16b5c3;
  text-decoration: none;
}

.popover-quick-message > i {
  font-size: 36px;
  margin-left: 50px;
}

.btn-polichat-novo {
  background-color: var(--polichat-color);
  padding: 5px;
  color: #fff;
  text-decoration: none;
  border-radius: 3px;
}

.btn-polichat-novo:hover {
  background-color: #0d9da7;
  color: #fff;
  text-decoration: none;
}

.popover-quick-aprovado {
  color: #00c48c;
}

.popover-quick-aprovado:hover {
  color: #00c48c;
  text-decoration: none;
}

.popover-quick-aprovado > i {
  font-size: 36px;
  margin-left: 50px;
}

.popover-quick-aguardando {
  color: #ffcf5c;
}

.popover-quick-aguardando:hover {
  color: #ffcf5c;
  text-decoration: none;
}

.popover-quick-aguardando > i {
  font-size: 36px;
  margin-left: 50px;
}

.popover-quick-reprovado {
  color: #ff647c;
}

.popover-quick-reprovado:hover {
  color: #ff647c;
  text-decoration: none;
}

.popover-quick-reprovado > i {
  font-size: 36px;
  margin-left: 50px;
}

.text-quick-mesage {
  position: relative;
  top: 9px;
  min-width: 120px;
  max-width: 250px;
}

.row-table {
  width: 100%;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.row-table td {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  text-align: center;
}

.truncate {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  top: 9px;
}

.feedback-quick-reprovado {
  color: #ff647c;
  font-size: 12px;
  background: rgba(255, 100, 124, 0.15);
  padding: 10px 10px 5px 10px;
  border-radius: 5px;
}

.feedback-quick-aprovado {
  color: #00c48c;
  font-size: 12px;
  background: rgba(0, 196, 140, 0.15);
  padding: 10px 10px 5px 10px;
  border-radius: 5px;
}

.feedback-quick-aguardando {
  color: #ffc02b;
  font-size: 12px;
  background: rgba(255, 207, 92, 0.12);
  padding: 10px 10px 5px 10px;
  border-radius: 5px;
}

/* QUICK MESSAGES */
.box-config-template {
  background: #fff;
  border: solid 1px #ced4da;
  border-radius: 5px;
  margin: 13px;
  padding-top: 10px;
}

.poli-feedback {
  color: #0d9da7;
  font-size: 12px;
  background: rgba(22, 186, 197, 0.15);
  padding: 5px;
  border-radius: 5px;
}

i.icon-new {
  position: relative;
  left: -77px;
  top: 15px;
  color: #fff;
}

.new-product {
  background: #16b5c3;
  color: #fff;
}

.btn-red-polichat {
  background: #007aff;
  color: #fff;
}

.btn-info-polichat::after {
  content: 'Desativar Poli Pay' !important;
  color: #fff;
}

.btn-red-polichat::after {
  content: 'Ativar Poli Pay' !important;
  color: #fff;
}

.btn-info-polichat {
  background: #ff647c;
  color: #fff;
}

.modal-teste {
  max-width: 850px;
}

.test-carousel-left {
  width: 60%;
  height: 352px;
  float: left;
  padding: 15px;
}

.test-carousel-right {
  width: 40%;
  height: 352px;
  float: right;
  margin: auto;
  padding: 10px;
  text-align: center;
  align-items: center;
  vertical-align: middle;
}

.card-img-test {
  width: 90%;
  margin-top: 25px;
}

.close-test {
  opacity: 1;
  color: #ff647c;
}

.close-test:hover {
  opacity: 1;
  color: #ff9dac;
}

a.btn-test {
  padding: 10px;
  text-decoration: none;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 3px;
  background: linear-gradient(
    189.15deg,
    #0d9da7 -21.22%,
    var(--polichat-color) 74.1%
  ) !important;
  box-shadow: 1px 1px 5px rgba(13, 157, 167, 0.3),
    inset 0px 4px 6px var(--polichat-color) !important;
  border-radius: 8px;
  transition-duration: 4s;
  transition-delay: 2s;
  white-space: nowrap;
  display: inline-block;
  width: calc(50% - 4px);
  margin: 0 auto;
}

a.btn-test:hover {
  padding: 10px;
  text-decoration: none;
  background: linear-gradient(
    259.71deg,
    var(--polichat-color) 3.6%,
    #0da3a7 96.23%
  ) !important;
  box-shadow: -1px -1px 5px rgba(13, 157, 167, 0.3),
    inset 0px -4px 6px var(--polichat-color) !important;
  border-radius: 8px;
  transition-duration: 4s !important;
  transition-delay: 2s !important;
  color: #ffffff !important;
}

a.btn-test-back {
  padding: 10px;
  text-decoration: none;
  background: linear-gradient(268.22deg, #e4e8eb 3.6%, #e0e4e7 96.23%);
  box-shadow: 1px 1px 5px #e0e4e7, inset 0px 4px 6px #e0e4e7;
  border-radius: 8px;
  color: #333;
  display: inline-block;
  width: calc(50% - 4px);
  margin: 0 auto;
}

a.btn-test-back:hover {
  padding: 10px;
  text-decoration: none;
  background: linear-gradient(268.22deg, #e4e8eb 3.6%, #e0e4e7 96.23%);
  box-shadow: -1px -1px 5px #e0e4e7, inset 0px -4px 6px #e0e4e7;
  border-radius: 8px;
  color: #333;
}

button.btn-test {
  padding: 10px;
  text-decoration: none;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 3px;
  background: linear-gradient(
    189.15deg,
    #0d9da7 -21.22%,
    var(--polichat-color) 74.1%
  ) !important;
  box-shadow: 1px 1px 5px rgba(13, 157, 167, 0.3),
    inset 0px 4px 6px var(--polichat-color) !important;
  border-radius: 8px;
  transition-duration: 4s;
  transition-delay: 2s;
  white-space: nowrap;
  display: inline-block;
  width: calc(100% - 4px);
  margin: 0 auto;
}

button.btn-test:hover {
  padding: 10px;
  text-decoration: none;
  background: linear-gradient(
    259.71deg,
    var(--polichat-color) 3.6%,
    #0da3a7 96.23%
  ) !important;
  box-shadow: -1px -1px 5px rgba(13, 157, 167, 0.3),
    inset 0px -4px 6px var(--polichat-color) !important;
  border-radius: 8px;
  transition-duration: 4s !important;
  transition-delay: 2s !important;
  color: #ffffff !important;
}

button.btn-test-back {
  padding: 10px;
  text-decoration: none;
  background: linear-gradient(268.22deg, #e4e8eb 3.6%, #e0e4e7 96.23%);
  box-shadow: 1px 1px 5px #e0e4e7, inset 0px 4px 6px #e0e4e7;
  border-radius: 8px;
  color: #333;
  display: inline-block;
  width: calc(100% - 4px);
  margin: 0 auto;
}

button.btn-test-back:hover {
  padding: 10px;
  text-decoration: none;
  background: linear-gradient(268.22deg, #e4e8eb 3.6%, #e0e4e7 96.23%);
  box-shadow: -1px -1px 5px #e0e4e7, inset 0px -4px 6px #e0e4e7;
  border-radius: 8px;
  color: #333;
}

#btn_next {
  width: calc(50% - 4px);
}

.btn-test_poli-polichat::after {
  content: 'Período de teste' !important;
  color: #666;
}

.btn-test_poli-polichat {
  background: #eee;
  color: #666;
}

.abreviar {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media only screen and (max-width: 600px) {
  .text-quick-mesage {
    position: relative;
    top: 9px;
    width: 60px;
  }

  .popover-quick-message > i,
  .popover-quick-reprovado > i,
  .popover-quick-aguardando > i,
  .popover-quick-aprovado > i {
    margin: auto;
    text-align: center !important;
    float: none;
  }
}

.btn-neutral-poli {
  color: #999999;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  background: transparent;
  border-bottom: none;
  border-left: none;
  border-right: none;
  border-top: none;
}

.btn-neutral-poli:hover {
  color: #18bac5;
}

button.btn.btn-neutral-poli:focus {
  box-shadow: none !important;
  border: none !important;
}

button.btn.btn-neutral-poli.current,
button.btn.btn-neutral-poli.current:focus {
  border-bottom: 4px solid #18bac5 !important;
  border-left: none;
  border-right: none;
  border-top: none;
  background: transparent;
  color: #18bac5;
  border-radius: 0px;
  position: relative;
  top: 2px;
}

.bread {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

#dash_title {
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.fundo-branco {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
  padding: 15px;
}

input.sendData.btn-new-poli,
.btn-new-poli {
  border-radius: 5px;
  border: none;
  color: #fff;
  padding: 10px;
  margin: auto;
  text-align: center;
  background: linear-gradient(
    223.24deg,
    var(--polichat-color-dark) -21.22%,
    var(--polichat-color) 74.1%
  ) !important;
  box-shadow: 1px 1px 11px var(--polichat-color-25),
    inset 0px 4px 16px var(--polichat-color);
}

.btn-new-poli-cancel:hover,
.btn-new-poli-cancel:active {
  background: linear-gradient(223.24deg, #ff647c -21.22%, #ff647c 74.1%);
  box-shadow: 1px 1px 11px rgba(188, 19, 45, 0.3), inset 0px 4px 16px #ffa6b4;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
}

.btn-new-poli-cancel {
  border-radius: 5px;
  border: none;
  color: #fff;
  padding: 10px;
  margin: auto;
  text-align: center;
  background: linear-gradient(223.24deg, #ff647c -21.22%, #ff647c 74.1%);
  box-shadow: -1px -1px 11px rgba(188, 19, 45, 0.3), inset 0px -4px 16px #ffa6b4;
  border-radius: 4px;
}

input.sendData.btn-new-poli:hover,
.btn-new-poli:hover,
input.sendData.btn-new-poli:active,
.btn-new-poli:active,
a.send.btn.btn-new-poli:active {
  color: #fff;
  text-decoration: none;
  background-image: linear-gradient(
    223.24deg,
    var(--polichat-color) -21.22%,
    var(--polichat-color-dark) 74.1%
  );
  box-shadow: -1px -1px 11px var(--polichat-color-25),
    inset 0px -4px 16px var(--polichat-color);
}

.btn-button-add {
  display: flex;
}

.btn-button-add-channel,
.btn-button-add-user {
  border: none;
  color: #fff;
  padding: 15px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  border-radius: 5px;
  float: right;
  margin: 19px;
  margin: 7px;
  width: 45%;
  text-align: center;
  background: linear-gradient(223.24deg, #018fbb -21.22%, #01acbd 74.1%);
  box-shadow: 1px 1px 11px rgba(13, 157, 167, 0.3), inset 0px 4px 16px #16bac5;
}

.btn-button-add-channel,
.btn-button-add-user,
.btn-button-add-channel:hover,
.btn-button-add-user:hover,
.btn-button-add-channel:active,
.btn-button-add-user:active,
a.btn-button-add-user:active,
a.btn-button-add-channel:active {
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  background: #0000c8;
  box-shadow: none
}

#plan-btn-group {
    margin-bottom: 16.3rem;
}

#btn-cancel-plan {
    background: #e9eaed !important;
    box-shadow: none;
    color: #333;
}

#spanned-btn {
    width: 92.3%;
}

.plain-box-dois {
  margin: auto;
  align-items: center;
  width: 83%;
}

.with_shadow {
  border-radius: 5px;
}

.circlemodal {
  background-color: #e4e8eb;
  border-radius: 92px;
  padding: 19px 22px;
}

.circlemodal > i {
  color: #018fbb;
  font-size: 26px;
}

.card_canais_planos {
  background: #f5f6f7;
  border-radius: 5px;
  height: 80px;
  padding-top: 20px;
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 15px;
}

.card_canais_planos_all {
  background: linear-gradient(223.24deg, #0d9da7 -21.22%, #16bac5 74.1%);
  box-shadow: 2px 2px 5px rgba(13, 157, 167, 0.4), inset 0px 4px 6px #16bac5;
  border-radius: 8px;
  padding: 15px;
  color: #fff;
  font-size: 27px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
}

.card_canais_planos_whats {
  background: linear-gradient(223.24deg, #08e7a7 -21.22%, #00c48c 74.1%);
  box-shadow: 2px 2px 5px rgba(4, 158, 114, 0.4), inset 0px 4px 6px #77fcd6;
  border-radius: 8px;
  padding: 15px;
  color: #fff;
  font-size: 27px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
}

.card_canais_planos_face {
  border-radius: 8px;
  padding: 15px;
  color: #fff;
  font-size: 27px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  background: linear-gradient(
    220.28deg,
    #fe6867 -6.5%,
    #8446ff 71.44%,
    #0d92fc 117.22%
  );
  box-shadow: 2px 2px 5px rgba(97, 93, 254, 0.5),
    inset 0px 4px 6px rgba(255, 137, 138, 0.3);
}

.card_canais_planos_wchat {
  border-radius: 8px;
  padding: 15px;
  color: #fff;
  font-size: 27px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  background: linear-gradient(223.24deg, #ffe29d -21.22%, #ffcf5c 74.1%);
  box-shadow: 1px 1px 11px rgba(223, 178, 71, 0.35),
    inset 0px 4px 16px rgba(255, 248, 231, 0.3);
}

.modal-top-waba {
  margin: 0;
  margin-top: 10px;
  height: auto;
  padding: 15px 0px 10px 0px;
  background: #ffe1de;
  border-radius: 8px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d74058;
}

.box-icone_waba {
  width: 60%;
  background: #d74058;
  border-radius: 8px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.box-icone_waba i {
  font-size: 85px;
  color: #fff;
  position: relative;
}

.btn-waba {
  padding: 15px;
  background: #d74058;
  box-shadow: 4px 4px 10px rgba(215, 64, 88, 0.25);
  border-radius: 8px;
  color: #fff !important;
  margin: auto;
}

.btn-waba i {
  font-size: 24px;
  line-height: 0;
  position: relative;
  top: 5px;
}

.btn-waba:hover {
  box-shadow: -4px -4px 10px rgba(215, 64, 88, 0.25);
}

.typeform-share-link {
  background: linear-gradient(
    59.3deg,
    #ff8618 14.08%,
    #ff246e 40.96%,
    #af1df5 89.08%
  );
  padding: 15px;
  border-radius: 10px;
  margin-top: 3px;
}

.instagramlink {
  color: #fff;
  text-decoration: none;
  font-size: 24px;
}

.instagramlink:hover {
  color: #ccc;
  text-decoration: none;
  font-size: 24px;
}

.image-adjuste {
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.onboarding-container {
  display: flex;
  margin-top: 15px;
  padding: 5px;
  /* min-width: 495px !important; */
  border-radius: 0.25rem;
  border: 1px solid #ccd0d2;
}

.onboarding-input-content {
  padding-bottom: 10px;
  margin-top: 5px;
  width: 230px !important;
  align-self: center;
}

.onboarding-content-label {
  padding-bottom: 10px;
  margin-top: 5px;
  align-self: center;
}

.report-border-left {
  border-left: 1px solid #c7caca;
  border-right: 1px solid #c7caca;
}

.alert_waba_message {
  color: #ffffff;
  background: #ff4344;
  margin-left: 72px;
  text-align: center;
  display: flex;
  justify-content: center;
  border-radius: 4px;
  padding: 10px 10px 0px 10px;
}

.alert_waba_message a {
  text-decoration: none;
  color: #ffffff;
}

/* Style to green waba banner. */
.alert_waba_message_page {
  color: #ffffff;
  background: #00c48c;
  margin-left: 72px;
  text-align: center;
  display: flex;
  justify-content: center;
  border-radius: 4px;
  padding: 10px 10px 0px 10px;
}

.alert_waba_message_page a {
  text-decoration: none;
  color: #ffffff;
}

/* Style to yellow waba banner. */
.alert_waba_message_support {
  color: #ffffff;
  background: linear-gradient(225deg, #ffd465 3.44%, #f9b922 100%);
  margin-left: 72px;
  text-align: center;
  display: flex;
  justify-content: center;
  border-radius: 4px;
  padding: 10px 10px 0px 10px;
}

.alert_waba_message_support a {
  text-decoration: none;
  color: #ffffff;
}

.alert_status_onboarding_waba {
  color: #ffffff;
  background: #007bff;
  margin-left: 72px;
  text-align: center;
  display: flex;
  justify-content: center;
  border-radius: 4px;
  padding: 10px 10px 0px 10px;
}

.alert_status_onboarding_waba a {
  text-decoration: none;
  color: #ffffff;
}

.alert-push {
  padding: 30px 20px;
  color: white;
  position: absolute;
  z-index: 999999;
  right: 0;
  border-radius: 5px;
  margin-top: 20px;
  margin-right: 20px;
  animation: alert-push-animation 1s, alert-push-color-animation 3s;
}

@keyframes alert-push-animation {
  0% {
    margin-right: -10000px;
  }

  100% {
    margin-right: 20px;
  }
}

@keyframes alert-push-color-animation {
  0% {
    background-color: #a5dad2;
  }

  10% {
    background-color: #f36e4b;
  }

  20% {
    background-color: #f69431;
  }

  30% {
    background-color: #f1dd40;
  }

  40% {
    background-color: #c6c752;
  }

  50% {
    background-color: #b1cc9f;
  }

  60% {
    background-color: #a5dad2;
  }

  70% {
    background-color: #a2a18f;
  }

  80% {
    background-color: #c8b384;
  }

  90% {
    background-color: #ff00aa;
  }

  100% {
    background-color: #a5dad2;
  }
}

.alert-push.alert-push-success {
  background-color: #28a745;
}

.alert-push.alert-push-primary {
  background-color: #007bff;
}

.alert-push.alert-push-warning {
  background-color: #ffc107;
}

.alert-push.alert-push-danger {
  background-color: #dc3545;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}
.pi-info-fill {
  color: #007bff;
}
.delete-user {
  color: #fff;
}
.pi-update-fill {
  color: #fff;
}

.new-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 30px;
  right: 30px;
  background-color: var(--bg-warning);
  color: var(--secondary-new-font-color);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px; 
  letter-spacing: 0.16px;
}