:root {
  /* Tons neutros */
  --white: #FFFFFF;
  --gray-100: #F0F1F2;
  --gray-200: #ECEDEE;
  --gray-300: #CACBCC;
  --gray-400: #85898C;
  --gray-500: #3D454C;
  --black: #0C0D0D;
  /* Azul escuro */
  --brand-light: #299cd2;
  --brand: black;
  --brand-badge: #0a6792;
  --brand-btn: #0EA5E9;
  --brand-dark: #0a6792;
  /* Azul */
  --blue-light: #DAECF2;
  --blue: #2498F3;
  --blue-dark: #0B7EDA;
  /* Verde */
  --green-light: #E9F2E6;
  --green: #00B22D;
  --green-dark: #0E8C2E;
  /* Amarelo */
  --yellow-light: #FDF7E1;
  --yellow: #EEC600;
  --yellow-dark: #D9A91B;
  /* Vermelho */
  --red-light: #FAF0ED;
  --red: #E50B1E;
  --red-dark: #A51B19;
}

html,
body {
  height: 100%;
  margin: 0;
  background-color: var(--gray-200);
  color: var(--gray-500);
}

a {
  color: var(--black);
  font-weight: bold;
  /* text-decoration: underline; */
}

input[readonly],
input:disabled {
  color: black !important;
  /* ou a cor que você quiser */
  background-color: #fffefe !important;
}

a:focus,
a:hover {
  color: var(--black);
  font-weight: bold;
}

.alert-primary {
  background-color: var(--white);
  border-color: var(--brand);
  color: var(--black);
  border-left: 4px solid var(--brand);
}

.alert-success {
  background-color: var(--green-light);
  border-color: var(--green);
  color: var(--black);
  border-left: 4px solid var(--green);
}

.alert-info {
  content: "X";
  background-color: var(--blue-light);
  border-color: var(--blue);
  color: var(--black);
  border-left: 4px solid var(--blue);
}

.alert-warning {
  background-color: var(--yellow-light);
  border-color: var(--yellow);
  color: var(--black);
  border-left: 4px solid var(--yellow);
}

.alert-danger {
  background-color: var(--red-light);
  border-color: var(--red);
  color: var(--black);
  border-left: 4px solid var(--red);
}

.alert-icon-info {
  font-family: IcoFont;
  font-weight: 400;
  font-size: 24px;
  display: flex;
  align-items: center;
  color: var(--blue);
  margin-right: 16px;
  margin-left: 8px;
}

.alert-icon-success {
  font-family: IcoFont;
  font-weight: 400;
  font-size: 24px;
  display: flex;
  align-items: center;
  color: var(--green);
  margin-right: 16px;
  margin-left: 8px;
}

.alert-icon-danger {
  font-family: IcoFont;
  font-weight: 400;
  font-size: 24px;
  display: flex;
  align-items: center;
  color: var(--red);
  margin-right: 16px;
  margin-left: 8px;
}

.alert-icon-warning {
  font-family: IcoFont;
  font-weight: 400;
  font-size: 24px;
  display: flex;
  align-items: center;
  color: var(--yellow);
  margin-right: 16px;
  margin-left: 8px;
}

.accepted-terms {
  top: 0;
  left: 25px;
  position: absolute;
  text-align: left;
  font: Lighter 12px/16px Roboto;
  letter-spacing: -0.04px;
  color: var(--gray-400);
  opacity: 1;
}

.accepted-terms a {
  text-align: left;
  text-decoration: underline;
  letter-spacing: -0.04px;
  color: var(--gray-400);
}

.bg-brand {
  background-color: var(--brand);
}

.bg-blue {
  background-color: var(--blue);
}

.bg-red {
  background-color: var(--red);
}

.bg-dark-blue {
  background-color: var(--brand)!important
}

.bg-green {
  background-color: var(--green)!important
}

.bg-orange {
  background-color: var(--yellow-dark)!important
}

