/* scroll smooth */
html {
  scroll-behavior: smooth;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
    background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: DodgerBlue !important; 
    color: #ffffff; 
}

/* typeahead properties */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  background-color: var(--primary);
}

.input-group > typeahead {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    margin-bottom: 0;
}

.input-group-append .btn {
    border: 0px solid;
}

.input-group-append input[type=button], .input-group-append input[type=reset], .input-group-append input[type=submit], .input-group-append button {
    margin-left: 0;
}

/* paginationcustom shipment */
.paginationcustom {
  display:inline-block;
  padding-left:0;
  margin:20px 0;
  border-radius:4px;
}

.paginationcustom>li { display:inline; }

.paginationcustom>li>a,
.paginationcustom>li>span {
  position:relative;
  float:left;
  padding:6px 12px;
  margin-left:-1px;
  line-height:1.42857143;
  color:#428bca;
  text-decoration:none;
  background-color:#fff;
  border:1px solid #ddd;
}

.paginationcustom>li:first-child>a,
.paginationcustom>li:first-child>span {
  margin-left:0;
  border-top-left-radius:4px;
  border-bottom-left-radius:4px;
}

.paginationcustom>li:last-child>a,
.paginationcustom>li:last-child>span {
  border-top-right-radius:4px;
  border-bottom-right-radius:4px;
}

.paginationcustom>li>a:hover,
.paginationcustom>li>span:hover,
.paginationcustom>li>a:focus,
.paginationcustom>li>span:focus {
  color:#2a6496;
  background-color:#eee;
  border-color:#ddd;
}

.paginationcustom>.active>a,
.paginationcustom>.active>span,
.paginationcustom>.active>a:hover,
.paginationcustom>.active>span:hover,
.paginationcustom>.active>a:focus,
.paginationcustom>.active>span:focus {
  z-index:2;
  color:#fff;
  cursor:default;
  background-color:#428bca;
  border-color:#428bca;
}

.paginationcustom>.disabled>span,
.paginationcustom>.disabled>span:hover,
.paginationcustom>.disabled>span:focus,
.paginationcustom>.disabled>a,
.paginationcustom>.disabled>a:hover,
.paginationcustom>.disabled>a:focus {
  color:#777;
  cursor:not-allowed;
  background-color:#fff;
  border-color:#ddd;
}

.paginationcustom-lg>li>a,
.paginationcustom-lg>li>span {
  padding:10px 16px;
  font-size:18px;
}

.paginationcustom-lg>li:first-child>a,
.paginationcustom-lg>li:first-child>span {
  border-top-left-radius:6px;
  border-bottom-left-radius:6px;
}

.paginationcustom-lg>li:last-child>a,
.paginationcustom-lg>li:last-child>span {
  border-top-right-radius:6px;
  border-bottom-right-radius:6px;
}

.paginationcustom-sm>li>a,
.paginationcustom-sm>li>span {
  padding:5px 10px;
  font-size:12px;
}

.paginationcustom-sm>li:first-child>a,
.paginationcustom-sm>li:first-child>span {
  border-top-left-radius:3px;
  border-bottom-left-radius:3px;
}

.paginationcustom-sm>li:last-child>a,
.paginationcustom-sm>li:last-child>span {
  border-top-right-radius:3px;
  border-bottom-right-radius:3px;
}

.animation__shake {
  -webkit-animation: shake;
  animation: shake;
}

.animation__wobble {
  -webkit-animation: wobble;
  animation: wobble;
}

.preloader {
  display: -ms-flexbox;
  display: flex;
  background-color: #ffff;
  opacity: 50%;
  height: 100vh;
  width: 100%;
  transition: height linear !important;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
}

#loading-wrapper {
  /* background: url(https://storage.googleapis.com/10fd8335-c083-4a36-96db-aba9f5867c51/web-assets/core/Loading.gif) no-repeat center center; */
  background: no-repeat center center;
  width: 100%;
  height: 100%;
  z-index: 9999;
  left: 0;
  top: 0;
  /* right: 20%;
  bottom: 20%; */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  display: -ms-flexbox;
  display: flex;
  position: fixed;
}

