/* Webpixels CSS */
/* Utility and component-centric Design System based on Bootstrap for fast, responsive UI development */
/* URL: https://github.com/webpixels/css */

@import url(https://unpkg.com/@webpixels/css@1.1.5/dist/index.css);

/* Bootstrap Icons */
@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.4.0/font/bootstrap-icons.min.css");


@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
  }
  
.tautan-dinonaktifkan {
    filter: brightness(0.8);
    pointer-events: none; /* Mencegah tautan diklik */
    text-decoration: none; /* Menghapus garis bawah dari tautan */
  }
  
.button-reset {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.item-li:hover{
    background-color:#f2f2f2;
    filter: brightness(0.9);
}


.square-image-container {
  width: 2.875rem;
  position: relative;
  overflow: hidden;
  /* Adjust the desired height (e.g., 200px) to control the size of the square image */
  height: 2.875rem;
  border-radius: 50%;
}

.square-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
  
  .upload_dropZone {
    color: #0f3c4b;
    background-color: var(--colorPrimaryPale, #c8dadf);
    outline: 2px dashed var(--colorPrimaryHalf, #c1ddef);
    outline-offset: -12px;
    transition:
      outline-offset 0.2s ease-out,
      outline-color 0.3s ease-in-out,
      background-color 0.2s ease-out;
  }
  .upload_dropZone.highlight {
    outline-offset: -4px;
    outline-color: var(--colorPrimaryNormal, #0576bd);
    background-color: var(--colorPrimaryEighth, #c8dadf);
  }
  .upload_svg {
    fill: var(--colorPrimaryNormal, #0576bd);
  }
  .btn-upload {
    color: #fff;
    background-color: var(--colorPrimaryNormal);
  }
  .btn-upload:hover,
  .btn-upload:focus {
    color: #fff;
    background-color: var(--colorPrimaryGlare);
  }
  .upload_img {
    width: calc(33.333% - (2rem / 3));
    object-fit: contain;
  }
  
  
  .btn-custom{
    background-image: linear-gradient(45deg, rgb(179, 35, 245) 0%, rgba(255, 213, 0, 0.824) 100%);
    color: white;
    border: none;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  }
  
  
  
  .btn-custom:hover,
  .btn-custom:active,
  .btn-custom:focus
   {
    background-image: linear-gradient(45deg, rgb(179, 35, 245) 0%, rgba(255, 213, 0, 0.824) 100%);
    color: white;
    filter: brightness(0.9);
  }

  .dropdown-menu{
    box-shadow: 0px 0px 5px #aaaaaa;
  }


  .hop:hover,
  .hop:active,
  .hop:focus
   {
     background-color: #eaeaea;
  }
  
  
  .btn-custom2{
    background-image: linear-gradient(60deg, rgb(33, 212, 253) 0%, rgb(179, 35, 245) 100%);
    color: white;
    border: none;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  }
  
  
  .btn-custom2:hover,
  .btn-custom2:active,
  .btn-custom2:focus
   {
    background-image: linear-gradient(60deg, rgb(33, 212, 253) 0%, rgb(179, 35, 245) 100%);
    color: white;
    filter: brightness(0.9);
  }
  
  
  .waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
  }
  .waveWrapperInner {
    position: absolute;
    width: 100vw;
    overflow: hidden;
    height: 100vh;
    background-image: linear-gradient(60deg, #f582ae 0%, #8bd3dd 100%);
  }

  .field-icon{
    position: absolute;
    right: 20px;
    top: 10px;
    cursor: pointer;
  }

  .bg-gradasi{
    background-image: linear-gradient(60deg, #f582ae 0%, #8bd3dd 100%);
  }
  
  .bgTop {
    z-index: 15;
    opacity: 0.5;
  }
  .bgMiddle {
    z-index: 10;
    opacity: 0.75;
  }
  .bgBottom {
    z-index: 5;
  }
  .wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
  }
  .waveTop {
    background-size: 50% 100px;
  }
  .waveAnimation .waveTop {
  animation: move-wave 3s;
   -webkit-animation: move-wave 3s;
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
  }
  .waveMiddle {
    background-size: 50% 120px;
  }
  .waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
  }
  .waveBottom {
    background-size: 50% 100px;
  }
  .waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
  }