@font-face {
  font-family: 'DIN Next LT Pro';
  src: url("../fonts/subset-DINNextLTPro-Light.woff2") format("woff2"), url("../fonts/subset-DINNextLTPro-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'DIN Next LT Pro';
  src: url("../fonts/subset-DINNextLTPro-Regular.woff2") format("woff2"), url("../fonts/subset-DINNextLTPro-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'DIN Next LT Pro';
  src: url("../fonts/subset-DINNextLTPro-Heavy.woff2") format("woff2"), url("../fonts/subset-DINNextLTPro-Heavy.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'DIN Next LT Pro';
  src: url("../fonts/subset-DINNextLTPro-Bold.woff2") format("woff2"), url("../fonts/subset-DINNextLTPro-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'DIN Next LT Pro';
  src: url("../fonts/subset-DINNextLTPro-Black.woff2") format("woff2"), url("../fonts/subset-DINNextLTPro-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

html {
  overflow-x: hidden;
  font-size: 100%; }

body {
  font-family: "DIN Next LT Pro", sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  background-color: #000;
  font-size: 1rem;
  padding: 0 !important; }

.bg-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("../imgs/bg2.jpg");
  z-index: -1; }

p {
  font-size: 1rem;
  color: white; }
  p.center {
    text-align: center; }

#section-content {
  opacity: 0; }

.usuarios {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }
  .usuarios .usuario {
    margin: 1rem; }
    .usuarios .usuario p {
      word-wrap: break-word; }
      .usuarios .usuario p span {
        color: #FC5179; }

h3 {
  color: #FC5179; }

.edit-signature {
  display: flex; }
  .edit-signature .editor {
    width: 50%;
    margin: 1rem 1rem 0 0; }
    .edit-signature .editor textarea {
      width: 100%;
      background: #F4F4F9;
      outline: none;
      font-size: 14px;
      resize: none; }
    .edit-signature .editor .CodeMirror {
      border-radius: 1rem;
      margin-bottom: 1rem; }
  .edit-signature .preview {
    width: 50%;
    margin: 1rem 0 0 1rem; }
    .edit-signature .preview iframe {
      display: block;
      bottom: 0;
      position: relative;
      width: 100%;
      background: white;
      border: none;
      border-radius: 1rem;
      height: 16rem;
      margin-bottom: 1rem; }

.modal-content .modal-header {
  border: none; }

.modal-content .modal-body {
  display: flex;
  justify-content: center; }

.modal-content .modal-footer {
  border: none;
  display: flex;
  justify-content: space-between; }
  .modal-content .modal-footer .btn {
    margin: 0 8px; }

.modal-dialog {
  margin-top: 0;
  margin-bottom: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center; }

.modal.fade .modal-dialog {
  transform: translate(0, -100%); }

.modal.in .modal-dialog {
  transform: translate(0, 0); }

.mytooltip {
  position: relative;
  display: inline-block; }

.mytooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s; }

.mytooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent; }

.mytooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1; }

.btn {
  background: #bf2c4f linear-gradient(0deg, #bf2c4f 0%, #fc5179 100%);
  font-size: 1rem;
  text-align: center;
  display: block;
  border-radius: 1.25rem;
  height: 2.5rem;
  line-height: 2.5rem;
  padding: 0;
  color: #fff;
  margin: 0;
  border: 0;
  white-space: nowrap;
  width: 100%;
  outline: none !important; }
  .btn:hover {
    color: #fff;
    background-image: none;
    background-color: #fc5179;
    box-shadow: inset 0 -50px 50px -50px black;
    outline: none; }
  .btn:active, .btn:focus {
    color: #fff;
    background-image: none;
    background-color: #bf2c4f;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
    outline: none; }
  .btn.btn-voltar {
    background: none;
    box-shadow: none; }

.btn-formatar {
  width: 10rem; }

.bt-change {
  width: 10rem; }

.card {
  width: 90%;
  max-width: 25rem;
  margin: auto;
  background-color: rgba(38, 38, 38, 0.9);
  border-radius: 1.25rem;
  padding: 2rem;
  position: relative; }
  .card .btn.btn-link-arquivo {
    margin-bottom: 1rem; }
  .card .btn-full {
    margin-left: -2rem;
    margin-right: -2rem;
    margin-top: 1rem;
    width: calc(100% + 4rem); }
    .card .btn-full .btn {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 0;
      margin-bottom: 0;
      font-size: 0.75rem;
      height: 5rem;
      padding-left: 1rem;
      text-align: left;
      background-image: url("../imgs/copiar.svg");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      background-size: 1.25rem;
      padding-right: 3.35rem;
      box-shadow: none; }
      .card .btn-full .btn span {
        width: 14.375rem;
        text-overflow: ellipsis;
        overflow: hidden;
        display: block; }
        @media screen and (min-width: 768px) {
          .card .btn-full .btn span {
            width: 21.25rem; } }
  .card .container-send-arquivo {
    margin: 2rem -2rem -2rem;
    display: none; }
    .card .container-send-arquivo .btn {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      height: 4rem;
      font-size: 1.25rem;
      font-weight: bold; }
  .card .detalhe-arquivo {
    background-color: rgba(255, 255, 255, 0.1);
    text-align: left;
    margin: 2rem -2rem 0;
    padding: 1rem; }
    .card .detalhe-arquivo p {
      font-size: 0.75rem;
      margin: 0; }
  .card .container-btn-inline {
    margin: 0 -2rem -2rem; }
    .card .container-btn-inline .btn {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      height: 4rem;
      font-size: 1.25rem;
      font-weight: bold;
      line-height: 4rem; }
  .card.download img {
    width: 50%;
    margin-bottom: 1rem; }
  .card.expirado img {
    width: 50%;
    margin-bottom: 1rem; }
  .card.expirado h2 {
    margin-bottom: 1rem; }
  .card.center {
    text-align: center; }
  .card img {
    width: 30%; }
  .card > p {
    margin-bottom: 0.25rem;
    line-height: 1.25rem; }
  .card.download {
    max-width: 24rem; }
    .card.download h3 {
      margin-bottom: 0; }

.card-assinatura {
  max-width: unset;
  width: 100%; }
  .card-assinatura .btn {
    margin: 0 !important; }
  .card-assinatura .mytooltip {
    width: 45%; }
  .card-assinatura img {
    width: unset; }
  .card-assinatura .close-assinatura {
    width: 45%; }
  .card-assinatura .modal-header {
    padding: 0;
    margin-bottom: 1rem; }

#body-assinatura {
  background-color: white;
  border-radius: 1rem; }

.logo {
  width: 8rem;
  margin: 1rem auto 0; }
  .logo img {
    width: 100%; }