@CHARSET "UTF-8";

.text-mobile-normal {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Helvetica Neue", sans-serif;
  font-size: small;            /*  xx-small ; x-small ; small ; medium ; large ; x-large ; xx-large  */
  font-weight: normal;
}

.text-mobile-small {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Helvetica Neue", sans-serif;
  font-size: x-small;            /*  xx-small ; x-small ; small ; medium ; large ; x-large ; xx-large  */
  font-weight: normal;
}

.text-mobile-light {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Helvetica Neue", sans-serif;
  font-size: xx-small;            /*  xx-small ; x-small ; small ; medium ; large ; x-large ; xx-large  */
  font-weight: normal;
}

.text-mobile {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Helvetica Neue", sans-serif;
  font-size: xx-small;            /*  xx-small ; x-small ; small ; medium ; large ; x-large ; xx-large  */
  font-weight: bold;
}

.g3chat1 {
  font-size: xx-small;
  border-radius: 5px;
  margin-left: 6px;
  margin-right: 6px;
  padding: 6px;
  max-width: 96%;
  background-color: #e4e4e4;
  box-shadow: #989898 3px 3px 3px;
}

.g3chat2 {
  font-size: xx-small;
  border-radius: 5px;
  margin-left: 6px;
  margin-right: 6px;
  padding: 6px;
  max-width: 96%;
  background-color: #bebebe;
  box-shadow: #989898 3px 3px 3px;
}

.upcase input {
  text-transform: uppercase;
  &::placeholder {  /* Recent browsers */
    text-transform: none;
  }
  &:-moz-placeholder {  /* Mozilla Firefox 4 to 18 */
    text-transform: none;
  }
  &::-moz-placeholder {  /* Mozilla Firefox 19+ */
    text-transform: none;
  }
  &::-webkit-input-placeholder {  /* WebKit browsers */
    text-transform: none;
  }
}

p {
    font-family:Arial, Helvetica, sans-serif;
}

.image-zoom {
  overflow: hidden;
  margin: 0 auto;
}

.image-zoom img {
  width: 100%;
  transition: 0.2s all ease-in-out;
}

.image-zoom:hover img {
  transform: scale(1.5);
}

.zoom {
  transition: transform .2s;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.2);
}

.zoom2 {
  transition: transform .2s;
  margin: 0 auto;
}

.zoom2:hover {
  transform: scale(1.4);
}

.superavatar {
  vertical-align: middle;
  width: 64px;
  height: 64px;
  border-radius: 30%;
  border-width: 2px 2px 2px 2px;
  border-style: solid;
  border-color: #ffffff;
}

img.ca35 {
  opacity:0.35;
  -moz-opacity: 0.35;
  filter: alpha(opacity=35);
}

img.ca50 {
  opacity:0.50;
  -moz-opacity: 0.50;
  filter: alpha(opacity=50);
}

img.ca75 {
  opacity:0.75;
  -moz-opacity: 0.75;
  filter: alpha(opacity=75);
}

.whatsapp-float {
  position: fixed;
  width: 32px;
  height: 32px;
  bottom: 10px;
  left: 20px;
  background-image: url('../logos/logo_whatsapp.jpg');
  background-repeat: no-repeat;
  background-size: 32px 32px;
  background-color: #25d366;
  opacity:0.75;
  -moz-opacity: 0.75;
  filter: alpha(opacity=75);
  border-radius: 10px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;
}

@media print {
   .no-print {
      display: none !important;
      visibility: hidden;
   }
}

#my2BotBtn {
  display: none;
  position: fixed;
  bottom: 10px;
  left: 20px;
  z-index: 99;
  font-family: Verdana;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border: none;
  outline: none;
  background-color: #555;
  color: white;
  cursor: pointer;
  padding: 7px;
  border-radius: 4px;
  opacity: 0.50;
  filter: alpha(opacity=50);
  -moz-opacity: 0.50;
}

#my2BotBtn:hover {
  background-color: red;
}

