pre {
  overflow-x: auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

input[type="text"],
input[type="date"] {
  color: #6e6e6e;
}

.badge_cart {
  color: white;
  background-color: #cc0000;
  padding: 1px 4px;
  height: 50px;
  border-radius: 50%;
  font-weight: 400;
  font-size: 10px;
  left: -7px;
}

.badge-position {
  margin-top: -35px;
}

.badge-warning {
  color: white;
  background-color: #cc0000;
  padding: 1px 5px;
  border-radius: 50%;
  font-weight: 400;
  font-size: 10px;
}

.alert_geleng {
  animation: geleng 3s ease forwards;
  transition: all 0.5s;
  /* animation-delay: 3s; */
  position: relative;
}

@keyframes geleng {
  0% {
    transform: translateX(-5px);
  }
  5% {
    transform: translateX(5px);
  }
  10% {
    transform: translateX(-5px);
  }
  15% {
    transform: translateX(5px);
  }
  20% {
    transform: translateX(-5px);
  }
  25% {
    transform: translateX(5px);
  }
  25% {
    transform: translateX(5px);
  }
  90% {
    opacity: 1;
  }
  100% {
    display: none;
    opacity: 0;
  }
}

.alert_menghilang {
  animation: mymove 4s ease forwards;
  transition: all 0.5s;
}

@keyframes mymove {
  from {
    top: 0px;
  }
  to {
    top: -70px;
  }
  30% {
    opacity: 1;
  }
  100% {
    display: none;
    opacity: 0;
  }
}

.blinking {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0.2;
  }
}

.center-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

.shake {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
  /* display: none; */
  /* width: 5px;
  -webkit-appearance: none; */
  /* width: 15px; */
  padding: 0px;
  margin: 0px;
  /* margin-top: 10px; */
}

.fs,
.nm,
.inf {
  position: fixed;
  top: 65px;
  right: 10px;
  opacity: 0.7;
  background-color: #fff;
  padding: 3px 8px;
  /* border-radius: 5px; */
}

.fs,
.nm {
  cursor: pointer;
}
.nm,
.inf {
  display: none;
}

.fs:hover,
.nm:hover {
  opacity: 1;
}

.masuk-berhasil {
  font-size: 60px;
  color: green;
  vertical-align: middle;
}

/* .masuk-alert {
  width: 600px;
} */
.pointer {
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .fs {
    display: none;
  }

  .masuk-berhasil {
    font-size: 60px;
  }
    
}