@-webkit-keyframes animation-shake {
  0% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
            transform: rotate(0) scale(1) skew(1deg);
  }
  10% {
    -webkit-transform: rotate(-5deg) scale(1) skew(1deg);
            transform: rotate(-5deg) scale(1) skew(1deg);
  }
  20% {
    -webkit-transform: rotate(5deg) scale(1) skew(1deg);
            transform: rotate(5deg) scale(1) skew(1deg);
  }
  30% {
    -webkit-transform: rotate(-5deg) scale(1) skew(1deg);
            transform: rotate(-5deg) scale(1) skew(1deg);
  }
  40% {
    -webkit-transform: rotate(5deg) scale(1) skew(1deg);
            transform: rotate(5deg) scale(1) skew(1deg);
  }
  50% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
            transform: rotate(0) scale(1) skew(1deg);
  }
  100% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
            transform: rotate(0) scale(1) skew(1deg);
  }
}

@keyframes animation-shake {
  0% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
            transform: rotate(0) scale(1) skew(1deg);
  }
  10% {
    -webkit-transform: rotate(-5deg) scale(1) skew(1deg);
            transform: rotate(-5deg) scale(1) skew(1deg);
  }
  20% {
    -webkit-transform: rotate(5deg) scale(1) skew(1deg);
            transform: rotate(5deg) scale(1) skew(1deg);
  }
  30% {
    -webkit-transform: rotate(-5deg) scale(1) skew(1deg);
            transform: rotate(-5deg) scale(1) skew(1deg);
  }
  40% {
    -webkit-transform: rotate(5deg) scale(1) skew(1deg);
            transform: rotate(5deg) scale(1) skew(1deg);
  }
  50% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
            transform: rotate(0) scale(1) skew(1deg);
  }
  100% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
            transform: rotate(0) scale(1) skew(1deg);
  }
}

.animationShake {
  -webkit-animation: animation-shake 5s infinite ease-in-out;
          animation: animation-shake 5s infinite ease-in-out;
}

@-webkit-keyframes animationcountertime {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}

@keyframes animationcountertime {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}

@-webkit-keyframes animation-scale {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes animation-scale {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.animationScale {
  -webkit-animation: animation-scale 4s infinite ease-in-out;
          animation: animation-scale 4s infinite ease-in-out;
}

.animationcountertime {
  -webkit-animation-name: animationcountertime;
          animation-name: animationcountertime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  animation-direction: alternate-reverse;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.animationSpin {
  -webkit-animation: spin 4s linear infinite;
          animation: spin 4s linear infinite;
}

:root {
  --primaryColor:#041827a1;
}

/* width */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

/* Track
::-webkit-scrollbar-track {
 background: #f1f1f1;
}*/
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 9px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

:root {
  scroll-behavior: unset;
}

h1, h2, h3, h4, h5, h6 {
  margin: 5px;
}
.text-nowrap{
    white-space:nowrap;
}
iframe {
  width: 100%;
  height: 300px;
}

svg {
  width: 15px;
  height: 15px;
}

svg path {
  fill: var(--primaryColor);
}

svg, img {
  max-width: 99% !important;
}

img {
  margin: 3px 0;
  border-radius: 9px;
}

iframe {
  border-radius: 9px;
}
.backsound {
  position: fixed;
  right: 9px;
  top: 50%;
  z-index: 97;
  padding: 5px;
  cursor: pointer;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 50%;
  background-color: white;
  border: 1px solid #dedede;
}

.backsound svg {
  width: 24px;
  height: 24px;
}

.backsound svg path {
  fill: var(--primaryColor);
}

.backsound .iconplay {
  display: none;
}

.backsound .iconpause {
  display: inline;
}

.backsound.play .iconplay {
  display: inline;
}

.backsound.play .iconpause {
  display: none;
}

.coverModal .card {
  padding: 17px;
  border-radius: 19px;
  background-color: #fff;
  background-image: linear-gradient(1deg, #f8f2f18a, #ffffff);
}

#coverModal svg {
  width: 33px;
  height: 33px;
}

#coverModal svg path {
  fill: white;
}

#coverModal .to {
  border-radius: 9px;
  margin: 9px;
  padding: 9px 3px;
}

#coverModal .penerima {
  font-size: 15pt;
}

#coverModal .judul {
  font-size: 23pt;
  line-height: 0.9;
}

#coverModal .judul .mempelai-pria, #coverModal .judul .mempelai-wanita {
  font-size: 25pt;
}

#coverModal .cover-gambar {
  margin: 0 auto;
  position: relative;
  width: 61%;
  max-width: 200px;
}

#coverModal .cover-gambar img {
  width: 100%;
}

#coverModal .btn {
  border-radius: 33px;
}

.generate-countdown .countdown .counter {
  width: 63px;
  height: 63px;
  border-radius: 29%;
  margin: 0 3px;
  padding: 5px;
  background-color: #99482b85;
  color: white;
  font-size: 14pt;
}

.generate-countdown .countdown .counter span {
  font-size: 10pt;
}

.invitation-comment-form {
  background-color: transparent;
  text-align: left;
  border: none;
}

.invitation-comment-form .form-control {
  border-radius: 19px;
  z-index: 2;
  position: relative;
  text-align: left;
}

.invitation-comment-form .form-control input {
  text-shadow: none;
}

.invitation-comment-form svg {
  width: 21px;
  height: 21px;
  vertical-align: sub;
}

.invitation-comment-form .wishes .wish {
  padding: 9px;
  background-color: #fff;
  border-radius: 9px;
  margin-bottom: 5px;
}

.invitation-comment-form .wishes .wish .user {
  font-weight: bold;
}

.invitation-comment-form .wishes .wish .confirm {
  padding: 0px 9px;
  border-radius: 9px;
  border: 1px solid #b6b5b5;
  font-size: 9pt;
  margin-left: 3px;
}

.invitation-comment-form .wishes .wish .time {
  display: block;
  font-size: 9pt;
  margin: 9px 0;
}

.invitation-comment-form .wishes .wish .message {
  display: block;
}

.invitation-comment-form .wishes .wish * {
  text-shadow: none;
}

.text-nowrap{
    white-space:nowrap;
}

.shadow-inset{
    box-shadow: 1px 1px 5px inset rgb(0 0 0 / 18%) !important;
}
.text-shadow-inset{
    line-height: 2.1!important;
    font: bold 30px arial, sans-serif;
    background-color: #565656;
    color: transparent;
    text-shadow: 2px 2px 3px rgb(255 255 255 / 50%);
    -webkit-background-clip: text;
}
.btn-shadow{
      box-shadow: rgb(0 0 0 / 16%) 0px 1px 4px;
}
/*# sourceMappingURL=navmanu.css.map */