#my2TopBtn {
  display: none;
  position: fixed;
  bottom: 10px;
  left: 50px;
  z-index: 99;
  font-family: Verdana;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border: none;
  outline: none;
  background-color: #555;
  color: white;
  cursor: pointer;
  padding: 7px;
  border-radius: 4px;
  opacity: 0.50;
  filter: alpha(opacity=50);
  -moz-opacity: 0.50;
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

#my2TopBtn:hover {
  background-color: red;
}

.barcode {
  overflow: hidden;
  height: 50px;
}

.barcode div {
  display: inline-block;
  height: 100px;
}

.barcode .black {
  border-color: #000;
  border-left-style: solid;
  width: 0px;
}

.barcode .white {
  background: #fff;
}

.barcode .thin.black {
  border-left-width: 1px;
}

.barcode .large.black {
  border-left-width: 3px;
}

.barcode .thin.white {
  width: 1px;
}

.barcode .large.white {
  width: 3px;
}

:root {
    --ants-color: black;
    --ants-speed: 0.10s;
    --ants-thickness: 3px;
    --ants-dash: 5px;
    --ants-gap: 5px;
    --ants-radius: 6px;
    --ants-padding: 6px;
    --ants-direction-top: 1;
    --ants-direction-right: 1;
    --ants-direction-bottom: -1;
    --ants-direction-left: -1;
}

.ants-box {
    position: relative;
    padding: var(--ants-padding);
    width: 100%;
    text-align: center;
    border-radius: var(--ants-radius);
    margin-bottom: var(--ants-padding);
}

/* ===== TOP ===== */
.ants-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--ants-thickness);
    background-size: calc(var(--ants-dash) + var(--ants-gap)) 100%;
    background-image: repeating-linear-gradient(
        to right,
        var(--ants-color) 0 var(--ants-dash),
        transparent var(--ants-dash) calc(var(--ants-dash) + var(--ants-gap))
    );
    animation: animTop var(--ants-speed) linear infinite;
    border-radius: inherit;
}

/* ===== RIGHT ===== */
.ants-right {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--ants-thickness);
    height: 100%;
    background-size: 100% calc(var(--ants-dash) + var(--ants-gap));
    background-image: repeating-linear-gradient(
        to bottom,
        var(--ants-color) 0 var(--ants-dash),
        transparent var(--ants-dash) calc(var(--ants-dash) + var(--ants-gap))
    );
    animation: animRight var(--ants-speed) linear infinite;
    border-radius: inherit;
}

/* ===== BOTTOM ===== */
.ants-box::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--ants-thickness);
    background-size: calc(var(--ants-dash) + var(--ants-gap)) 100%;
    background-image: repeating-linear-gradient(
        to right,
        var(--ants-color) 0 var(--ants-dash),
        transparent var(--ants-dash) calc(var(--ants-dash) + var(--ants-gap))
    );
    animation: animBottom var(--ants-speed) linear infinite;
    border-radius: inherit;
}

/* ===== LEFT ===== */
.ants-left {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--ants-thickness);
    height: 100%;
    background-size: 100% calc(var(--ants-dash) + var(--ants-gap));
    background-image: repeating-linear-gradient(
        to bottom,
        var(--ants-color) 0 var(--ants-dash),
        transparent var(--ants-dash) calc(var(--ants-dash) + var(--ants-gap))
    );
    animation: animLeft var(--ants-speed) linear infinite;
    border-radius: inherit;
}

/* ===== ANIMAÇÕES DINÂMICAS ===== */
@keyframes animTop {
    to { background-position: calc(10px * var(--ants-direction-top)) 0; }
}
@keyframes animRight {
    to { background-position: 0 calc(10px * var(--ants-direction-right)); }
}
@keyframes animBottom {
    to { background-position: calc(10px * var(--ants-direction-bottom)) 0; }
}
@keyframes animLeft {
    to { background-position: 0 calc(10px * var(--ants-direction-left)); }
}