/* VARIAVEIS */

/* BASE */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

input::placeholder,
.ui.form ::placeholder {
  font-weight: 400;
  color: rgba(0, 0, 0, .7);
}

.ig {

  /* TAMANHO DE FONTE */
  &.tt-10 {
    font-size: 10px !important;
  }

  &.tt-11 {
    font-size: 11px !important;
  }

  &.tt-12 {
    font-size: 12px !important;
  }

  &.tt-13 {
    font-size: 13px !important;
  }

  &.tt-14 {
    font-size: 14px !important;
  }

  &.tt-15 {
    font-size: 15px !important;
  }

  &.tt-16 {
    font-size: 16px !important;
  }

  &.tt-17 {
    font-size: 17px !important;
  }

  &.tt-18 {
    font-size: 18px !important;
  }

  &.tt-19 {
    font-size: 19px !important;
  }

  &.tt-20 {
    font-size: 20px !important;
  }

  &.tt-21 {
    font-size: 21px !important;
  }

  &.tt-22 {
    font-size: 22px !important;
  }

  &.tt-23 {
    font-size: 23px !important;
  }

  &.tt-24 {
    font-size: 24px !important;
  }

  &.tt-25 {
    font-size: 25px !important;
  }

  &.tt-30 {
    font-size: 30px !important;
  }

  &.tt-35 {
    font-size: 35px !important;
  }

  &.tt-40 {
    font-size: 40px !important;
  }

  &.tt-45 {
    font-size: 45px !important;
  }

  &.tt-50 {
    font-size: 50px !important;
  }


  /* LINHA HORIZONTAL E VERTICAL */
  &hr {
    height: 0px;
    border: 0px;
    border-bottom: 1px solid rgba(34, 36, 38, .15);
    /* background-color: silver; */
  }

  &vr {
    height: 100%;
    width: 1px !important;
    background-color: silver;
  }

  /* FONTES */
  &.lite {
    font-weight: 100;
  }

  &.normal {
    font-weight: 300;
  }

  &.semi {
    font-weight: 600;
  }

  &.negrito {
    font-weight: 700;
  }

  &.extra {
    font-weight: 800;
  }

  &strong {
    font-weight: 700;
  }

  /* TRANSFORMAÇÃO DE TEXTO */
  &.mscl,
  &.maiusc {
    text-transform: uppercase;
  }

  &.mncl,
  &.minusc {
    text-transform: lowercase;
  }

  &.cptl {
    text-transform: capitalize;
  }

  &.nrml {
    text-transform: initial;
  }

  /* TRANSFORMAÇÕES DE TEXTO E FORMATAÇÃO */
  &.sbld {
    text-decoration: line-through;
  }

  &.jstf {
    text-align: justify;
    text-justify: inter-character;
  }

  &.jstf-2 {
    text-align: justify;
    text-justify: inter-word;
  }

  /* OVERFLOW */
  &.ovf-a {
    overflow: auto;
  }

  &.ovf-a-x {
    overflow-x: auto;
  }

  &.ovf-a-y {
    overflow-y: auto;
  }

  &.ovf-h-x {
    overflow-x: hidden;
  }

  &.ovf-h-y {
    overflow-y: hidden;
  }

  /* painel de controle para YFW */
  &.painel-controle {
    background-color: #000000;
    color: #ffffff;
    padding: 5px 20px !important;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  &.painel-controle>pre {
    margin: 0px !important;
    padding: 0px !important;
  }

  &.painel-controle-rotas {
    background-color: #000000;
    padding: 5px !important;
    width: 100%;
  }

  &.lista-ver-rotas li {
    border: 1px solid gray;
    margin: 0;
    padding: 0;
  }

  &.lista-ver-rotas {
    padding: 0;
    margin: 0;
  }

  &.lista-ver-rotas .nome-rota {
    background-color: #ebebeb;
    padding: 10px !important;
    cursor: pointer;
  }

  &.lista-ver-rotas .desc-rota {
    background-color: #f1f1f1;
    padding: 10px !important;
    display: none;
  }

  /* ALERTAS ========================================== */
  &.alerta {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 10px !important;
    margin: 0 auto;
    box-shadow: var(--sombra-sec);
    border-radius: 5px;
    font-size: 14px;

    & a {
      cursor: pointer;
    }

    &.a-amarelo {
      background-color: rgba(255, 248, 0, 0.3);
      border-left: 5px solid #bb9900;
      color: #bb9900;
    }

    &.a-vermelho {
      background-color: rgba(255, 0, 4, 0.1);
      border-left: 5px solid #C3424A;
      color: #C3424A;
    }

    &.a-verde {
      background-color: rgba(0, 255, 0, 0.1);
      border-left: 5px solid green;
      color: green;
    }

    &.a-azul {
      background-color: #f1f1f1;
      border-left: 5px solid #0083CA;
      color: #0083CA;
    }

    &.a-roxo {
      background-color: #f1f1f1;
      border-left: 5px solid #9c27b0;
      color: #9c27b0;
    }
  }

  /* MARGENS */
  &.margem-0 {
    margin: 0px !important;
  }

  &.margem {
    margin: 5px !important;
  }

  &.margem-10 {
    margin: 10px !important;
  }

  &.margem-15 {
    margin: 15px !important;
  }

  &.margem-20 {
    margin: 20px !important;
  }

  &.margem-25 {
    margin: 25px !important;
  }

  &.margem-30 {
    margin: 30px !important;
  }

  &.margem-35 {
    margin: 35px !important;
  }

  &.margem-40 {
    margin: 40px !important;
  }

  &.margem-45 {
    margin: 45px !important;
  }

  &.margem-50 {
    margin: 50px !important;
  }

  &.margem-55 {
    margin: 55px !important;
  }

  &.margem-60 {
    margin: 60px !important;
  }

  &.margem-65 {
    margin: 65px !important;
  }

  &.margem-70 {
    margin: 70px !important;
  }

  &.margem-75 {
    margin: 75px !important;
  }

  &.margem-80 {
    margin: 80px !important;
  }

  &.margem-85 {
    margin: 85px !important;
  }

  &.margem-90 {
    margin: 90px !important;
  }

  &.margem-95 {
    margin: 95px !important;
  }

  &.margem-100 {
    margin: 100px !important;
  }

  &.margem-150 {
    margin: 150px !important;
  }

  &.margem-200 {
    margin: 200px !important;
  }

  &.margem-h-0 {
    margin-right: 0px !important;
    margin-left: 0px !important;
  }

  &.margem-h {
    margin-right: 5px !important;
    margin-left: 5px !important;
  }

  &.margem-h-10 {
    margin-right: 10px !important;
    margin-left: 10px !important;
  }

  &.margem-h-15 {
    margin-right: 15px !important;
    margin-left: 15px !important;
  }

  &.margem-h-20 {
    margin-right: 20px !important;
    margin-left: 20px !important;
  }

  &.margem-h-25 {
    margin-right: 25px !important;
    margin-left: 25px !important;
  }

  &.margem-h-30 {
    margin-right: 30px !important;
    margin-left: 30px !important;
  }

  &.margem-h-35 {
    margin-right: 35px !important;
    margin-left: 35px !important;
  }

  &.margem-h-40 {
    margin-right: 40px !important;
    margin-left: 40px !important;
  }

  &.margem-h-45 {
    margin-right: 45px !important;
    margin-left: 45px !important;
  }

  &.margem-h-50 {
    margin-right: 50px !important;
    margin-left: 50px !important;
  }

  &.margem-h-55 {
    margin-right: 55px !important;
    margin-left: 55px !important;
  }

  &.margem-h-60 {
    margin-right: 60px !important;
    margin-left: 60px !important;
  }

  &.margem-h-65 {
    margin-right: 65px !important;
    margin-left: 65px !important;
  }

  &.margem-h-70 {
    margin-right: 70px !important;
    margin-left: 70px !important;
  }

  &.margem-h-75 {
    margin-right: 75px !important;
    margin-left: 75px !important;
  }

  &.margem-h-80 {
    margin-right: 80px !important;
    margin-left: 80px !important;
  }

  &.margem-h-85 {
    margin-right: 85px !important;
    margin-left: 85px !important;
  }

  &.margem-h-90 {
    margin-right: 90px !important;
    margin-left: 90px !important;
  }

  &.margem-h-95 {
    margin-right: 95px !important;
    margin-left: 95px !important;
  }

  &.margem-h-100 {
    margin-right: 100px !important;
    margin-left: 100px !important;
  }

  &.margem-h-150 {
    margin-right: 150px !important;
    margin-left: 150px !important;
  }

  &.margem-h-200 {
    margin-right: 200px !important;
    margin-left: 200px !important;
  }

  &.margem-v-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }

  &.margem-v {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }

  &.margem-v-10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  &.margem-v-15 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }

  &.margem-v-20 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  &.margem-v-25 {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
  }

  &.margem-v-30 {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }

  &.margem-v-35 {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
  }

  &.margem-v-40 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }

  &.margem-v-45 {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }

  &.margem-v-50 {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }

  &.margem-v-55 {
    margin-top: 55px !important;
    margin-bottom: 55px !important;
  }

  &.margem-v-60 {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }

  &.margem-v-65 {
    margin-top: 65px !important;
    margin-bottom: 65px !important;
  }

  &.margem-v-70 {
    margin-top: 70px !important;
    margin-bottom: 70px !important;
  }

  &.margem-v-75 {
    margin-top: 75px !important;
    margin-bottom: 75px !important;
  }

  &.margem-v-80 {
    margin-top: 80px !important;
    margin-bottom: 80px !important;
  }

  &.margem-v-85 {
    margin-top: 85px !important;
    margin-bottom: 85px !important;
  }

  &.margem-v-90 {
    margin-top: 90px !important;
    margin-bottom: 90px !important;
  }

  &.margem-v-95 {
    margin-top: 95px !important;
    margin-bottom: 95px !important;
  }

  &.margem-v-100 {
    margin-top: 100px !important;
    margin-bottom: 100px !important;
  }

  &.margem-v-150 {
    margin-top: 150px !important;
    margin-bottom: 150px !important;
  }

  &.margem-v-200 {
    margin-top: 200px !important;
    margin-bottom: 200px !important;
  }

  &.margem-t-0 {
    margin-top: 0px !important;
  }

  &.margem-t {
    margin-top: 5px !important;
  }

  &.margem-t-7 {
    margin-top: 7px !important;
  }

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

  &.margem-t-15 {
    margin-top: 15px !important;
  }

  &.margem-t-20 {
    margin-top: 20px !important;
  }

  &.margem-t-25 {
    margin-top: 25px !important;
  }

  &.margem-t-30 {
    margin-top: 30px !important;
  }

  &.margem-t-35 {
    margin-top: 35px !important;
  }

  &.margem-t-40 {
    margin-top: 40px !important;
  }

  &.margem-t-45 {
    margin-top: 45px !important;
  }

  &.margem-t-50 {
    margin-top: 50px !important;
  }

  &.margem-t-55 {
    margin-top: 55px !important;
  }

  &.margem-t-60 {
    margin-top: 60px !important;
  }

  &.margem-t-65 {
    margin-top: 65px !important;
  }

  &.margem-t-70 {
    margin-top: 70px !important;
  }

  &.margem-t-75 {
    margin-top: 75px !important;
  }

  &.margem-t-80 {
    margin-top: 80px !important;
  }

  &.margem-t-85 {
    margin-top: 85px !important;
  }

  &.margem-t-90 {
    margin-top: 90px !important;
  }

  &.margem-t-95 {
    margin-top: 95px !important;
  }

  &.margem-t-100 {
    margin-top: 100px !important;
  }

  &.margem-t-150 {
    margin-top: 150px !important;
  }

  &.margem-f-0 {
    margin-bottom: 0px !important;
  }

  &.margem-f {
    margin-bottom: 5px !important;
  }

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

  &.margem-f-15 {
    margin-bottom: 15px !important;
  }

  &.margem-f-20 {
    margin-bottom: 20px !important;
  }

  &.margem-f-25 {
    margin-bottom: 25px !important;
  }

  &.margem-f-30 {
    margin-bottom: 30px !important;
  }

  &.margem-f-35 {
    margin-bottom: 35px !important;
  }

  &.margem-f-40 {
    margin-bottom: 40px !important;
  }

  &.margem-f-45 {
    margin-bottom: 45px !important;
  }

  &.margem-f-50 {
    margin-bottom: 50px !important;
  }

  &.margem-f-55 {
    margin-bottom: 55px !important;
  }

  &.margem-f-60 {
    margin-bottom: 60px !important;
  }

  &.margem-f-65 {
    margin-bottom: 65px !important;
  }

  &.margem-f-70 {
    margin-bottom: 70px !important;
  }

  &.margem-f-75 {
    margin-bottom: 75px !important;
  }

  &.margem-f-80 {
    margin-bottom: 80px !important;
  }

  &.margem-f-85 {
    margin-bottom: 85px !important;
  }

  &.margem-f-90 {
    margin-bottom: 90px !important;
  }

  &.margem-f-95 {
    margin-bottom: 95px !important;
  }

  &.margem-f-100 {
    margin-bottom: 100px !important;
  }

  &.margem-d-0 {
    margin-right: 0px !important;
  }

  &.margem-d-1 {
    margin-right: 1px !important;
  }

  &.margem-d-3 {
    margin-right: 3px !important;
  }

  &.margem-d {
    margin-right: 5px !important;
  }

  &.margem-d-10 {
    margin-right: 10px !important;
  }

  &.margem-d-15 {
    margin-right: 15px !important;
  }

  &.margem-d-20 {
    margin-right: 20px !important;
  }

  &.margem-d-25 {
    margin-right: 25px !important;
  }

  &.margem-d-30 {
    margin-right: 30px !important;
  }

  &.margem-d-35 {
    margin-right: 35px !important;
  }

  &.margem-d-40 {
    margin-right: 40px !important;
  }

  &.margem-d-45 {
    margin-right: 45px !important;
  }

  &.margem-d-50 {
    margin-right: 50px !important;
  }

  &.margem-d-55 {
    margin-right: 55px !important;
  }

  &.margem-d-60 {
    margin-right: 60px !important;
  }

  &.margem-d-65 {
    margin-right: 65px !important;
  }

  &.margem-d-70 {
    margin-right: 70px !important;
  }

  &.margem-d-75 {
    margin-right: 75px !important;
  }

  &.margem-d-80 {
    margin-right: 80px !important;
  }

  &.margem-d-85 {
    margin-right: 85px !important;
  }

  &.margem-d-90 {
    margin-right: 90px !important;
  }

  &.margem-d-95 {
    margin-right: 95px !important;
  }

  &.margem-d-100 {
    margin-right: 100px !important;
  }

  &.margem-e-0 {
    margin-left: 0px !important;
  }

  &.margem-e {
    margin-left: 5px !important;
  }

  &.margem-e-10 {
    margin-left: 10px !important;
  }

  &.margem-e-15 {
    margin-left: 15px !important;
  }

  &.margem-e-20 {
    margin-left: 20px !important;
  }

  &.margem-e-25 {
    margin-left: 25px !important;
  }

  &.margem-e-30 {
    margin-left: 30px !important;
  }

  &.margem-e-35 {
    margin-left: 35px !important;
  }

  &.margem-e-40 {
    margin-left: 40px !important;
  }

  &.margem-e-45 {
    margin-left: 45px !important;
  }

  &.margem-e-50 {
    margin-left: 50px !important;
  }

  &.margem-e-55 {
    margin-left: 55px !important;
  }

  &.margem-e-60 {
    margin-left: 60px !important;
  }

  &.margem-e-65 {
    margin-left: 65px !important;
  }

  &.margem-e-70 {
    margin-left: 70px !important;
  }

  &.margem-e-75 {
    margin-left: 75px !important;
  }

  &.margem-e-80 {
    margin-left: 80px !important;
  }

  &.margem-e-85 {
    margin-left: 85px !important;
  }

  &.margem-e-90 {
    margin-left: 90px !important;
  }

  &.margem-e-95 {
    margin-left: 95px !important;
  }

  &.margem-e-100 {
    margin-left: 100px !important;
  }

  /* DIRECIONAMENTOS */
  &.center {
    margin: auto;
  }

  &.alinhar-c {
    text-align: center;
  }

  &.alinhar-d {
    text-align: right !important;
  }

  &.alinhar-e {
    text-align: left !important;
  }

  &.flutuar-d {
    float: right;
  }

  &.flutuar-e {
    float: left;
  }

  /* PADDINGS */
  &.inflar-0 {
    padding: 0px !important;
  }

  &.inflar-1 {
    padding: 1px !important;
  }

  &.inflar-2 {
    padding: 2px !important;
  }

  &.inflar-3 {
    padding: 3px !important;
  }

  &.inflar-4 {
    padding: 4px !important;
  }

  &.inflar {
    padding: 5px !important;
  }

  &.inflar-10 {
    padding: 10px !important;
  }

  &.inflar-15 {
    padding: 15px !important;
  }

  &.inflar-20 {
    padding: 20px !important;
  }

  &.inflar-25 {
    padding: 25px !important;
  }

  &.inflar-30 {
    padding: 30px !important;
  }

  &.inflar-35 {
    padding: 35px !important;
  }

  &.inflar-40 {
    padding: 40px !important;
  }

  &.inflar-45 {
    padding: 45px !important;
  }

  &.inflar-50 {
    padding: 50px !important;
  }

  &.inflar-55 {
    padding: 55px !important;
  }

  &.inflar-60 {
    padding: 60px !important;
  }

  &.inflar-65 {
    padding: 65px !important;
  }

  &.inflar-70 {
    padding: 70px !important;
  }

  &.inflar-75 {
    padding: 75px !important;
  }

  &.inflar-80 {
    padding: 80px !important;
  }

  &.inflar-85 {
    padding: 85px !important;
  }

  &.inflar-90 {
    padding: 90px !important;
  }

  &.inflar-95 {
    padding: 95px !important;
  }

  &.inflar-100 {
    padding: 100px !important;
  }

  &.inflar-150 {
    padding: 150px !important;
  }

  &.inflar-200 {
    padding: 200px !important;
  }

  &.inflar-h-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  &.inflar-h {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }

  &.inflar-h-10 {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  &.inflar-h-15 {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }

  &.inflar-h-20 {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  &.inflar-h-25 {
    padding-right: 25px !important;
    padding-left: 25px !important;
  }

  &.inflar-h-30 {
    padding-right: 30px !important;
    padding-left: 30px !important;
  }

  &.inflar-h-35 {
    padding-right: 35px !important;
    padding-left: 35px !important;
  }

  &.inflar-h-40 {
    padding-right: 40px !important;
    padding-left: 40px !important;
  }

  &.inflar-h-45 {
    padding-right: 45px !important;
    padding-left: 45px !important;
  }

  &.inflar-h-50 {
    padding-right: 50px !important;
    padding-left: 50px !important;
  }

  &.inflar-h-55 {
    padding-right: 55px !important;
    padding-left: 55px !important;
  }

  &.inflar-h-60 {
    padding-right: 60px !important;
    padding-left: 60px !important;
  }

  &.inflar-h-65 {
    padding-right: 65px !important;
    padding-left: 65px !important;
  }

  &.inflar-h-70 {
    padding-right: 70px !important;
    padding-left: 70px !important;
  }

  &.inflar-h-75 {
    padding-right: 75px !important;
    padding-left: 75px !important;
  }

  &.inflar-h-80 {
    padding-right: 80px !important;
    padding-left: 80px !important;
  }

  &.inflar-h-85 {
    padding-right: 85px !important;
    padding-left: 85px !important;
  }

  &.inflar-h-90 {
    padding-right: 90px !important;
    padding-left: 90px !important;
  }

  &.inflar-h-95 {
    padding-right: 95px !important;
    padding-left: 95px !important;
  }

  &.inflar-h-100 {
    padding-right: 100px !important;
    padding-left: 100px !important;
  }

  &.inflar-h-150 {
    padding-right: 150px !important;
    padding-left: 150px !important;
  }

  &.inflar-h-200 {
    padding-right: 200px !important;
    padding-left: 200px !important;
  }


  &.inflar-v-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  &.inflar-v {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  &.inflar-v-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  &.inflar-v-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  &.inflar-v-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  &.inflar-v-25 {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }

  &.inflar-v-30 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  &.inflar-v-35 {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }

  &.inflar-v-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  &.inflar-v-45 {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }

  &.inflar-v-50 {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  &.inflar-v-55 {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }

  &.inflar-v-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  &.inflar-v-65 {
    padding-top: 65px !important;
    padding-bottom: 65px !important;
  }

  &.inflar-v-70 {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

  &.inflar-v-75 {
    padding-top: 75px !important;
    padding-bottom: 75px !important;
  }

  &.inflar-v-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }

  &.inflar-v-85 {
    padding-top: 85px !important;
    padding-bottom: 85px !important;
  }

  &.inflar-v-90 {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
  }

  &.inflar-v-95 {
    padding-top: 95px !important;
    padding-bottom: 95px !important;
  }

  &.inflar-v-100 {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
  }

  &.inflar-v-150 {
    padding-top: 150px !important;
    padding-bottom: 150px !important;
  }

  &.inflar-v-200 {
    padding-top: 200px !important;
    padding-bottom: 200px !important;
  }


  &.inflar-t-0 {
    padding-top: 0px !important;
  }

  &.inflar-t {
    padding-top: 5px !important;
  }

  &.inflar-t-10 {
    padding-top: 10px !important;
  }

  &.inflar-t-15 {
    padding-top: 15px !important;
  }

  &.inflar-t-20 {
    padding-top: 20px !important;
  }

  &.inflar-t-25 {
    padding-top: 25px !important;
  }

  &.inflar-t-30 {
    padding-top: 30px !important;
  }

  &.inflar-t-35 {
    padding-top: 35px !important;
  }

  &.inflar-t-40 {
    padding-top: 40px !important;
  }

  &.inflar-t-45 {
    padding-top: 45px !important;
  }

  &.inflar-t-50 {
    padding-top: 50px !important;
  }

  &.inflar-t-55 {
    padding-top: 55px !important;
  }

  &.inflar-t-60 {
    padding-top: 60px !important;
  }

  &.inflar-t-65 {
    padding-top: 65px !important;
  }

  &.inflar-t-70 {
    padding-top: 70px !important;
  }

  &.inflar-t-75 {
    padding-top: 75px !important;
  }

  &.inflar-t-80 {
    padding-top: 80px !important;
  }

  &.inflar-t-85 {
    padding-top: 85px !important;
  }

  &.inflar-t-90 {
    padding-top: 90px !important;
  }

  &.inflar-t-95 {
    padding-top: 95px !important;
  }

  &.inflar-t-100 {
    padding-top: 100px !important;
  }

  &.inflar-f-0 {
    padding-bottom: 0px !important;
  }

  &.inflar-f {
    padding-bottom: 5px !important;
  }

  &.inflar-f-10 {
    padding-bottom: 10px !important;
  }

  &.inflar-f-15 {
    padding-bottom: 15px !important;
  }

  &.inflar-f-20 {
    padding-bottom: 20px !important;
  }

  &.inflar-f-25 {
    padding-bottom: 25px !important;
  }

  &.inflar-f-30 {
    padding-bottom: 30px !important;
  }

  &.inflar-f-35 {
    padding-bottom: 35px !important;
  }

  &.inflar-f-40 {
    padding-bottom: 40px !important;
  }

  &.inflar-f-45 {
    padding-bottom: 45px !important;
  }

  &.inflar-f-50 {
    padding-bottom: 50px !important;
  }

  &.inflar-f-55 {
    padding-bottom: 55px !important;
  }

  &.inflar-f-60 {
    padding-bottom: 60px !important;
  }

  &.inflar-f-65 {
    padding-bottom: 65px !important;
  }

  &.inflar-f-70 {
    padding-bottom: 70px !important;
  }

  &.inflar-f-75 {
    padding-bottom: 75px !important;
  }

  &.inflar-f-80 {
    padding-bottom: 80px !important;
  }

  &.inflar-f-85 {
    padding-bottom: 85px !important;
  }

  &.inflar-f-90 {
    padding-bottom: 90px !important;
  }

  &.inflar-f-95 {
    padding-bottom: 95px !important;
  }

  &.inflar-f-100 {
    padding-bottom: 100px !important;
  }

  &.inflar-d-0 {
    padding-right: 0px !important;
  }

  &.inflar-d-5 {
    padding-right: 5px !important;
  }

  &.inflar-d-10 {
    padding-right: 10px !important;
  }

  &.inflar-d-15 {
    padding-right: 15px !important;
  }

  &.inflar-d-20 {
    padding-right: 20px !important;
  }

  &.inflar-d-25 {
    padding-right: 25px !important;
  }

  &.inflar-d-30 {
    padding-right: 30px !important;
  }

  &.inflar-d-35 {
    padding-right: 35px !important;
  }

  &.inflar-d-40 {
    padding-right: 40px !important;
  }

  &.inflar-d-45 {
    padding-right: 45px !important;
  }

  &.inflar-d-50 {
    padding-right: 50px !important;
  }

  &.inflar-d-55 {
    padding-right: 55px !important;
  }

  &.inflar-d-60 {
    padding-right: 60px !important;
  }

  &.inflar-d-65 {
    padding-right: 65px !important;
  }

  &.inflar-d-70 {
    padding-right: 70px !important;
  }

  &.inflar-d-75 {
    padding-right: 75px !important;
  }

  &.inflar-d-80 {
    padding-right: 80px !important;
  }

  &.inflar-d-85 {
    padding-right: 85px !important;
  }

  &.inflar-d-90 {
    padding-right: 90px !important;
  }

  &.inflar-d-95 {
    padding-right: 95px !important;
  }

  &.inflar-d-100 {
    padding-right: 100px !important;
  }

  &.inflar-e-0 {
    padding-left: 0px !important;
  }

  &.inflar-e {
    padding-left: 5px !important;
  }

  &.inflar-e-10 {
    padding-left: 10px !important;
  }

  &.inflar-e-15 {
    padding-left: 15px !important;
  }

  &.inflar-e-20 {
    padding-left: 20px !important;
  }

  &.inflar-e-25 {
    padding-left: 25px !important;
  }

  &.inflar-e-30 {
    padding-left: 30px !important;
  }

  &.inflar-e-35 {
    padding-left: 35px !important;
  }

  &.inflar-e-40 {
    padding-left: 40px !important;
  }

  &.inflar-e-45 {
    padding-left: 45px !important;
  }

  &.inflar-e-50 {
    padding-left: 50px !important;
  }

  &.inflar-e-55 {
    padding-left: 55px !important;
  }

  &.inflar-e-60 {
    padding-left: 60px !important;
  }

  &.inflar-e-65 {
    padding-left: 65px !important;
  }

  &.inflar-e-70 {
    padding-left: 70px !important;
  }

  &.inflar-e-75 {
    padding-left: 75px !important;
  }

  &.inflar-e-80 {
    padding-left: 80px !important;
  }

  &.inflar-e-85 {
    padding-left: 85px !important;
  }

  &.inflar-e-90 {
    padding-left: 90px !important;
  }

  &.inflar-e-95 {
    padding-left: 95px !important;
  }

  &.inflar-e-100 {
    padding-left: 100px !important;
  }

  /* TABELAS */
  &.tabela-0,
  &.tabela-0 td,
  &.tabela-0 th,
  &.tabela-0 tr {
    border: none;
  }

  &.tabela-0.fina th,
  &.tabela-0.fina td,
  &.tabela.fina th,
  &.tabela.fina td,
  &.tabela-2.fina th,
  &.tabela-2.fina td {
    padding: 5px !important;
  }

  &.tabela {
    border: 1px solid #f1f1f1;
  }

  &.tabela tr:nth-child(odd) {
    background-color: #f2f2f2;
  }

  &.tabela tr:hover {
    background-color: #ddd;
  }

  &.tabela-2,
  &.tabela-2 th,
  &.tabela-2 tr,
  &.tabela-2 td {
    border: 1px solid #d4d4d4;
  }

  /* BORDAS */
  &.borda-0 {
    border: none;
  }

  &.borda-e-0 {
    border-left: none;
  }

  &.borda-d-0 {
    border-right: none;
  }

  &.borda-t-0 {
    border-top: none;
  }

  &.borda-f-0 {
    border-bottom: none;
  }

  &.borda-h-0 {
    border-left: none;
    border-right: none;
  }

  &.borda-v-0 {
    border-top: none;
    border-bottom: none;
  }

  &.borda-1 {
    border: 1px solid #f1f1f1;
  }

  &.borda-e-1 {
    border-left: 1px solid #f1f1f1;
  }

  &.borda-d-1 {
    border-right: 1px solid #f1f1f1;
  }

  &.borda-t-1 {
    border-top: 1px solid #f1f1f1;
  }

  &.borda-f-1 {
    border-bottom: 1px solid #f1f1f1;
  }

  &.borda-h-1 {
    border-left: 1px solid #f1f1f1;
    border-right: 1px solid #f1f1f1;
  }

  &.borda-v-1 {
    border-top: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
  }

  &.borda-2 {
    border: 1px solid #f7f7f7;
  }

  &.borda-e-2 {
    border-left: 1px solid #f7f7f7;
  }

  &.borda-d-2 {
    border-right: 1px solid #f7f7f7;
  }

  &.borda-t-2 {
    border-top: 1px solid #f7f7f7;
  }

  &.borda-f-2 {
    border-bottom: 1px solid #f7f7f7;
  }

  &.borda-h-2 {
    border-left: 1px solid #f7f7f7;
    border-right: 1px solid #f7f7f7;
  }

  &.borda-v-2 {
    border-top: 1px solid #f7f7f7;
    border-bottom: 1px solid #f7f7f7;
  }

  &.borda-3 {
    border: 1px solid silver;
  }

  &.borda-e-3 {
    border-left: 1px solid silver;
  }

  &.borda-d-3 {
    border-right: 1px solid silver;
  }

  &.borda-t-3 {
    border-top: 1px solid silver;
  }

  &.borda-f-3 {
    border-bottom: 1px solid silver;
  }

  &.borda-h-3 {
    border-left: 1px solid silver;
    border-right: 1px solid silver;
  }

  &.borda-v-3 {
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
  }

  &.borda-4 {
    border: 1px solid gray;
  }

  &.borda-e-4 {
    border-left: 1px solid gray;
  }

  &.borda-d-4 {
    border-right: 1px solid gray;
  }

  &.borda-t-4 {
    border-top: 1px solid gray;
  }

  &.borda-f-4 {
    border-bottom: 1px solid gray;
  }

  &.borda-h-4 {
    border-left: 1px solid gray;
    border-right: 1px solid gray;
  }

  &.borda-v-4 {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
  }

  &.borda-var {
    border: 1px solid var(--borda);
  }

  &.borda-e-var {
    border-left: 1px solid var(--borda);
  }

  &.borda-d-var {
    border-right: 1px solid var(--borda);
  }

  &.borda-t-var {
    border-top: 1px solid var(--borda);
  }

  &.borda-f-var {
    border-bottom: 1px solid var(--borda);
  }

  &.borda-h-var {
    border-left: 1px solid var(--borda);
    border-right: 1px solid var(--borda);
  }

  &.borda-v-var {
    border-top: 1px solid var(--borda);
    border-bottom: 1px solid var(--borda);
  }



  /* ARREDONDAR */
  &.arredondar-100-p {
    border-radius: 100%;
  }

  &.arredondar-100 {
    border-radius: 100px !important;
  }

  &.arredondar-95 {
    border-radius: 95px !important;
  }

  &.arredondar-90 {
    border-radius: 90px !important;
  }

  &.arredondar-85 {
    border-radius: 85px !important;
  }

  &.arredondar-80 {
    border-radius: 80px !important;
  }

  &.arredondar-75 {
    border-radius: 75px !important;
  }

  &.arredondar-70 {
    border-radius: 70px !important;
  }

  &.arredondar-65 {
    border-radius: 65px !important;
  }

  &.arredondar-60 {
    border-radius: 60px !important;
  }

  &.arredondar-55 {
    border-radius: 55px !important;
  }

  &.arredondar-50 {
    border-radius: 50px !important;
  }

  &.arredondar-45 {
    border-radius: 45px !important;
  }

  &.arredondar-40 {
    border-radius: 40px !important;
  }

  &.arredondar-35 {
    border-radius: 35px !important;
  }

  &.arredondar-30 {
    border-radius: 30px !important;
  }

  &.arredondar-25 {
    border-radius: 25px !important;
  }

  &.arredondar-20 {
    border-radius: 20px !important;
  }

  &.arredondar-15 {
    border-radius: 15px !important;
  }

  &.arredondar-10 {
    border-radius: 10px !important;
  }

  &.arredondar {
    border-radius: 5px !important;
  }

  &.arredondar-0 {
    border-radius: 0px !important;
  }

  /* IMAGENS */
  &.img,
  &.wide {
    width: 100%;
    height: auto;
  }

  &.pic {
    border-radius: 8px !important;
    box-shadow: 0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25), 0 8px 16px -8px hsla(0, 0%, 0%, 0.3), 0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);
  }

  &.pic-2 {
    border-radius: 8px;
    box-shadow: 8px 0 8px 0 rgb(0 0 0 / 10%);
    display: inline-block;
  }

  /* CLASSES QUE PODEM SER MODIFICADORES */
  &.pic-2.btn {
    cursor: pointer;
  }

  &.btn-sombra:hover {
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  }

  &.truncate {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &.flex {
    display: flex;
  }

  &.flex.space-btw {
    display: flex;
    justify-content: space-between;
  }

  &.flex.items-c,
  &.flex.space-btw-center {
    justify-content: space-between;
    align-items: center;
  }

  &.disabled {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: .45 !important;
    background-image: none;
    box-shadow: none;
  }

  &.pic-2.disabled {
    border: 1px solid #c5c5c5;
  }

  &.video {
    width: 100%;
    height: 170px !important;
  }

  @media only screen and (min-width: 601px) {
    &.video {
      height: 100px !important;
    }
  }

  @media only screen and (min-width: 993px) {
    &.video {
      height: 515px !important;
    }
  }

  /* POSICIONAMENTO */
  &.fixo {
    position: fixed;
    z-index: 999;
  }

  &.fixo-var {
    position: fixed;
    z-index: var(--fixo);
  }

  /* LISTAS */
  &.lista-0 {
    list-style: none;
  }

  &.lista {
    list-style: circle;
  }

  /* MOUSE */
  &.clicar {
    cursor: pointer;
  }

  /* SOMBRAS */
  &.sombra-0 {
    box-shadow: none
  }

  &.sombra {
    box-shadow: var(--sombra-1)
  }

  &.sombra-2 {
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  }

  &.sombra-3 {
    box-shadow: 0 0 50px #777;
  }

  &.sombra-4 {
    box-shadow: 0 8px 8px -4px silver;
  }

  &.sombra-5 {
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
  }

  &.sombra-6 {
    box-shadow:
      0 2.8px 2.2px rgba(0, 0, 0, 0.034),
      0 6.7px 5.3px rgba(0, 0, 0, 0.048),
      0 12.5px 10px rgba(0, 0, 0, 0.06),
      0 22.3px 17.9px rgba(0, 0, 0, 0.072),
      0 41.8px 33.4px rgba(0, 0, 0, 0.086),
      0 100px 80px rgba(0, 0, 0, 0.12)
  }

  &.sombra-7 {
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
  }

  &.sombra-7.hover {
    transition: transform .3s, box-shadow .3s, background-color .3s, color .3s, opacity .3s, -webkit-transform .3s, -webkit-box-shadow .3s;
  }

  &.sombra-7.hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .1);
  }

  &.sombra-8 {
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .1);
  }

  /* SOMBRAS DE TEXTO */
  &.t-inner-sombra {
    background-color: black;
    color: transparent;
    text-shadow: 0px 2px 3px lightgrey;
    -webkit-background-clip: text;
    background-clip: text;
  }

  &.png-sombra {
    filter: drop-shadow(20px 10px 1px rgba(0, 0, 0, 0.4));
  }

  &.t-3d-sombra {
    color: black;
    text-shadow: 0 1px darkgrey,
      -1px 0 lightgrey,
      -1px 2px darkgrey,
      -2px 1px lightgrey,
      -2px 3px darkgrey,
      -3px 2px lightgrey,
      -3px 4px darkgrey,
      -4px 3px lightgrey,
      -4px 5px darkgrey,
      -5px 4px lightgrey,
      -5px 6px darkgrey,
      -6px 5px lightgrey,
      -6px 7px darkgrey,
      -7px 6px lightgrey,
      -7px 8px darkgrey,
      -8px 7px lightgrey;
  }

  &.t-sombra {
    text-shadow: 0px 2px 5px #000000;
  }

  &.t-sombra-2 {
    text-shadow: 0px 2px 2px #000000;
  }

  &.t-sombra-3 {
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.7);
  }

  &.t-sombra-4 {
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
  }

}

