:root{
    --prop_con: 1.5;
    --prop_aco: 4;
  }
  .viga-mista{
    font-size: 12px;
    margin-top: 40px;
    width: fit-content;
  }
  /* Proporção: 1cm = 2px */
  .concreto{
    background: url('../../img/hachura_concreto.svg') #CCC;
    background-size: 60px;
    margin: 0 auto;
    line-height: 1.1;
    position: relative;
  }
  .concreto_nervurada{
    margin: 0 auto;
    line-height: 1.1;
    position: absolute;
    bottom: 0;
    background: url('../../img/nervurada.svg'), url('../../img/hachura_concreto.svg') #CCC;
    background-position: bottom center, center;
    background-repeat: repeat-x, repeat;
    background-size: 60px, 60px;
  }
  .parafuso{
    width: 7.6px;
    position: absolute;
    bottom: 0;
    left: calc(50% - 3.8px);
    background: url('../../img/parafuso.svg') no-repeat center top;
    background-size: cover;
  }
  .cota_be{
    position: absolute;
    top: -25px;
    right: 0;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #000;
  }
  .cota_be:after{
    content: '';
    position: absolute;
    bottom: -4px;
    right: 0;
    width: 1px;
    height: 8px;
    background: #000;
  }
  .cota_be:before{
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 1px;
    height: 8px;
    background: #000;
  }
  .cota_hc, .cota_hf{
    position: absolute;
    top: 0;
    right: -110px;
    width: 100px;
    padding-left: 5px;
    border-left: 1px solid #000;
  }
  .perfil{
    margin: 0 auto;
  }
  .mesa{
    width: 100%;
    border: 1px solid #000;
  }
  .mesa-sup{
    border-bottom: 0;
  }
  .mesa-inf{
    border-top: 0;
  }
  .alma{
    width: 100px;
    display: inline-block;
  }
  .alma-esq{
    border: 1px solid #000;
    border-left: 0;
    position: relative;
  }
  .alma-cen{
    display: inline-block;
  }
  .alma-dir{
    border: 1px solid #000;
    border-right: 0;
    position: relative;
  }
  .cota_tw{
    position: absolute;
    height: 20px;
    width: max-content;
    top: calc(50% - 10px);
    left: 80%;
  }
  .alma-dir:after{
    content: '';
    position: absolute;
    width: 8px;
    top: calc(50% - 3px);
    left: 5px;
    border-left: 5px solid #000;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
  }
  .alma-esq:after{
    content: '';
    position: absolute;
    background: #000;
    height: 1px;
    width: 8px;
    top: 50%;
    right: 0px;
  }
  .cota_d{
    position: absolute;
    height: 100%;
    width: max-content;
    right: calc(100% + 95px);
    top: 0;
    border-right: 1px solid #000;
    padding-right: 5px;
  }
  .cota_dlinha{
    position: absolute;
    width: max-content;
    border-right: 1px solid #000;
    padding-right: 5px;
    margin: auto 0;
    right: calc(100% + 5px);
  }
  .cota_linha_r:after{
    content: '';
    position: absolute;
    bottom: 0px;
    right: -4px;
    width: 8px;
    height: 1px;
    background: #000;
  }
  .cota_linha_r:before{
    content: '';
    position: absolute;
    top: 0px;
    right: -4px;
    width: 8px;
    height: 1px;
    background: #000;
  }
  .cota_linha_l:after{
    content: '';
    position: absolute;
    bottom: 0px;
    left: -4px;
    width: 8px;
    height: 1px;
    background: #000;
  }
  .cota_linha_l:before{
    content: '';
    position: absolute;
    top: 0px;
    left: -4px;
    width: 8px;
    height: 1px;
    background: #000;
  }
  .cota_tf{
    position: absolute;
    height: 20px;
    top: -10px;
    right: -70px;
  }

  @media(max-width: 575.98px) {
    :root{
      --prop_con: 1;
      --prop_aco: 3;
    }
    .cota_be, .cota_hc, .cota_hf{
      font-size: 8px;
    }
    .cota_be{
      top: -18px;
    }
    .cota_tw, .cota_d, .cota_dlinha, .cota_tf, .alma-dir:after, .alma-esq:after{
      display: none !important;
    }
  }