/* icon */
.icon-gradient {
  background: -webkit-linear-gradient(180deg, #73a1ff, #246bfd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-gradient--active {
  color: white;
  -webkit-text-fill-color: unset;
}

div.icon,
div.icon > ion-icon {
  color: #246bfd;
}

div.icon.active,
div.icon.active > ion-icon {
  color: white;
}

/* table */
table#table_data {
  border: none;
}

table#table_data thead.table-light {
  --bs-table-bg: transparent;
  color: #999999;
  font-size: 14px;
}

table#table_data tbody tr.even td {
  background-color: #fcfcfc;
}

table#table_data tbody tr.even td,
table#table_data tbody tr.odd td {
  padding: 0;
  padding-top: 1rem;
}

#table_data thead.table-light tr th {
  text-transform: uppercase;
}

tr {
  border-style: none;
  border-color: #d0d0d0;
}

/* pagination */

ul.pagination {
  display: flex;
  gap: 12px;
}

ul.pagination li.paginate_button a.page-link {
  width: 26px !important;
}

ul.pagination li.page-item a.page-link {
  border-radius: 8px !important;
  padding: 4px 10px !important;
  border-color: #eaeaea;
}

ul.pagination li.paginate_button:first-child > a.page-link,
ul.pagination li.paginate_button:last-child > a.page-link {
  background-color: #dee3e9;
  width: 36px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 24px !important;
}

li.page-item.active a.page-link {
  background-color: #3375fd;
  border-color: #3375fd;
  color: white;
  box-shadow: none;
}

/* page length table */

div.dataTables_wrapper div.dataTables_length select.form-select {
  width: 64px;
}

/* pagination table */
.page-item.active .page-link {
  background-color: transparent;
  color: #dee2e6;
  border-color: #dee2e6;
}

/* button */
.btn-primary {
  background-color: #4875b4;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  background-color: #3a629a;
}

.btn-linear-action {
  padding: 0;
  height: 28px;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.btn-linear {
  padding: 6px 8px;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 14px;
}

.btn-default {
  padding: 6px 8px;
  border-radius: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
  text-transform: capitalize;
  font-weight: 600;
}

.btn-linear--delete {
  background-color: #da542e;
}

button.btn-close--gradient {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: white;
  border-radius: 50px;
  display: flex;
  padding: 0;
  height: 24px;
  width: 24px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    rgba(244, 94, 52, 1) 30%,
    rgba(183, 71, 39, 1) 100%
  );
}

button.btn-close--gradient:hover {
  color: white;
}

.btn-linear--detail {
  background: rgb(142, 202, 147);
  background: linear-gradient(
    180deg,
    rgba(142, 202, 147, 1) 30%,
    rgba(106, 152, 110, 1) 100%
  );
}