.bg-red {
  background-color: var(--red)!important
}

.bg-gray {
  background-color: var(--gray-400)!important
}

.bg-light-gray {
  background-color: var(--gray-300)!important
}

.btn-bft-circle {
  margin-bottom: 5px;
  padding: 14px 24px;
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 20px;
  border-radius: 50%;
  width: 46px;
  height: 44px;
  padding: 5px;
}

.btn-modal-circle {
  margin-left: 8px;
  padding: 14px 24px;
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 16px;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 7px;
  background-color: var(--white);
  box-shadow: 0px 2px 5px rgba(112, 112, 112, 0.9);
}

.btn-profile {
  text-align: center;
  padding-top: 7px;
  margin-right: 5px;
}

.badge-default {
  background-color: var(--gray-400);
}

.badge-default[href]:focus,
.badge-default[href]:hover {
  background-color: var(--gray-400);
}

.badge-success {
  background-color: var(--green);
}

.badge-success[href]:focus,
.badge-success[href]:hover {
  background-color: var(--green-dark);
}

.badge-info {
  background-color: var(--brand-badge)
}

.badge-info[href]:focus,
.badge-info[href]:hover {
  background-color: var(--brand-dark);
}

.badge-warning {
  background-color: var(--yellow);
}

.badge-warning[href]:focus,
.badge-warning[href]:hover {
  background-color: var(--yellow-dark);
}

.badge-danger {
  background-color: var(--red);
}

.badge-danger[href]:focus,
.badge-danger[href]:hover {
  background-color: var(--red-dark);
}

.btn-primary {
  background-color: var(--brand-btn);
  border-color: var(--brand-btn);
  color: var(--white);
  box-shadow: 0px 2px 5px rgba(112, 112, 112, 0.3);
}

.btn-primary,
.btn-primary:focus {
  color: var(--white);
  box-shadow: 0px 2px 5px rgba(112, 112, 112, 0.3);
}

.btn-primary:hover {
  color: var(--white);
  background-color: var(--brand-light);
  border-color: var(--brand-light);
}

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--gray-300);
  border-color: var(--gray-300);
}

.btn-primary.active,
.btn-primary:active,
.show>.btn-primary.dropdown-toggle {
  color: var(--white);
  ;
  background-color: var(--brand-dark);
  background-image: none;
  border-color: var(--brand-dark);
}

.btn-secondary {
  background-color: var(--white);
  ;
  border: 1px solid var(--gray-200);
  box-shadow: 0px 2px 5px rgba(112, 112, 112, 0.3);
}

.btn-secondary,
.btn-secondary:focus {
  color: var(--brand);
  border: 1px solid var(--gray-200);
  box-shadow: 0px 2px 5px rgba(112, 112, 112, 0.3);
}

.btn-secondary:hover {
  color: var(--brand);
  background-color: var(--gray-200);
  border-color: var(--gray-300);
}

.btn-secondary.disabled,
.btn-secondary:disabled {
  background-color: var(--gray-300);
  border-color: var(--gray-300);
}

.btn-secondary.active,
.btn-secondary:active,
.show>.btn-secondary.dropdown-toggle {
  color: var(--brand);
  background-color: var(--gray-200);
  background-image: none;
  border-color: var(--gray-300);
}

.btn-success {
  background-color: var(--green);
  border-color: var(--green);
}

.btn-success,
.btn-success:focus {
  color: var(--white);
}

.btn-success:hover {
  color: var(--white);
  background-color: var(--green);
  border-color: var(--green);
}

.btn-success.disabled,
.btn-success:disabled {
  background-color: var(--gray-300);
  border-color: var(--gray-300);
}

.btn-success.active,
.btn-success:active,
.show>.btn-success.dropdown-toggle {
  color: var(--white);
  background-color: var(--green);
  background-image: none;
  border-color: var(--green);
}

