a {
  color: #24354b;
  text-decoration: none !important;
}

/*
****** BUTTON STYLE ******
*/

.btn-color {
  color: #415263;
  background-color: transparent;
  border-color: #415263;
}

.btn-color:hover,
.btn-color:active,
.btn-color:focus {
  color: #fff;
  background: #24354b !important;
  border: 1px solid #24354b !important;
}

.btn-color-danger {
  color: #dc3545;
  background-color: transparent;
  border-color: #dc3545;
}

.btn-color-danger:hover,
.btn-color-danger:active,
.btn-color-danger:focus {
  color: #fff;
  background: #dc3545 !important;
  border: 1px solid #dc3545 !important;
}

/*
****** ALERT STYLE ******
*/

.alert-margin {
  margin-bottom: -2px;
  margin-top: 23px;
}

.alert a {
  color: #126cb9;
  font-style: italic;
  /* text-decoration: underline !important; */
}

/*
****** NAVBAR HEADER STYLE ******
*/

.header {
  background: #24354b;
  height: auto;
  margin-bottom: 24px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.navbar {
  padding: 0;
}

.navbar-toggler {
  padding: 0.15rem 0.45rem;
  font-size: 0.9rem;
}

.logo {
  background: #24354b;
  display: inline-block;
  width: 230px;
}

.logo img {
  width: 100%;
  height: auto;
}

.logout-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: center;
  padding: 0px;
}

.logout {
  color: #d7dee6;
  text-decoration: none;
  line-height: 1px;
}

.logout:hover {
  color: #fff;
}

.logout svg {
  position: relative;
  top: -2px;
}

/*
****** SEARCH STYLE ******
*/

.result-container {
  position: absolute;
  left: 15px;
  right: 15px;
  top: 46px;
  z-index: 1;
  display: none;
}