.btn-linear--primary {
  background: linear-gradient(180deg, rgba(115, 161, 255, 1) 10%, #246bfd 100%);
}

.btn-linear--edit {
  background-color: #ffb848;
}

.btn-linear--publish {
  background: linear-gradient(180deg, #00f416 30%, #00b710 100%);
}

.badge {
  padding: 4.5 8px;
  border-radius: 6px;
  color: white;
  font-size: 12px;
  text-transform: capitalize;
  font-weight: 500;
}

.badge--success {
  background-color: #4ba579;
}

.badge--warning {
  background: linear-gradient(180deg, #e68a34 30%, #ac6727 100%);
}

.badge--danger {
  background: linear-gradient(180deg, #e34137 30%, #ab3129 100%);
}

.badge--info {
  background: linear-gradient(180deg, #3873fe 30%, #2a57bf 100%);
}

.btn-linear--primary,
.btn-linear--primary:hover,
.btn-linear--publish,
.btn-linear--publish:hover,
.btn-linear--edit,
.btn-linear--edit:hover,
.btn-linear--detail,
.btn-linear--detail:hover,
.btn-linear--delete,
.btn-linear--delete:hover {
  color: white;
}

button.btn-gradient {
  background: linear-gradient(180deg, #73a1ff 0%, #246bfd 100%);
  padding: 6px 8px;
}

/* utilities */
.overflow-x-auto {
  overflow-x: auto;
}

/* sidenav */
.sidenav-header {
  position: sticky;
  top: 0;
  background-color: #f8f9fa;
  z-index: 10;
}

/* auth */
.auth-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  min-height: 100vh;
}

.auth-form {
  padding: 40px 1rem;
}

.auth-image {
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

div.table-top-left div.dataTables_length label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}

div.dataTables_wrapper div.dataTables_length label select.form-select,
div.dataTables_length label select.form-select {
  width: 64px;
}

/* custom select 2 */
span.select2-container--default
  span.select2-selection--single
  span.select2-selection__arrow {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}

span.select2-container span.select2-selection--single {
  height: 40px;
  display: flex;
  align-items: center;
}

.select2-container--default .select2-selection--single {
  border-color: #d2d6da;
}

/* form */
.form-control:focus {
  border-color: #6195de;
  box-shadow: 0 0 0 2px #4875b485;
}

.card-auth {
  box-shadow: 0px 22px 420px 0px #00000026;
  border: none;
  width: 420px;
  padding: 20px 35px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.card-auth__img {
  width: 180px;
  height: auto;
  margin-inline: auto;
}

.card-auth-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.card-auth-top h1 {
  color: #246bfd;
  font-size: 32px;
  font-weight: 700;
  margin: 0;
}

.card-auth-top span {
  font-weight: 600;
  color: #a0aec0;
  font-size: 14px;
}

.card-auth form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-auth form div label {
  color: #2d3748;
  font-size: 14px;
  margin-bottom: 8px;
}
.card-auth form div input {
  padding: 15px 20px;
  border-radius: 15px;
  border: 1px solid #e9e9e9;
  font-size: 14px;
}

.card-auth form button.btn-auth {
  background: linear-gradient(180deg, #73a1ff, #246bfd);
  color: white;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  border: none;
  padding: 15px 0;
  border-radius: 15px;
  margin-top: 4px;
}

.card-auth .link {
  text-align: center;
  color: #a0aec0;
}

.card-auth .link a {
  color: #246bfd;
  font-weight: 600;
  text-decoration: none;
}

div.auth-switch {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-switch input.form-check-input {
  padding: 10px 24px;
}

.auth-switch label.form-check-label {
  margin: 0;
}

input.hide-calendar[type='datetime-local']::-webkit-inner-spin-button,
input.hide-calendar[type='datetime-local']::-webkit-calendar-picker-indicator {
  color: #424242;
  display: block;
  background: url('/assets/img/chevron-down-solid.svg') no-repeat;
  width: 8px;
  height: 8px;
  border-width: thin;
}

/* match detail */
.match-detail--top {
  display: flex;
  gap: 32px;
  align-items: center;
}

.match-detail-field {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #e9e9e9;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 11px 12px;
  color: #999999;
  font-size: 14px;
  font-weight: 500;
  position: relative;
}

.match-detail-field.w-300 {
  width: 300px;
  max-width: 100%;
}

.match-detail-field.date {
  padding-left: 32px;
}
.match-detail--top .match-detail-field {
  padding: 3px 4rem 3px 1rem;
}

.match-detail--top .match-detail-field img {
  height: 35px;
  width: 35px;
  object-fit: contain;
}

.form-label.match-detail {
  font-size: 14px;
  margin-left: 0;
  font-weight: 400;
  color: #1a203d;
}

.detail-package-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.detail-package-wrapper:not(:first-of-type) {
  margin-top: 8px;
}

.show-user-field {
  border: 1px solid #dadada;
  background-color: transparent;
  padding: 11px 12px;
  color: #999999;
  border-radius: 4px;
  width: 100%;
}

@media (max-width: 1200px) {
  .sidenav-header {
    background-color: white;
  }
}

.dropdown-menu[data-bs-popper] {
  margin-top: 0;
}

@media (max-width: 700px) {
  .auth-wrapper {
    display: inline;
  }

  .auth-form {
    min-height: 100vh;
    width: 100%;
  }

  .auth-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    z-index: -1;
  }
}