body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f7f7f8;
}

.container1 {
  margin: 1% 1% 1% 1%; /* Atas, kanan, bawah, kiri */
  /*width: 100%;
  /*margin: 0px auto;  /* Center dan memberikan margin di atas dan bawah */
  /*background-color: lightgray;
  /*padding: 10px; */
}
.frame{
  border: 0px solid;
  box-shadow: 5px 5px 5px rgb(193,182,182),-6px -6px 15px #eee;
  padding: 20px;
  max-width: 300px;
  margin: 40px auto;
  margin-top: 60px;
  border-radius: 0px;
  background: white;

}


   


.card {
  border-radius: 10px;
}
.nav-tabs .nav-link.active {
  background-color: #0d6efd;
  color: white;
}

.nav-tabs .nav-link {
  color: #0d6efd;
}

.super-small-select {
  padding: 2px 5px;
  font-size: 10px;
  height: auto;
}


.super-small-btn {
  padding: 2px 5px;
  font-size: 10px;
  border-radius: 4px;
}



/* Ganti nama class supaya tidak bentrok dengan Bootstrap */
.loadingModal {
  display: none; /* Akan diubah ke 'flex' saat loading */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;

  /* Kunci utama agar di tengah */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #4CAF50;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}






/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #00ec6a; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}