.search-result {
  background: #7f878e;
  box-sizing: border-box;
  max-height: 138px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.search-result a {
  color: #ffffff;
  text-decoration: none;
}

/* width */
.search-result::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.search-result::-webkit-scrollbar-track {
  background: #656e73;
}

/* Handle */
.search-result::-webkit-scrollbar-thumb {
  background: #bbb;
}

/* Handle on hover */
.search-result::-webkit-scrollbar-thumb:hover {
  background: #a7a7a7;
}

.result-row {
  border-top: 1px solid #656e73;
  padding: 10px 0 11px;
}

.result-row .col {
  content: "- - -";
}

.result-row:first-of-type {
  border-top: none;
  padding: 10px 0 11px;
}

.result-row:hover {
  background: #767c82;
}

.no-result {
  font-style: italic;
  letter-spacing: 1px;
  color: #d3dae2;
}

.tambah-data {
  text-align: center;
  color: white;
  background: #4e9bc7;
  padding: 10px 0 11px;
  cursor: pointer;
}

/*
****** CARD STYLE ******
*/

.card-stat-perusahaan a .card {
  transition: 0.3s all ease-in-out;
}

.card-stat-perusahaan .card-title {
  margin-bottom: 0.4rem;
}

.card-audiens {
  background: #eef2f7;
}

.card-premium {
  background: #f3ede9;
}

.card-trial {
  background: #e9f3e9;
}

.card-fake {
  background: #f1e6e6;
}

.card-stat-perusahaan a:hover {
  color: #24354b;
}

.card-stat-perusahaan a:hover .card {
  background: #fff;
  border-color: #24354b;
}

/*
****** BOX POPUP STYLE ******
*/

.add-box-container,
.edit-box-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 2;
  display: none;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

.show-add-box .add-box-container,
.show-edit-box .edit-box-container {
  display: flex;
}

.box-inner {
  width: 500px;
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 10px;
  position: relative;
}

.box-inner .close,
.box-inner .close:active {
  float: right;
  color: #717377;
  position: absolute;
  top: -15px;
  right: -13px;
  background: #fff;
  cursor: pointer;
  border-radius: 24px;
  opacity: 1 !important;
}

/*
****** TABLE STYLE ******
*/

table tr th {
  text-align: center;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgb(130 161 179 / 5%);
}

.table-hover tbody tr:hover {
  color: #212529;
  background-color: rgb(86 109 132 / 8%);
}

.Audiens {
  color: #2159bd;
}

.Premium {
  color: #a96c21;
}

.Trial {
  color: rgb(19 136 19);
}

.Fake {
  color: #a92222;
}

.table td:nth-last-child(1) {
  vertical-align: middle;
  text-align: center;
}

.table a.edit-link span {
  display: inline-block;
  width: 16px;
  height: 16px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-pencil-square' viewBox='0 0 16 16'%3E%3Cpath d='M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z'/%3E%3Cpath fill-rule='evenodd' d='M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-pencil-square' viewBox='0 0 16 16'%3E%3Cpath d='M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z'/%3E%3Cpath fill-rule='evenodd' d='M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  background: #917f5f;
}

.table a.delete-link span {
  display: inline-block;
  width: 16px;
  height: 16px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  background: #9d7272;
  margin-left: 8px;
}

/*
****** PAGINATION STYLE ******
*/

.pagination {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 10px 0 35px;
}

.page-item.active .page-link {
  background-color: #24354b;
  border-color: #24354b;
}

.page-link {
  color: #24354b;
}

/*
****** LOGIN STYLE ******
*/

.col-login {
  border: 1px solid #c5ceda;
  padding: 25px 20px 15px;
  border-radius: 10px;
  margin-top: 37px;
  background: #fff;
}

/*
****** MUTASI STYLE ******
*/

.mutasi-container .gold,
.mutasi-container .silver,
.mutasi-container .bronze,
.mutasi-container .eco,
.mutasi-container .other {
  padding: 3px 10px 5px;
  border-radius: 10px;
  color: #fff;
}

.mutasi-container .gold {
  background: #ab835a;
}

.mutasi-container .silver {
  background: #82858e;
}

.mutasi-container .bronze {
  background: #82746c;
}

.mutasi-container .eco {
  background: #718582;
}

.mutasi-container .other {
  background: #5f5f5f;
}

.mutasi-container th:nth-child(2),
.mutasi-container td:nth-child(2) {
  text-align: center;
}

.mutasi-container td:nth-child(2) span.catatan {
  display: block;
  margin-top: 7px;
  font-size: 0.8rem;
  text-align: center;
  color: #819f4e;
  font-style: italic;
}

/* Select Platform */
.select-platform .btn-primary:disabled,
.select-platform .btn-primary:hover:disabled {
  color: #9098a1 !important;
  background-color: #e9ecef !important;
  border-color: #ced4da !important;
  opacity: 1;
}

/*
**************
Date Filter Style
**************
*/

.dcalendarpicker.dp__open .dudp__wrapper {
  top: 50%;
  bottom: unset;
  transform: translate(-50%, -50%) scale(1.05);
}

.dudp__wrapper[data-theme="blue"] .dudp__calendar-header {
  background-color: #24354b;
}

.dcalendarpicker .dudp__calendar-header {
  color: #ffffff;
}

.dcalendarpicker.dp__open {
  background-color: rgb(255 255 255 / 62%);
}

/*
**************
Pesan Page Style
**************
*/
.pesan-container .btn-size {
  font-size: 1rem;
  padding: 0.3rem 0.75rem;
}

.pesan-container .btn-whatsapp {
  background: #6f9e78;
  color: #fff;
  border: none;
}

.pesan-container .btn-instagram {
  background: #bc87bf;
  color: #fff;
  border: none;
}

.pesan-container .btn-facebook {
  background: #6079af;
  color: #fff;
  border: none;
}

.pesan-container .alert-header {
  color: #7d8084;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  background-color: #e9ebec;
}

.pesan-container .card-mb {
  margin-bottom: 1.8rem !important;
}

.pesan-container .bg-blue-navy {
  background-color: #4a535f;
}

.pesan-container .card {
  border-radius: 0.55rem;
}

.pesan-container .card .copy {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #b0b7c1;
  cursor: pointer;
  transition: color ease-in-out 0.3s;
}

.pesan-container .card .copy:hover {
  color: #c0c7d1;
}

.pesan-container .note {
  color: #f3e0c4;
  letter-spacing: 0.05rem;
}

/*
********************************************
********************************************
RESPONSIVE STYLE
********************************************
********************************************
*/

@media only screen and (min-width: 960px) {
  .navbar {
    padding: 0;
    height: 70px;
  }
}

@media only screen and (max-width: 960px) {
  .navbar {
    padding: 10px 0;
  }

  .logo {
    width: 55%;
  }

  .logout-container {
    padding: 10px 0 11px;
    justify-content: center;
  }
}