#loading-content {
  content: url(https://storage.googleapis.com/10fd8335-c083-4a36-96db-aba9f5867c51/web-assets/cpr/9BPaWl7U7axu6m3p/9db979f1-4b9d-406a-a2a5-c659745b33fa);
  animation-iteration-count: 3s;
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 170px;
  height: 170px;
  margin: -85px 0 0 -85px;
  /* border: 3px solid #F00; */
  -webkit-animation: wobble 1500ms;
  animation: wobble 1500ms;

}

/* .button {
  -moz-appearance: button;
  -webkit-appearance: button;
  padding: 10px;
  margin: 10px;
  width: 70px;
} */
/* .drop-box {
  background: #F8F8F8;
  border: 5px dashed #DDD;
  width: 200px;
  height: 65px;
  text-align: center;
  padding-top: 25px;
  margin: 10px;
} */
.dragover {
  border: 3px dashed blue !important;
}

.dropzone {
  width: 450px;
  height: 200px;
  padding: 2rem;
  text-align: center;
  border: dashed 3px #979797;
  position: relative;
  margin: 0 auto;
}

.dropzone input {
  opacity: 0;
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.dropzone label{
  color: white;
  width: 183px;
  height: 44px;
  border-radius: 21.5px;
  background-color: #db202f;
  padding: 8px 16px;
}

.dropzone h3{
  font-size: 20px;
  font-weight: 600;
  color: #38424c;
}

.buttonCenter {
  text-align: center;
  margin: 2px;
  /* position: relative;
  margin: 0 auto; */
}

.outline-info {
  color: #17a2b8;
}
.outline-primary {
  color: #007bff;
}
.outline-danger {
  color: #dc3545;
}
.outline-success {
  color: #28a745;
}
.outline-warning {
  color: #ffc107;
}

.file-drop-area {
  position: relative;
  display: flex;
  align-items: center;
  width: 450px;
  max-width: 100%;
  padding: 25px;
  border: 1px dashed rgba(218, 93, 93);
  border-radius: 3px;
  transition: 0.2s;
 
}

.choose-file-button {
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  padding: 8px 15px;
  margin-right: 10px;
  font-size: 12px;
  text-transform: uppercase;
}

.file-message {
  font-size: large;
  font-weight: 300;
  line-height: 1.4;
  margin: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-input {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
}

.file-input:disabled {
  cursor: not-allowed;
}

.carousel-inner .carousel-item img {
  width: 100%; /* Gambar mengisi lebar konten */
  height: auto; /* Tinggi gambar mengikuti proporsi aspek */
  max-height: fit-content;
}

.carousel-caption {
  background-color: rgba(128, 128, 128, 0.5); /* Warna abu-abu dengan tingkat transparansi (alpha) 0.7 */
  color: #fff; /* Warna teks pada caption */
  padding: 10px; /* Ruang dalam di sekitar teks caption */
}

/* Mengubah warna background tombol "Next" */
.carousel-control-next {
  background-color: rgba(128, 128, 128, 0.2); /* Ganti dengan warna yang Anda inginkan */
}

/* Mengubah warna background tombol "Previous" */
.carousel-control-prev {
  background-color: rgba(128, 128, 128, 0.2); /* Ganti dengan warna yang Anda inginkan */
}

/* Mengubah warna background tombol "Next" */
.carousel-control-next:hover {
  background-color: rgba(128, 128, 128, 0.4); /* Ganti dengan warna yang Anda inginkan */
}

/* Mengubah warna background tombol "Previous" */
.carousel-control-prev:hover {
  background-color: rgba(128, 128, 128, 0.4); /* Ganti dengan warna yang Anda inginkan */
}

/* .carousel-control-prev-icon {
  background-color: red;
  border-radius: 50%;
} */

/* Ikon "Previous" kustom */
.custom-icon-prev {
  /* Atur tampilan ikon "Previous" kustom Anda, misalnya: */
  background-image: url('path-to-custom-prev-icon.png');
  width: 30px;
  height: 30px;
  /* Atur gaya ikon sesuai kebutuhan Anda */
}

/* Ikon "Next" kustom */
.custom-icon-next {
  /* Atur tampilan ikon "Next" kustom Anda, misalnya: */
  background-image: url('path-to-custom-next-icon.png');
  width: 30px;
  height: 30px;
  /* Atur gaya ikon sesuai kebutuhan Anda */
}