/* ============================================
   COMPONENTES ESPECÍFICOS
   ============================================ */

.sombra-modal {
  position: relative !important;
}

.sombra-modal:before,
.sombra-modal:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px !important;
  left: 10px !important;
  width: 50%;
  top: 80%;
  max-width: 300px !important;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.sombra-modal:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px !important;
  left: auto;
}

.sombra-modal-e {
  position: relative;
}

.sombra-modal-e:before {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px !important;
  left: 10px !important;
  width: 50%;
  top: 80%;
  max-width: 300px !important;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.sombra-modal-d {
  position: relative;
}

.sombra-modal-d:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px !important;
  right: 10px !important;
  left: auto;
  width: 50%;
  top: 80%;
  max-width: 300px !important;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

.sombra-flutuante {
  position: relative;
}

.sombra-flutuante:before,
.sombra-flutuante:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px !important;
  left: 10px !important;
  width: 50%;
  top: 80%;
  max-width: 300px !important;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}

.sombra-flutuante:after {
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px !important;
  left: auto;
}

.sombra-moderna {
  position: relative;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.sombra-moderna:before,
.sombra-moderna:after {
  content: "";
  position: absolute;
  z-index: -1;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  top: 50%;
  bottom: 0;
  left: 10px !important;
  right: 10px !important;
  -moz-border-radius: 100px / 10px !important;
  border-radius: 100px / 10px !important;
}

.sombra-moderna:after {
  right: 10px !important;
  left: auto;
  -webkit-transform: skew(8deg) rotate(3deg);
  -moz-transform: skew(8deg) rotate(3deg);
  -ms-transform: skew(8deg) rotate(3deg);
  -o-transform: skew(8deg) rotate(3deg);
  transform: skew(8deg) rotate(3deg);
}

/* BOTAO DO WHATSAPP */
#whats-flutuante {
  position: fixed;
  bottom: 10px !important;
  right: 10px !important;
  z-index: 3;
}