.btn-primary-brasilfone {
  color: white;
  width: 100%;
  height: 41px;
  background: var(--brand) 0% 0% no-repeat padding-box;
  box-shadow: 0px 2px 5px rgba(112, 112, 112, 0.3);
  opacity: 1;
  border: none;
  border-radius: 4px;
  font-family: Roboto;
  font-size: 10pt;
  text-align: center;
  color: var(--white);
  text-transform: uppercase;
  cursor: pointer;
}

.btn-secondary-brasilfone {
  width: 100%;
  height: 41px;
  background: var(--white) 0% 0% no-repeat padding-box;
  box-shadow: 0px 2px 5px rgba(112, 112, 112, 0.3);
  opacity: 1;
  border: none;
  border-radius: 4px;
  font-family: Roboto;
  font-size: 10pt;
  color: var(--gray-400);
  text-transform: uppercase;
  cursor: pointer;
}

.btn-secondary-brasilfone img {
  margin-left: -25px;
  margin-top: 2px;
  position: absolute;
}

.btn-login {
  display: none;
}

.content__title>.row h2 {
  color: var(--gray-500);
}

.card-title {
  color: var(--gray-500);
}

.card-primary {
  background-color: var(--brand);
  border-color: var(--brand);
}

.circle-btn {
  background-color: var(--gray-100);
  border-radius: 50%;
}

.div-accepted-terms {
  top: -10px;
  margin-bottom: 5px;
}

.div-recaptcha {
  padding: 0;
}

.div-img-footer-language {
  text-align: left;
  letter-spacing: 0.11px;
  color: var(--gray-400);
  border: 0.5px solid var(--gray-200);
  border-radius: 3px;
  padding: 5px;
  opacity: 1;
}

.div-register-footer {
  background-color: var(--white);
}

.div-register-footer-right {
  padding-left: 30px;
}

.div-register {
  padding-top: 59px;
  padding-left: 65px;
}

.div-img-principal {
  padding: 0;
}

.div-img-principal-header {
  text-align: left;
  margin-left: -30px;
  margin-bottom: -10px;
}

.form-group__bar:after,
.form-group__bar:before {
  background-color: var(--brand)
}

.flatpickr-month {
  background-color: var(--brand);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background-color: var(--brand-dark)!important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: var(--brand);
  border-color: var(--brand);
}

.flatpickr-calendar {
  border: solid 1px var(--brand);
}

.flatpickr-day:hover {
  border: 2px solid var(--brand);
  background-color: var(--brand);
}

.flatpickr.today {
  border-radius: 0px;
  border: 2px solid var(--brand) !important;
}

.flatpickr-day.selected {
  background-color: var(--brand);
}

