.fw-bold{
  font-weight: bold;
}
.fs-100-percent{
  font-size: 100% !important;
}
.preview {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.active-lv-3 {
  background-color: #00000052;
  color: #ffffff;
}

.nav-item, .nav-link {
  max-width: 100%;
}

.top-4-px {
  top: 4px !important;
}

.mailbox-attachment-icon.has-img{
  overflow: hidden !important;
}

.attachment-item{
  border: 1px solid #ebebeb;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mailbox-attachment-info{
  flex-grow: 1;
  align-content: end;
}

.d-flex-column{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.flex-grow-1{
  flex-grow: 1;
}

.of-scroll {
  overflow: scroll;
}
.of-scroll-x {
  overflow-x: scroll;
}
.of-scroll-y {
  overflow-y: scroll;
}
.of-hidden-x {
  overflow-x: hidden;
}
.of-hidden-y {
  overflow-y: hidden;
}
.of-hidden {
  overflow: hidden;
}

.of-scroll::-webkit-scrollbar,.of-scroll-x::-webkit-scrollbar,.of-scroll-y::-webkit-scrollbar {
  width: 6px; /* Lebar scrollbar untuk browser WebKit */
  border-radius: 25px;
}

.of-scroll::-webkit-scrollbar-track,.of-scroll-x::-webkit-scrollbar-track,.of-scroll-y::-webkit-scrollbar-track {
  background: #f0f0f0; /* Warna track scrollbar untuk browser WebKit */
}

.of-scroll::-webkit-scrollbar-thumb,.of-scroll-x::-webkit-scrollbar-thumb,.of-scroll-y::-webkit-scrollbar-thumb {
  background-color: #a0a0a0; /* Warna thumb scrollbar untuk browser WebKit */
  border-radius: 3px; /* Bentuk thumb scrollbar untuk browser WebKit */
}
.mh-130-px{
  min-height: 130px !important;
}
.mh-100-px{
  min-height: 100px !important;
}
.mxh-100-px{
  max-height: 100px !important;
}
.mxh-75-px{
  max-height: 75px !important;
}
.mxh-120-px{
  max-height: 120px !important;
}
.mxh-200-px{
  max-height: 200px !important;
}
.mxh-300-px{
  max-height: 300px !important;
}
.mxh-400-px{
  max-height: 400px !important;
}
.h-100-px{
  height: 100px !important;
}
.h-140-px{
  height: 145px !important;
}

.cursor-pointer {
  cursor: pointer;
}
.btn-pink {
    color: #fff;
    background-color: #fb2aba;
    border-color: #fb2aba;
}

.btn-pink:hover {
    color: #fff;
    background-color: #e421a3; /* warna sedikit lebih gelap untuk efek hover */
    border-color: #e421a3;
}

.btn-pink:focus, .btn-pink.focus {
    box-shadow: 0 0 0 0.2rem rgba(251, 42, 186, 0.5);
}

.btn-pink.disabled, .btn-pink:disabled {
    color: #fff;
    background-color: #fb2aba;
    border-color: #fb2aba;
}

.btn-pink:not(:disabled):not(.disabled):active, 
.btn-pink:not(:disabled):not(.disabled).active,
.show > .btn-pink.dropdown-toggle {
    color: #fff;
    background-color: #cc1d92; /* lebih gelap saat active */
    border-color: #cc1d92;
}
.bg-blue-btn-ckc{
  background-color: #4A90E2 !important;
  color: white !important; /* Tetap putih, kontras bagus */
  transition: background-color 0.3s ease !important;
  cursor: pointer !important;
  display: block !important;
  padding: 10px 15px !important;
  text-decoration: none !important;
}
.bg-blue-btn-ckc:hover{
  background-color: #2c5da7 !important;
}
.bg-blue-btn-ckc.active {
  font-weight: 900;
  background-color: #2c5da7 !important; /* Warna background seperti hover */
  pointer-events: none !important; /* Mencegah elemen menerima event pointer (tidak bisa diklik) */
  cursor: not-allowed !important; /* Mengubah kursor menjadi "tidak diizinkan" */
}

.bg-turquoise-btn-ckc{
  background-color: #50E3C2 !important;
  color: #223333 !important; /* Abu-abu gelap, kontras dengan turquoise */
  transition: background-color 0.3s ease !important;
  cursor: pointer !important;
  display: block !important;
  padding: 10px 15px !important;
  text-decoration: none !important;
}
.bg-turquoise-btn-ckc:hover{
  background-color: #2AA892 !important;
}
.bg-turquoise-btn-ckc.active {
  font-weight: 900;
  background-color: #2AA892 !important; /* Warna background seperti hover */
  pointer-events: none !important; /* Mencegah elemen menerima event pointer (tidak bisa diklik) */
  cursor: not-allowed !important; /* Mengubah kursor menjadi "tidak diizinkan" */
}

.bg-green-btn-ckc{
  background-color: #7ED321 !important;
  color: #223333 !important; /* Abu-abu gelap, kontras dengan hijau terang */
  transition: background-color 0.3s ease !important;
  cursor: pointer !important;
  display: block !important;
  padding: 10px 15px !important;
  text-decoration: none !important;
}
.bg-green-btn-ckc:hover{
  background-color: #568F16 !important;
}
.bg-green-btn-ckc.active {
  font-weight: 900;
  background-color: #568F16 !important; /* Warna background seperti hover */
  pointer-events: none !important; /* Mencegah elemen menerima event pointer (tidak bisa diklik) */
  cursor: not-allowed !important; /* Mengubah kursor menjadi "tidak diizinkan" */
}

.bg-yellow-btn-ckc{
  background-color: #F8E71C !important;
  color: #223333 !important; /* Abu-abu gelap, kontras dengan kuning */
  transition: background-color 0.3s ease !important;
  cursor: pointer !important;
  display: block !important;
  padding: 10px 15px !important;
  text-decoration: none !important;
}
.bg-yellow-btn-ckc:hover{
  background-color: #C7B400 !important;
}
.bg-yellow-btn-ckc.active {
  font-weight: 900;
  background-color: #C7B400 !important; /* Warna background seperti hover */
  pointer-events: none !important; /* Mencegah elemen menerima event pointer (tidak bisa diklik) */
  cursor: not-allowed !important; /* Mengubah kursor menjadi "tidak diizinkan" */
}

.bg-orange-btn-ckc{
  background-color: #F5A623 !important;
  color: white !important; /* Tetap putih, kontras bagus */
  transition: background-color 0.3s ease !important;
  cursor: pointer !important;
  display: block !important;
  padding: 10px 15px !important;
  text-decoration: none !important;
}
.bg-orange-btn-ckc:hover{
  background-color: #C97E0A !important;
}
.bg-orange-btn-ckc.active {
  font-weight: 900;
  background-color: #C97E0A !important; /* Warna background seperti hover */
  pointer-events: none !important; /* Mencegah elemen menerima event pointer (tidak bisa diklik) */
  cursor: not-allowed !important; /* Mengubah kursor menjadi "tidak diizinkan" */
}

.bg-coral-btn-ckc{
  background-color: #F86C5E !important;
  color: white !important; /* Tetap putih, kontras bagus */
  transition: background-color 0.3s ease !important;
  cursor: pointer !important;
  display: block !important;
  padding: 10px 15px !important;
  text-decoration: none !important;
}
.bg-coral-btn-ckc:hover{
  background-color: #C54034 !important;
}
.bg-coral-btn-ckc.active {
  font-weight: 900;
  background-color: #C54034 !important; /* Warna background seperti hover */
  pointer-events: none !important; /* Mencegah elemen menerima event pointer (tidak bisa diklik) */
  cursor: not-allowed !important; /* Mengubah kursor menjadi "tidak diizinkan" */
}

.bg-purple-btn-ckc{
  background-color: #BD10E0 !important;
  color: white !important; /* Tetap putih, kontras bagus */
  transition: background-color 0.3s ease !important;
  cursor: pointer !important;
  display: block !important;
  padding: 10px 15px !important;
  text-decoration: none !important;
}
.bg-purple-btn-ckc:hover{
  background-color: #8009A8 !important;
}
.bg-purple-btn-ckc.active {
  font-weight: 900;
  background-color: #8009A8 !important; /* Warna background seperti hover */
  pointer-events: none !important; /* Mencegah elemen menerima event pointer (tidak bisa diklik) */
  cursor: not-allowed !important; /* Mengubah kursor menjadi "tidak diizinkan" */
}
.bg-blue{
  background-color: #4A90E2 !important;
  color: white !important;
}

.bg-turquoise{
  background-color: #50E3C2 !important;
  color: #223333 !important;
}

.bg-green{
  background-color: #7ED321 !important;
  color: #223333 !important;
}

.bg-yellow{
  background-color: #F8E71C !important;
  color: #223333 !important;
}

.bg-orange{
  background-color: #F5A623 !important;
  color: white !important;
}

.bg-coral{
  background-color: #F86C5E !important;
  color: white !important;
}

.bg-purple{
  background-color: #BD10E0 !important;
  color: white !important;
}
.input-group-append button {
  z-index: 9 !important;
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%
}