/* LGPD */
.lgpd-cookie {
  position: fixed;
  bottom: 10px !important;
  right: 10px !important;
  left: 10px !important;
  margin: auto;
  z-index: 9999;
}

/* CONTAINER YAGI */
.container-yagi,
.container-wide {
  margin: 0 auto;
  max-width: 1280px !important;
  width: 90%;
}

.container-ultra {
  margin: 0 auto;
  width: 95%;
}

/* FLEX */


@media only screen and (min-width: 601px) {
  .container-yagi {
    width: 85%;
  }
}

@media only screen and (min-width: 993px) {
  .container-yagi {
    width: 80%;
  }
}

/* VIDEO YOUTUBE */
.video-yagi {
  width: 100%;
  height: 170px !important;
}

@media only screen and (min-width: 601px) {

  .video-yagi {
    height: 100px !important;
  }
}

@media only screen and (min-width: 993px) {

  .video-yagi {
    height: 515px !important;
  }
}

/* CONTROLE DE MIDIA */
.mostrar-apenas-mobile,
.mostrar-apenas-tablet,
.mostrar-tablet-mobile,
.esconder-tablet-computador,
.esconder-apenas-computador {
  display: none !important;
}

.mostrar-apenas-tablet-computador,
.mostrar-apenas-computador,
.esconder-apenas-mobile,
.esconder-apenas-tablet,
.esconder-tablet-mobile {
  display: inherit !important;
}