.flatpickr-day.selected:hover {
  background-color: var(--brand);
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowBottom:before {
  border: 2px solid var(--brand);
}

.form-control {
  border-bottom: 1px solid var(--gray-300);
}

.has-danger .select2-container--default .select2-selection--single {
  border-radius: 0;
  border: 0;
  background-color: transparent;
  border-bottom: 1px solid var(--gray-300);
  height: auto
}

h1 {
  font-weight: 700;
  font-size: 2rem;
}

h2 {
  font-weight: 700;
  font-size: 1.7rem;
}

h3,
h4,
h5 {
  font-weight: 500;
}

h6 {
  font-weight: 300;
}

.info {
  margin: 0px;
  padding: 10px;
  border: 1px solid var(--brand);
  border-radius: 4px;
  color: var(--brand);
}

.img-principal-footer {
  width: 36px;
  height: 31px;
  background: transparent url('/img/icon-brasilfone.png') 0% 0% no-repeat padding-box;
  opacity: 1;
  margin: 10px;
  float: right;
}

.img-principal {
  width: 100%;
}

.img-principal-header {
  width: 323px;
  height: 93px;
  background: 0% 0% no-repeat padding-box;
  opacity: 1;
}

.i-img-principal {
  display: none;
}

.img-language {
  height: 13px;
  margin-bottom: 5px;
}

.line {
  border: var(--gray-100) 1px solid;
}

.link {
  font: Normal 12px/24px Roboto;
  letter-spacing: 0.11px;
  color: var(--gray-400);
  opacity: 1;
  padding-right: 10px;
}

.link:hover {
  font: Bold 12px/24px Roboto;
  letter-spacing: 0.11px;
  color: var(--brand);
  opacity: 1;
}

.link.active {
  font: Bold 12px/24px Roboto;
  letter-spacing: 0.11px;
  color: var(--brand);
  opacity: 1;
}

.modal-content {
  width: 100%;
}

.modal-header {
  height: 0px;
  padding: 0;
  background: var(--white) 0% 0% no-repeat padding-box;
  /* justify-content: space-between; */
  padding: 25px 30px 0;
  border-bottom: 0 solid #f6f6f6;
}

.modal-footer {
  padding: 24px;
  background-color: var(--white) 0% 0% no-repeat padding-box;
}

.modal-header .close {
  color: var(--gray-300);
  padding: 0px 18px 0 0;
  font-size: 32px;
  font-weight: 400;
}

.modal-title {
  top: 24px;
  left: 29px;
  position: absolute;
  letter-spacing: 0px;
  color: var(--black);
  font-size: 16px;
  font-weight: 700;
}

.modal-subtitle {
  top: 32px;
  left: 75px;
  font: Lighter 10px/8px Roboto;
  color: var(--white);
  position: absolute;
  text-align: center;
  letter-spacing: 0px;
}

.navigation li a {
  color: var(--gray-500);
  font-weight: 400;
}

.nav-tabs .nav-link:before {
  background-color: var(--brand-btn)
}

.nav-pills .nav-item.show .nav-link,
.nav-pills .nav-link.active {
  background-color: var(--brand-btn)
}

.messages__item--right .messages__details>p {
  background-color: var(--brand)
}

.password-message {
  top: 34px;
  position: absolute;
  text-align: left;
  font: Lighter 12px/16px Roboto;
  letter-spacing: 0px;
  color: var(--gray-400);
  opacity: 1;
}

.password-message i {
  font-size: 11px;
}

.progress-bar {
  color: var(--brand);
  background-color: var(--brand);
}

.push {
  height: 50px;
}

.quick-stats {
  margin: -15px;
}

.close-modal {
  text-align: right;
  margin-right: 24px;
  margin-top: 20px;
}

.notranslate {
  /* right: 70%!important; */
  width: 100px;
  zoom: 0.8;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.select2-container--default .selection::after,
.select2-container--default .selection::before {
  background-color: var(--brand);
}

.select2-container--default .selection::after,
.select2-container--default .selection::before {
  background-color: var(--brand);
}

.select2-container--default .select2-selection--single {
  border-radius: 0;
  border: 0;
  background-color: transparent;
  border-bottom: 1px solid var(--gray-300);
  height: auto
}

.subtitle-register {
  top: 148px;
  left: 457px;
  width: 100%;
  height: 16px;
  text-align: left;
  letter-spacing: -0.04px;
  color: var(--gray-400);
  opacity: 1;
  font-size: 14px;
  margin-bottom: 40px;
}

.sublinks {
  text-align: left;
  margin-top: -20px;
  padding-bottom: 20px;
  opacity: 1;
}

.sublinks .sublink {
  color: var(--gray-400);
}

.sublinks .sublink.active {
  color: var(--brand);
}

.table-characteres {
  background-color: var(--white);
  border: var(--gray-300) 1px solid;
}

.table-characteres td {
  width: 50px;
  padding: 8px;
  border: solid 1px var(--gray-300);
  text-align: center;
}

.text-register-footer {
  text-align: left;
  font: Normal 10px/20px Roboto;
  letter-spacing: 0.11px;
  color: var(--gray-400);
  opacity: 1;
  float: right;
}

.text-register-footer-left {
  float: right;
  margin-top: 17px;
}

.text-register-footer-right {
  float: left;
  margin-top: 16px;
}

.title-register {
  left: 456px;
  width: 100%;
  height: 24px;
  text-align: left;
  letter-spacing: -0.04px;
  color: var(--brand);
  opacity: 1;
  font-size: 18px;
}

.toggle-switch__checkbox:checked~.toggle-switch__helper::after {
  background-color: var(--green);
}

.wizard-card[data-color="blue"] .moving-tab {
  background-color: var(--brand-btn);
}

.wizard-card[data-color="blue"] .progress-bar {
  background-color: var(--brand-btn);
}

.wrapper {
  height: 90px;
  margin-bottom: -50px;
}

.zmdi {
  color: var(--gray-500);
}

[data-toggle=buttons]:not(.btn-group--colors)>.btn.active {
  background-color: var(--brand);
  color: var(--white);
}

@media (max-width: 767px) {
  .btn-login {
    display: block;
  }
  .btn-primary-brasilfone {
    height: 36px;
    font-size: 10px;
    box-shadow: none;
  }
  .btn-secondary-brasilfone {
    height: 36px;
    font-size: 10px;
  }
  .div-register {
    padding: 15px 22px;
  }
  .div-img-principal {
    height: 91px;
    background: var(--brand) 0% 0% no-repeat padding-box;
    opacity: 1;
  }
  .img-principal {
    width: 253px;
    height: 76px;
    left: 0px;
    top: 10px;
    float: left;
    position: absolute;
  }
  .i-img-principal {
    top: 42px;
    right: 20px;
    float: right;
    color: var(--white);
    height: 16px;
    display: block;
    position: absolute;
  }
  .div-img-principal-header {
    display: none;
  }
  .div-register-footer {
    display: none;
  }
  .modal-dialog {
    margin: 0px;
    padding: 10px 10%;
  }
  .modal-dialog-centered {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    min-height: calc(100% - 0.5rem * 2);
  }
  .quick-stats {
    margin-right: -15px;
    margin-left: -15px;
    padding-top: 20px;
  }
  .sublinks {
    display: none;
  }
  .subtitle-register {
    text-align: left;
    letter-spacing: -0.04px;
    color: var(--gray-400);
    font-size: 11px;
  }
  .title-register {
    height: 16px;
    text-align: left;
    font: Bold 14px/15px Roboto;
    letter-spacing: -0.04px;
    color: var(--brand);
  }
}

@media (max-width: 768px) {
  .hidden-sm {
    display: none;
  }
}

@media (max-width: 900px) {
  .qrcode-img {
    display: flex;
    justify-content: center;
    margin-top: 50px!important;
  }
}

@media (min-width: 768px) {
  .qrcode {
    display: flex;
    justify-content: space-between;
  }
}

@media (min-width: 992px) and (max-width: 1379px) {
  .img-principal {
    height: 547px;
  }
}

@media (min-width: 1380px) and (max-width: 1599px) {
  .img-principal {
    height: 679px;
  }
}

@media (min-width: 1600px) {
  .img-principal {
    height: 900px;
  }
}

.como-funciona-pix li {
  list-style-type: none;
}

.como-funciona-pix li:before {
  content: '\2022';
  color: var(--gray-400);
  width: 1rem;
  font-size: 1.25rem;
  display: inline-block;
}

@media (max-width: 900px) {
  .qrcode-img {
    display: flex;
    justify-content: center;
    margin-top: 50px!important;
    align-content: space-around;
    flex-wrap: wrap;
    flex-direction: column;
  }
}

@media (min-width: 768px) {
  .qrcode {
    display: flex;
    justify-content: space-between;
  }
}

.qrcode-key {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qrcode-img {
  display: flex;
  flex-direction: column;
  align-items: center;
}