/* TABLET */
@media only screen and (max-width: 768px) {

  .mostrar-apenas-mobile,
  .mostrar-apenas-computador,
  .esconder-apenas-tablet,
  .esconder-tablet-mobile,
  .esconder-tablet-computador {
    display: none !important;
  }

  .mostrar-apenas-tablet,
  .mostrar-tablet-mobile,
  .mostrar-apenas-tablet-computador,
  .esconder-apenas-mobile,
  .esconder-apenas-computador {
    display: inherit !important;
  }
}

@media only screen and (max-width: 600px) {

  .mostrar-apenas-mobile,
  .mostrar-apenas-computador,
  .esconder-apenas-tablet,
  .esconder-tablet-mobile,
  .esconder-tablet-computador {
    display: none !important;
  }

  .mostrar-apenas-tablet,
  .mostrar-tablet-mobile,
  .mostrar-apenas-tablet-computador,
  .esconder-apenas-mobile,
  .esconder-apenas-computador {
    display: inherit !important;
  }
}

@media only screen and (max-width: 450px) {

  .mostrar-apenas-tablet,
  .mostrar-apenas-computador,
  .mostrar-apenas-tablet-computador,
  .esconder-apenas-mobile,
  .esconder-tablet-mobile {
    display: none !important;
  }

  .mostrar-apenas-mobile,
  .mostrar-tablet-mobile,
  .esconder-apenas-tablet,
  .esconder-apenas-computador,
  .esconder-tablet-computador {
    display: inherit !important;
  }
}

@media only screen and (max-width: 400px) {

  .mostrar-apenas-tablet,
  .mostrar-apenas-computador,
  .mostrar-apenas-tablet-computador,
  .esconder-apenas-mobile,
  .esconder-tablet-mobile {
    display: none !important;
  }

  .mostrar-apenas-mobile,
  .mostrar-tablet-mobile,
  .esconder-apenas-tablet,
  .esconder-apenas-computador,
  .esconder-tablet-computador {
    display: inherit !important;
  }
}